mdSIGN
공개된 디자인 md 들을 목업으로 확인하고 다운로드 하세요.
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00e013; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00e013; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87ec8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00e013; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00e013; color: #000000;
border: 1px solid #27e337; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87ec8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00bc10; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:'Cash Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:600; margin:0; color:#fff; }
.navlinks { display:flex; gap:24px; font-size:16px; font-weight:600; }
.actions { display:flex; gap:10px; }
.btn-light { background:#fff; color:#000; border:none; border-radius:999px; height:40px; padding:0 18px; font-size:13px; font-weight:500; }
.btn-outline { background:transparent; color:#fff; border:1px solid #444; border-radius:999px; height:40px; padding:0 18px; font-size:13px; font-weight:500; }
.hero { display:flex; align-items:center; padding:20px 40px; gap:36px; }
.hero-l { flex:1.1; }
.hero h1 { font-size:52px; font-weight:400; line-height:1.0; margin:0 0 16px; }
.hero .g { color:#00e013; }
.hero p { font-size:16px; color:#b8b8b8; margin:0 0 20px; max-width:340px; }
.btn-green { background:#00e013; color:#000; border:none; border-radius:999px; height:46px; padding:0 22px; font-size:14px; font-weight:500; }
.card-wrap { flex:1; display:flex; justify-content:center; }
.cash-card { width:280px; height:170px; border-radius:20px; background:linear-gradient(135deg,#00e013,#0bbf14);
padding:20px; position:relative; box-shadow:0 20px 60px rgba(0,224,19,0.25); }
.cash-card .top { display:flex; justify-content:space-between; font-size:13px; font-weight:500; color:#000; }
.cash-card .num { font-size:20px; letter-spacing:2px; color:#000; margin-top:50px; font-weight:600; }
.cash-card .name { font-size:13px; color:#000; margin-top:10px; font-weight:500; }
.bottom { background:#27455c; padding:26px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.b-card { background:#000; border-radius:20px; padding:18px; }
.b-card .n { font-size:24px; font-weight:500; color:#00e013; }
.b-card .l { font-size:12px; color:#c9c9c9; margin-top:6px; }
.citron { display:inline-block; background:#d8ff14; color:#000; border-radius:9999px; padding:3px 10px; font-size:11px; font-weight:500; margin-bottom:8px; }
</style></head>
<body>
<nav>
<p class="brand">Cash App</p>
<div class="navlinks"><span>Personal</span><span>Business</span><span>Card</span></div>
<div class="actions"><button class="btn-outline">Log in</button><button class="btn-light">Sign up</button></div>
</nav>
<section class="hero">
<div class="hero-l">
<h1>The easy way<br>to <span class="g">send money.</span></h1>
<p>Spend, save, invest, and send — all from one green button.</p>
<button class="btn-green">Get Cash App</button>
</div>
<div class="card-wrap">
<div class="cash-card">
<div class="top"><span>Cash Card</span><span>●●●●</span></div>
<div class="num">•••• 4471</div>
<div class="name">ALEX MORGAN</div>
</div>
</div>
</section>
<section class="bottom">
<div class="b-card"><span class="citron">Boost</span><div class="n">15%</div><div class="l">Cash back at coffee shops</div></div>
<div class="b-card"><div class="n">$0</div><div class="l">Monthly fees, always</div></div>
<div class="b-card"><div class="n">Instant</div><div class="l">Deposits, no waiting</div></div>
<div class="b-card"><div class="n">Bitcoin</div><div class="l">Buy & sell in the app</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #362d59; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #362d59; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9f9baf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #79628c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #362d59; color: #ffffff;
border: 1px solid #79628c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #362d59; color: #f5f5f5;
border: 1px solid #554d72; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9f9baf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #413561; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1f1633; color:#ffffff; box-sizing:border-box;
font-family:"Rubik", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; text-transform:uppercase; letter-spacing:0.2px; opacity:0.85; }
.cta-white { background:#ffffff; color:#1f1633; border:none; border-radius:8px; padding:12px 16px; font-size:14px; font-weight:700; }
.hero { padding:34px 44px 22px; }
.hero h1 { font-family:Georgia, serif; font-size:64px; font-weight:700; line-height:1.05; margin:0 0 14px; max-width:680px; }
.hero p { font-size:16px; opacity:0.85; margin:0 0 18px; max-width:460px; }
.row { display:flex; gap:12px; }
.btn-purple { background:#79628c; color:#ffffff; border:1px solid #584674; border-radius:13px; padding:12px 20px;
font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.2px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
.code { margin:20px 44px 0; background:#150f23; border-radius:12px; padding:18px; font-family:Monaco, monospace; font-size:12px;
color:#dcdcaa; line-height:1.6; backdrop-filter: blur(18px); }
.code .c1 { color:#c2ef4e; }
.code .c2 { color:#fa7faa; }
.glowrow { display:flex; gap:14px; padding:18px 44px 0; }
.glass { flex:1; background:rgba(255,255,255,0.18); border-radius:12px; padding:14px 16px; font-size:13px; }
</style></head>
<body>
<nav>
<p class="brand">Sentry</p>
<div class="navlinks"><span>PRODUCT</span><span>PRICING</span><span>DOCS</span></div>
<button class="cta-white">Get started</button>
</nav>
<section class="hero">
<h1>Code breaks.<br>Fix it faster.</h1>
<p>See what's broken across errors, performance, and replays — before your users notice.</p>
<div class="row"><button class="btn-purple">TRY SENTRY</button></div>
</section>
<div class="code">
<span class="c1">Error</span> · TypeError: Cannot read properties of undefined
<br>at <span class="c2">checkout.processPayment</span> (checkout.js:142)
</div>
<div class="glowrow">
<div class="glass">Errors — 12 unresolved</div>
<div class="glass">Performance — LCP 1.2s</div>
<div class="glass">Replays — 4 new sessions</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffdfc; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffdfc; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; letter-spacing: -0.25px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #63615e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ff5601; color: #fffdfc;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #000000;
border: 1px solid #ff5601; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fffdfc; color: #121212;
border: 1px solid #c4c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #63615e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff5601; color: #fffdfc;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#fffdfc; box-sizing:border-box;
font-family:'Sofia Pro','DM Sans',sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#ff5601; color:#fffdfc; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; letter-spacing:.5px; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #232323; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#c9c5bf; }
.cart-dot { width:8px; height:8px; border-radius:50%; background:#ff5601; display:inline-block; margin-left:4px; }
.hero { height:270px; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; gap:12px;
background:radial-gradient(circle at 50% 40%, #232323 0%, #121212 70%); }
.hero h1 { font-size:46px; font-weight:700; letter-spacing:-1.5px; margin:0; line-height:1.05; }
.hero p { font-size:13px; color:#c9c5bf; margin:0; }
.btn { display:inline-block; background:#ff5601; color:#fffdfc; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:14px 32px; border-radius:4px; margin-top:6px; }
.strip { background:#f0eee3; color:#121212; padding:16px 32px; display:flex; gap:14px; }
.card { flex:1; background:#f0eee3; border-radius:8px; position:relative; }
.card-img { height:76px; background:#e5e0d4; border-radius:8px 8px 0 0; }
.cbadge { position:absolute; top:6px; left:6px; background:#ff5601; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.cbody { padding:8px 10px; }
.cbody h3 { font-size:12px; font-weight:600; margin:0 0 4px; }
.price { font-size:15px; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#364748; color:#c9c5bf;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<div class="announce">FREE SHIPPING OVER $150 — LIMITED TIME</div>
<nav>
<p class="brand">Beast Health Small KI 2</p>
<div class="navlinks"><span>Blenders</span><span>Bundles</span><span>Recipes</span></div>
<div>Cart<span class="cart-dot"></span></div>
</nav>
<section class="hero">
<h1>UNLEASH THE BEAST</h1>
<p>2600W of raw motor power. Built for the kitchen that never stops.</p>
<span class="btn">Shop Now</span>
</section>
<div class="strip">
<div class="card">
<div class="card-img"></div>
<span class="cbadge">Most Popular</span>
<div class="cbody"><h3>Beast Blender B10</h3><div class="price">$799</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Pro Jar 64oz</h3><div class="price">$89</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Travel Cup Set</h3><div class="price">$59</div></div>
</div>
</div>
<footer>
<span>© Beast Health Small KI 2</span>
<span>Beast Health Small KI 2 · Specs · Warranty · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff9900; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff9900; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4e09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #131921; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff9900; color: #131921;
border: 1px solid #131921; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff9900; color: #111111;
border: 1px solid #d98303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4e09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d98505; color: #131921;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0F1111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.navy { background:#131921; height:52px; display:flex; align-items:center; gap:16px; padding:0 20px; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; flex-shrink:0; }
.search { flex:1; height:34px; background:#fff; border-radius:8px; display:flex; align-items:center;
padding:0 12px; font-size:13px; color:#565959; }
.search .go { margin-left:auto; background:#FF9900; color:#0F1111; width:34px; height:34px; margin-right:-12px;
border-radius:0 8px 8px 0; display:flex; align-items:center; justify-content:center; font-size:14px; }
.bell { color:#fff; font-size:18px; flex-shrink:0; }
.subnav { background:#232F3E; height:30px; display:flex; align-items:center; padding:0 20px; gap:6px;
color:#fff; font-size:12px; }
.crumbs { display:flex; gap:16px; padding:8px 20px; font-size:12px; color:#007185; font-weight:600;
border-bottom:1px solid #DDDDDD; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:12px 20px; }
.tile { border:1px solid #DDDDDD; border-radius:4px; padding:8px; }
.timg { width:100%; height:78px; border-radius:4px; margin-bottom:6px; }
.ttitle { font-size:11.5px; line-height:1.3; height:29px; overflow:hidden; }
.stars { color:#FFA41C; font-size:10px; margin-top:4px; }
.stars span { color:#007185; font-size:10px; }
.price { font-size:15px; font-weight:700; margin-top:3px; }
.strike { font-size:10.5px; color:#565959; text-decoration:line-through; margin-left:5px; font-weight:400; }
.prime { font-size:10px; color:#00A8E1; font-weight:700; margin-top:3px; }
.deliv { font-size:10px; color:#007600; font-weight:500; }
.addcart { margin-top:6px; background:#FF9900; color:#0F1111; font-size:10.5px; font-weight:600; text-align:center;
border-radius:6px; padding:4px 0; border-top:1px solid #FCD200; }
.deal { margin:0 20px 10px; background:linear-gradient(90deg,#B12704,#CC0C39); border-radius:4px;
padding:6px 12px; color:#fff; font-size:11px; font-weight:700; display:flex; justify-content:space-between; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:44px; background:#fff; border-top:1px solid #DDDDDD;
display:flex; }
.tabbar .t { flex:1; text-align:center; font-size:9px; font-weight:600; color:#565959; padding-top:6px; }
.tabbar .t.on { color:#FF9900; }
.cartbadge { display:inline-block; background:#CC0C39; color:#fff; border-radius:8px; font-size:8px;
padding:0 4px; margin-left:2px; }
</style></head>
<body style="position:relative;">
<div class="navy">
<p class="brand">Amazon (iOS)</p>
<div class="search">🔍 Search Amazon<span class="go">🎤</span></div>
<span class="bell">🔔</span>
</div>
<div class="subnav">📍 Deliver to Alex — Seattle 98109</div>
<div class="crumbs"><span>Deals</span><span>Electronics</span><span>Home</span><span>Fashion</span><span>Prime Video</span></div>
<div class="deal"><span>⚡ Lightning Deal</span><span>Ends in 02h 45m 10s</span></div>
<div class="grid">
<div class="tile">
<div class="timg" style="background:linear-gradient(135deg,#dfe6e9,#636e72)"></div>
<div class="ttitle">Wireless Noise-Cancelling Over-Ear Headphones, Black</div>
<div class="stars">★★★★★ <span>(12,345)</span></div>
<div class="price">$24.99<span class="strike">$34.99</span></div>
<div class="prime">✓ prime</div>
<div class="deliv">FREE delivery Tomorrow</div>
<div class="addcart">Add to Cart</div>
</div>
<div class="tile">
<div class="timg" style="background:linear-gradient(135deg,#ffeaa7,#fdcb6e)"></div>
<div class="ttitle">Stainless Steel Insulated Water Bottle 32oz</div>
<div class="stars">★★★★☆ <span>(3,201)</span></div>
<div class="price">$18.49</div>
<div class="prime">✓ prime</div>
<div class="deliv">FREE delivery Tue</div>
<div class="addcart">Add to Cart</div>
</div>
<div class="tile">
<div class="timg" style="background:linear-gradient(135deg,#a29bfe,#6c5ce7)"></div>
<div class="ttitle">4K Streaming Media Player with Voice Remote</div>
<div class="stars">★★★★★ <span>(48,902)</span></div>
<div class="price">$39.99<span class="strike">$49.99</span></div>
<div class="prime">✓ prime</div>
<div class="deliv">FREE delivery Tomorrow</div>
<div class="addcart">Add to Cart</div>
</div>
<div class="tile">
<div class="timg" style="background:linear-gradient(135deg,#fab1a0,#e17055)"></div>
<div class="ttitle">Non-Stick Ceramic Frying Pan Set, 3-Piece</div>
<div class="stars">★★★★☆ <span>(892)</span></div>
<div class="price">$52.00</div>
<div class="prime">✓ prime</div>
<div class="deliv">FREE delivery Wed</div>
<div class="addcart">Add to Cart</div>
</div>
</div>
<div class="tabbar">
<div class="t on">🏠<br>Home</div>
<div class="t">☰<br>Menu</div>
<div class="t">🛒<span class="cartbadge">3</span><br>Cart</div>
<div class="t">👤<br>You</div>
<div class="t">🔍<br>Search</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #141414; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #141414; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.3px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #44b5ed; color: #141414;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #222222; color: #44b5ed;
border: 1px solid #44b5ed; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #222222; color: #ffffff;
border: 1px solid #141414; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #44b5ed; color: #141414;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141414; color:#ffffff; box-sizing:border-box;
font-family:'Inter', 'Sora', 'Space Grotesk', -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#141414; border-bottom:1px solid #383838; }
.logo { font-family:'Sora',sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.3px; color:#fff; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#878787; font-weight:500; }
.cart { position:relative; color:#878787; font-size:13px; }
.cart::after { content:'2'; position:absolute; top:-8px; right:-12px; background:#44b5ed; color:#141414;
font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:600; border-radius:9999px;
width:16px; height:16px; display:flex; align-items:center; justify-content:center; }
main { display:flex; height:calc(640px - 56px - 28px); }
.stage { width:440px; position:relative; background:linear-gradient(160deg,#141414 0%,#1f2021 60%,#182226 100%);
display:flex; align-items:center; justify-content:center; overflow:hidden; border-right:1px solid #383838; }
.glow { position:absolute; width:340px; height:340px; border-radius:50%;
background:radial-gradient(circle, rgba(68,181,237,0.35) 0%, rgba(68,181,237,0.05) 55%, transparent 75%); }
.visor { position:relative; width:230px; height:150px; }
.visor .body { position:absolute; inset:0; background:linear-gradient(145deg,#2b2c2d,#141414);
border-radius:28px; border:1px solid #454545; box-shadow:0 30px 60px rgba(0,0,0,0.55); }
.visor .lens { position:absolute; left:26px; top:34px; width:76px; height:76px; border-radius:50%;
background:radial-gradient(circle at 35% 30%, #6fd4ff 0%, #1a3a4a 55%, #0a1418 100%);
box-shadow:0 0 24px rgba(68,181,237,0.55), inset 0 0 12px rgba(0,0,0,0.6); }
.visor .lens2 { left:auto; right:26px; }
.visor .strap { position:absolute; left:-18px; top:50px; width:24px; height:50px; background:#1c1c1c;
border-radius:8px; border:1px solid #383838; }
.visor .strap2 { left:auto; right:-18px; }
.visor .led { position:absolute; left:50%; top:18px; transform:translateX(-50%); width:8px; height:8px;
border-radius:50%; background:#44b5ed; box-shadow:0 0 10px 3px rgba(68,181,237,0.8); }
.badges-stage { position:absolute; top:20px; left:20px; display:flex; gap:8px; }
.b { font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.5px;
text-transform:uppercase; border-radius:4px; padding:3px 9px; }
.b-new { background:#ec0101; color:#141414; }
.b-sale { background:#ffc23d; color:#141414; }
.thumbs { position:absolute; bottom:20px; left:20px; display:flex; gap:8px; }
.thumb { width:44px; height:44px; border-radius:8px; background:#222222; border:1px solid #383838; }
.thumb.active { border-color:#44b5ed; }
.info { flex:1; padding:28px 36px; display:flex; flex-direction:column; }
.crumb { font-size:11px; color:#878787; margin-bottom:10px; }
.crumb b { color:#44b5ed; font-weight:500; }
h1 { font-family:'Sora',sans-serif; font-size:25px; font-weight:600; letter-spacing:-0.3px; margin:0 0 8px; }
.stars { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.stars .s { color:#ffc23d; font-size:14px; letter-spacing:1px; }
.stars .n { font-size:12px; color:#878787; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:600; color:#44b5ed; }
.was { font-size:14px; color:#878787; text-decoration:line-through; }
p.desc { font-size:14px; line-height:1.55; color:#c9c9c9; margin:0 0 18px; max-width:420px; }
.spec { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; background:#1f2021; border:1px solid #383838;
border-radius:12px; padding:14px 16px; margin-bottom:18px; }
.spec div { font-size:11px; color:#878787; }
.spec b { display:block; font-size:13px; color:#fff; font-weight:600; margin-top:2px; }
.variant-label { font-size:11px; color:#878787; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.chips { display:flex; gap:8px; margin-bottom:20px; }
.chip { padding:8px 16px; border-radius:9999px; border:1px solid #383838; background:#222222; font-size:13px; color:#c9c9c9; }
.chip.active { border-color:#44b5ed; color:#44b5ed; background:#1a2a30; }
.cta-row { display:flex; gap:12px; margin-top:auto; }
.btn-primary { background:#44b5ed; color:#141414; border:none; border-radius:9999px; padding:13px 30px;
font-size:14px; font-weight:600; }
.btn-secondary { background:#222222; color:#44b5ed; border:1px solid #383838; border-radius:9999px;
padding:13px 24px; font-size:14px; font-weight:600; }
.trust { display:flex; gap:16px; margin-top:14px; font-size:11px; color:#878787; }
</style></head>
<body>
<nav>
<span class="logo">Amvr</span>
<div class="navlinks"><span>Headsets</span><span>Trackers</span><span>Mounts</span><span>Support</span></div>
<span class="cart">Cart</span>
</nav>
<main>
<div class="stage">
<div class="glow"></div>
<div class="badges-stage"><span class="b b-new">New</span><span class="b b-sale">-15%</span></div>
<div class="visor">
<div class="strap"></div><div class="strap strap2"></div>
<div class="body"></div>
<div class="lens"></div><div class="lens lens2"></div>
<div class="led"></div>
</div>
<div class="thumbs">
<div class="thumb active"></div><div class="thumb"></div><div class="thumb"></div>
</div>
</div>
<div class="info">
<div class="crumb">Headsets / Accessories / <b>Facial Interface Kit</b></div>
<h1>Cushion & Facial Interface Kit — Pro</h1>
<div class="stars"><span class="s">★★★★★</span><span class="n">4.8 · 612 ratings</span></div>
<div class="price-row"><span class="price">$39.00</span><span class="was">$46.00</span></div>
<p class="desc">PU-leather facial interface with anti-fog channeling and a hypoallergenic foam core — engineered to seal light while keeping long sessions cool.</p>
<div class="spec">
<div>Compatibility<b>Quest 3 / 3S</b></div>
<div>Weight<b>68g</b></div>
<div>Material<b>PU Leather + Foam</b></div>
<div>Light Seal<b>98.4%</b></div>
</div>
<div>
<div class="variant-label">Fit</div>
<div class="chips">
<span class="chip active">Standard</span>
<span class="chip">Glasses</span>
<span class="chip">Slim</span>
</div>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compatibility Check</button>
</div>
<div class="trust"><span>Free shipping $49+</span><span>30-day returns</span><span>2yr warranty</span></div>
</div>
</main>
<footer style="height:28px; border-top:1px solid #383838; display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; color:#5a5a5a;">
<span>© Amvr</span><span>Engineered for immersion</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #b3bcc0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffc20c; color: #1a1a1a;
border: none; border-radius: 8px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #1a1a1a;
border: 1px solid #ffc20c; border-radius: 8px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b3bcc0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #ffc20c; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Isidora','Montserrat',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#ffffff; border-bottom:1px solid #dde1e3; }
.brand { font-size:19px; font-weight:800; color:#1a1a1a; }
.brand span { color:#ffc20c; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#3d3d3d; font-weight:600; }
.cart { background:#ffc20c; color:#1a1a1a; font-size:12px; font-weight:800; padding:7px 14px; border-radius:9999px; }
main { display:flex; height:578px; }
.gallery { width:400px; background:#f7f7f7; position:relative; display:flex; align-items:center; justify-content:center; }
.planner { width:200px; height:260px; background:#088043; border-radius:8px; position:relative;
box-shadow:0 20px 40px rgba(0,0,0,0.16); }
.planner .cover-title { position:absolute; top:34px; left:20px; right:20px; color:#fff; font-size:14px;
font-weight:800; }
.planner .ring { position:absolute; left:14px; top:20px; bottom:20px; width:6px; display:flex;
flex-direction:column; justify-content:space-between; }
.ring i { display:block; width:6px; height:6px; border-radius:50%; background:#fff; opacity:0.7; }
.dot { position:absolute; width:34px; height:34px; border-radius:50%; }
.dot.a { background:#92d9e1; top:100px; right:-16px; }
.dot.b { background:#e4c0e9; bottom:24px; right:16px; width:22px; height:22px; }
.dot.c { background:#ffbe2f; top:-16px; left:40px; width:26px; height:26px; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#088043; }
h1 { font-size:22px; font-weight:800; margin:0; line-height:1.28; }
.desc { font-size:13px; color:#3d3d3d; line-height:1.55; max-width:340px; }
.swatch-row { display:flex; gap:8px; }
.swatch { width:28px; height:28px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #dde1e3; }
.swatch.on { box-shadow:0 0 0 2px #1a1a1a; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:800; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#ffc20c; color:#1a1a1a; border:none; border-radius:9999px; padding:13px 18px;
font-size:14px; font-weight:800; }
.btn-outline { border:2px solid #1a1a1a; color:#1a1a1a; background:#fff; border-radius:9999px; padding:10.5px 16px;
font-size:12.5px; font-weight:800; white-space:nowrap; }
.meta { font-size:11px; color:#a4afb4; }
</style></head>
<body>
<nav>
<div class="brand">Agendio<span>.</span></div>
<div class="navlinks"><span>Design Yours</span><span>Layouts</span><span>Covers</span><span>Classroom</span></div>
<div class="cart">Cart · 1</div>
</nav>
<main>
<div class="gallery">
<div class="dot a"></div><div class="dot b"></div><div class="dot c"></div>
<div class="planner"><div class="ring"><i></i><i></i><i></i><i></i><i></i></div>
<div class="cover-title">Ms. Alvarez's<br>Class Planner</div></div>
</div>
<div class="info">
<span class="cat">Custom Teacher Planner</span>
<h1>Design Your Own Agendio Planner</h1>
<p class="desc">Pick your layout, cover color, and add-ons — every planner is built page-by-page for exactly how you teach.</p>
<div class="swatch-row">
<div class="swatch on" style="background:#088043"></div>
<div class="swatch" style="background:#92d9e1"></div>
<div class="swatch" style="background:#e4c0e9"></div>
<div class="swatch" style="background:#ff5f57"></div>
<div class="swatch" style="background:#ffbe2f"></div>
</div>
<div class="price-row"><span class="price">$42.00</span></div>
<div class="btn-row">
<button class="btn-primary">Continue Customizing</button>
<button class="btn-outline">Save Draft</button>
</div>
<span class="meta">Ships in 5–7 business days</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #dddddd; }
.brand { font-size:20px; font-weight:700; letter-spacing:-0.5px; margin:0; }
.navlinks { display:flex; gap:32px; font-size:14px; color:#707070; }
.cta { background:#000000; color:#ffffff; border:1px solid #000000; border-radius:20px;
padding:10px 24px 9px; font-weight:700; font-size:14px; height:40px; display:flex; align-items:center; }
.hero { padding:40px 40px 24px; }
.badge { display:inline-block; background:#000000; color:#ffffff; border-radius:20px; padding:4px 12px;
font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.05; margin:0 0 12px; letter-spacing:-1px; max-width:640px; }
.hero p { font-size:16px; color:#707070; margin:0 0 20px; max-width:460px; line-height:1.4; }
.row { display:flex; gap:12px; }
.outl { background:transparent; color:#000000; border:1px solid #000000; border-radius:20px;
padding:10px 24px 9px; font-weight:700; font-size:14px; height:40px; display:flex; align-items:center; }
.tabs { display:flex; gap:8px; padding:0 40px 20px; }
.tab { font-size:18px; font-weight:700; padding:4px 0; color:#a0a0a0; }
.tab.sel { color:#000000; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px; }
.card { background:#f7f7f7; border-radius:20px; padding:24px 20px; height:190px; display:flex; flex-direction:column; }
.imgwrap { width:100%; height:76px; background:#ffffff; border-radius:20px; margin-bottom:14px; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 6px; }
.card p { font-size:13px; color:#707070; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<p class="brand">Samsung</p>
<div class="navlinks"><span>Products</span><span>AI Products</span><span>Support</span><span>Brand</span></div>
<button class="cta">Get started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Human-driven innovation, made real</h1>
<p>Devices, services, and an ecosystem built around people — not the other way around.</p>
<div class="row">
<button class="cta">Get started</button>
<button class="outl">Learn more</button>
</div>
</section>
<div class="tabs">
<span class="tab sel">Galaxy AI</span>
<span class="tab">SmartThings</span>
<span class="tab">One UI</span>
</div>
<section class="cards">
<div class="card"><div class="imgwrap"></div><h3>One device, every task</h3><p>From capture to compose, seamlessly across your day.</p></div>
<div class="card"><div class="imgwrap"></div><h3>Built for real people</h3><p>Interfaces tuned for comfort across every Galaxy device.</p></div>
<div class="card"><div class="imgwrap"></div><h3>Connected by design</h3><p>SmartThings ties your devices into one quiet system.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #569a43; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #569a43; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #adcca5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #569a43; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #569a43; color: #f5f5f5;
border: 1px solid #6fa95f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #adcca5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #488138; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Pretendard",sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; font-family:"Roboto Condensed", sans-serif; letter-spacing:1px; }
.navlinks { display:flex; gap:26px; font-size:16px; font-family:"Roboto Condensed", sans-serif; text-transform:uppercase; font-weight:500; }
.store { border:2px solid #ffffff; color:#ffffff; padding:0 16px; height:36px; display:flex; align-items:center; font-size:14px; font-family:"Roboto Condensed",sans-serif; font-weight:700; }
.gamecard { position:relative; margin:0 40px; height:260px; background:linear-gradient(135deg,#1a1a1a,#000000);
border-radius:0px 80px 0px 0px; display:flex; align-items:flex-end; padding:24px; }
.gamecard h2 { font-size:24px; font-weight:500; letter-spacing:-0.96px; margin:0; }
.gamecard .row { position:absolute; right:24px; bottom:24px; display:flex; gap:10px; }
.outl { border:2px solid #ffffff; color:#777777; padding:0 20px; height:44px; display:flex; align-items:center; font-size:14px; }
.newsband { background:#222222; margin-top:16px; padding:20px 40px; }
.newsband h3 { font-family:"Roboto Condensed",sans-serif; text-transform:uppercase; font-weight:700; font-size:28px; letter-spacing:1.8px; margin:0 0 14px; }
.newsrow { display:flex; justify-content:space-between; font-size:16px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.3); }
.newsrow span:last-child { color:rgba(255,255,255,0.5); font-size:13px; }
</style></head>
<body>
<nav>
<p class="brand">Shift Up</p>
<div class="navlinks"><span>GAMES</span><span>RECRUIT</span><span>IR</span></div>
<span class="store">STORE</span>
</nav>
<div class="gamecard">
<h2>Stellar Blade</h2>
<div class="row"><span class="outl">About This Project</span><span class="outl">Apply Now</span></div>
</div>
<div class="newsband">
<h3>NEWS</h3>
<div class="newsrow"><span>Stellar Blade launches on Nintendo Switch 2</span><span>Mar 2, 2026</span></div>
<div class="newsrow"><span>NIKKE: Goddess of Victory tops app store charts in KR/JP</span><span>Feb 14, 2026</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #58cc02; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #58cc02; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #31650a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a73e8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #58cc02; color: #000000;
border: 1px solid #1a73e8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #58cc02; color: #111111;
border: 1px solid #4dae04; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #31650a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4ebe27; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#4b4b4b; box-sizing:border-box;
font-family:"din-round","DIN Next Rounded","Nunito",-apple-system,sans-serif; }
* { box-sizing:border-box; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:2px solid #e5e5e5; }
.brand { font-weight:700; font-size:18px; color:#58cc02; }
.streak { display:flex; gap:14px; }
.pill { border:2px solid #e5e5e5; border-radius:9999px; padding:4px 10px; font-size:13px; font-weight:700; }
.pill.fire { color:#ff9600; }
.pill.xp { color:#ffc800; }
.progressbar { height:16px; background:#e5e5e5; border-radius:9999px; margin:20px 32px 0; overflow:hidden; }
.progressbar .fill { width:60%; height:100%; background:#58cc02; border-radius:9999px; }
.lesson { padding:24px 32px; text-align:center; }
.lesson h2 { font-size:24px; font-weight:700; margin:0 0 20px; }
.tiles { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:600px; margin:0 auto; }
.tile { border:2px solid #e5e5e5; border-radius:12px; padding:10px 18px; font-size:17px; font-weight:400;
box-shadow:0 2px 0 #e5e5e5; }
.tile.sel { border-color:#1cb0f6; background:#ddf4ff; box-shadow:0 2px 0 #1cb0f6; }
.feedback { margin:26px 32px 0; background:#d7ffb8; border-top:2px solid #a5ed6e; border-radius:16px; padding:16px 24px;
display:flex; justify-content:space-between; align-items:center; }
.feedback .txt b { color:#58a700; font-size:17px; display:block; margin-bottom:2px; }
.feedback .txt span { font-size:13px; color:#4b4b4b; }
.btn-green { background:#58cc02; color:#fff; border-radius:12px; padding:14px 28px; font-size:15px; font-weight:700;
text-transform:uppercase; box-shadow:0 4px 0 #58a700; letter-spacing:0.8px; }
.cards { display:flex; gap:14px; padding:0 32px; margin-top:22px; }
.stat-card { flex:1; border:2px solid #e5e5e5; border-radius:16px; padding:16px; text-align:center; }
.stat-card .num { font-size:24px; font-weight:700; }
.stat-card .lbl { font-size:12px; color:#777777; margin-top:4px; }
</style></head>
<body>
<div class="topbar">
<span class="brand">Duolingo</span>
<div class="streak"><span class="pill fire">🔥 27</span><span class="pill xp">⚡ 1,240</span></div>
</div>
<div class="progressbar"><div class="fill"></div></div>
<section class="lesson">
<h2>Translate: "The cat is sleeping"</h2>
<div class="tiles">
<div class="tile sel">The</div><div class="tile">cat</div><div class="tile">is</div><div class="tile">sleeping</div>
<div class="tile">dog</div><div class="tile">running</div>
</div>
</section>
<div class="feedback">
<div class="txt"><b>Nice!</b><span>You're on fire — 4 in a row.</span></div>
<div class="btn-green">Continue</div>
</div>
<div class="cards">
<div class="stat-card"><div class="num">27</div><div class="lbl">Day streak</div></div>
<div class="stat-card"><div class="num">1,240</div><div class="lbl">Total XP</div></div>
<div class="stat-card"><div class="num">Gold</div><div class="lbl">League</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #faff69; color: #0a0a0a;
border: none; border-radius: 8px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #1a1a1a; color: #ffffff;
border: 1px solid #faff69; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #1a1a1a; color: #ffffff;
border: 1px solid #474747; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #1a1a1a; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#cccccc; }
.btnp { background:#faff69; color:#0a0a0a; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; }
.hero { display:flex; align-items:center; gap:26px; padding:14px 32px; height:250px; }
.hero .left { flex:1; }
.hero h1 { font-size:34px; font-weight:700; letter-spacing:-1.4px; margin:0 0 10px; line-height:1.08; }
.hero p { font-size:14px; color:#cccccc; margin:0 0 16px; max-width:340px; }
.codebox { flex:1; background:#1a1a1a; border-radius:12px; padding:18px; height:180px; }
.codebox pre { margin:0; font-size:12px; font-family:"Courier New", monospace; line-height:1.7; color:#cccccc; }
.codebox .kw { color:#faff69; } .codebox .fn { color:#3b82f6; } .codebox .str { color:#22c55e; }
.stats { display:flex; gap:60px; padding:6px 32px 18px; }
.stat b { display:block; color:#faff69; font-size:38px; font-weight:700; letter-spacing:-1.2px; }
.stat span { font-size:12px; color:#888888; }
.yband { margin:0 32px; background:#faff69; color:#0a0a0a; border-radius:12px; padding:22px 32px;
display:flex; align-items:center; justify-content:space-between; }
.yband h2 { font-size:22px; font-weight:700; margin:0; letter-spacing:-0.6px; }
.yband .btnk { background:#0a0a0a; color:#faff69; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">ClickHouse</div>
<div class="navlinks"><span>Product</span><span>Use Cases</span><span>Pricing</span><span>Resources</span></div>
<span class="btnp">Get Started</span>
</nav>
<div class="hero">
<div class="left">
<h1>The leading database<br>for AI</h1>
<p>The fastest and most resource-efficient open-source database for real-time analytics.</p>
<span class="btnp">Get Started</span>
</div>
<div class="codebox">
<pre><span class="kw">SELECT</span> country, <span class="fn">count</span>(*) <span class="kw">AS</span> events
<span class="kw">FROM</span> analytics.pageviews
<span class="kw">WHERE</span> ts > <span class="str">now() - INTERVAL 1 DAY</span>
<span class="kw">GROUP BY</span> country
<span class="kw">ORDER BY</span> events <span class="kw">DESC</span>
<span class="kw">LIMIT</span> 10</pre>
</div>
</div>
<div class="stats">
<div class="stat"><b>779+</b><span>Contributors</span></div>
<div class="stat"><b>2.8k+</b><span>Companies in production</span></div>
<div class="stat"><b>47k+</b><span>GitHub stars</span></div>
</div>
<div class="yband">
<h2>Built for every modern data challenge</h2>
<span class="btnk">Start free</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #171a1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #171a1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #171a1c; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #636b74; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #003399; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f4f4f4; color: #003399;
border: 1px solid #003399; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f4f4; color: #171a1c;
border: 1px solid #bdbebe; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636b74; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #a5212d; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f4f4f4; color:#171a1c; box-sizing:border-box; font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#000235; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#fff; margin:0; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#fff; }
.navlinks span.active { color:#e3d18c; }
.gold-btn { background:#e3d18c; color:#171a1c; border:none; border-radius:4px; padding:8px 18px; font-size:12px; font-weight:600; }
.breadcrumb { padding:10px 32px 0; font-size:11px; color:#636b74; }
.breadcrumb b { color:#32383e; }
.main { display:flex; gap:24px; padding:16px 32px; height:460px; }
.gallery { width:400px; background:#fbfcfe; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; }
.horn { width:200px; height:220px; position:relative; }
.horn::before { content:''; position:absolute; left:40px; top:20px; width:120px; height:120px; border-radius:50%; border:14px solid #e3d18c; }
.horn::after { content:''; position:absolute; left:70px; top:120px; width:60px; height:90px; background:linear-gradient(180deg,#a5842a,#e3d18c); border-radius:8px; }
.badge-heritage { position:absolute; top:16px; left:16px; background:#e3d18c; color:#171a1c; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:26px; font-weight:700; margin:0; letter-spacing:-0.4px; }
.subline { font-size:13px; color:#636b74; }
.price-row { display:flex; align-items:center; gap:10px; margin-top:4px; }
.price { font-size:24px; font-weight:700; color:#003399; }
.badge-sale { background:#a5212d; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:2px; }
.desc { font-size:13px; line-height:1.55; color:#32383e; max-width:460px; }
.spec-table { margin-top:8px; border-top:1px solid #dde7ee; }
.spec-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #dde7ee; font-size:12px; }
.spec-row span:first-child { color:#636b74; }
.spec-row span:last-child { font-weight:600; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#003399; color:#fff; border:none; border-radius:4px; font-weight:600; font-size:14px; }
.btn-gold { flex:1; height:44px; background:#e3d18c; color:#171a1c; border:none; border-radius:4px; font-weight:600; font-size:14px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#000235; color:#9fa6ad; padding:12px 32px;
display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bach Brass</p>
<div class="navlinks"><span class="active">Trumpets</span><span>Trombones</span><span>Mouthpieces</span><span>Heritage Collection</span></div>
<button class="gold-btn">Customize</button>
</nav>
<div class="breadcrumb">Home / Trumpets / <b>Heritage Series Bb Trumpet</b></div>
<div class="main">
<div class="gallery">
<div class="badge-heritage">Heritage</div>
<div class="horn"></div>
</div>
<div class="info">
<h1>Heritage Series Bb Trumpet</h1>
<span class="subline">Hand-lacquered brass · Monel valves · Includes case</span>
<div class="price-row">
<span class="price">$1,249.00</span>
<span class="badge-sale">Sale</span>
</div>
<p class="desc">Precision-machined valves and a hand-hammered bell deliver a warm, projecting tone favored by orchestral and marching players alike. Every horn is inspected and playtested before it ships.</p>
<div class="spec-table">
<div class="spec-row"><span>Bore Size</span><span>0.459" Medium-Large</span></div>
<div class="spec-row"><span>Bell Material</span><span>Yellow Brass, Hand-Hammered</span></div>
<div class="spec-row"><span>Finish</span><span>Lacquer, Gold Trim</span></div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-gold">Request a Fitting</button>
</div>
</div>
</div>
<footer>
<span>© Bach Brass</span>
<span>Bach Brass · About · Support · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0065ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0065ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2962ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0065ff; color: #ffffff;
border: 1px solid #2962ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0065ff; color: #f5f5f5;
border: 1px solid #277cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0765ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#151618; box-sizing:border-box;
font-family:"Montserrat","Pretendard",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#ffffff; border-bottom:1px solid #d6d9df; }
.logo { font-size:19px; font-weight:700; color:#000000; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#000000; }
.cta-mui { background:#2962ff; color:#ffffff; border-radius:4px; padding:8px 16px; font-size:12px;
font-weight:500; }
.hero { text-align:center; padding:34px 40px 24px; }
.hero h1 { font-size:40px; font-weight:700; line-height:1.1; margin:0 0 12px; color:#000000; }
.hero p { font-size:15px; color:#4a4d52; margin:0 0 20px; }
.row { display:flex; gap:12px; justify-content:center; }
.btn-primary { background:#0065ff; color:#ffffff; border-radius:8px; padding:12px 32px; height:46px;
font-size:16px; font-weight:700; display:flex; align-items:center; }
.btn-outline { background:#ffffff; color:#0065ff; border:1px solid #0065ff; border-radius:8px;
padding:12px 32px; height:46px; font-size:16px; font-weight:700; display:flex; align-items:center; }
.band { padding:24px 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border-radius:8px; padding:16px; }
.card h3 { font-size:14px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; color:#6a6e75; margin:0; line-height:1.4; }
.chips { display:flex; gap:10px; padding:0 40px 24px; }
.chip-dark { background:#000000; color:#fff; border-radius:5px; padding:0 18px; height:38px;
font-size:13px; font-weight:500; display:flex; align-items:center; }
.chip-white { background:#ffffff; color:#151618; border-radius:5px; padding:8px 16px; height:38px;
font-size:13px; font-weight:500; display:flex; align-items:center; }
.docs { background:#f6f7f9; margin:0 40px 24px; border-radius:8px; padding:18px; display:flex; gap:18px; }
.docs .side { width:120px; font-size:12px; color:#6a6e75; line-height:2.2; }
.docs .side .active { color:#0c408d; font-weight:600; }
.docs .main { flex:1; }
.docs input { width:100%; border:1px solid #d6d9df; border-radius:8px; padding:8px; font-size:13px;
background:#ffffff; color:#1c1d1e; }
.callout { background:#ebf4fd; color:#0c408d; border-radius:8px; padding:10px 14px; margin-top:10px;
font-size:12px; }
</style></head>
<body>
<nav>
<span class="logo">Hackle</span>
<div class="navlinks"><span>Overview</span><span>Guides</span><span>Pricing</span></div>
<span class="cta-mui">Contact Us</span>
</nav>
<section class="hero">
<h1>Growth, powered by AI and data</h1>
<p>An all-in-one AI growth platform you can set up in 5 minutes — web, app, or server.</p>
<div class="row">
<button class="btn-primary">Explore Demo</button>
<button class="btn-outline">Request a Demo</button>
</div>
</section>
<div class="band">
<div class="card"><h3>A/B Testing</h3><p>From experiment design to statistical analysis, all in one place.</p></div>
<div class="card"><h3>Feature Flags</h3><p>Control deployments and releases safely.</p></div>
<div class="card"><h3>CRM Marketing</h3><p>Automatically send messages based on user segments.</p></div>
</div>
<div class="chips">
<span class="chip-dark">Quick Send</span>
<span class="chip-white">Download the Guidebook</span>
</div>
<div class="docs">
<div class="side">
<div class="active">Getting Started</div>
<div>A/B Testing</div>
<div>Feature Flags</div>
<div>SDK Integration</div>
</div>
<div class="main">
<input type="text" placeholder="Search for a feature or keyword" readonly />
<div class="callout">Step 1. Find Churned Users</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b347; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b347; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d7a7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b347; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b347; color: #f5f5f5;
border: 1px solid #27be63; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d7a7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29bf64; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
.topline { flex:0 0 26px; background:#f2f2f2; display:flex; align-items:center; justify-content:center;
font-size:12px; color:#212529; letter-spacing:0.01em; }
.topline b { color:#00b347; }
nav { flex:0 0 51px; display:flex; align-items:stretch; background:#ffffff; border-bottom:1px solid #e6e6e6; padding:0 24px; }
.navrow { display:flex; align-items:center; gap:2px; }
.navitem { height:51px; display:flex; align-items:center; padding:0 18px; font-size:14px; font-weight:700;
color:#7a7a7a; }
.navitem.active { background:#00b347; color:#212529; border-radius:0; }
.navspacer { flex:1; }
.navutil { display:flex; align-items:center; gap:8px; }
.util-btn { height:26px; padding:0 10px; background:#f2f2f2; color:#00b347; border-radius:3px; font-size:12px; font-weight:400;
display:flex; align-items:center; align-self:center; }
main { flex:1; min-height:0; padding:18px 24px; display:flex; flex-direction:column; gap:14px; }
.lede { display:flex; align-items:baseline; justify-content:space-between; }
.lede h1 { font-size:16px; font-weight:700; margin:0; color:#212529; }
.lede span { font-size:12px; color:#7a7a7a; }
.grid { flex:1; display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(2, 1fr); gap:10px; min-height:0; }
.cell { background:#f2f2f2; border-radius:3px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.swatch { width:34px; height:34px; border-radius:3px; }
.cell .title { font-size:14px; font-weight:700; color:#68b5ac; margin:0; }
.cell .desc { font-size:12px; color:#7a7a7a; margin:0; line-height:1.4; }
.cell .tag { align-self:flex-start; margin-top:auto; font-size:11px; font-weight:700; color:#212529; background:#ffffff;
border-radius:3px; padding:2px 7px; }
.s1 { background:#dff5e6; } .s2 { background:#fde9d9; } .s3 { background:#e4e9fb; } .s4 { background:#fbe4ee; }
.s5 { background:#f6f0da; } .s6 { background:#dff0f5; } .s7 { background:#efe4fb; } .s8 { background:#eaf5d9; }
footer { flex:0 0 40px; border-top:1px solid #e6e6e6; padding:0 24px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#7a7a7a; background:#ffffff; }
</style></head>
<body>
<div class="wrap">
<div class="topline">Open 24 hours · <b>New</b> fresh bakery arrives every morning</div>
<nav>
<div class="navrow">
<div class="navitem active">Convenience</div>
<div class="navitem">Fresh Food</div>
<div class="navitem">Store Map</div>
<div class="navitem">Membership</div>
</div>
<div class="navspacer"></div>
<div class="navutil">
<span class="util-btn">Find a store</span>
<span class="util-btn">Coupons</span>
</div>
</nav>
<main>
<div class="lede">
<h1>FamilyMart · today's categories</h1>
<span>Updated hourly at your nearest store</span>
</div>
<div class="grid">
<div class="cell s1"><span class="swatch" style="background:#00b347"></span><p class="title">Rice & Bento</p><p class="desc">Hot lunch sets, ready in minutes</p><span class="tag">In stock</span></div>
<div class="cell s2"><span class="swatch" style="background:#e08a3c"></span><p class="title">Fresh Bakery</p><p class="desc">Baked daily before store open</p><span class="tag">New</span></div>
<div class="cell s3"><span class="swatch" style="background:#4d6fd6"></span><p class="title">Hot Coffee</p><p class="desc">Self-serve counter, three roasts</p><span class="tag">In stock</span></div>
<div class="cell s4"><span class="swatch" style="background:#c2568f"></span><p class="title">Chilled Drinks</p><p class="desc">Tea, juice, and sports drinks</p><span class="tag">In stock</span></div>
<div class="cell s5"><span class="swatch" style="background:#c9a13a"></span><p class="title">Instant Noodles</p><p class="desc">Local and imported selection</p><span class="tag">In stock</span></div>
<div class="cell s6"><span class="swatch" style="background:#3ea6bf"></span><p class="title">Ice Cream</p><p class="desc">Single serve, family pack sizes</p><span class="tag">In stock</span></div>
<div class="cell s7"><span class="swatch" style="background:#8a5fc7"></span><p class="title">Snacks</p><p class="desc">Chips, biscuits, seasonal flavors</p><span class="tag">In stock</span></div>
<div class="cell s8"><span class="swatch" style="background:#5f9a3c"></span><p class="title">Daily Essentials</p><p class="desc">Batteries, tissues, phone cards</p><span class="tag">In stock</span></div>
</div>
</main>
<footer>
<span>© FamilyMart</span>
<span>Store Locator · Franchise · Careers</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #0a0a0a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #020202; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { display:flex; width:960px; height:640px; }
.hero { width:460px; padding:0 56px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.word { font-size:26px; font-weight:700; letter-spacing:-0.4px; text-transform:uppercase; margin:0; }
.tag { font-size:15px; color:#9A9A9A; line-height:1.5; max-width:340px; margin:0; }
.badgebig { display:inline-flex; align-items:center; gap:6px; border:1px solid #00FFFF; color:#00FFFF; font-size:11px; font-weight:700; letter-spacing:1px; padding:5px 10px; border-radius:4px; width:fit-content; margin-top:6px; }
.pillbtn { background:#FFFFFF; color:#000; border-radius:999px; padding:12px 28px; font-weight:700; font-size:15px; width:fit-content; margin-top:10px; }
.player { width:500px; padding:36px 40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.art { width:280px; height:280px; background:linear-gradient(150deg,#3a2a55,#0a0a0a 70%); }
.track { text-align:center; }
.ttitle { font-size:22px; font-weight:700; display:flex; align-items:center; gap:10px; justify-content:center; }
.artist { color:#9A9A9A; font-size:14px; margin-top:4px; }
.scrub { width:280px; height:3px; background:#5C5C5C; border-radius:2px; margin-top:6px; position:relative; }
.scrub i { position:absolute; left:0; top:0; bottom:0; width:38%; background:#FFFFFF; border-radius:2px; }
.times { display:flex; justify-content:space-between; width:280px; font-size:11px; color:#9A9A9A; font-weight:600; }
.transport { display:flex; align-items:center; gap:28px; margin-top:4px; }
.transport span { color:#9A9A9A; font-size:18px; }
.play { width:64px; height:64px; border-radius:50%; background:#FFFFFF; color:#000; display:flex; align-items:center; justify-content:center; font-size:22px; }
.shelf { margin-top:8px; }
.shelflabel { font-size:10px; letter-spacing:1px; color:#9A9A9A; text-transform:uppercase; margin-bottom:8px; }
.tiles { display:flex; gap:12px; }
.tile { width:70px; height:70px; position:relative; }
.tile1 { background:linear-gradient(160deg,#333,#111); }
.tile2 { background:linear-gradient(160deg,#2a2a44,#0a0a0a); }
.tile3 { background:linear-gradient(160deg,#442a2a,#0a0a0a); }
.tile4 { background:linear-gradient(160deg,#2a442a,#0a0a0a); }
</style></head>
<body>
<div class="stage">
<div class="hero">
<p class="word">TIDAL (iOS)</p>
<p class="tag">Square art on true black. Nothing floats — nothing casts a shadow. Fidelity is the only color the app allows itself.</p>
<span class="badgebig">MASTER</span>
<div class="pillbtn">Play</div>
</div>
<div class="player">
<div class="art"></div>
<div class="track">
<div class="ttitle">Black Skinhead <span class="badgebig">HIFI</span></div>
<div class="artist">Kanye West</div>
</div>
<div class="scrub"><i></i></div>
<div class="times"><span>1:23</span><span>-2:09</span></div>
<div class="transport"><span>⇄</span><span>◀◀</span><div class="play">▶</div><span>▶▶</span><span>⟳</span></div>
<div class="shelf">
<div class="shelflabel">My Mix</div>
<div class="tiles"><div class="tile tile1"></div><div class="tile tile2"></div><div class="tile tile3"></div><div class="tile tile4"></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0052ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0052ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87acfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #578bfa; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0052ff; color: #ffffff;
border: 1px solid #578bfa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0052ff; color: #f5f5f5;
border: 1px solid #276cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87acfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e5bfe; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0b0d; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; margin:0; }
.chips { display:flex; gap:10px; }
.chip { font-size:13px; color:#0667d0; background:#eef0f3; border-radius:16px; padding:6px 14px; }
.pill-primary { background:#0052ff; color:#fff; border-radius:9999px; padding:11px 22px; font-size:14px; font-weight:600; }
.hero { padding:28px 40px 30px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero h1 { font-size:52px; font-weight:400; line-height:1.0; letter-spacing:-1px; margin:0; max-width:640px; }
.hero p { font-size:16px; color:#5b616e; max-width:440px; margin:0; }
.row { display:flex; gap:10px; }
.pill-secondary { background:#eef0f3; color:#0a0b0d; border-radius:9999px; padding:10px 22px; font-size:14px; font-weight:600; }
.darkband { background:#0a0b0d; padding:26px 40px; display:flex; gap:20px; align-items:center; }
.stat { flex:1; text-align:center; color:#fff; }
.stat .num { font-size:34px; font-weight:400; font-family:Georgia, serif; }
.stat .lbl { font-size:12px; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:26px 40px; }
.card { background:#eef0f3; border-radius:16px; padding:18px; }
.card h3 { font-size:15px; margin:0 0 6px; font-weight:600; }
.card p { font-size:12px; color:#5b616e; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<p class="brand">Coinbase</p>
<div class="chips"><span class="chip">Buy</span><span class="chip">Wallet</span><span class="chip">Prime</span><span class="chip">Base</span></div>
<button class="pill-primary">Sign up</button>
</nav>
<section class="hero">
<h1>Buy and sell crypto with trust</h1>
<p>The most regulated exchange in the US — recurring buys, self-custody, and institutional custody in one place.</p>
<div class="row">
<button class="pill-primary">Get started</button>
<button class="pill-secondary">Learn more</button>
</div>
</section>
<div class="darkband">
<div class="stat"><div class="num">$95B+</div><div class="lbl">Assets on platform</div></div>
<div class="stat"><div class="num">100+</div><div class="lbl">Countries served</div></div>
<div class="stat"><div class="num">2012</div><div class="lbl">Founded in SF</div></div>
</div>
<section class="cards">
<div class="card"><h3>Recurring buy</h3><p>Automate BTC and ETH purchases on your schedule.</p></div>
<div class="card"><h3>Coinbase Wallet</h3><p>Non-custodial storage for your keys and your DeFi.</p></div>
<div class="card"><h3>Coinbase Prime</h3><p>Institutional custody, trading, and reporting.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #a8a8aa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 9999px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #0a0a0a;
border: 1px solid #0a0a0a; border-radius: 9999px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0a0a0a;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8a8aa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #00d4a4; color: #0a0a0a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0a0a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 상단 절반: 하늘 그라디언트 마케팅 히어로. 하단 절반: 3열 문서(사이드바/본문/TOC) —
Mintlify 특유의 "듀얼모드" (마케팅 vs 조밀한 개발자 문서) 를 위아래로 압축해 한 화면에 담는다. */
.hero { height:230px; position:relative; overflow:hidden;
background:linear-gradient(180deg,#87a8c8 0%,#c9d9e6 55%,#f5e9d8 100%); }
.cloud { position:absolute; border-radius:50%; background:rgba(255,255,255,0.55); filter:blur(1px); }
.c1 { width:160px; height:60px; top:30px; left:60px; }
.c2 { width:220px; height:80px; top:70px; right:40px; }
.c3 { width:140px; height:50px; top:130px; left:340px; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { font-size:16px; font-weight:600; color:#0a0a0a; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:rgba(10,10,10,0.65); }
.btn-dark { background:#0a0a0a; color:#ffffff; border:none; border-radius:999px; padding:8px 18px; font-weight:600; font-size:13px; }
.heroband { position:relative; z-index:2; text-align:center; padding:14px 40px 0; }
.heroband h1 { font-size:38px; font-weight:600; letter-spacing:-1px; margin:0; color:#0a0a0a; }
.heroband p { font-size:14px; color:rgba(10,10,10,0.6); margin:8px 0 0; }
.heroband .badge { display:inline-block; background:#00d4a4; color:#0a0a0a; border-radius:999px; font-size:11px;
font-weight:700; padding:4px 12px; margin-bottom:10px; }
.docs { display:grid; grid-template-columns:180px 1fr 170px; height:384px; }
.sidebar { border-right:1px solid #e5e5e5; padding:18px 16px; font-size:12px; color:#3a3a3c; }
.sidebar .grp { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:#a8a8aa; margin:12px 0 6px; }
.sidebar .item { padding:5px 0; }
.sidebar .item.active { color:#00b48a; font-weight:600; }
.prose { padding:20px 26px; font-size:13px; line-height:1.6; color:#1c1c1e; overflow:hidden; }
.prose h2 { font-size:20px; font-weight:600; margin:0 0 8px; letter-spacing:-0.3px; }
.prose p { margin:0 0 10px; color:#3a3a3c; }
.code { background:#1c1c1e; color:#e5e5e5; border-radius:8px; padding:14px; font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
font-size:11.5px; line-height:1.6; }
.code .c1t { color:#7cebcb; } .code .c2t { color:#f55a3c; } .code .c3t { color:#888; }
.toc { border-left:1px solid #e5e5e5; padding:18px 16px; font-size:11px; color:#888; }
.toc .t { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:#a8a8aa; margin-bottom:8px; }
.toc .item { padding:4px 0; }
.toc .item.active { color:#00d4a4; font-weight:600; border-left:2px solid #00d4a4; padding-left:8px; margin-left:-10px; }
</style></head>
<body>
<div class="hero">
<div class="cloud c1"></div><div class="cloud c2"></div><div class="cloud c3"></div>
<nav>
<p class="brand">Mintlify</p>
<div class="navlinks"><span>Docs</span><span>Startups</span><span>Pricing</span></div>
<button class="btn-dark">Get a demo</button>
</nav>
<div class="heroband">
<span class="badge">Docs infrastructure</span>
<h1>Beautiful documentation, out of the box</h1>
<p>Inter for prose, Geist Mono for code, one signature green.</p>
</div>
</div>
<div class="docs">
<div class="sidebar">
<div class="grp">Get started</div>
<div class="item active">Quickstart</div>
<div class="item">Editing pages</div>
<div class="grp">API reference</div>
<div class="item">Introduction</div>
<div class="item">Authentication</div>
<div class="item">Endpoints</div>
</div>
<div class="prose">
<h2>Live reload, everywhere</h2>
<p>Every push rebuilds your docs in seconds, with previews for every branch and a searchable index out of the box.</p>
<div class="code"><span class="c3t"># install the CLI</span><br>npm i -g mintlify<br><span class="c1t">mintlify dev</span> <span class="c2t">--port 3333</span></div>
</div>
<div class="toc">
<div class="t">On this page</div>
<div class="item active">Live reload</div>
<div class="item">Previews</div>
<div class="item">Search index</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #030303; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #030303; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #030303; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #030303; color: #f5f5f5;
border: 1px solid #2a2a2a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #111329; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#030303; box-sizing:border-box;
font-family:"Camera Plain Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; gap:26px; padding:0 32px;
border-bottom:1px solid #eceae4; }
.brand { font-weight:600; font-size:16px; letter-spacing:-0.2px; margin:0; }
.nlink { font-size:15px; color:#030303; padding:4px 0 4px 6px; }
.navlinks { display:flex; gap:22px; }
.primary-action { margin-left:auto; background:rgba(0,0,0,0.88); color:#fafafa; border-radius:8px;
padding:6px 14px; font-size:14px; height:32px; display:flex; align-items:center; font-weight:400; }
.hero { padding:52px 32px 30px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.eyebrow { font-size:13px; color:#77776f; letter-spacing:0.02em; }
.hero h1 { font-size:42px; font-weight:600; letter-spacing:-1px; line-height:1.1; margin:0; max-width:620px; }
.hero p { font-size:16px; color:#4a4a45; margin:0; max-width:440px; line-height:1.5; }
.prompt-box { margin-top:8px; width:560px; background:#ffffff; border:1px solid #eceae4; border-radius:12px;
padding:14px 16px; display:flex; align-items:center; gap:12px;
box-shadow: rgb(255,255,255) 0px 0px 0px 1px, rgba(119,119,113,0.16) 0px 0px 0px 2px,
rgba(0,0,0,0.04) 0px 2px 1px 0px, rgba(0,0,0,0.04) 0px 4px 3px -1.5px, rgba(0,0,0,0.04) 0px 13px 12px -6px; }
.prompt-box span { font-size:15px; color:#77776f; flex:1; text-align:left; }
.send { width:30px; height:30px; border-radius:8px; background:rgba(0,0,0,0.88); flex:none;
display:flex; align-items:center; justify-content:center; }
.send::before { content:'→'; color:#fafafa; font-size:14px; }
.preview { margin:26px 32px 0; height:210px; border-radius:12px; overflow:hidden; border:1px solid #e7e7e6;
background:#ffffff; box-shadow: rgba(0,0,0,0.04) 0px 2px 1px 0px, rgba(0,0,0,0.04) 0px 7px 6px -3px; }
.preview-bar { height:30px; background:#f3f2ee; display:flex; align-items:center; gap:6px; padding:0 12px;
border-bottom:1px solid #e7e7e6; }
.dot { width:8px; height:8px; border-radius:50%; background:#dedcd4; }
.preview-body { display:flex; height:180px; }
.preview-side { width:150px; background:#f7f6f2; border-right:1px solid #e7e7e6; padding:14px 12px; display:flex; flex-direction:column; gap:8px; }
.preview-side .ln { height:8px; border-radius:4px; background:#e5e3dc; }
.preview-main { flex:1; padding:18px 22px; display:flex; flex-direction:column; gap:10px; }
.preview-main .block { height:46px; border-radius:9999px; background:rgba(0,0,0,0.88); width:150px;
display:flex; align-items:center; justify-content:center; color:#fafafa; font-size:13px; }
.preview-main .row { display:flex; gap:10px; }
.preview-card { flex:1; height:60px; border-radius:8px; background:#f3f2ee; border:1px solid #eceae4; }
</style></head>
<body>
<nav>
<p class="brand">Lovable</p>
<div class="navlinks">
<span class="nlink">Product</span><span class="nlink">Enterprise</span><span class="nlink">Docs</span><span class="nlink">Pricing</span>
</div>
<div class="primary-action">Sign up</div>
</nav>
<section class="hero">
<span class="eyebrow">FROM IDEA TO APP</span>
<h1>Build software by describing it</h1>
<p>Turn a plain-language idea into a working, editable web app — no setup, no boilerplate.</p>
<div class="prompt-box"><span>A landing page for a coffee subscription, with a signup form...</span><div class="send"></div></div>
</section>
<div class="preview">
<div class="preview-bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
<div class="preview-body">
<div class="preview-side"><div class="ln" style="width:70%"></div><div class="ln" style="width:90%"></div><div class="ln" style="width:50%"></div><div class="ln" style="width:80%"></div></div>
<div class="preview-main">
<div class="block">Get started</div>
<div class="row"><div class="preview-card"></div><div class="preview-card"></div><div class="preview-card"></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbf9; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbf9; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e15a5b; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fcfbf9; color: #212121;
border: 1px solid #e15a5b; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbf9; color: #212121;
border: 1px solid #c5c4c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #e15a5b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfbf9; color:#212121; box-sizing:border-box;
font-family:'Figtree','Inter',Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #e5e5eb; }
.brand { font-family:'Amiri',Georgia,serif; font-size:20px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:.4px; }
.navlinks span.active { color:#e15a5b; border-bottom:2px solid #e15a5b; padding-bottom:4px; }
.search-pill { background:#f7f7f8; border-radius:999px; padding:9px 18px; font-size:12px; color:#676986; width:180px; }
.hero { display:flex; align-items:center; padding:20px 40px; gap:24px; }
.heroimg { flex:1; height:180px; background:linear-gradient(135deg,#f4f0e8,#cf9370,#e15a5b); border-radius:12px; }
.herotext { flex:1; }
.herotext h1 { font-family:'Amiri',Georgia,serif; font-size:32px; font-weight:700; margin:0 0 10px; line-height:1.15; }
.herotext p { font-size:13px; color:#484848; margin:0 0 14px; max-width:300px; }
.btn { display:inline-block; background:#e15a5b; color:#fff; font-size:14px; font-weight:600; padding:13px 28px; border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px; }
.card { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden; }
.card-img { height:100px; background:linear-gradient(135deg,#f4f0e8,#dab668); border-radius:12px 12px 0 0; position:relative; }
.badge { position:absolute; top:8px; left:8px; background:#e15a5b; color:#fff; font-size:9px; font-weight:600; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.cbody { padding:10px 14px 12px; }
.cbody h3 { font-size:13px; font-weight:500; margin:0 0 6px; }
.ing { display:inline-block; font-family:'Amiri',Georgia,serif; font-style:italic; font-size:11px; color:#94654b; background:#f4f0e8; border:1px solid #cf9370; border-radius:999px; padding:3px 10px; margin-bottom:6px; }
.price { font-size:15px; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; height:48px; background:#272d45; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; opacity:.95; }
</style></head>
<body>
<nav>
<p class="brand">Beauty OF Joseon</p>
<div class="navlinks"><span class="active">Serums</span><span>Sunscreen</span><span>Cleansers</span><span>Sets</span></div>
<div class="search-pill">Search...</div>
</nav>
<section class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Joseon Wisdom, Modern Science</h1>
<p>Hanbang-inspired formulas rooted in centuries of Korean herbal skincare tradition.</p>
<span class="btn">Shop Bestsellers</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge">Bestseller</span></div>
<div class="cbody"><span class="ing">Rice Bran</span><h3>Glow Deep Serum</h3><div class="price">$21</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><span class="ing">Ginseng</span><h3>Relief Sun SPF50+</h3><div class="price">$18</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><span class="ing">Green Plum</span><h3>Refresh Cleansing Balm</h3><div class="price">$19</div></div>
</div>
</div>
<footer>
<span>© Beauty OF Joseon</span>
<span>Beauty OF Joseon · Ingredients · Shipping · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #f5f5f5; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:600; }
.pillgroup { display:flex; gap:4px; background:#f8f9fa; border-radius:999px; padding:5px; }
.pillgroup span { font-size:12px; padding:6px 14px; border-radius:999px; color:#6b7280; }
.pillgroup span.on { background:#fff; color:#111; box-shadow:0 1px 2px rgba(0,0,0,0.06); font-weight:600; }
.navcta { display:flex; gap:10px; align-items:center; }
.signin { font-size:13px; color:#374151; }
.btnp { background:#111111; color:#fff; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; }
.hero { display:flex; align-items:center; gap:30px; padding:22px 32px; height:280px; }
.hero .left { flex:1; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-1.4px; margin:0 0 10px; line-height:1.08; }
.hero p { font-size:15px; color:#374151; margin:0 0 16px; max-width:340px; }
.hero .row { display:flex; gap:10px; }
.btn2 { background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; }
.mockup { flex:1; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px;
box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.mockup .mtitle { font-size:13px; font-weight:600; margin-bottom:10px; }
.caldays { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:10px; }
.caldays span { font-size:11px; text-align:center; padding:5px 0; border-radius:6px; background:#f5f5f5; color:#374151; }
.caldays span.on { background:#111; color:#fff; font-weight:600; }
.slots { display:flex; gap:8px; }
.slot { flex:1; text-align:center; font-size:11px; padding:7px; border:1px solid #e5e7eb; border-radius:6px; }
.slot.pick { background:#111; color:#fff; border-color:#111; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 32px; }
.fcard { background:#f5f5f5; border-radius:12px; padding:18px; }
.fcard h3 { font-size:15px; font-weight:600; margin:0 0 6px; }
.fcard p { font-size:12px; color:#374151; margin:0; line-height:1.4; }
footer { height:96px; margin-top:16px; background:#101010; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; color:#a1a1aa; font-size:12px; }
footer b { color:#fff; font-size:14px; }
</style></head>
<body>
<nav>
<div class="brand">Cal.com</div>
<div class="pillgroup"><span class="on">Personal</span><span>Teams</span><span>Enterprise</span></div>
<div class="navcta"><span class="signin">Sign in</span><span class="btnp">Sign up free</span></div>
</nav>
<div class="hero">
<div class="left">
<h1>The better way<br>to schedule meetings</h1>
<p>Simple, all-in-one scheduling for individuals, businesses taking calls, and developers building calendar apps.</p>
<div class="row"><span class="btnp">Get started</span><span class="btn2">Book a demo</span></div>
</div>
<div class="mockup">
<div class="mtitle">Pick a time</div>
<div class="caldays"><span>M</span><span>T</span><span class="on">W</span><span>T</span><span>F</span><span>S</span><span>S</span></div>
<div class="slots"><span class="slot pick">9:00</span><span class="slot">9:30</span><span class="slot">10:00</span><span class="slot">10:30</span></div>
</div>
</div>
<div class="features">
<div class="fcard"><h3>Scheduling infrastructure</h3><p>Build on top of the world's leading calendar scheduling platform.</p></div>
<div class="fcard"><h3>Workflow automation</h3><p>Automate reminders, follow-ups, and confirmations for every booking.</p></div>
<div class="fcard"><h3>Team routing</h3><p>Route meetings to the right person, every time, automatically.</p></div>
</div>
<footer><b>Cal.com</b><span>Product · Solutions · Resources · Pricing</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f1ec; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f1ec; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #626260; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #bcb9b5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #626260; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #d5d2cd; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f1ec; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:500; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#111; }
.btn-ink { background:#111; color:#fff; border:none; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:12px 40px 8px; }
.hero h1 { font-size:36px; font-weight:500; letter-spacing:-1px; line-height:1.12; margin:0 0 8px; }
.hero p { font-size:13px; color:#626260; margin:0 0 12px; }
.mockupwrap { margin:0 40px; background:#fff; border-radius:16px; padding:16px; display:flex; gap:14px; height:230px; }
.chatpane { flex:1.3; background:#f5f1ec; border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.msg { max-width:70%; padding:8px 10px; border-radius:10px; font-size:11px; line-height:1.4; }
.msg.in { background:#fff; align-self:flex-start; }
.msg.out { background:#ff5600; color:#fff; align-self:flex-end; }
.finbadge { display:inline-flex; align-items:center; gap:4px; background:#fff; border-radius:9999px; padding:4px 8px;
font-size:9px; font-weight:600; color:#ff5600; align-self:flex-start; }
.sidepane { flex:1; display:flex; flex-direction:column; gap:8px; }
.stat { background:#f5f1ec; border-radius:10px; padding:10px; }
.stat .n { font-size:18px; font-weight:500; }
.stat .l { font-size:10px; color:#626260; }
.featurerow { display:flex; gap:12px; padding:14px 40px 16px; }
.fcard { flex:1; background:#fff; border-radius:12px; padding:14px; }
.fcard h4 { font-size:13px; font-weight:500; margin:0 0 4px; }
.fcard p { font-size:11px; color:#626260; margin:0; line-height:1.4; }
.fcard.fin { background:#ff5600; color:#fff; }
.fcard.fin p { color:#ffe4d6; }
footer { margin-top:auto; padding:12px 40px; display:flex; justify-content:space-between; font-size:11px; color:#7b7b78; }
</style></head>
<body>
<nav>
<span class="brand">Intercom</span>
<div class="navlinks"><span>Product</span><span>Fin AI</span><span>Pricing</span><span>Customers</span></div>
<button class="btn-ink">Sign up</button>
</nav>
<section class="hero">
<h1>The AI customer service company</h1>
<p>Fin resolves 65% of your support volume, instantly.</p>
</section>
<div class="mockupwrap">
<div class="chatpane">
<span class="finbadge">✦ Fin AI Agent</span>
<div class="msg in">Hi! How can I help you with your order today?</div>
<div class="msg out">I need to change my shipping address.</div>
<div class="msg in">Done — updated to your new address. Anything else?</div>
</div>
<div class="sidepane">
<div class="stat"><div class="n">65%</div><div class="l">Resolution rate</div></div>
<div class="stat"><div class="n">2.4s</div><div class="l">Avg. response time</div></div>
<div class="stat"><div class="n">98%</div><div class="l">CSAT score</div></div>
</div>
</div>
<div class="featurerow">
<div class="fcard"><h4>Helpdesk</h4><p>Manage every conversation across email, chat, and social.</p></div>
<div class="fcard fin"><h4>Fin AI Agent</h4><p>Resolve tickets instantly with your own AI agent.</p></div>
<div class="fcard"><h4>Proactive support</h4><p>Answer questions before customers even ask.</p></div>
</div>
<footer>
<span>© Intercom</span>
<span>Intercom · Product · Fin AI · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5a2b82; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5a2b82; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #af9ac1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6fbf4e; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5a2b82; color: #6fbf4e;
border: 1px solid #6fbf4e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5a2b82; color: #f5f5f5;
border: 1px solid #734b94; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #af9ac1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d437a; color: #6fbf4e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F5F3F8; color:#1F1A2B; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#FFFFFF; border-bottom:1px solid #E5E1EC; }
.brand { font-size:19px; font-weight:900; color:#1F1A2B; letter-spacing:-0.3px; margin:0; }
.navtabs { display:flex; gap:26px; font-size:13px; font-weight:700; color:#9C92AD; }
.navtabs span.on { color:#5A2B82; }
.navpill { background:#6FBF4E; color:#14302A; border-radius:999px; padding:8px 18px; font-size:13px; font-weight:800; }
.wrap { display:flex; gap:22px; padding:22px 36px; }
.left { width:372px; display:flex; flex-direction:column; align-items:center; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#6E6480; }
.total { font-size:36px; font-weight:900; letter-spacing:-1pt; margin:2px 0 0; }
.delta { font-size:13px; font-weight:700; color:#6FBF4E; margin-top:4px; }
.delta span { color:#6E6480; font-weight:600; }
.donutbox { position:relative; width:150px; height:150px; margin:18px 0 6px; }
.donut { width:150px; height:150px; border-radius:50%;
background:conic-gradient(#5A2B82 0deg 136.8deg, #6FBF4E 136.8deg 230.4deg, #45C2B0 230.4deg 295.2deg, #F2C84B 295.2deg 360deg); }
.donuthole { position:absolute; left:20px; top:20px; width:110px; height:110px; border-radius:50%;
background:#F5F3F8; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donuthole .style { font-size:9px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#6E6480; }
.donuthole .pct { font-size:15px; font-weight:800; margin-top:2px; }
.legend { width:100%; margin-top:10px; }
.lrow { display:flex; align-items:center; padding:6px 4px; border-bottom:1px solid #E5E1EC; font-size:13px; }
.lrow:last-child { border-bottom:none; }
.chip { width:11px; height:11px; border-radius:3px; margin-right:9px; flex-shrink:0; }
.lname { font-weight:700; flex:1; }
.lpct { color:#6E6480; font-weight:600; margin-right:12px; }
.lval { font-weight:800; width:64px; text-align:right; }
.right { flex:1; display:flex; flex-direction:column; gap:16px; }
.roundups { border-radius:18px; padding:18px 20px; color:#FFFFFF;
background:linear-gradient(150deg, #5A2B82, #7B43A8);
box-shadow:0 10px 24px -12px rgba(74,32,106,0.4); }
.ru-top { display:flex; align-items:center; justify-content:space-between; }
.ru-eyebrow { font-size:12px; font-weight:700; letter-spacing:0.4px; opacity:0.85; text-transform:uppercase; }
.ru-auto { background:rgba(255,255,255,0.16); border-radius:999px; padding:3px 10px; font-size:10px; font-weight:800; }
.ru-amt { font-size:28px; font-weight:900; margin-top:8px; }
.ru-sub { font-size:12px; font-weight:600; opacity:0.8; margin-top:2px; }
.earn-title { font-size:13px; font-weight:800; color:#6E6480; text-transform:uppercase; letter-spacing:0.4px; }
.earnrow { display:flex; align-items:center; padding:10px 0; border-bottom:1px solid #E5E1EC; }
.earnrow:last-child { border-bottom:none; }
.brandchip { width:38px; height:38px; border-radius:11px; margin-right:12px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; }
.ename { font-weight:700; font-size:14px; }
.esub { font-size:12px; color:#6E6480; font-weight:600; margin-top:1px; }
.eplus { margin-left:auto; color:#6FBF4E; font-weight:800; font-size:14px; }
.cta { margin-top:auto; background:#6FBF4E; color:#14302A; text-align:center; font-weight:800; font-size:15px;
border-radius:999px; padding:13px 0; }
</style></head>
<body>
<nav>
<p class="brand">Acorns (iOS)</p>
<div class="navtabs"><span class="on">Invest</span><span>Later</span><span>Spend</span><span>Earn</span></div>
<span class="navpill">Invest now</span>
</nav>
<div class="wrap">
<div class="left">
<span class="eyebrow">All Time</span>
<div class="total">$8,142.67</div>
<div class="delta">▲ $214.38 (2.7%) <span>all time</span></div>
<div class="donutbox">
<div class="donut"></div>
<div class="donuthole"><span class="style">Aggressive</span><span class="pct">100% invested</span></div>
</div>
<div class="legend">
<div class="lrow"><span class="chip" style="background:#5A2B82"></span><span class="lname">Large Company</span><span class="lpct">38%</span><span class="lval">$3,094</span></div>
<div class="lrow"><span class="chip" style="background:#6FBF4E"></span><span class="lname">Small Company</span><span class="lpct">26%</span><span class="lval">$2,117</span></div>
<div class="lrow"><span class="chip" style="background:#45C2B0"></span><span class="lname">International</span><span class="lpct">18%</span><span class="lval">$1,466</span></div>
<div class="lrow"><span class="chip" style="background:#F2C84B"></span><span class="lname">Real Estate</span><span class="lpct">18%</span><span class="lval">$1,466</span></div>
</div>
</div>
<div class="right">
<div class="roundups">
<div class="ru-top"><span class="ru-eyebrow">Round-Ups</span><span class="ru-auto">Auto</span></div>
<div class="ru-amt">$4.62</div>
<div class="ru-sub">Pending · invests at $5.00</div>
</div>
<div>
<div class="earn-title">Found Money</div>
<div class="earnrow">
<span class="brandchip" style="background:#F2785C">N</span>
<div><div class="ename">Nike</div><div class="esub">1% back · 3 days ago</div></div>
<span class="eplus">+$3.20</span>
</div>
<div class="earnrow">
<span class="brandchip" style="background:#45C2B0">W</span>
<div><div class="ename">Walmart</div><div class="esub">2% back · 5 days ago</div></div>
<span class="eplus">+$1.86</span>
</div>
<div class="earnrow">
<span class="brandchip" style="background:#F2C84B">A</span>
<div><div class="ename">Apple</div><div class="esub">3% back · 1 week ago</div></div>
<span class="eplus">+$5.94</span>
</div>
</div>
<div class="cta">Invest now</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0093c1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0093c1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c9de; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008fc7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0093c1; color: #000000;
border: 1px solid #008fc7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0093c1; color: #f5f5f5;
border: 1px solid #27a3c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c9de; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0092c2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0c0e1f; box-sizing:border-box;
font-family: Roboto, "Noto Sans TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
nav { height:60px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #d7d6db; }
.logo { font-size:19px; font-weight:700; color:#0093c1; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:400; color:#0c0e1f; }
.navlinks .active { color:#0093c1; border-bottom:2px solid #0093c1; padding-bottom:4px; }
.navright { display:flex; align-items:center; gap:14px; font-size:13px; color:#494a57; }
.hero { flex:0 0 auto; background:#f3fbfe; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; }
.hero h1 { font-size:24px; font-weight:400; line-height:1.35; margin:0 0 6px; color:#0c0e1f; }
.hero p { font-size:14px; color:#494a57; margin:0; }
.herobtn { background:#008fc7; color:#ffffff; border-radius:0px; height:44px; padding:0 22px; display:flex;
align-items:center; font-size:14px; font-weight:400; white-space:nowrap; }
.iconsec { flex:0 0 auto; padding:16px 32px 6px; }
.iconsec .lbl { font-size:13px; font-weight:700; color:#0c0e1f; margin-bottom:10px; }
.icongrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.icell { display:flex; flex-direction:column; align-items:center; gap:6px; }
.icircle { width:40px; height:40px; border-radius:50%; background:#0093c1; display:flex; align-items:center;
justify-content:center; color:#ffffff; font-size:15px; font-weight:700; }
.icell span { font-size:11px; color:#494a57; text-align:center; }
.cardsrow { flex:1 1 auto; display:flex; gap:18px; padding:14px 32px 22px; min-height:0; }
.card-white { flex:1.3; background:#ffffff; border-radius:0px; box-shadow:rgba(0,0,0,0.11) 5px 5px 30px 0px;
padding:16px 18px; min-width:0; }
.card-white h3 { font-size:16px; font-weight:700; margin:0 0 10px; color:#0c0e1f; }
.fxrow { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid #f5f5f5;
color:#0c0e1f; }
.fxrow span:last-child { color:#494a57; }
.card-sky { flex:1; background:#f5f5f5; border-radius:0px; padding:16px 18px; display:flex; flex-direction:column;
justify-content:space-between; min-width:0; }
.card-sky h3 { font-size:16px; font-weight:700; margin:0 0 8px; color:#0c0e1f; }
.card-sky p { font-size:12px; color:#494a57; line-height:1.5; margin:0 0 10px; }
.badge-teal { display:inline-block; background:#00a59b; color:#ffffff; border-radius:4px; padding:3px 8px; font-size:11px; align-self:flex-start; }
.learnmore { color:#0093c1; font-size:13px; font-weight:500; margin-top:8px; }
</style></head>
<body>
<div class="wrap">
<nav>
<div class="logo">Fubon</div>
<div class="navlinks">
<span class="active">Personal Banking</span><span>Credit Cards</span><span>Loans</span><span>Insurance</span><span>Wealth Management</span>
</div>
<div class="navright"><span>Search</span><span>Log In</span></div>
</nav>
<div class="hero">
<div>
<h1>Positive Power. Endless Possibility.</h1>
<p>Banking, insurance, and investment — one trusted group for every stage of life.</p>
</div>
<div class="herobtn">Learn More</div>
</div>
<div class="iconsec">
<div class="lbl">Popular Services</div>
<div class="icongrid">
<div class="icell"><div class="icircle">$</div><span>Transfer</span></div>
<div class="icell"><div class="icircle">FX</div><span>Exchange Rate</span></div>
<div class="icell"><div class="icircle">CC</div><span>Credit Card</span></div>
<div class="icell"><div class="icircle">%</div><span>Loans</span></div>
</div>
</div>
<div class="cardsrow">
<div class="card-white">
<h3>Foreign Exchange Rate</h3>
<div class="fxrow"><span>USD / TWD</span><span>31.42</span></div>
<div class="fxrow"><span>JPY / TWD</span><span>0.2109</span></div>
<div class="fxrow"><span>EUR / TWD</span><span>34.08</span></div>
<div class="fxrow" style="border-bottom:none;"><span>CNY / TWD</span><span>4.372</span></div>
</div>
<div class="card-sky">
<div>
<span class="badge-teal">Sustainable</span>
<h3 style="margin-top:10px;">All-Round Protection</h3>
<p>Digital account opening, savings, and insurance in one connected app — Fubon+.</p>
</div>
<div class="learnmore">Learn More →</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0e2a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0e2a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8d9a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #12152e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0e2a; color: #ffffff;
border: 1px solid #12152e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0e2a; color: #f5f5f5;
border: 1px solid #30334a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8d9a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b0f2b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0A0E2A; color:#FFFFFF; box-sizing:border-box; font-family:'Avenir Next',-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; position:relative; }
.stars { position:absolute; inset:0; background-image:
radial-gradient(1px 1px at 40px 60px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 120px 20px, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 220px 90px, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 340px 40px, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 500px 70px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 650px 30px, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 780px 80px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 880px 20px, rgba(255,255,255,0.3), transparent);
}
.billboard { height:340px; position:relative; background:linear-gradient(160deg,#1a2450,#3a2a55 60%,#0A0E2A); }
.scrim { position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,#0A0E2A 100%); }
.logoart { position:absolute; bottom:80px; left:40px; font-size:44px; font-weight:900; letter-spacing:-1pt; text-shadow:0 4px 24px rgba(0,0,0,0.6); }
.metastrip { position:absolute; bottom:56px; left:42px; font-size:13px; font-weight:600; letter-spacing:0.3pt; color:#A0A6C0; }
.ctarow { position:absolute; bottom:16px; left:40px; display:flex; gap:12px; }
.playbtn { background:#fff; color:#0A0E2A; font-weight:700; font-size:15px; padding:11px 26px; border-radius:8px; display:flex; align-items:center; gap:8px; box-shadow:0 6px 22px rgba(26,117,255,0.30); }
.secbtn { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.24); color:#fff; font-weight:600; font-size:13px; padding:11px 22px; border-radius:8px; }
.portals { display:flex; gap:14px; padding:20px 40px; }
.portal { width:160px; height:96px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; border:1px solid #2A3050; flex-shrink:0; }
.portal.sel { border:2px solid #1A75FF; box-shadow:0 0 24px rgba(26,117,255,0.30); }
.shelf { padding:0 40px; }
.shelf h4 { font-size:18px; font-weight:700; margin:0 0 12px; }
.cardrow { display:flex; gap:12px; }
.card169 { width:180px; height:101px; border-radius:6px; position:relative; flex-shrink:0; }
.card169 .prog { position:absolute; bottom:0; left:0; right:0; height:3px; background:#0063E5; }
.card169 .bar60 { width:60%; height:100%; background:#0063E5; }
</style>
</head>
<body>
<div class="stage">
<div class="billboard">
<div class="stars"></div>
<div class="scrim"></div>
<div style="position:absolute; top:20px; left:40px; font-size:16px; font-weight:800; letter-spacing:0.5pt; z-index:2;">Disney+ (iOS)</div>
<div class="logoart">EMBER TRAIL</div>
<div class="metastrip">Action · PG-13 · 2024 · 2h 11m</div>
<div class="ctarow">
<div class="playbtn">▶ Play</div>
<div class="secbtn">+ Watchlist</div>
</div>
</div>
<div class="portals">
<div class="portal sel" style="background:linear-gradient(135deg,#0a2e6e,#0063E5)">DISNEY</div>
<div class="portal" style="background:linear-gradient(135deg,#0a3a6e,#1478c9)">PIXAR</div>
<div class="portal" style="background:linear-gradient(135deg,#5c0a0a,#a51616)">MARVEL</div>
<div class="portal" style="background:linear-gradient(135deg,#1a1a1a,#3a3a3a);color:#F2C200">STAR WARS</div>
<div class="portal" style="background:linear-gradient(135deg,#7a5a00,#c99700)">NAT GEO</div>
</div>
<div class="shelf">
<h4>Continue Watching</h4>
<div class="cardrow">
<div class="card169" style="background:linear-gradient(135deg,#3a2050,#1a3a5a)"><div class="prog"><div class="bar60"></div></div></div>
<div class="card169" style="background:linear-gradient(135deg,#5a1a1a,#2a1010)"><div class="prog"><div class="bar60" style="width:30%"></div></div></div>
<div class="card169" style="background:linear-gradient(135deg,#1a2a1a,#0a1a2a)"><div class="prog"><div class="bar60" style="width:85%"></div></div></div>
<div class="card169" style="background:linear-gradient(135deg,#2a1a3a,#4a2a5a)"><div class="prog"><div class="bar60" style="width:10%"></div></div></div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #798490; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #6ed59f; color: #1c1c1c;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: transparent; color: #242e39;
border: 1px solid #6ed59f; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #798490; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; background: #e2f7ec; color: #2c5540;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f9f9; color:#1c1c1c; box-sizing:border-box;
font-family:'Lato', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; background:#242e39; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:700; }
.navlinks .active { border-bottom:2px solid #6ed59f; padding-bottom:20px; margin-bottom:-21px; }
main { flex:1 1 auto; display:flex; gap:20px; padding:18px 30px; min-height:0; }
.left { flex:1; border-radius:8px; position:relative; min-height:0;
background:#f9f9f9; border:1px solid #e6e6e6; }
.left::after { content:''; position:absolute; inset:20px; border-radius:50%;
background:radial-gradient(circle, #2c5540 0 12%, transparent 13%),
conic-gradient(#6ed59f 0 8deg, transparent 8deg 24deg, #6ed59f 24deg 32deg, transparent 32deg 48deg,
#6ed59f 48deg 56deg, transparent 56deg 72deg, #6ed59f 72deg 80deg, transparent 80deg 96deg,
#6ed59f 96deg 104deg, transparent 104deg 120deg, #6ed59f 120deg 128deg, transparent 128deg 144deg,
#6ed59f 144deg 152deg, transparent 152deg 168deg, #6ed59f 168deg 176deg, transparent 176deg 192deg,
#6ed59f 192deg 200deg, transparent 200deg 216deg, #6ed59f 216deg 224deg, transparent 224deg 240deg,
#6ed59f 240deg 248deg, transparent 248deg 264deg, #6ed59f 264deg 272deg, transparent 272deg 288deg,
#6ed59f 288deg 296deg, transparent 296deg 312deg, #6ed59f 312deg 320deg, transparent 320deg 336deg,
#6ed59f 336deg 344deg, transparent 344deg 360deg);
}
.right { flex:1; display:flex; flex-direction:column; min-height:0; }
.cat-badge { display:inline-block; background:#e2f7ec; color:#2c5540; font-size:11px; font-weight:700; letter-spacing:1px;
text-transform:uppercase; padding:4px 10px; margin-bottom:8px; align-self:flex-start; }
.title { font-size:22px; font-weight:700; margin:0 0 6px; }
.price { font-size:24px; font-weight:700; margin:0 0 12px; }
.btnrow { display:flex; gap:10px; margin-bottom:14px; }
.btn-primary { background:#6ed59f; color:#1c1c1c; border:none; border-radius:8px; padding:12px 24px; font-weight:700; font-size:14px; }
.btn-secondary { background:transparent; border:2px solid #242e39; color:#242e39; border-radius:8px; padding:10px 22px; font-weight:700; font-size:14px; }
.spectable { flex:1; background:#f9f9f9; border:1px solid #e6e6e6; border-radius:8px; padding:10px 14px; min-height:0; }
.srow { display:flex; justify-content:space-between; font-size:12px; padding:6px 0; border-bottom:1px solid #eeeeee; }
.srow span:first-child { text-transform:uppercase; letter-spacing:0.5px; font-size:11px; font-weight:700; color:#798490; }
footer { flex:0 0 auto; height:52px; background:#161c22; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
footer .links { color:#bcc1c7; display:flex; gap:16px; }
</style></head>
<body>
<nav>
<p class="brand">Arctic</p>
<div class="navlinks"><span class="active">Fans</span><span>CPU Coolers</span><span>Cases</span><span>Thermal Compound</span></div>
</nav>
<main>
<div class="left"></div>
<div class="right">
<span class="cat-badge">Fan</span>
<h1 class="title">P14 PWM PST — 140mm Case Fan</h1>
<div class="price">$14.99</div>
<div class="btnrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compatibility</button>
</div>
<div class="spectable">
<div class="srow"><span>Airflow (CFM)</span><span>82.5</span></div>
<div class="srow"><span>Static Pressure</span><span>2.81 mmH₂O</span></div>
<div class="srow"><span>Noise Level</span><span>29.7 dBA</span></div>
<div class="srow"><span>Bearing Type</span><span>Fluid Dynamic</span></div>
</div>
</div>
</main>
<footer>
<span>© Arctic</span>
<div class="links"><span>Value Quality Performance</span><span>Support</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.75px; background: #ffc800; color: #231f20;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.75px; background: #ffffff; color: #231f20;
border: 1px solid #ffc800; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #231f20;
border: 1px solid #c8c7c7; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.25; letter-spacing: 0.75px; background: #ffc800; color: #231f20;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231f20; box-sizing:border-box;
font-family:'akzidenz-grotesk-next', 'akzidenz-grotesk-next-pro', Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; background:#231f20; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-family:'akzidenz-grotesk-next-extend','akzidenz-grotesk-next',sans-serif; font-size:20px;
font-weight:700; letter-spacing:0.5px; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:500; letter-spacing:0.3px; }
.navlinks span.hot { color:#ffc800; }
.navicons { font-size:15px; color:#ffc800; }
.banner { height:32px; background:#088f87; color:#ffffff; display:flex; align-items:center;
justify-content:center; font-family:'akzidenz-grotesk-next-conden','akzidenz-grotesk-next',sans-serif;
font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.hero { height:132px; background:#231f20; color:#ffffff; display:flex; flex-direction:column;
justify-content:center; padding:0 40px; gap:6px; }
.hero h1 { font-family:'akzidenz-grotesk-next-extend','akzidenz-grotesk-next',sans-serif; font-size:32px;
font-weight:700; line-height:1.08; letter-spacing:-0.25px; margin:0; max-width:520px; }
.hero p { font-size:14px; color:#dedede; margin:0; max-width:460px; }
.hero button { margin-top:6px; align-self:flex-start; background:#ffc800; color:#231f20; border:none;
border-radius:0; padding:11px 22px; font-size:12px; font-weight:700; letter-spacing:0.75px;
text-transform:uppercase; cursor:default; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 40px; background:#f0f0f0; }
.card { background:#ffffff; padding:8px; display:flex; flex-direction:column; gap:4px; position:relative; }
.thumb { position:relative; width:100%; height:120px; }
.t1 { background:linear-gradient(135deg,#e7b6a1,#c46a4d 60%,#7a3a29); }
.t2 { background:linear-gradient(135deg,#a9c9c6,#3f8b84 60%,#1d4c47); }
.t3 { background:linear-gradient(135deg,#f0dca0,#d1a231 60%,#7c5f16); }
.badge { position:absolute; top:6px; left:6px; background:#ffc800; color:#231f20; font-size:10px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; }
.badge.sale { background:#f6e70f; }
.card .artist { font-family:'akzidenz-grotesk-next-conden','akzidenz-grotesk-next',sans-serif;
font-size:15px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; margin:4px 0 0; }
.card .title { font-size:12px; color:#3a3535; margin:0; }
.row2 { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.price { font-size:16px; font-weight:700; }
.edition { font-size:10px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#888888;
border:1px solid #dedede; padding:2px 7px; }
footer { background:#231f20; color:#ffffff; padding:0 40px; height:78px; border-top:3px solid #ffc800;
display:flex; align-items:center; justify-content:space-between; }
.footcol span { display:block; font-size:11px; color:#dedede; line-height:1.9; }
.footcol .head { font-family:'akzidenz-grotesk-next-conden','akzidenz-grotesk-next',sans-serif;
font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#ffffff; margin-bottom:2px; }
</style></head>
<body>
<nav>
<p class="brand">Artspace</p>
<div class="navlinks"><span>Photography</span><span>Painting</span><span>Prints</span><span class="hot">New Arrivals</span></div>
<div class="navicons">⚲</div>
</nav>
<div class="banner">Artist of the Week — Curated Picks</div>
<section class="hero">
<h1>Own an Original</h1>
<p>Limited-run prints and originals from emerging and established artists.</p>
<button>Shop the Collection</button>
</section>
<section class="cards">
<div class="card">
<div class="thumb t1"><span class="badge">£320</span></div>
<p class="artist">Dana Wolfe</p>
<p class="title">Terracotta Study I</p>
<div class="row2"><span class="edition">12 of 150</span><span class="price">£320</span></div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge sale">Sale</span></div>
<p class="artist">Ren Okafor</p>
<p class="title">Deep Water Series</p>
<div class="row2"><span class="edition">40 of 200</span><span class="price">£210</span></div>
</div>
<div class="card">
<div class="thumb t3"><span class="badge">£455</span></div>
<p class="artist">Priya Nair</p>
<p class="title">Gold Field Triptych</p>
<div class="row2"><span class="edition">3 of 25</span><span class="price">£455</span></div>
</div>
</section>
<footer>
<div class="footcol"><span class="head">About</span><span>Our Story</span></div>
<div class="footcol"><span class="head">Artists</span><span>Browse All</span></div>
<div class="footcol"><span class="head">Categories</span><span>Photography · Painting</span></div>
<div class="footcol"><span class="head">Artspace</span><span>© Artspace</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #201d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #201d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #050505; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#201d1d; color:#fdfcfc; box-sizing:border-box;
font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid rgba(15,0,0,0.12); }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.02em; }
.navlinks { display:flex; gap:24px; font-size:16px; font-weight:500; }
.navlinks span { text-decoration:underline; color:#9a9898; }
.navlinks span.gh { color:#fdfcfc; text-decoration:none; }
.wrap { display:flex; height:584px; }
.col-left { width:492px; padding:36px 32px 0; }
.eyebrow { color:#9a9898; font-size:14px; line-height:2.0; margin:0 0 6px; }
h1 { font-size:38px; font-weight:700; line-height:1.28; margin:0 0 14px; letter-spacing:-0.01em; }
h1 span { color:#9a9898; }
p.lead { font-size:16px; font-weight:400; line-height:1.5; color:#9a9898; margin:0 0 24px; max-width:420px; }
.install { background:#302c2c; border:1px solid #646262; border-radius:4px; padding:14px 16px;
font-size:14px; color:#fdfcfc; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.install .dollar { color:#9a9898; }
.row { display:flex; gap:12px; }
.btn { background:#201d1d; color:#fdfcfc; border:1px solid #646262; border-radius:4px;
padding:4px 20px; font-size:16px; font-weight:500; height:40px; display:flex; align-items:center; }
.btn.solid { background:#fdfcfc; color:#201d1d; border:1px solid #fdfcfc; }
.feature-list { margin-top:28px; }
.feature { padding:8px 0; font-size:16px; }
.feature b { font-weight:700; }
.feature .desc { color:#9a9898; font-weight:400; }
.feature .dot { color:#30d158; margin-right:8px; }
.col-right { flex:1; padding:36px 32px 0 0; }
.term { background:#171414; border:1px solid rgba(15,0,0,0.12); border-radius:4px;
height:480px; padding:16px; font-size:13px; line-height:2.0; overflow:hidden; }
.term .tbar { display:flex; gap:6px; margin-bottom:12px; }
.term .tbar i { width:10px; height:10px; border-radius:9999px; background:#646262; display:inline-block; }
.term .prompt { color:#30d158; }
.term .path { color:#007aff; }
.term .comment { color:#6e6e73; }
.term .out { color:#fdfcfc; }
.term .diff-add { color:#30d158; }
.term .diff-rm { color:#ff3b30; }
.term .muted { color:#9a9898; }
</style></head>
<body>
<nav>
<div class="brand">OpenCode AI</div>
<div class="navlinks"><span>Docs</span><span>Providers</span><span class="gh">GitHub</span></div>
</nav>
<div class="wrap">
<div class="col-left">
<p class="eyebrow">open source · terminal-first</p>
<h1>The AI coding<br>agent, <span>built for<br>the terminal.</span></h1>
<p class="lead">Any model. Any provider. Runs in your terminal, connects to any client.</p>
<div class="install"><span class="dollar">$</span> curl -fsSL https://get.OpenCode AI/install | sh</div>
<div class="row">
<div class="btn solid">Install</div>
<div class="btn">Read the docs</div>
</div>
<div class="feature-list">
<div class="feature"><span class="dot">▸</span><b>Provider agnostic</b> <span class="desc">— bring your own model</span></div>
<div class="feature"><span class="dot">▸</span><b>Client / server</b> <span class="desc">— terminal, desktop, or web</span></div>
<div class="feature"><span class="dot">▸</span><b>Self-hostable</b> <span class="desc">— your infra, your rules</span></div>
</div>
</div>
<div class="col-right">
<div class="term">
<div class="tbar"><i></i><i></i><i></i></div>
<div class="out"><span class="prompt">➜</span> <span class="path">~/projects/app</span> OpenCode AI chat</div>
<div class="muted comment"># connected to provider: anthropic/claude</div>
<div class="out">> refactor the auth middleware to use sessions</div>
<div class="out muted">reading src/middleware/auth.ts ...</div>
<div class="out muted">applying patch to 2 files</div>
<div class="diff-rm">- import { verifyToken } from './jwt'</div>
<div class="diff-add">+ import { getSession } from './session'</div>
<div class="diff-add">+ export async function auth(req) {</div>
<div class="diff-add">+ return getSession(req.cookies.sid)</div>
<div class="diff-add">+ }</div>
<div class="out muted">2 files changed, running tests ...</div>
<div class="out">✓ 14 passed</div>
<div class="out"><span class="prompt">➜</span> <span class="path">~/projects/app</span> <span class="muted">_</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5741d9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5741d9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aea4e8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7132f5; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5741d9; color: #ffffff;
border: 1px solid #7132f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5741d9; color: #f5f5f5;
border: 1px solid #705edd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea4e8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5b3fdd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101114; box-sizing:border-box;
font-family:"Kraken-Product","Helvetica Neue",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden; display:flex; }
/* sidebar */
.kr-side { flex:0 0 176px; border-right:1px solid #dedee5; padding:20px 16px; display:flex; flex-direction:column; gap:4px; }
.kr-brand { font-family:"Kraken-Brand","IBM Plex Sans",sans-serif; font-size:19px; font-weight:700; letter-spacing:-0.5px; margin:0 0 18px 6px; }
.kr-navitem { font-size:14px; font-weight:500; color:#686b82; padding:10px 12px; border-radius:12px; }
.kr-navitem.on { background:rgba(133,91,251,0.16); color:#7132f5; font-weight:600; }
/* main */
.kr-main { flex:1; padding:24px 28px; overflow:hidden; }
.kr-topline { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.kr-headline { display:flex; align-items:center; gap:10px; }
.kr-headline h1 { font-family:"Kraken-Brand","IBM Plex Sans",sans-serif; font-size:28px; font-weight:700;
letter-spacing:-0.5px; margin:0; }
.kr-sym { font-size:13px; font-weight:500; color:#9497a9; background:rgba(148,151,169,0.08); padding:3px 8px; border-radius:8px; }
.kr-tf { display:flex; gap:6px; }
.kr-pill { font-size:12px; font-weight:500; padding:6px 12px; border-radius:12px; color:#686b82; }
.kr-pill.on { background:#7132f5; color:#ffffff; }
.kr-price-row { display:flex; align-items:flex-end; gap:12px; margin-bottom:14px; }
.kr-price { font-family:"Kraken-Brand","IBM Plex Sans",sans-serif; font-size:36px; font-weight:700; letter-spacing:-1px; }
.kr-delta { font-size:14px; font-weight:600; color:#026b3f; background:rgba(20,158,97,0.16); padding:4px 10px; border-radius:6px; margin-bottom:4px; }
.kr-chart-wrap { border:1px solid rgba(148,151,169,0.16); border-radius:12px; padding:14px 16px;
box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; margin-bottom:16px; }
.kr-stats { display:flex; gap:12px; margin-bottom:16px; }
.kr-stat { flex:1; background:#ffffff; border:1px solid rgba(148,151,169,0.16); border-radius:16px; padding:14px 16px;
box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }
.kr-stat .lbl { font-size:12px; font-weight:500; color:#686b82; }
.kr-stat .val { font-size:20px; font-weight:700; color:#101114; margin-top:4px; }
.kr-actions { display:flex; gap:12px; }
.kr-btn-primary { flex:1; background:#7132f5; color:#ffffff; border:none; padding:13px 16px; border-radius:12px;
font-size:16px; font-weight:500; }
.kr-btn-outline { flex:1; background:#ffffff; color:#5741d8; border:1px solid #5741d8; padding:13px 16px; border-radius:12px;
font-size:16px; font-weight:500; }
/* order book (right rail baked into main via absolute) */
.kr-book { position:absolute; right:28px; top:24px; width:186px; }
.kr-book-card { background:linear-gradient(135deg,#7132f5 0%, #5741d8 100%); color:#ffffff; border-radius:16px;
padding:16px 18px; box-shadow: inset 0 0 60px rgba(255,255,255,0.08); }
.kr-book-card .t { font-size:13px; font-weight:600; opacity:0.9; }
.kr-book-card .v { font-size:22px; font-weight:700; margin-top:6px; }
.kr-book-card .s { font-size:11px; opacity:0.75; margin-top:8px; }
</style></head>
<body>
<div class="stage">
<div class="kr-side">
<p class="kr-brand">Kraken</p>
<div class="kr-navitem">Trade</div>
<div class="kr-navitem on">Assets</div>
<div class="kr-navitem">Learn</div>
<div class="kr-navitem">Security</div>
</div>
<div class="kr-main" style="position:relative;">
<div class="kr-topline">
<div class="kr-headline">
<h1>Bitcoin</h1>
<span class="kr-sym">BTC</span>
</div>
<div class="kr-tf">
<span class="kr-pill">1D</span>
<span class="kr-pill on">1W</span>
<span class="kr-pill">1M</span>
<span class="kr-pill">1Y</span>
</div>
</div>
<div class="kr-price-row">
<div class="kr-price">$68,214.50</div>
<div class="kr-delta">▲ 2.34%</div>
</div>
<div class="kr-chart-wrap">
<svg width="560" height="150" viewBox="0 0 560 150">
<defs>
<linearGradient id="krFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7132f5" stop-opacity="0.25"/>
<stop offset="100%" stop-color="#7132f5" stop-opacity="0"/>
</linearGradient>
</defs>
<polyline points="0,100 40,92 80,104 120,80 160,88 200,60 240,70 280,44 320,58 360,38 400,50 440,28 480,36 520,18 560,26"
fill="none" stroke="#7132f5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<polygon points="0,100 40,92 80,104 120,80 160,88 200,60 240,70 280,44 320,58 360,38 400,50 440,28 480,36 520,18 560,26 560,150 0,150"
fill="url(#krFill)"/>
</svg>
</div>
<div class="kr-stats">
<div class="kr-stat"><div class="lbl">Market Cap</div><div class="val">$1.34T</div></div>
<div class="kr-stat"><div class="lbl">24h Volume</div><div class="val">$28.6B</div></div>
<div class="kr-stat"><div class="lbl">Circulating Supply</div><div class="val">19.7M BTC</div></div>
</div>
<div class="kr-actions">
<button class="kr-btn-primary">Buy BTC</button>
<button class="kr-btn-outline">Sell BTC</button>
</div>
<div class="kr-book">
<div class="kr-book-card">
<div class="t">Portfolio balance</div>
<div class="v">$4,920.11</div>
<div class="s">Held by Jamie · 0.0721 BTC</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a82d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a82d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d29b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a82d; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a82d; color: #f5f5f5;
border: 1px solid #27b44d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d29b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29b64f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#1C2B33; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; }
.list { width:300px; background:#FAFAFA; border-right:1px solid #E4E5E5; padding:18px 0; }
.listh { font-size:22px; font-weight:700; padding:0 16px 12px; }
.row { padding:14px 16px; border-bottom:1px solid #E4E5E5; }
.row.sel { background:#E6F4EA; }
.row .t { font-size:15px; font-weight:600; }
.row .s { font-size:14px; color:#5C6970; margin-top:2px; }
.row .d { font-size:12px; color:#8C969C; margin-top:4px; }
.editor { flex:1; padding:24px 30px; }
.metaline { font-size:12px; color:#8C969C; margin-top:6px; }
.title { font-size:24px; font-weight:700; margin-top:10px; }
.tags { display:flex; gap:8px; margin-top:12px; }
.tag { background:#E6F4EA; color:#1F7A33; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; }
.body { margin-top:18px; font-size:16px; line-height:1.6; }
.h2 { font-size:20px; font-weight:700; margin-top:20px; }
.checklist { margin-top:12px; }
.citem { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:15px; }
.cbox { width:19px; height:19px; border-radius:5px; border:2px solid #8C969C; }
.cbox.checked { background:#00A82D; border:none; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
.strike { text-decoration:line-through; color:#8C969C; }
</style>
</head>
<body>
<div class="stage">
<div class="list">
<div style="font-size:11px;font-weight:700;color:#00A82D;letter-spacing:0.5pt;text-transform:uppercase;padding:0 16px 6px">Evernote (iOS)</div>
<div class="listh">Notes</div>
<div class="row sel"><div class="t">Product Launch Plan</div><div class="s">Q3 roadmap, timeline, blockers to resolve...</div><div class="d">Updated May 16 · Work</div></div>
<div class="row"><div class="t">Grocery List</div><div class="s">Milk, eggs, spinach, coffee beans</div><div class="d">May 14 · Personal</div></div>
<div class="row"><div class="t">Book Notes: Sapiens</div><div class="s">Ch 4 — the agricultural revolution...</div><div class="d">May 12 · Reading</div></div>
</div>
<div class="editor">
<div class="metaline">Updated May 16 · Work notebook</div>
<div class="title">Product Launch Plan</div>
<div class="tags"><span class="tag">roadmap</span><span class="tag">q3</span><span class="tag">team</span></div>
<div class="body">
Notes from the sync with design and eng. Ship date holds if QA passes by Friday.
<div class="h2">Checklist</div>
<div class="checklist">
<div class="citem"><div class="cbox checked">✓</div><span class="strike">Finalize onboarding copy</span></div>
<div class="citem"><div class="cbox checked">✓</div><span class="strike">Review pricing tiers with sales</span></div>
<div class="citem"><div class="cbox"></div><span>QA sign-off on payment flow</span></div>
<div class="citem"><div class="cbox"></div><span>Schedule launch day standup</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff2233; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff2233; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa969e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff1414; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff2233; color: #000000;
border: 1px solid #ff1414; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff2233; color: #f5f5f5;
border: 1px solid #fd4452; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa969e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff202e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2a303a; box-sizing:border-box;
font-family:"Apple SD Gothic Neo", "Noto Sans", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.sidebar-header { height:100px; background:#FF2233; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; }
.brand { font-size:20px; font-weight:700; color:#ffffff; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#ffffff; opacity:0.92; }
.wrap { padding:26px 36px; }
.hero-row { display:flex; gap:20px; align-items:center; margin-bottom:22px; }
.hero-copy h1 { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0 0 8px; color:#2d2d2d; }
.hero-copy p { font-size:13px; color:#666666; margin:0 0 14px; max-width:340px; line-height:1.4; }
.btn-primary { background:#FF2233; color:#ffffff; border:1px solid #FF2233; border-radius:8px;
padding:12px 22px; font-size:14px; font-weight:700; }
.point-card { flex:1; background:#f4f6fa; border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:6px; }
.point-card .label { font-size:11px; color:#666666; }
.point-card .amount { font-size:30px; font-weight:700; color:#FF2233; letter-spacing:-0.5px; }
.point-card .sub { font-size:11px; color:#999999; }
.tabs { display:flex; gap:10px; margin-bottom:16px; }
.tab { font-size:13px; font-weight:400; padding:8px 16px; border-radius:100px; color:#191919; border:1px solid #d4d4d4; }
.tab.active { background:#565960; color:#ffffff; border-color:#565960; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.service { background:#ffffff; border:1px solid #ededed; border-radius:8px; padding:16px 10px; text-align:center; }
.service .icon { width:34px; height:34px; border-radius:9999px; background:#FF2233; margin:0 auto 8px; opacity:0.9; }
.service .name { font-size:12px; color:#2a303a; font-weight:400; }
.list-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #ededed; }
.list-row .name { font-size:12px; color:#2a303a; }
.list-row .amt { font-size:12px; color:#666666; }
</style></head>
<body>
<div class="sidebar-header">
<p class="brand">PAYCO</p>
<div class="navlinks"><span>Pay</span><span>Points</span><span>Finance</span><span>Documents</span></div>
</div>
<div class="wrap">
<div class="hero-row">
<div class="hero-copy">
<h1>Filling the gaps in everyday life</h1>
<p>Solid points, easy payments, and simple finance — all in one app. Go with PAYCO.</p>
<button class="btn-primary">Pay Now</button>
</div>
<div class="point-card">
<span class="label">Points Balance</span>
<span class="amount">12,480 P</span>
<span class="sub">Earned this month +1,220 P</span>
</div>
</div>
<div class="tabs">
<span class="tab active">All</span>
<span class="tab">Pay</span>
<span class="tab">Points</span>
<span class="tab">Finance</span>
</div>
<div class="grid">
<div class="service"><div class="icon"></div><div class="name">Easy Pay</div></div>
<div class="service"><div class="icon"></div><div class="name">Points Shop</div></div>
<div class="service"><div class="icon"></div><div class="name">Document Vault</div></div>
<div class="service"><div class="icon"></div><div class="name">Campus</div></div>
</div>
<div style="margin-top:16px;">
<div class="list-row"><span class="name">Transfer to Alex Kim</span><span class="amt">-$15.00</span></div>
<div class="list-row"><span class="name">Convenience store rewards</span><span class="amt">+120 P</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a14; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a14; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b90; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #140e26; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a14; color: #ffffff;
border: 1px solid #140e26; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a14; color: #f5f5f5;
border: 1px solid #303038; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b90; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0c0b17; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A14; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.screen { position:relative; width:960px; height:640px; overflow:hidden; }
.topbar { position:absolute; top:0; left:0; right:0; height:48px; z-index:5; display:flex;
align-items:center; justify-content:space-between; padding:0 24px; }
.logo { display:flex; align-items:center; gap:8px; }
.feather { width:26px; height:26px; border-radius:50%;
background:conic-gradient(from 200deg,#FACC15,#F97316,#EC4899,#8B5CF6,#2563EB,#FACC15); }
.wordmark { font-size:19px; font-weight:800; letter-spacing:-0.3px; }
.top-icons { font-size:15px; color:#fff; opacity:0.9; }
.hero { position:relative; height:340px; background:
linear-gradient(135deg,#241a3f 0%,#140E26 55%,#0A0A14 100%); }
.hero::after { content:''; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 38%, rgba(10,10,20,0.7) 70%, #0A0A14 100%); }
.hero-content { position:absolute; left:0; right:0; bottom:28px; z-index:2; display:flex;
flex-direction:column; align-items:center; gap:10px; text-align:center; }
.eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:#FACC15; }
.hero-title { font-size:30px; font-weight:800; letter-spacing:-0.5px; }
.hero-meta { font-size:13px; color:#B5B2C2; }
.hero-meta span { margin:0 6px; }
.hero-btns { display:flex; gap:10px; margin-top:6px; }
.btn-white { background:#FFFFFF; color:#0A0A14; font-weight:700; font-size:15px; padding:12px 26px;
border-radius:6px; display:flex; align-items:center; gap:6px; }
.btn-glass { background:rgba(255,255,255,0.14); color:#fff; font-weight:600; font-size:13px;
padding:11px 18px; border-radius:6px; }
.channels { padding:14px 0 4px 18px; display:flex; gap:10px; overflow:hidden; }
.chtile { width:56px; height:56px; border-radius:14px; flex-shrink:0; display:flex; align-items:center;
justify-content:center; font-size:10px; font-weight:800; color:#fff; position:relative; }
.chtile.nbc { background:linear-gradient(135deg,#1E3A8A,#0F1E4D); }
.chtile.bravo { background:linear-gradient(135deg,#6D28D9,#3B1576); }
.chtile.usa { background:linear-gradient(135deg,#0E7490,#073B47); }
.chtile.e { background:linear-gradient(135deg,#F97316,#7c2d05); }
.chtile.snl { background:linear-gradient(135deg,#E5142B,#5c0510); }
.live-pill { position:absolute; top:-6px; right:-6px; background:#E5142B; color:#fff; font-size:8px;
font-weight:800; padding:2px 5px; border-radius:4px; letter-spacing:0.4px; }
.row-header { padding:16px 0 8px 18px; font-size:16px; font-weight:700; letter-spacing:-0.1px; }
.poster-row { display:flex; gap:10px; padding:0 0 4px 18px; overflow:hidden; }
.poster { width:104px; height:150px; border-radius:8px; flex-shrink:0; position:relative;
background:linear-gradient(160deg,#3a2f5c,#1a1530); }
.poster.p1 { background:linear-gradient(160deg,#5c2f4a,#1a1530); }
.poster.p2 { background:linear-gradient(160deg,#2f5c4a,#1a1530); }
.poster.p3 { background:linear-gradient(160deg,#5c4a2f,#1a1530); }
.poster.p4 { background:linear-gradient(160deg,#2f3a5c,#1a1530); }
.poster.p5 { background:linear-gradient(160deg,#4a2f5c,#1a1530); }
.rank { position:absolute; bottom:6px; left:6px; background:rgba(10,10,20,0.55); color:#fff;
font-size:15px; font-weight:800; padding:1px 8px; border-radius:5px; }
.top10badge { position:absolute; top:6px; left:6px; font-size:8px; font-weight:800; text-transform:uppercase;
color:#fff; padding:2px 6px; border-radius:4px; background:linear-gradient(90deg,#F97316,#EC4899); }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:52px; background:rgba(10,10,20,0.96);
border-top:0.5px solid #2C2545; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:10px; color:#7A7689; display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab.active { color:#fff; }
.tab .ic { width:18px; height:18px; border-radius:4px; background:#7A7689; }
.tab.active .ic { background:#fff; }
</style></head>
<body>
<div class="screen">
<div class="hero">
<div class="topbar">
<div class="logo"><div class="feather"></div><div class="wordmark">Peacock (iOS)</div></div>
<div class="top-icons">🔍 👤</div>
</div>
<div class="hero-content">
<div class="eyebrow">New Original Series</div>
<div class="hero-title">Midnight Harbor</div>
<div class="hero-meta"><span>2026</span>·<span>Drama</span>·<span>TV-MA</span></div>
<div class="hero-btns">
<div class="btn-white">▶ Play</div>
<div class="btn-glass">+ My Stuff</div>
</div>
</div>
</div>
<div class="channels">
<div class="chtile nbc">NBC<span class="live-pill">LIVE</span></div>
<div class="chtile bravo">BRAVO</div>
<div class="chtile usa">USA</div>
<div class="chtile e">E!</div>
<div class="chtile snl">SNL</div>
</div>
<div class="row-header">Top 10 Today</div>
<div class="poster-row">
<div class="poster p1"><span class="top10badge">Top 10</span><span class="rank">1</span></div>
<div class="poster p2"><span class="rank">2</span></div>
<div class="poster p3"><span class="rank">3</span></div>
<div class="poster p4"><span class="rank">4</span></div>
<div class="poster p5"><span class="rank">5</span></div>
</div>
<div class="tabbar">
<div class="tab active"><div class="ic"></div>Home</div>
<div class="tab"><div class="ic"></div>Channels</div>
<div class="tab"><div class="ic"></div>Search</div>
<div class="tab"><div class="ic"></div>My Stuff</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #2a2c6b; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #ffffff; color: #2a2c6b;
border: 1px solid #2a2c6b; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #5a7d2c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Lato','Open Sans',sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:monospace; }
nav { height:58px; background:#2a2c6b; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:17px; font-weight:700; letter-spacing:.03em; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#c7c8de; }
.navlinks span.on { color:#ffffff; font-weight:700; }
.lot-search { background:#ffffff; border-radius:4px; padding:7px 14px; font-size:11px; color:#1a1a1a; width:190px; }
.wrap { display:flex; height:522px; padding:24px 30px; gap:28px; }
.photo { width:280px; flex-shrink:0; background:#f2f2f2; border-radius:8px; position:relative; display:flex; align-items:center; justify-content:center; }
.helmet { width:140px; height:100px; border-radius:70px 70px 20px 20px / 60px 60px 16px 16px; background:linear-gradient(160deg,#5a7d2c,#3f5a1e); box-shadow:0 6px 0 rgba(0,0,0,.08); }
.badge-auth { position:absolute; top:14px; left:14px; background:#5a7d2c; color:#fff; font-size:10px; font-weight:700; padding:5px 10px; border-radius:4px; }
.badge-feat { position:absolute; top:14px; right:14px; background:#f68721; color:#fff; font-size:10px; font-weight:700; padding:5px 10px; border-radius:4px; }
.lot-num { position:absolute; bottom:14px; left:14px; font-size:11px; color:#555555; }
.info { flex:1; display:flex; flex-direction:column; gap:12px; }
.info h1 { margin:0; font-size:23px; font-weight:700; }
.provenance { font-size:12px; color:#555555; }
.price-row { display:flex; align-items:baseline; gap:12px; }
.price { font-size:24px; font-weight:700; color:#2a2c6b; }
.price-note { font-size:11px; color:#f68721; font-weight:700; }
.grade-table { display:flex; gap:20px; border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; padding:10px 0; font-size:12px; }
.grade-table div b { display:block; color:#1a1a1a; font-size:12px; }
.grade-table div span { color:#555555; font-size:11px; }
.desc { font-size:12.5px; color:#333333; line-height:1.6; max-width:480px; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#2a2c6b; color:#fff; border:none; border-radius:4px; padding:13px; font-size:13px; font-weight:700; }
.btn-inquire { border:1px solid #2a2c6b; color:#2a2c6b; border-radius:4px; padding:13px 20px; font-size:13px; }
footer { height:60px; background:#194769; color:#a9c1d6; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:10.5px; }
</style></head>
<body>
<nav>
<p class="brand">1944 Militaria</p>
<div class="navlinks"><span>Uniforms</span><span class="on">Headgear</span><span>Medals & Insignia</span><span>Field Gear</span></div>
<span class="lot-search mono">LOT #4471</span>
</nav>
<div class="wrap">
<div class="photo">
<span class="badge-auth">Authenticated</span>
<span class="badge-feat">Featured Lot</span>
<div class="helmet"></div>
<span class="lot-num mono">SN-4471-B</span>
</div>
<div class="info">
<h1>M1 Officer's Field Helmet, European Theater, 1944</h1>
<span class="provenance">Provenance: Private US collection, acquired 2011 · Original liner intact</span>
<div class="price-row">
<span class="price">$1,850.00</span>
<span class="price-note">3 collectors watching</span>
</div>
<div class="grade-table">
<div><b>Condition</b><span>Grade A-</span></div>
<div><b>Era</b><span>1944, ETO</span></div>
<div><b>Maker</b><span>McCord Radiator Co.</span></div>
</div>
<p class="desc">Front-seam fixed-bale shell with correct heat lot stamp, paired with a period liner showing honest service wear. Accompanied by a signed letter of authenticity and full condition report.</p>
<div class="buy-row">
<button class="btn-buy">Purchase Lot</button>
<button class="btn-inquire">Ask a Question</button>
</div>
</div>
</div>
<footer><span>© 1944 Militaria — every lot authenticated before listing</span><span>Authentication Policy · Insured Shipping · Returns</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0f0f3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #f0f0f3;
border: 1px solid #f0f0f3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #262627; color: #f0f0f3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f0f0f3; color:#1c2024; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.wrap { display:flex; flex-direction:column; height:640px; }
nav { height:64px; flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#ffffff; border-bottom:1px solid #e0e1e6; }
.brand { font-size:16px; font-weight:600; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#60646c; }
.navlinks span:first-child { color:#0d74ce; }
.btn-primary { background:#000000; color:#ffffff; border:none; border-radius:36px;
padding:0 18px; height:36px; display:inline-flex; align-items:center; font-weight:500; font-size:13px; white-space:nowrap; }
main { flex:1; display:flex; gap:20px; padding:24px 32px; min-height:0; }
.pipeline { width:308px; display:flex; flex-direction:column; gap:10px; }
.pipeline h2 { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#80838d; margin:0 0 2px; }
.step { background:#ffffff; border:1px solid #d9d9e0; border-radius:8px; padding:12px 14px;
display:flex; align-items:center; gap:10px; }
.step .dot { width:9px; height:9px; border-radius:9999px; flex:0 0 9px; }
.dot.ok { background:#0d74ce; }
.dot.now { background:#000000; box-shadow:0 0 0 3px rgba(0,0,0,0.12); }
.dot.pending { background:#d9d9e0; }
.step .t { flex:1; min-width:0; }
.step .t .name { font-size:13px; font-weight:600; }
.step .t .sub { font-size:11px; color:#80838d; }
.step .st { font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#80838d; }
.step.now { border-color:#1c2024; }
.step.now .st { color:#1c2024; }
.term { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.phone { width:220px; height:388px; border-radius:28px; background:#1c2024; padding:10px; position:relative; }
.phone .screen { width:100%; height:100%; border-radius:20px; background:#0d0e10; overflow:hidden; padding:16px 14px; }
.phone .notch { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:64px; height:14px; border-radius:9999px; background:#000; }
.screen .line { font-size:10.5px; line-height:1.7; white-space:pre; }
.l-prompt { color:#66d9ef; }
.l-ok { color:#8ce99a; }
.l-dim { color:#6b7280; }
.l-cursor { color:#e6e6e6; }
.caption { max-width:220px; text-align:center; font-size:12px; color:#60646c; line-height:1.5; }
.caption b { color:#1c2024; }
footer { flex:0 0 40px; border-top:1px solid #e0e1e6; padding:0 32px; display:flex;
align-items:center; justify-content:space-between; font-size:11px; color:#80838d; background:#ffffff; }
</style></head>
<body>
<div class="wrap">
<nav>
<p class="brand">Expo</p>
<div class="navlinks"><span>Docs</span><span>Build</span><span>Submit</span><span>Pricing</span></div>
<button class="btn-primary">Get started</button>
</nav>
<main>
<div class="pipeline">
<h2>Build pipeline</h2>
<div class="step">
<span class="dot ok"></span>
<span class="t"><span class="name">Install</span><br><span class="sub">Dependencies resolved</span></span>
<span class="st">Done</span>
</div>
<div class="step">
<span class="dot ok"></span>
<span class="t"><span class="name">Bundle</span><br><span class="sub">JavaScript and native modules</span></span>
<span class="st">Done</span>
</div>
<div class="step now">
<span class="dot now"></span>
<span class="t"><span class="name">Build</span><br><span class="sub">Compiling for iOS and Android</span></span>
<span class="st">Running</span>
</div>
<div class="step">
<span class="dot pending"></span>
<span class="t"><span class="name">Submit</span><br><span class="sub">Store review queue</span></span>
<span class="st">Queued</span>
</div>
<div class="step">
<span class="dot pending"></span>
<span class="t"><span class="name">Update</span><br><span class="sub">Push a fix without a rebuild</span></span>
<span class="st">Queued</span>
</div>
</div>
<div class="term">
<div class="phone">
<div class="notch"></div>
<div class="screen mono">
<div class="line l-prompt">$ app build --platform all</div>
<div class="line l-ok">✓ Bundling JavaScript</div>
<div class="line l-ok">✓ Compiling native runtime</div>
<div class="line l-ok">✓ Uploading build artifact</div>
<div class="line l-dim">... waiting for store queue</div>
<div class="line l-cursor">█</div>
</div>
</div>
<p class="caption">Scan the build, install it on a real device, and iterate <b>without waiting on a store review.</b></p>
</div>
</main>
<footer>
<span>© Expo</span>
<span>Expo · Docs · Pricing · Status</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3a46cd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3a46cd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a1a6e3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a2232; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a46cd; color: #ffffff;
border: 1px solid #1a2232; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3a46cd; color: #f5f5f5;
border: 1px solid #5862d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a1a6e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3540b4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a2232; box-sizing:border-box;
font-family:"Pretendard",-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; border-bottom:1px solid #d0d1d3; }
.brand { font-size:18px; font-weight:700; margin:0; color:#1a2232; }
.navlinks { display:flex; gap:16px; font-size:16px; font-weight:600; }
.navlinks span.cur { color:#3a46cd; }
.action { background:#727887; color:#ffffff; padding:1px 6px; height:58px; display:flex; align-items:center; font-size:10px; font-weight:700; }
.hero { padding:60px 44px 30px; }
.hero h1 { font-size:48px; font-weight:700; margin:0 0 14px; max-width:600px; }
.hero p { font-size:15px; color:#595e6b; max-width:480px; line-height:27px; margin:0 0 20px; }
.row { display:flex; gap:12px; }
.dl { background:transparent; border:1px solid #727887; color:#1a2232; padding:11px 24px; font-size:13px; font-weight:600; }
.fl { background:transparent; border:1px solid #d0d1d3; color:#595e6b; padding:6px 12px 6px 16px; height:34px; font-size:12px; font-weight:600; display:flex; align-items:center; }
</style></head>
<body>
<nav>
<p class="brand">SK Telecom</p>
<div class="navlinks"><span class="cur">TECHNOLOGY</span><span>TOMORROW</span><span>TOGETHER</span></div>
<span class="action">OPEN</span>
</nav>
<section class="hero">
<h1>Technology, Tomorrow, Together</h1>
<p>Building the next chapter of an AI Company through technology and services that benefit customers.</p>
<div class="row"><span class="dl">Download Brand Assets</span><span class="fl">Learn more ›</span></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4efe1; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4efe1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfcfa; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#2A2A1F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.screen { display:flex; flex-direction:column; width:960px; height:640px; }
nav { height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.3px; color:#4C8B2B; }
.navsearch { width:120px; height:26px; border-radius:999px; background:#FAF6EC; border:1px solid #E7E0CF; }
.rewards { margin:0 24px; border-radius:18px; padding:14px 18px;
background:linear-gradient(135deg,#4C8B2B,#6BBE45); box-shadow:rgba(60,40,10,0.10) 0 4px 16px;
display:flex; align-items:center; justify-content:space-between; }
.rw-left { flex:1; }
.rw-label { font-size:10px; font-weight:700; letter-spacing:0.4pt; text-transform:uppercase; color:rgba(255,255,255,0.92); }
.rw-headline { font-size:17px; font-weight:700; color:#FFFFFF; margin-top:3px; }
.rw-sub { font-size:11px; color:rgba(255,255,255,0.92); margin-top:3px; }
.rw-progress { width:220px; }
.rw-track { height:6px; border-radius:3px; background:rgba(255,255,255,0.28); }
.rw-fill { height:100%; width:64%; border-radius:3px; background:#FFFFFF; }
.rw-chev { font-size:18px; color:#FFFFFF; margin-left:14px; }
main { flex:1; display:grid; grid-template-columns:1.05fr 1fr; gap:18px; padding:16px 24px 0; min-height:0; }
.catstrip { display:flex; gap:10px; margin-bottom:10px; }
.cat { font-size:13px; font-weight:600; color:#6C6655; padding-bottom:4px; }
.cat.active { color:#4C8B2B; border-bottom:2px solid #4C8B2B; }
.mrow { display:flex; align-items:center; gap:12px; height:96px; border-bottom:0.5px solid #E7E0CF; }
.mphoto { width:80px; height:80px; border-radius:14px; flex:0 0 80px; }
.minfo { flex:1; min-width:0; }
.mname { font-size:15px; font-weight:600; }
.mdesc { font-size:12px; color:#6C6655; margin-top:2px; }
.mfoot { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.mprice { font-size:14px; font-weight:700; }
.madd { width:26px; height:26px; border-radius:50%; background:#4C8B2B; color:#fff; font-size:14px;
display:flex; align-items:center; justify-content:center; }
.detail { background:#F4EFE1; border-radius:18px; padding:16px; display:flex; flex-direction:column; overflow:hidden; }
.dphoto { width:100%; height:130px; border-radius:14px; background:linear-gradient(135deg,#E07A2F,#B0324B); }
.dname { font-size:18px; font-weight:600; margin-top:12px; }
.dmeta { font-size:13px; color:#6C6655; margin-top:2px; }
.drow { display:flex; align-items:center; justify-content:space-between; height:38px; border-bottom:0.5px solid #E7E0CF; }
.drow-label { font-size:14px; }
.drow.selected .drow-label { color:#4C8B2B; }
.drow-check { width:16px; height:16px; border-radius:4px; border:1.5px solid #E7E0CF; }
.drow.selected .drow-check { background:#4C8B2B; border-color:#4C8B2B; }
.stepper { display:flex; align-items:center; justify-content:center; gap:16px; background:#FAF6EC;
border:1px solid #E7E0CF; border-radius:999px; padding:6px 18px; width:fit-content; margin:12px auto 0; }
.stepper span { font-size:16px; font-weight:700; color:#4C8B2B; }
.stepper .count { font-size:15px; font-weight:700; color:#2A2A1F; }
.sticky-cta { margin-top:auto; background:#4C8B2B; color:#fff; border-radius:999px; text-align:center;
padding:12px; font-size:15px; font-weight:700; box-shadow:rgba(60,40,10,0.10) 0 4px 16px; }
.tabbar { flex:0 0 56px; display:flex; align-items:center; justify-content:space-around;
background:rgba(255,255,255,0.94); border-top:0.5px solid #E7E0CF; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab-dot { width:8px; height:8px; border-radius:50%; }
.tab.active .tab-dot { background:#4C8B2B; }
.tab:not(.active) .tab-dot { background:#9C9684; }
.tab-label { font-size:10px; font-weight:600; }
.tab.active .tab-label { color:#4C8B2B; }
.tab:not(.active) .tab-label { color:#9C9684; }
</style></head>
<body>
<div class="screen">
<nav>
<span class="brand">Panera (iOS)</span>
<div class="navsearch"></div>
</nav>
<div class="rewards">
<div class="rw-left">
<div class="rw-label">MyPanera Rewards</div>
<div class="rw-headline">You're 2 visits from a reward</div>
<div class="rw-sub">Unlimited Sip Club renews May 28</div>
</div>
<div class="rw-progress"><div class="rw-track"><div class="rw-fill"></div></div></div>
<span class="rw-chev">›</span>
</div>
<main>
<div>
<div class="catstrip">
<span class="cat active">Soups</span><span class="cat">Sandwiches</span><span class="cat">Salads</span>
<span class="cat">Bowls</span><span class="cat">Bakery</span>
</div>
<div class="mrow">
<div class="mphoto" style="background:linear-gradient(135deg,#E07A2F,#a85018);"></div>
<div class="minfo">
<div class="mname">Broccoli Cheddar Soup</div>
<div class="mdesc">Creamy soup with sharp cheddar and fresh broccoli, 720 cal</div>
<div class="mfoot"><span class="mprice">$7.59</span><span class="madd">+</span></div>
</div>
</div>
<div class="mrow">
<div class="mphoto" style="background:linear-gradient(135deg,#D8B271,#8c6a35);"></div>
<div class="minfo">
<div class="mname">Napa Almond Chicken Salad</div>
<div class="mdesc">On toasted country bread with lettuce and grapes, 580 cal</div>
<div class="mfoot"><span class="mprice">$9.29</span><span class="madd">+</span></div>
</div>
</div>
<div class="mrow">
<div class="mphoto" style="background:linear-gradient(135deg,#B0324B,#6e1b2e);"></div>
<div class="minfo">
<div class="mname">Strawberry Poppyseed Salad</div>
<div class="mdesc">Mixed greens, strawberries, candied pecans, 460 cal</div>
<div class="mfoot"><span class="mprice">$8.49</span><span class="madd">+</span></div>
</div>
</div>
</div>
<div class="detail">
<div class="dphoto"></div>
<div class="dname">Broccoli Cheddar Soup</div>
<div class="dmeta">720 cal · $7.59</div>
<div class="drow selected"><span class="drow-label">Sourdough Bread Bowl</span><span class="drow-check"></span></div>
<div class="drow"><span class="drow-label">No tomatoes <span style="color:#6C6655;font-weight:400;">+$1.49</span></span><span class="drow-check"></span></div>
<div class="stepper"><span>−</span><span class="count">1</span><span>+</span></div>
<div class="sticky-cta">Add to Order · $7.59</div>
</div>
</main>
<div class="tabbar">
<div class="tab active"><span class="tab-dot"></span><span class="tab-label">Home</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Order</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Rewards</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Favorites</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Account</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #41c9b4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #41c9b4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #27645a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2cb696; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #41c9b4; color: #000000;
border: 1px solid #2cb696; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #41c9b4; color: #111111;
border: 1px solid #39ac9a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #27645a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3ec6af; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f9f9; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif; }
* { box-sizing: border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
nav { flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; border-bottom:1px solid #ececec; }
.brand { display:flex; align-items:center; gap:8px; }
.brand .mark { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#41c9b4,#228d74); }
.brand .word { font-size:16px; font-weight:700; color:#222222; }
.navlinks { display:flex; gap:22px; font-size:12.5px; color:#615d59; }
.btn-primary { background:#000000; color:#ffffff; border:none; border-radius:999px; height:32px;
padding:0 18px; font-size:12.5px; font-weight:700; font-family:inherit; white-space:nowrap; }
.body { flex:1; padding:18px 40px 0; min-height:0; display:flex; flex-direction:column; gap:14px; }
.eyebrow { font-size:12px; font-weight:700; color:#2cb696; }
.featured { display:flex; gap:18px; background:#ffffff; border-radius:8px; padding:14px; align-items:stretch; }
.featured .thumb { flex:0 0 220px; border-radius:8px; background:linear-gradient(150deg,#41c9b4,#2cb696 55%,#228d74); position:relative; }
.featured .thumb::after { content:''; position:absolute; inset:0; border-radius:8px;
background:radial-gradient(circle at 25% 20%, rgba(255,255,255,0.25), transparent 60%); }
.featured .meta { display:flex; flex-direction:column; justify-content:center; gap:8px; padding:4px 6px; }
.featured h1 { margin:0; font-size:21px; font-weight:700; color:#222222; line-height:1.3; }
.featured p { margin:0; font-size:12.5px; color:#615d59; line-height:1.55; max-width:420px; }
.byline { display:flex; align-items:center; gap:8px; margin-top:4px; }
.avatar { width:22px; height:22px; border-radius:50%; background:#d8d8d8; }
.byline span { font-size:11.5px; color:#615d59; }
.byline b { color:#222222; font-weight:700; }
.grid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; min-height:0; }
.card { background:#ffffff; border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:8px; }
.card .thumb { flex:0 0 74px; border-radius:8px; }
.card .t1 { background:linear-gradient(150deg,#41c9b4,#a7e8dc); }
.card .t2 { background:linear-gradient(150deg,#2cb696,#c9c2ee); }
.card .t3 { background:linear-gradient(150deg,#228d74,#f0d9b5); }
.card h3 { margin:0; font-size:13px; font-weight:700; color:#222222; line-height:1.35; }
.card .row { display:flex; align-items:center; justify-content:space-between; font-size:10.5px; color:#8a8a8a; }
.card .row b { color:#615d59; font-weight:400; }
footer { flex:0 0 42px; padding:0 40px; display:flex; align-items:center; justify-content:space-between;
font-size:10.5px; color:#8a8a8a; background:#f7f9f9; }
</style></head>
<body>
<div class="page">
<nav>
<div class="brand"><span class="mark"></span><span class="word">note</span></div>
<div class="navlinks"><span>Home</span><span>Following</span><span>Notifications</span></div>
<button class="btn-primary">Write</button>
</nav>
<div class="body">
<span class="eyebrow">Today's picks</span>
<div class="featured">
<div class="thumb"></div>
<div class="meta">
<h1>What a decade of writing every day taught me</h1>
<p>A slow, honest look back at ten years of essays, false starts, and the readers who stayed.</p>
<div class="byline"><span class="avatar"></span><span><b>Sarah Lee</b> · 6 min read · Essay</span></div>
</div>
</div>
<div class="grid">
<div class="card">
<div class="thumb t1"></div>
<h3>Notes from a quiet studio</h3>
<div class="row"><b>John Smith</b><span>4 min</span></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<h3>Why I stopped chasing the algorithm</h3>
<div class="row"><b>Emily Chen</b><span>7 min</span></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<h3>A membership letter to my first 100 readers</h3>
<div class="row"><b>David Kim</b><span>3 min</span></div>
</div>
</div>
</div>
<footer>
<span>© note</span>
<span>note · create, connect, deliver</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #38383a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #38383a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #090909; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.content { padding:20px 34px 0; height:520px; }
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
h1.big { font-size:28px; font-weight:800; letter-spacing:-0.6px; margin:0; }
.brandtag { font-size:11px; font-weight:600; color:#98989F; }
.avatar { width:26px; height:26px; border-radius:50%; background:#2C2C2E; }
.hero { margin:0 12px; border-radius:16px; overflow:hidden; height:196px; position:relative;
background:linear-gradient(135deg,#1E3A5F 0%, #0F1E33 60%, #05090F 100%); }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 72%, rgba(0,0,0,0.92) 100%); }
.heroc { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:16px 20px; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#98989F; }
.herotitle { font-size:24px; font-weight:800; margin:6px 0 2px; letter-spacing:-0.4px; }
.herometa { font-size:11px; color:#98989F; margin-bottom:10px; }
.herobtns { display:flex; gap:10px; }
.playbtn { background:#fff; color:#000; font-size:12px; font-weight:600; padding:8px 20px; border-radius:12px; display:flex; align-items:center; gap:6px; }
.playbtn::before { content:''; border-left:7px solid #000; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.addbtn { width:32px; height:32px; border-radius:50%; background:rgba(120,120,128,0.36); display:flex; align-items:center; justify-content:center; font-size:16px; }
.rowhead { display:flex; justify-content:space-between; margin:18px 12px 8px; }
.rowhead h2 { font-size:17px; font-weight:700; margin:0; }
.more { font-size:11px; color:#0A84FF; }
.rail { display:flex; gap:10px; padding:0 12px; overflow:hidden; }
.thumb { width:150px; }
.art { height:84px; border-radius:10px; position:relative; }
.a1 { background:linear-gradient(150deg,#8E2A45,#2A0D18); }
.a2 { background:linear-gradient(150deg,#2A6E5A,#0B241C); }
.a3 { background:linear-gradient(150deg,#5A4A8E,#1A1530); }
.a4 { background:linear-gradient(150deg,#8E6A2A,#2A1D0B); }
.tag { position:absolute; top:6px; left:6px; background:rgba(0,0,0,0.4); font-size:7.5px; font-weight:700; padding:2px 5px; border-radius:5px; }
.resume { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.28); }
.resume::after { content:''; position:absolute; left:0; top:0; bottom:0; width:44%; background:#fff; }
.tt { font-size:12px; font-weight:600; margin:6px 0 1px; }
.ts { font-size:10.5px; color:#98989F; }
.mls { margin:16px 12px 0; display:flex; align-items:center; gap:12px; }
.mlschip { background:#ED1A6F; font-size:10px; font-weight:700; padding:5px 12px; border-radius:10px; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:60px; background:rgba(0,0,0,0.92);
backdrop-filter:blur(20px); border-top:1px solid #38383A; display:flex; align-items:center; }
.tab { flex:1; text-align:center; font-size:11px; font-weight:500; }
.tab .ic { width:20px; height:20px; margin:0 auto 3px; border-radius:5px; background:#636366; }
.tab.on { color:#0A84FF; }
.tab.on .ic { background:#0A84FF; }
</style></head>
<body>
<div class="content">
<div class="top"><h1 class="big">Watch Now</h1><span class="brandtag">Apple TV (iOS)</span><span class="avatar"></span></div>
<div class="hero">
<div class="heroc">
<span class="eyebrow">Apple TV+ · New Episode</span>
<div class="herotitle">Northbound</div>
<div class="herometa">S2 E4 · Drama · 48 min</div>
<div class="herobtns"><span class="playbtn">Play</span><span class="addbtn">+</span></div>
</div>
</div>
<div class="rowhead"><h2>Up Next</h2><span class="more">See All</span></div>
<div class="rail">
<div class="thumb"><div class="art a1"><span class="tag">Apple TV+</span><span class="resume"></span></div><div class="tt">Northbound</div><div class="ts">S2 E4 · 24 min left</div></div>
<div class="thumb"><div class="art a2"><span class="tag">Apple TV+</span><span class="resume"></span></div><div class="tt">Silent Harbor</div><div class="ts">S1 E1 · 6 min left</div></div>
<div class="thumb"><div class="art a3"><span class="tag">Apple TV+</span><span class="resume"></span></div><div class="tt">The Long Room</div><div class="ts">Movie · 41 min left</div></div>
<div class="thumb"><div class="art a4"><span class="tag">Apple TV+</span><span class="resume"></span></div><div class="tt">Ember Fields</div><div class="ts">S3 E8 · 12 min left</div></div>
</div>
<div class="mls"><span class="mlschip">MLS Season Pass</span><span style="font-size:11px;color:#98989F;">Live: Union FC vs. Crew — 2nd half</span></div>
</div>
<div class="tabbar">
<div class="tab on"><div class="ic"></div>Watch Now</div>
<div class="tab"><div class="ic"></div>TV+</div>
<div class="tab"><div class="ic"></div>Store</div>
<div class="tab"><div class="ic"></div>Search</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202632; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064ff; color: #202632;
border: 1px solid #202632; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064ff; color: #f5f5f5;
border: 1px solid #277bfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #055ade; color: #202632;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #e5e8eb; }
.brand { font-size:16px; font-weight:700; }
.brand span { color:#0064ff; }
.hero { padding:36px 34px 24px; text-align:center; }
h1 { font-size:40px; font-weight:700; margin:0 0 12px; line-height:1.25; }
.sub { font-size:15px; color:#4e5968; margin:0 0 20px; }
.pillcta { display:inline-block; background:#fdfdfe; border:1px solid #e5e8eb; border-radius:100px;
padding:18px 32px; font-size:16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:6px 34px; }
.tile { border:1px solid #d1d6db; border-radius:8px; padding:22px 18px; background:#ffffff; }
.tile .t { font-size:17px; font-weight:700; margin-bottom:6px; }
.tile .d { font-size:13px; color:#6b7684; line-height:1.5; }
.tile .rate { font-size:22px; font-weight:700; color:#0064ff; margin-top:10px; }
.docs { display:flex; gap:16px; padding:24px 34px 0; align-items:center; }
.tab { font-size:16px; padding:9px 14px; color:#212529; border-bottom:2px solid transparent; }
.tab.on { border-color:#212529; font-weight:700; }
.outline { margin-left:auto; border:1px solid #4e5968; color:#4e5968; border-radius:40px; padding:4px 10px; font-size:11px; font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">Toss Bank <span>Bank</span></div>
<span style="font-size:13px;color:#4e5968">24-hour customer support</span>
</nav>
<section class="hero">
<h1>A bank that keeps<br>changing for you</h1>
<p class="sub">Interest builds from day one. Start in minutes, no branch visit needed.</p>
<span class="pillcta">Open an account</span>
</section>
<div class="grid">
<div class="tile"><div class="t">Everyday savings</div><div class="d">Interest calculated daily, paid every day.</div><div class="rate">2.0%</div></div>
<div class="tile"><div class="t">Foreign exchange</div><div class="d">No fee currency exchange, held in the app.</div><div class="rate">0% fee</div></div>
<div class="tile"><div class="t">Personal loans</div><div class="d">See your rate before you apply, instantly.</div><div class="rate">from 3.9%</div></div>
</div>
<div class="docs">
<span class="tab on">Product disclosure</span>
<span class="tab">Protected products</span>
<span class="outline">Details</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faae87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff793e; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5700; color: #000000;
border: 1px solid #ff793e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5700; color: #f5f5f5;
border: 1px solid #fd7027; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faae87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff5c0a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#050403; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.herodark { height:236px; background:#050403; padding:26px 40px; display:flex; flex-direction:column;
justify-content:space-between; }
.herotop { display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:600; font-size:17px; color:#f8f7f4; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#f8f7f4; opacity:0.75; }
.navlinks span.active { opacity:1; color:#ff793e; }
.herobody h1 { font-size:38px; font-weight:600; letter-spacing:-1.4px; line-height:1.05; margin:0 0 8px;
color:#f8f7f4; max-width:600px; }
.herobody p { font-size:14px; color:#a09e9a; margin:0 0 14px; max-width:520px; line-height:1.5; }
.ctarow { display:flex; gap:10px; }
.btn-primary { background:#ff5700; color:#ffffff; border-radius:6px; padding:0 18px; height:40px;
font-size:14px; font-weight:500; display:flex; align-items:center; white-space:nowrap; }
.btn-ghost { background:transparent; color:#f8f7f4; border:1px solid rgba(255,255,255,0.25); border-radius:6px;
padding:0 18px; height:40px; font-size:14px; font-weight:500; display:flex; align-items:center; white-space:nowrap; }
.specwrap { padding:22px 40px; background:#ffffff; height:284px; }
.spechead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.spechead h2 { font-size:22px; font-weight:600; letter-spacing:-0.6px; margin:0; color:#050403; }
.spechead a { font-size:13px; font-weight:500; color:#dd4300; }
.table { border:1px solid #dfdeda; border-radius:6px; overflow:hidden; }
.trow { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; }
.trow.head { background:#f8f7f4; }
.trow.head div { font-size:11px; font-weight:600; color:#65635f; text-transform:uppercase; letter-spacing:0.04em; }
.trow div { padding:11px 16px; font-size:13px; color:#050403; border-top:1px solid #dfdeda; }
.trow.head div { border-top:none; }
.trow:nth-child(2) div { border-top:none; }
.accentcell { color:#ff5700; font-weight:600; }
.callouts { display:flex; gap:16px; margin-top:16px; }
.callout-inverse { flex:1; background:#050403; color:#f8f7f4; border-radius:6px; padding:14px 18px; }
.callout-inverse .k { font-size:20px; font-weight:600; letter-spacing:-0.6px; }
.callout-inverse .d { font-size:12px; color:#a09e9a; margin-top:2px; }
.callout-accent { flex:1; background:#ff5700; color:#ffffff; border-radius:6px; padding:14px 18px; }
.callout-accent .k { font-size:20px; font-weight:600; letter-spacing:-0.6px; }
.callout-accent .d { font-size:12px; color:rgba(255,255,255,0.85); margin-top:2px; }
.callout-plain { flex:1; background:#f8f7f4; border:1px solid #dfdeda; color:#050403; border-radius:6px;
padding:14px 18px; }
.callout-plain .k { font-size:20px; font-weight:600; letter-spacing:-0.6px; }
.callout-plain .d { font-size:12px; color:#65635f; margin-top:2px; }
footer { height:120px; background:#1c1a18; padding:20px 40px; display:flex; flex-direction:column;
justify-content:space-between; }
footer .frow { display:flex; align-items:center; justify-content:space-between; }
footer .fbrand { color:#f8f7f4; font-weight:600; font-size:14px; }
footer .flinks { display:flex; gap:20px; }
.pill { border:1px solid #2a2926; color:#a09e9a; border-radius:6px; padding:6px 12px; font-size:11px;
letter-spacing:0.06em; }
footer .fcopy { font-size:11px; color:#65635f; letter-spacing:0.04em; }
</style></head>
<body>
<section class="herodark">
<div class="herotop">
<p class="brand">Moreh</p>
<div class="navlinks"><span class="active">Products</span><span>Solutions</span><span>Performance</span><span>Resources</span><span>Company</span></div>
</div>
<div class="herobody">
<h1>Optimal LLM Inference on Every Accelerator</h1>
<p>The MoAI Inference Framework runs frontier models on the hardware you already have — no single-vendor lock-in, no rewritten stack.</p>
<div class="ctarow">
<button class="btn-primary">Request Demo</button>
<button class="btn-ghost">View Benchmarks</button>
</div>
</div>
</section>
<section class="specwrap">
<div class="spechead">
<h2>MoAI Inference Framework — spec sheet</h2>
<a>View all benchmarks →</a>
</div>
<div class="table">
<div class="trow head">
<div>Accelerator</div><div>Throughput</div><div>Cost / token</div><div>Cluster fabric</div>
</div>
<div class="trow">
<div>AMD Instinct MI300X</div><div class="accentcell">1.00x baseline</div><div>$0.42</div><div>MoAI Fabric</div>
</div>
<div class="trow">
<div>Tenstorrent Wormhole</div><div>0.94x</div><div>$0.31</div><div>MoAI Fabric</div>
</div>
<div class="trow">
<div>Mixed heterogeneous cluster</div><div>1.08x</div><div>$0.27</div><div>MoAI Fabric</div>
</div>
</div>
<div class="callouts">
<div class="callout-inverse"><div class="k">Vendor-neutral</div><div class="d">One framework, every accelerator</div></div>
<div class="callout-accent"><div class="k">Request Demo</div><div class="d">See it on your own workload</div></div>
<div class="callout-plain"><div class="k">Disaggregated serving</div><div class="d">Prefill and decode scale independently</div></div>
</div>
</section>
<footer>
<div class="frow">
<span class="fbrand">Moreh</span>
<div class="flinks">
<span class="pill">Privacy Policy</span>
<span class="pill">Terms of Use</span>
<span class="pill">Careers</span>
</div>
</div>
<span class="fcopy">Infrastructure software for hyperscale AI</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0075de; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0075de; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bbeb; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005bab; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0075de; color: #000000;
border: 1px solid #005bab; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0075de; color: #f5f5f5;
border: 1px solid #2789e2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bbeb; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0071d6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"NotionInter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { width:960px; height:640px; display:flex; }
.sidebar { flex:0 0 220px; height:640px; background:#f9f9f8; border-right:1px solid rgba(0,0,0,0.08);
padding:16px 12px; display:flex; flex-direction:column; gap:2px; }
.ws { display:flex; align-items:center; gap:8px; padding:6px 8px; margin-bottom:10px; }
.ws .mark { width:20px; height:20px; border-radius:5px; background:#0075de; }
.ws span { font-size:13px; font-weight:600; color:rgba(0,0,0,0.9); }
.sidebar .item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:5px;
font-size:12.5px; color:rgba(0,0,0,0.65); }
.sidebar .item.active { background:rgba(0,0,0,0.06); color:rgba(0,0,0,0.95); font-weight:500; }
.sidebar .icon { width:14px; height:14px; border-radius:3px; background:rgba(0,0,0,0.16); flex:0 0 14px; }
.sidebar .sep { height:1px; background:rgba(0,0,0,0.08); margin:10px 4px; }
.sidebar .label { font-size:10.5px; color:rgba(0,0,0,0.4); padding:4px 8px; text-transform:uppercase; letter-spacing:0.04em; }
.main { flex:1; height:640px; display:flex; flex-direction:column; min-width:0; }
.topbar { flex:0 0 48px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid rgba(0,0,0,0.08); }
.crumb { font-size:12.5px; color:rgba(0,0,0,0.54); }
.crumb b { color:rgba(0,0,0,0.9); font-weight:500; }
.btn-primary { background:#0075de; color:#ffffff; border:1px solid transparent; border-radius:8px;
height:32px; padding:0 16px; font-size:13px; font-weight:500; font-family:inherit; white-space:nowrap; }
.doc { flex:1; padding:24px 40px; overflow:hidden; min-height:0; }
.doc h1 { margin:0 0 14px; font-size:26px; font-weight:700; color:rgba(0,0,0,0.95); letter-spacing:-0.4px; }
.bar { height:9px; border-radius:5px; background:rgba(0,0,0,0.08); margin-bottom:8px; }
.bar.w1 { width:96%; } .bar.w2 { width:88%; } .bar.w3 { width:62%; }
.todo { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:13px; color:rgba(0,0,0,0.75); }
.todo .box { width:14px; height:14px; border-radius:3px; border:1.5px solid rgba(0,0,0,0.3); flex:0 0 14px; }
.todo .box.done { background:#0075de; border-color:#0075de; }
.todo.done span { text-decoration:line-through; color:rgba(0,0,0,0.4); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.card { background:#ffffff; border:1px solid rgba(0,0,0,0.1); border-radius:12px; padding:14px; }
.card .chip { display:inline-block; font-size:10px; font-weight:500; color:#0075de; background:#e6f3fe;
border-radius:999px; padding:2px 8px; margin-bottom:8px; }
.card h3 { margin:0 0 4px; font-size:13.5px; font-weight:600; color:rgba(0,0,0,0.95); }
.card p { margin:0; font-size:11px; color:rgba(0,0,0,0.54); line-height:1.4; }
footer { flex:0 0 34px; padding:0 40px; display:flex; align-items:center; font-size:10.5px; color:rgba(0,0,0,0.4); }
</style></head>
<body>
<div class="page">
<div class="sidebar">
<div class="ws"><span class="mark"></span><span>Notion</span></div>
<div class="item active"><span class="icon"></span>Getting Started</div>
<div class="item"><span class="icon"></span>Project Plan</div>
<div class="item"><span class="icon"></span>Templates</div>
<div class="item"><span class="icon"></span>Trash</div>
<div class="sep"></div>
<div class="label">Shared</div>
<div class="item"><span class="icon"></span>Team Wiki</div>
<div class="item"><span class="icon"></span>Roadmap</div>
</div>
<div class="main">
<div class="topbar">
<div class="crumb">Workspace / <b>Project Plan</b></div>
<button class="btn-primary">Share</button>
</div>
<div class="doc">
<h1>Q4 Launch Plan</h1>
<div class="bar w1"></div>
<div class="bar w2"></div>
<div class="bar w3"></div>
<div class="todo"><span class="box done"></span><span>Draft the product brief</span></div>
<div class="todo done"><span class="box done"></span><span>Align on scope with design</span></div>
<div class="todo"><span class="box"></span><span>Schedule the kickoff review</span></div>
<div class="cards">
<div class="card"><span class="chip">Docs</span><h3>Building blocks</h3><p>Compose pages from flexible, configurable blocks.</p></div>
<div class="card"><span class="chip">Projects</span><h3>Toolmaking, made ubiquitous</h3><p>Shape software around the work, not the other way around.</p></div>
<div class="card"><span class="chip">AI</span><h3>A companion you can mold</h3><p>Surface intent and sources, keep control in your hands.</p></div>
</div>
</div>
<footer>Notion Workspace</footer>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #53fc18; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e10; color: #53fc18;
border: 1px solid #53fc18; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e10; color: #f5f5f5;
border: 1px solid #333335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #193411; color: #53fc18;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E10; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.main { flex:1; display:flex; flex-direction:column; }
.player { height:340px; background:linear-gradient(135deg,#1F1F23,#0E0E10); position:relative; display:flex; align-items:center; justify-content:center; }
.live { position:absolute; top:14px; left:14px; background:#FF1F44; font-size:11px; font-weight:900; letter-spacing:0.04em;
padding:4px 9px; border-radius:4px; }
.viewers { position:absolute; top:14px; left:66px; background:rgba(0,0,0,0.55); font-size:11px; font-weight:700; padding:4px 9px; border-radius:4px; }
.playicon { color:rgba(255,255,255,0.5); font-size:56px; }
.streamerbar { padding:12px 14px; display:flex; align-items:center; gap:12px; background:#161618; border-bottom:1px solid #2D2D31; }
.savatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#53FC18,#161618); border:2px solid #53FC18; }
.sname { font-size:15px; font-weight:800; display:flex; align-items:center; gap:6px; }
.check { color:#53FC18; font-size:13px; }
.scat { font-size:12px; color:#A6A6AD; margin-top:2px; }
.followbtn { margin-left:auto; background:#53FC18; color:#0E0E10; font-weight:800; font-size:13px; padding:8px 18px; border-radius:6px; }
.chat { width:320px; flex:0 0 auto; background:#161618; display:flex; flex-direction:column; border-left:1px solid #2D2D31; }
.chathead { padding:12px 14px; font-size:12px; font-weight:800; color:#A6A6AD; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid #2D2D31; }
.chatmsgs { flex:1; padding:10px 14px; overflow:hidden; }
.cmsg { font-size:13px; margin-bottom:9px; line-height:1.4; }
.badge { font-size:9px; font-weight:800; padding:1px 5px; border-radius:3px; margin-right:5px; }
.uname { font-weight:700; }
.body-c { color:#E4E4E9; }
.chatinput { padding:10px 14px; background:#1F1F23; display:flex; gap:8px; align-items:center; }
.cfield { flex:1; height:32px; background:#2A2A2E; border-radius:6px; }
.sendc { background:#53FC18; color:#0E0E10; font-weight:800; font-size:12px; padding:0 12px; height:32px; border-radius:6px; display:flex; align-items:center; }
</style></head>
<body>
<div class="wrap">
<div class="main">
<div class="player"><span class="live">LIVE</span><span class="viewers">12.4K</span><span class="playicon">▶</span></div>
<div class="streamerbar">
<div class="savatar"></div>
<div><div class="sname">Kick (iOS)<span class="check">✓</span></div><div class="scat">Just Chatting · 12,431 viewers</div></div>
<div class="followbtn">Follow</div>
</div>
</div>
<div class="chat">
<div class="chathead">Stream Chat</div>
<div class="chatmsgs">
<div class="cmsg"><span class="badge" style="background:#3EA6FF;color:#06121F;">MOD</span><span class="uname" style="color:#3EA6FF;">rileym: </span><span class="body-c">welcome everyone to the stream!</span></div>
<div class="cmsg"><span class="badge" style="background:#FFC700;color:#1A1500;">12</span><span class="uname" style="color:#FFC700;">devon_k: </span><span class="body-c">POGGERS that clip 🔥</span></div>
<div class="cmsg"><span class="badge" style="background:#FF4FD8;color:#2A0022;">VIP</span><span class="uname" style="color:#FF4FD8;">nika: </span><span class="body-c">let's gooo</span></div>
<div class="cmsg"><span class="uname" style="color:#7CE7A4;">guest2291: </span><span class="body-c">first time here, this is awesome</span></div>
<div class="cmsg" style="background:rgba(83,252,24,0.12);border-left:2px solid #53FC18;padding-left:8px;">
<span class="uname" style="color:#53FC18;">Kick (iOS): </span><span class="body-c">@guest2291 welcome! 🎉</span></div>
</div>
<div class="chatinput"><div class="cfield"></div><div class="sendc">Chat</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #635bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #635bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b3b0fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #414552; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #635bff; color: #ffffff;
border: 1px solid #414552; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #635bff; color: #f5f5f5;
border: 1px solid #7a74fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b3b0fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5e57e3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#414552; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #d4dee9; }
.brand { font-size:15px; font-weight:700; color:#1a2c44; }
.search { background:#ffffff; border:1px solid #d4dee9; border-radius:8px; height:30px; width:220px;
display:flex; align-items:center; padding:2px 8px; font-size:13px; color:#5469d4; }
.navlinks { display:flex; gap:18px; font-size:13px; }
.navlinks span.on { color:#414552; font-weight:600; border-bottom:2px solid #414552; padding-bottom:14px; }
.navlinks span { color:#50617a; }
.wrap { display:flex; height:calc(640px - 52px - 30px); }
.side { width:200px; border-right:1px solid #d4dee9; padding:16px 14px; }
.side .grp { font-size:11px; font-weight:600; text-transform:uppercase; color:#5c5e62; margin:12px 0 6px; }
.side .item { font-size:13px; color:#414552; padding:6px 8px; border-radius:8px; margin-bottom:2px; }
.side .item.on { background:#f4f7fa; color:#273951; font-weight:600; }
.content { flex:1; padding:20px 28px; }
.content h1 { font-size:32px; font-weight:700; line-height:1.25; margin:0 0 8px; color:#1a2c44; }
.content p.lead { font-size:14px; color:#414552; line-height:1.43; margin:0 0 14px; }
.badge-row { display:flex; gap:8px; margin-bottom:14px; }
.badge { border:1px solid #d4dee9; border-radius:8px; padding:2px 8px; font-size:12px; color:#414552; }
.code { background:#f4f7fa; border:1px solid #d4dee9; border-radius:8px; padding:14px 16px;
font-family:"SF Mono", Menlo, monospace; font-size:12px; line-height:1.7; color:#414552; }
.code .k { color:#5469d4; } .code .s { color:#533afd; }
.actions { display:flex; gap:10px; margin-top:14px; }
.btn { background:#ffffff; border:0px solid #5469d4; color:#5469d4; border-radius:8px; padding:6px 12px;
font-size:14px; }
.btn2 { background:#ffffff; color:#50617a; border:0px solid #d4dee9; border-radius:8px; padding:6px 12px;
font-size:14px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #d4dee9; padding:8px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#5c5e62; }
</style></head>
<body>
<nav>
<div class="brand">Stripe Docs</div>
<div class="search">Search the docs...</div>
<div class="navlinks"><span class="on">Payments</span><span>API reference</span><span>Guides</span></div>
</nav>
<div class="wrap">
<div class="side">
<div class="grp">Get started</div>
<div class="item on">Payments overview</div>
<div class="item">Accept a payment</div>
<div class="grp">Build</div>
<div class="item">Checkout</div>
<div class="item">Elements</div>
<div class="item">Webhooks</div>
<div class="grp">Reference</div>
<div class="item">API index</div>
</div>
<div class="content">
<h1>Accept a payment</h1>
<p class="lead">Use a single integration to accept payments across cards, wallets, and local payment methods.</p>
<div class="badge-row"><span class="badge">Server</span><span class="badge">Client</span><span class="badge">v2026-06-01</span></div>
<div class="code">
curl https://api.Stripe.com/v1/payment_intents \<br>
-u <span class="s">sk_test_...</span>: \<br>
-d <span class="k">amount</span>=2000 \<br>
-d <span class="k">currency</span>=usd \<br>
-d <span class="k">payment_method_types[]</span>=card
</div>
<div class="actions"><span class="btn">View full reference</span><span class="btn2">Copy snippet</span></div>
</div>
</div>
<footer><span>© Stripe</span><span>Docs · API reference · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0046ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0046ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87a6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005df9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0046ff; color: #ffffff;
border: 1px solid #005df9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0046ff; color: #f5f5f5;
border: 1px solid #2762fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87a6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #004afe; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#24272d; box-sizing:border-box;
font-family:"Pretendard",sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.brand { font-size:20px; font-weight:700; margin:0; color:#0046ff; }
.navlinks { display:flex; gap:20px; }
.hero { position:relative; height:280px; background:linear-gradient(120deg,#0046ff,#005df9); display:flex;
flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#ffffff; }
.hero h1 { font-size:38px; font-weight:700; margin:0 0 10px; }
.hero p { font-size:15px; opacity:0.85; margin:0 0 20px; }
.row { display:flex; gap:12px; }
.outl { background:rgba(0,93,249,0.3); border:1px solid #ffffff; color:#ffffff; border-radius:30px; padding:0 24px; height:48px; display:flex; align-items:center; font-size:16px; }
.dl { background:rgba(255,255,255,0.2); border:1px solid #ffffff; color:#ffffff; border-radius:30px; padding:0 24px; height:48px; display:flex; align-items:center; font-size:16px; }
.fsband { padding:26px 44px; }
.fsband h2 { font-size:20px; font-weight:700; margin:0 0 16px; }
.selectorrow { display:flex; gap:12px; }
.selector { background:#f3f6fb; color:#24272d; border-radius:24px; padding:0 20px; height:48px; display:flex; align-items:center; font-size:16px; }
</style></head>
<body>
<nav>
<p class="brand">Shinhan Bank</p>
<div class="navlinks" style="font-size:14px;color:#666;"><span>Personal Banking</span><span>Business Banking</span><span>Retirement</span></div>
</nav>
<section class="hero">
<h1>Easier, more comfortable, newer finance</h1>
<p>Making the world a better place through finance — Shinhan's next chapter</p>
<div class="row"><span class="outl">Services</span><span class="dl">Download the App</span></div>
</section>
<section class="fsband">
<h2>Family Site</h2>
<div class="selectorrow">
<span class="selector">Shinhan Card</span>
<span class="selector">Shinhan Securities</span>
<span class="selector">Shinhan Life</span>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b7ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b7ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d9fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111214; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b7ff; color: #111214;
border: 1px solid #111214; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b7ff; color: #000000;
border: 1px solid #27c1fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d9fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #039dd9; color: #111214;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gaudio Lab</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#111214; box-sizing:border-box; font-family: "Roboto", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; background:#ffffff; }
.logo { font-family:"Poppins", sans-serif; font-size:17px; font-weight:700; color:#111214; }
.nav-items { display:flex; gap:6px; }
.nav-item { font-size:14px; font-weight:500; color:#111214; padding:8px 16px; border-radius:6px; }
.nav-item.active { color:#00b7ff; }
.nav-cta { background:#00b7ff; color:#fafafa; border-radius:6px; padding:8px 16px; font-size:14px; font-weight:500; height:32px; display:flex; align-items:center; }
.darkband { height:284px; background:#1e1e1f; position:relative; overflow:hidden; padding:26px 34px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.wave { display:flex; align-items:center; justify-content:center; gap:3px; height:56px; margin-bottom:18px; }
.bar { width:4px; border-radius:2px; background:#00b7ff; }
.kicker { font-family:"Roboto", sans-serif; font-size:13px; font-weight:500; letter-spacing:1.5px; color:#9ca3af; text-transform:uppercase; margin-bottom:10px; }
.hero-title { font-family:"Poppins", sans-serif; font-size:34px; font-weight:900; line-height:1.2; color:#ffffff; margin:0 0 10px; }
.hero-sub { font-family:"Noto Sans KR", sans-serif; font-size:15px; color:#d3d5da; max-width:560px; line-height:1.5; margin:0 0 18px; }
.film-btn { background:#ffffff; color:#111214; border-radius:4px; padding:12px 30px; font-family:"Poppins", sans-serif; font-size:15px; font-weight:500; }
.statrow { height:104px; display:flex; align-items:center; justify-content:center; gap:64px; background:#f0f9ff; }
.stat { text-align:center; }
.stat-num { font-family:"Roboto", sans-serif; font-size:32px; font-weight:700; letter-spacing:0.15px; color:#111214; line-height:1.1; }
.stat-label { font-size:13px; color:#9ca3af; margin-top:2px; }
.newsrow { display:flex; gap:14px; padding:18px 26px 0; }
.news-card { flex:1; background:#ffffff; border:1px solid #d6d6d6; border-radius:12px; padding:14px 16px; }
.news-tag { font-size:11px; font-weight:500; color:#00b7ff; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.news-title { font-family:"Roboto", sans-serif; font-size:15px; font-weight:500; line-height:1.4; color:#111214; margin:0; }
</style>
</head>
<body>
<div class="nav">
<div class="logo">Gaudio Lab</div>
<div class="nav-items">
<div class="nav-item active">Products</div>
<div class="nav-item">Technology</div>
<div class="nav-item">Blog & News</div>
<div class="nav-item">Careers</div>
</div>
<div class="nav-cta">Contact us</div>
</div>
<div class="darkband">
<div class="wave">
<div class="bar" style="height:14px;"></div>
<div class="bar" style="height:28px;"></div>
<div class="bar" style="height:42px;"></div>
<div class="bar" style="height:20px;"></div>
<div class="bar" style="height:52px;"></div>
<div class="bar" style="height:34px;"></div>
<div class="bar" style="height:56px;"></div>
<div class="bar" style="height:30px;"></div>
<div class="bar" style="height:44px;"></div>
<div class="bar" style="height:18px;"></div>
<div class="bar" style="height:38px;"></div>
<div class="bar" style="height:50px;"></div>
<div class="bar" style="height:24px;"></div>
<div class="bar" style="height:46px;"></div>
<div class="bar" style="height:16px;"></div>
<div class="bar" style="height:36px;"></div>
<div class="bar" style="height:54px;"></div>
<div class="bar" style="height:22px;"></div>
<div class="bar" style="height:40px;"></div>
<div class="bar" style="height:12px;"></div>
<div class="bar" style="height:32px;"></div>
<div class="bar" style="height:48px;"></div>
<div class="bar" style="height:20px;"></div>
<div class="bar" style="height:44px;"></div>
<div class="bar" style="height:26px;"></div>
</div>
<div class="kicker">The Science of Sound</div>
<div class="hero-title">Where sound is, Gaudio Lab is there.</div>
<div class="hero-sub">Spatial audio, AI dialogue separation, and loudness tools built by an audio-research team.</div>
<div class="film-btn">Watch the Film</div>
</div>
<div class="statrow">
<div class="stat"><div class="stat-num">50M</div><div class="stat-label">daily users</div></div>
<div class="stat"><div class="stat-num">119</div><div class="stat-label">IP filed</div></div>
<div class="stat"><div class="stat-num">35</div><div class="stat-label">partners</div></div>
</div>
<div class="newsrow">
<div class="news-card">
<div class="news-tag">Award</div>
<p class="news-title">CES Innovation Award — fourth consecutive year</p>
</div>
<div class="news-card">
<div class="news-tag">Product</div>
<p class="news-title">Gaudio Studio Pro adds real-time AI localization</p>
</div>
<div class="news-card">
<div class="news-tag">Partnership</div>
<p class="news-title">New streaming partner integrates spatial audio API</p>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #212121; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #212121; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #212121; color: #f5f5f5;
border: 1px solid #434343; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #454545; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:Helvetica, "Hiragino Sans", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:14px; letter-spacing:0.6px; }
.navlinks { display:flex; gap:26px; font-size:12px; letter-spacing:0.6px; color:#212121; }
.hero { height:180px; background:linear-gradient(135deg,#0a0a12,#241f3d 50%,#3a2b52); position:relative; }
.hero .caption { position:absolute; left:40px; bottom:16px; color:#fff; font-size:13px; letter-spacing:0.4px; }
.catbar { display:flex; gap:0; padding:0 40px; border-bottom:1px solid #ededed; }
.catbtn { padding:18px 20px; font-size:13px; color:#999999; }
.catbtn.on { color:#212121; border-bottom:2px solid #212121; }
.catalog { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0 40px; }
.item { background:#f8f9fa; height:150px; margin:14px 7px 0; padding:14px; display:flex; align-items:flex-end; }
.item span { font-size:13px; color:#212121; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #ededed; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#999999; }
</style></head>
<body>
<nav>
<div class="brand">teamLab</div>
<div class="navlinks"><span>Art</span><span>Product</span><span>Solutions</span><span>About</span></div>
</nav>
<div class="hero"><div class="caption">Wander, explore, and discover a continuous world</div></div>
<div class="catbar">
<div class="catbtn on">All</div>
<div class="catbtn">Art</div>
<div class="catbtn">Digital Art Museum</div>
<div class="catbtn">Architecture</div>
</div>
<div class="catalog">
<div class="item"><span>Borderless World</span></div>
<div class="item"><span>Flowers and People</span></div>
<div class="item"><span>Forest of Resonating Lamps</span></div>
<div class="item"><span>Crystal Universe</span></div>
<div class="item"><span>Weather Forest</span></div>
<div class="item"><span>Athletics Forest</span></div>
</div>
<footer><span>© teamLab</span><span>teamLab · Careers · About</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e8552d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e8552d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #efad9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d14a26; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e8552d; color: #000000;
border: 1px solid #d14a26; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e8552d; color: #f5f5f5;
border: 1px solid #ea6f4d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #efad9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4532c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1f1f1f; box-sizing:border-box;
font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing: border-box; }
.app { display:flex; width:960px; height:640px; }
.rail { width:76px; flex:0 0 76px; background:#f7f7f7; border-right:1px solid #e6e6e6;
display:flex; flex-direction:column; padding-top:8px; }
.rail-item { height:66px; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; font-size:11px; font-weight:600; color:#888888; border-left:3px solid transparent; }
.rail-item .ico { width:22px; height:22px; border-radius:6px; background:#d4d4d4; }
.rail-item.active { background:#fdede7; color:#e8552d; border-left:3px solid #e8552d; }
.rail-item.active .ico { background:#e8552d; }
.main { flex:1 1 auto; display:flex; flex-direction:column; }
.topbar { height:56px; border-bottom:1px solid #e6e6e6; display:flex; align-items:center;
justify-content:space-between; padding:0 20px; background:#ffffff; }
.topbar .title { font-size:22px; font-weight:700; color:#1f1f1f; }
.topbar .brand { font-size:12px; font-weight:600; color:#888888; margin-left:10px; letter-spacing:0.02em; }
.topbar .shift { font-size:12px; font-weight:400; color:#888888; }
.work { flex:1 1 auto; display:flex; }
.grid-wrap { flex:1 1 auto; background:#f7f7f7; padding:16px; }
.tile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tile { background:#ffffff; border-radius:8px; padding:12px; display:flex; flex-direction:column;
gap:6px; min-height:78px; justify-content:center; }
.tile.active { background:#fdede7; border:1px solid #e8552d; }
.tile .name { font-size:17px; font-weight:600; color:#1f1f1f; line-height:1.3; }
.tile .price { font-size:15px; font-weight:400; color:#555555; }
.order { width:312px; flex:0 0 312px; background:#ffffff; border-left:1px solid #e6e6e6;
box-shadow:-2px 0 8px rgba(0,0,0,0.03); padding:16px; display:flex; flex-direction:column; }
.order-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.order-head h3 { font-size:22px; font-weight:700; margin:0; color:#1f1f1f; }
.badge { border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; color:#1f1f1f; background:#f5a623; }
.lines { flex:1 1 auto; margin-top:6px; }
.line { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #e6e6e6;
font-size:15px; font-weight:400; color:#1f1f1f; }
.line .qty { color:#888888; margin-right:8px; }
.total-row { display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; }
.total-row .label { font-size:15px; font-weight:400; color:#555555; }
.total-row .amt { font-size:24px; font-weight:700; color:#1f1f1f; }
.charge { background:#e8552d; color:#ffffff; border:none; border-radius:8px; padding:12px 24px;
font-size:16px; font-weight:600; width:100%; height:48px; }
</style></head>
<body>
<div class="app">
<div class="rail">
<div class="rail-item active"><div class="ico"></div>Order</div>
<div class="rail-item"><div class="ico"></div>Tables</div>
<div class="rail-item"><div class="ico"></div>Menu</div>
<div class="rail-item"><div class="ico"></div>Reports</div>
<div class="rail-item"><div class="ico"></div>Settings</div>
</div>
<div class="main">
<div class="topbar">
<div><span class="title">Table 12 · Dine-in</span><span class="brand">iCHEF POS</span></div>
<span class="shift">Shift started 11:02 AM</span>
</div>
<div class="work">
<div class="grid-wrap">
<div class="tile-grid">
<div class="tile"><div class="name">Beef Noodle Soup</div><div class="price">$8.50</div></div>
<div class="tile active"><div class="name">Braised Pork Rice</div><div class="price">$6.00</div></div>
<div class="tile"><div class="name">Iced Oolong Tea</div><div class="price">$2.20</div></div>
<div class="tile"><div class="name">Pan-Fried Dumplings</div><div class="price">$5.80</div></div>
<div class="tile"><div class="name">Pickled Cucumber</div><div class="price">$2.00</div></div>
<div class="tile"><div class="name">Soy Egg</div><div class="price">$1.50</div></div>
<div class="tile"><div class="name">Spicy Wontons</div><div class="price">$6.20</div></div>
<div class="tile"><div class="name">Hot Soy Milk</div><div class="price">$1.80</div></div>
<div class="tile"><div class="name">Stir-Fried Greens</div><div class="price">$4.00</div></div>
</div>
</div>
<div class="order">
<div class="order-head">
<h3>Order #482</h3>
<span class="badge">Pending</span>
</div>
<div class="lines">
<div class="line"><span><span class="qty">2×</span>Braised Pork Rice</span><span>$12.00</span></div>
<div class="line"><span><span class="qty">1×</span>Beef Noodle Soup</span><span>$8.50</span></div>
<div class="line"><span><span class="qty">2×</span>Iced Oolong Tea</span><span>$4.40</span></div>
<div class="line"><span><span class="qty">1×</span>Pan-Fried Dumplings</span><span>$5.80</span></div>
</div>
<div class="total-row"><span class="label">Total</span><span class="amt">$30.70</span></div>
<button class="charge">Charge $30.70</button>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b29d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b29d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d7cd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #cc3366; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b29d; color: #000000;
border: 1px solid #cc3366; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b29d; color: #000000;
border: 1px solid #27bdab; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d7cd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #219e94; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; padding:0 32px; }
.brand { font-size:16px; font-weight:700; color:#111111; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:30px; }
.navlinks span { font-size:16px; font-weight:600; color:#111111; }
.navlinks span.on { color:#cc3366; }
.lang { margin-left:auto; font-size:14px; color:#999999; }
.hero { text-align:center; padding:8px 32px 18px; }
.hero h1 { font-size:30px; font-weight:700; line-height:1.4; margin:0; color:#111111; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 32px 18px; }
.entry { border-radius:8px; padding:20px 16px; display:flex; flex-direction:column; gap:6px; height:100px; }
.entry.teal { background:#00b29d; color:#ffffff; }
.entry.blue { background:#555dfa; color:#ffffff; }
.entry.grey { background:#efeff1; color:#111111; }
.entry h3 { font-size:20px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.entry span { font-size:13px; opacity:0.9; }
.segments { display:flex; gap:14px; padding:0 32px 18px; }
.seg { flex:1; background:#dff1f1; border-radius:40px; padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.seg h4 { margin:0; font-size:16px; font-weight:700; color:#111111; }
.seg p { margin:0; font-size:12px; color:#333333; line-height:1.4; }
.pill { align-self:flex-start; background:#00b29d; color:#ffffff; border-radius:40px; padding:6px 16px; font-size:13px; font-weight:700; }
footer { background:#2f3233; color:#ffffff; padding:12px 32px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Milddang (I Hate Flying Bugs)</p>
<div class="navlinks"><span class="on">Who we are</span><span>What we do</span><span>Newsroom</span></div>
<span class="lang">KOR / ESP</span>
</nav>
<div class="hero"><h1>High-Quality Education for Equal Opportunity</h1></div>
<div class="grid">
<div class="entry teal"><h3>Mildang PT</h3><span>AI-based 1:1 personalized tutoring</span></div>
<div class="entry blue"><h3>School PT</h3><span>Public-education personalized learning</span></div>
<div class="entry grey"><h3>Newsroom</h3><span>Latest company updates</span></div>
</div>
<div class="segments">
<div class="seg"><h4>Students</h4><p>A plan that adapts to what you actually get wrong.</p><span class="pill">Start learning</span></div>
<div class="seg"><h4>Parents</h4><p>Transparent progress, no pressure marketing.</p><span class="pill">Learn more</span></div>
<div class="seg"><h4>Ontact Teachers</h4><p>Tools that keep the focus on the student.</p><span class="pill">Join us</span></div>
</div>
<footer>I Hate Flying Bugs Inc. · Corporate information · Contact</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #503396; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #503396; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ab9eca; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #503396; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #503396; color: #f5f5f5;
border: 1px solid #6a52a5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ab9eca; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #513ba5; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#444444; box-sizing:border-box;
font-family:"NanumBarunGothic", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #ebebeb; }
.brand { font-size:16px; font-weight:700; color:#503396; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:30px; }
.navlinks span { font-size:15px; color:#444444; }
.theater-pill { margin-left:auto; border:1px solid #666666; border-radius:30px; height:32px; padding:0 16px;
display:flex; align-items:center; font-size:13px; color:#666666; }
.section-title { font-size:22px; font-weight:400; letter-spacing:-1px; color:#333333; padding:18px 32px 10px; margin:0; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:0 32px 16px; }
.poster { display:flex; flex-direction:column; gap:8px; }
.thumb { width:100%; aspect-ratio:230/330; position:relative; overflow:hidden; }
.thumb.a { background:linear-gradient(160deg,#503396,#7a5fc4); }
.thumb.b { background:linear-gradient(160deg,#33285f,#503396); }
.thumb.c { background:linear-gradient(160deg,#7a5fc4,#c9bce9); }
.thumb.d { background:linear-gradient(160deg,#2c2440,#503396); }
.thumb.e { background:linear-gradient(160deg,#503396,#33285f); }
.rank { position:absolute; top:6px; left:6px; background:#ffffff; color:#503396; font-size:11px; font-weight:700;
width:18px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:4px; }
.poster .name { font-size:13px; color:#444444; font-weight:500; line-height:1.3; }
.like-row { display:flex; align-items:center; justify-content:space-between; }
.like-btn { background:#ffffff; color:#503396; border:1px solid #ebebeb; border-radius:4px; padding:0 5px;
height:22px; display:flex; align-items:center; font-size:11px; }
.banner { margin:6px 32px 0; height:150px; border-radius:8px; background:linear-gradient(120deg,#2c2440,#503396 60%,#7a5fc4);
display:flex; align-items:center; padding:0 30px; color:#ffffff; }
.banner h3 { font-size:24px; font-weight:700; margin:0 0 6px; }
.banner p { font-size:13px; margin:0; opacity:0.85; }
.banner .cta { margin-top:12px; display:inline-flex; background:#ffffff; color:#503396; border-radius:4px;
height:34px; padding:0 18px; align-items:center; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">MEGABOX</p>
<div class="navlinks"><span>Movies</span><span>Booking</span><span>Theaters</span><span>Events</span></div>
<div class="theater-pill">Find a theater</div>
</nav>
<h2 class="section-title">Now Showing</h2>
<div class="grid">
<div class="poster"><div class="thumb a"><span class="rank">1</span></div><span class="name">Midnight Signal</span>
<div class="like-row"><span>4.8</span><span class="like-btn">♡ Like</span></div></div>
<div class="poster"><div class="thumb b"><span class="rank">2</span></div><span class="name">The Last Voyage</span>
<div class="like-row"><span>4.6</span><span class="like-btn">♡ Like</span></div></div>
<div class="poster"><div class="thumb c"><span class="rank">3</span></div><span class="name">Paper Moonlight</span>
<div class="like-row"><span>4.5</span><span class="like-btn">♡ Like</span></div></div>
<div class="poster"><div class="thumb d"><span class="rank">4</span></div><span class="name">Iron Harbor</span>
<div class="like-row"><span>4.3</span><span class="like-btn">♡ Like</span></div></div>
<div class="poster"><div class="thumb e"><span class="rank">5</span></div><span class="name">Season of Kites</span>
<div class="like-row"><span>4.2</span><span class="like-btn">♡ Like</span></div></div>
</div>
<div class="banner">
<div>
<h3>Life Theater — more than a screening</h3>
<p>A place to meet stories, play, and share the experience together.</p>
<div class="cta">Book Now</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #030303; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #030303; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #030303; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #030303; color: #f5f5f5;
border: 1px solid #2a2a2a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #050505; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#030303; color:#ffffff; box-sizing:border-box;
font-family:Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px;
background:
radial-gradient(90% 70% at 22% 0%, rgba(255,90,60,0.35), rgba(3,3,3,0) 60%),
radial-gradient(70% 60% at 0% 100%, rgba(255,180,60,0.14), rgba(3,3,3,0) 55%),
#030303; }
.topbar { position:relative; z-index:2; height:48px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; }
.topbar .chev { font-size:20px; }
.topbar .src { font-size:11px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:#AAAAAA; }
.topbar .more { font-size:18px; letter-spacing:2px; }
.layout { position:relative; z-index:2; display:flex; height:calc(640px - 48px); }
.player { width:580px; display:flex; flex-direction:column; align-items:center; padding:8px 40px 24px; }
.art { width:196px; height:196px; border-radius:8px; margin-top:6px;
background: linear-gradient(160deg, #ff5a3c 0%, #d81b3f 45%, #1a0a12 100%);
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7); position:relative; overflow:hidden; }
.art::after { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(70deg, rgba(255,255,255,0.05) 0 6px, rgba(0,0,0,0.06) 6px 12px); }
.toggle { margin-top:18px; display:flex; background:rgba(255,255,255,0.08); border-radius:999px; padding:4px; }
.toggle span { font-size:12px; font-weight:700; padding:6px 18px; border-radius:999px; color:#AAAAAA; }
.toggle span.active { background:#fff; color:#030303; }
.titles { margin-top:18px; text-align:center; }
.titles h1 { font-size:22px; font-weight:700; margin:0 0 4px; letter-spacing:-0.2px; }
.titles p { font-size:13px; color:#AAAAAA; margin:0; }
.scrub { width:100%; max-width:420px; margin-top:20px; }
.track { position:relative; height:3px; background:rgba(255,255,255,0.22); border-radius:2px; }
.track .fill { position:absolute; left:0; top:0; height:3px; width:44%; background:#fff; border-radius:2px; }
.track .thumb { position:absolute; left:44%; top:50%; width:12px; height:12px; margin-left:-6px; margin-top:-6px;
background:#fff; border-radius:50%; }
.times { display:flex; justify-content:space-between; margin-top:7px; font-size:11px; color:#AAAAAA;
font-variant-numeric:tabular-nums; }
.controls { margin-top:20px; display:flex; align-items:center; gap:30px; }
.controls .side { font-size:22px; color:#fff; }
.playbtn { width:64px; height:64px; border-radius:50%; background:#fff;
display:flex; align-items:center; justify-content:center; }
.playbtn .bars { display:flex; gap:5px; }
.playbtn .bars span { width:5px; height:20px; background:#030303; border-radius:1px; }
.queue { width:380px; padding:20px 24px; overflow:hidden; }
.qhead { font-size:10px; font-weight:700; letter-spacing:0.06em; color:#AAAAAA; text-transform:uppercase;
margin:0 0 4px; }
.qcur { display:flex; align-items:center; gap:12px; padding:8px 0 14px; border-bottom:1px solid rgba(255,255,255,0.12); }
.qcur .thumb { width:40px; height:40px; border-radius:4px; flex:none;
background:linear-gradient(160deg,#ff5a3c,#d81b3f); }
.qcur h4 { font-size:15px; font-weight:500; margin:0; }
.qcur p { font-size:13px; color:#AAAAAA; margin:2px 0 0; }
.qeyebrow { font-size:10px; font-weight:700; letter-spacing:0.06em; color:#AAAAAA; text-transform:uppercase;
margin:14px 0 8px; }
.qrow { display:flex; align-items:center; gap:12px; padding:7px 0; }
.qrow .thumb { width:40px; height:40px; border-radius:4px; flex:none; }
.qrow .a { background:linear-gradient(135deg,#5d9cec,#4a89dc); }
.qrow .b { background:linear-gradient(135deg,#48cfad,#37bc9b); }
.qrow .c { background:linear-gradient(135deg,#ac92ec,#967adc); }
.qrow h4 { font-size:15px; font-weight:500; margin:0; color:#fff; }
.qrow p { font-size:13px; color:#AAAAAA; margin:2px 0 0; }
.brandtag { position:absolute; left:28px; bottom:16px; font-size:11px; color:#717171; z-index:2; }
</style></head>
<body>
<div class="stage">
<div class="topbar">
<span class="chev">⌄</span>
<span class="src">Playing from library</span>
<span class="more">⋮</span>
</div>
<div class="layout">
<div class="player">
<div class="art"></div>
<div class="toggle"><span class="active">Songs</span><span>Videos</span></div>
<div class="titles">
<h1>Neon Overpass</h1>
<p>Reef & Wren</p>
</div>
<div class="scrub">
<div class="track"><div class="fill"></div><div class="thumb"></div></div>
<div class="times"><span>1:47</span><span>-1:52</span></div>
</div>
<div class="controls">
<div class="side">⇄</div>
<div class="side">⏮</div>
<div class="playbtn"><div class="bars"><span></span><span></span></div></div>
<div class="side">⏭</div>
<div class="side">⟲</div>
</div>
</div>
<div class="queue">
<p class="qhead">Playing from</p>
<div class="qcur">
<div class="thumb"></div>
<div><h4>Neon Overpass</h4><p>Reef & Wren</p></div>
</div>
<p class="qeyebrow">Up next</p>
<div class="qrow"><div class="thumb a"></div><div><h4>Static Bloom</h4><p>Jordan Ames</p></div></div>
<div class="qrow"><div class="thumb b"></div><div><h4>Harbor Lights</h4><p>Minji Park</p></div></div>
<div class="qrow"><div class="thumb c"></div><div><h4>Low Frequency</h4><p>Camila Voss</p></div></div>
</div>
</div>
<div class="brandtag">YouTube Music (iOS)</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f73b7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f73b7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95bad9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f73b7; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f73b7; color: #f5f5f5;
border: 1px solid #4188c1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95bad9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4389c3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#293239; box-sizing:border-box;
font-family:system-ui, -apple-system, sans-serif; }
* { box-sizing:border-box; }
.layout { display:flex; height:640px; }
.sidebar { width:200px; flex:none; background:#ffffff; border-right:1px solid #b0b8be; padding:16px 10px; display:flex; flex-direction:column; gap:2px; }
.brand { font-size:16px; font-weight:700; margin:0 6px 14px; color:#293239; }
.sb-item { height:32px; display:flex; align-items:center; padding:0 12px; font-size:14px; color:#293239; border-radius:0; }
.sb-item.active { color:#1f73b7; font-weight:600; }
.main { flex:1; display:flex; flex-direction:column; }
header { height:56px; border-bottom:1px solid #b0b8be; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
header h2 { font-size:20px; font-weight:600; margin:0; }
.btn-primary { background:#1f73b7; color:#ffffff; border:none; border-radius:4px; padding:0 15px; height:40px; font-size:14px; }
.toolbar { display:flex; gap:10px; padding:12px 24px; border-bottom:1px solid #b0b8be; }
.filter-chip { font-size:12px; color:#5c6970; border:1px solid #b0b8be; border-radius:4px; padding:6px 12px; }
.filter-chip.on { color:#1f73b7; border-color:#1f73b7; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; color:#5c6970; font-weight:600; padding:8px 24px; border-bottom:1px solid #b0b8be; text-transform:uppercase; letter-spacing:0.04em; }
td { padding:10px 24px; font-size:14px; border-bottom:1px solid #eef0f1; color:#293239; }
.status { display:inline-flex; align-items:center; gap:6px; font-size:12px; border-radius:4px; padding:3px 8px; }
.status.open { background:#fdecec; color:#cd3642; }
.status.pending { background:#fff3e0; color:#a56c1c; }
.status.solved { background:#e7f5ee; color:#4eab89; }
.subj { font-weight:600; }
.meta { color:#5c6970; font-size:12px; }
footer { margin-top:auto; padding:10px 24px; border-top:1px solid #b0b8be; font-size:11px; color:#5c6970; display:flex; justify-content:space-between; }
</style></head>
<body>
<div class="layout">
<div class="sidebar">
<p class="brand">Zendesk Garden</p>
<div class="sb-item active">All Tickets</div>
<div class="sb-item">Unassigned</div>
<div class="sb-item">My Tickets</div>
<div class="sb-item">Solved</div>
<div class="sb-item">Views</div>
<div class="sb-item">Reports</div>
</div>
<div class="main">
<header>
<h2>Support Tickets</h2>
<button class="btn-primary">New Ticket</button>
</header>
<div class="toolbar">
<span class="filter-chip on">Open</span>
<span class="filter-chip">Pending</span>
<span class="filter-chip">Solved</span>
<span class="filter-chip">Priority: High</span>
</div>
<table>
<tr><th>Subject</th><th>Requester</th><th>Status</th><th>Updated</th></tr>
<tr><td><span class="subj">Login fails after password reset</span><br><span class="meta">#4821</span></td><td>Alex Kim</td><td><span class="status open">Open</span></td><td>2m ago</td></tr>
<tr><td><span class="subj">Billing charged twice this month</span><br><span class="meta">#4820</span></td><td>Jordan Lee</td><td><span class="status pending">Pending</span></td><td>18m ago</td></tr>
<tr><td><span class="subj">Export button not responding</span><br><span class="meta">#4818</span></td><td>Sam Park</td><td><span class="status open">Open</span></td><td>41m ago</td></tr>
<tr><td><span class="subj">Feature request: dark mode</span><br><span class="meta">#4812</span></td><td>Casey Moon</td><td><span class="status solved">Solved</span></td><td>2h ago</td></tr>
<tr><td><span class="subj">API rate limit unclear in docs</span><br><span class="meta">#4809</span></td><td>Taylor Ryu</td><td><span class="status pending">Pending</span></td><td>3h ago</td></tr>
</table>
<footer>
<span>© Zendesk Garden</span>
<span>Zendesk Garden Garden · Components · Foundations</span>
</footer>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #cc3b3b; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #fafafa; color: #111111;
border: 1px solid #cc3b3b; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #111111;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.3px; background: #e99292; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#111111; box-sizing:border-box;
font-family:'Josefin Sans', Arial, Helvetica, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.archivo { font-family:'Archivo Black', Arial, sans-serif; font-weight:400; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:1px solid #eeeeee; }
.brand { font-size:18px; color:#cc3b3b; margin:0; }
.navlinks { position:absolute; left:28px; display:flex; gap:20px; font-size:13px; letter-spacing:0.5px;
text-transform:uppercase; color:#aaaaaa; font-weight:500; }
.navlinks .active { color:#cc3b3b; }
.searchcart { position:absolute; right:28px; font-size:13px; letter-spacing:0.5px; text-transform:uppercase; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:20px 28px; min-height:0; }
.hero { flex:0 0 auto; text-align:center; margin-bottom:16px; }
.hero h1 { font-size:26px; margin:0 0 4px; }
.hero p { font-size:14px; color:#272727; margin:0; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; min-height:0; }
.card { background:#ffffff; border-radius:12px; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.heart { position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:999px; background:rgba(255,255,255,0.9);
display:flex; align-items:center; justify-content:center; color:#cc3b3b; font-size:14px; }
.thumb { flex:1; min-height:0; }
.t1 { background:linear-gradient(160deg,#d3efcd,#3a5792 130%); }
.t2 { background:linear-gradient(160deg,#fcd6d7,#cc3b3b 130%); }
.t3 { background:linear-gradient(160deg,#fff299,#c72e2f 130%); }
.badge { position:absolute; top:10px; left:10px; background:#e99292; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.3px; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.info { padding:10px 14px 14px; }
.info h3 { font-size:16px; font-weight:500; margin:0 0 4px; }
.info .price { font-size:14px; color:#272727; margin:0; }
.stars { color:#cc3b3b; font-size:12px; margin:4px 0 0; }
footer { flex:0 0 auto; height:56px; background:#1e1e1e; color:#eeeeee; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; font-size:12px; }
</style></head>
<body>
<nav>
<div class="navlinks"><span class="active">Puzzles</span><span>New Arrivals</span><span>Gift Sets</span></div>
<p class="brand archivo">Apostrophe Puzzles</p>
<div class="searchcart">Cart (0)</div>
</nav>
<main>
<div class="hero">
<h1 class="archivo">Every piece tells a story</h1>
<p>Illustrated jigsaws for gardens, streetscapes, and starry skies.</p>
</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="heart">♥</div><div class="thumb t1"></div>
<div class="info"><h3>Botanical Garden — 1000pc</h3><p class="price">$28.00</p><div class="stars">★★★★★ 4.9</div></div></div>
<div class="card"><div class="heart">♥</div><div class="thumb t2"></div>
<div class="info"><h3>Parisian Streetscape — 500pc</h3><p class="price">$22.00</p><div class="stars">★★★★☆ 4.6</div></div></div>
<div class="card"><div class="heart">♥</div><div class="thumb t3"></div>
<div class="info"><h3>Celestial Map — 1500pc</h3><p class="price">$34.00</p><div class="stars">★★★★★ 5.0</div></div></div>
</div>
</main>
<footer>
<span>© Apostrophe Puzzles</span>
<span>Shipping · Returns · Gift Cards</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3182f6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3182f6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9dc1f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3182f6; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3182f6; color: #f5f5f5;
border: 1px solid #5094f6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9dc1f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5296f7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1f29; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #f2f4f6; }
.brand { font-size:15px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#4e5968; }
.entry { background:#3182f6; color:#ffffff; border:none; border-radius:8px; padding:6px 12px;
font-size:14px; font-weight:600; }
.main { display:flex; padding:26px 32px; gap:24px; }
.stockcol { flex:1.3; }
.stockrow { display:flex; align-items:baseline; gap:12px; margin-bottom:4px; }
.stockrow .name { font-size:22px; font-weight:700; }
.stockrow .code { font-size:13px; color:#4e5968; }
.price { font-size:34px; font-weight:700; margin-bottom:2px; }
.change { font-size:15px; font-weight:600; color:#3182f6; margin-bottom:18px; }
.chart { height:150px; border-radius:8px; background:linear-gradient(180deg,rgba(49,130,246,0.14),rgba(49,130,246,0));
position:relative; overflow:hidden; border:1px solid #e5e8eb; }
.chart svg { width:100%; height:100%; }
.dialog { width:280px; background:#fbfcfd; border-radius:16px; padding:20px;
box-shadow:0 12px 28px -4px rgba(0,0,0,0.12), 0 8px 56px -4px rgba(0,0,0,0.1); }
.dialog .t { font-size:16px; font-weight:700; margin-bottom:12px; }
.row2 { display:flex; justify-content:space-between; font-size:16px; color:#4e5968; padding:10px 0;
border-bottom:1px solid #e5e8eb; }
.row2:last-of-type { border-bottom:none; }
.buyrow { display:flex; gap:8px; margin-top:16px; }
.buybtn { flex:1; background:#3182f6; color:#ffffff; border:none; border-radius:8px; height:36px; font-size:14px; font-weight:600; }
.sellbtn { flex:1; background:#ffffff; color:#4e5968; border:1px solid #e5e8eb; border-radius:8px; height:36px; font-size:14px; font-weight:600; }
</style></head>
<body>
<nav>
<span class="brand">Toss Securities</span>
<div class="navlinks"><span>Domestic</span><span>Overseas</span><span>ETF</span><span>Bonds</span></div>
<button class="entry">See markets</button>
</nav>
<div class="main">
<div class="stockcol">
<div class="stockrow"><span class="name">Northfield Robotics</span><span class="code">081720</span></div>
<div class="price">92,400</div>
<div class="change">+1,850 (+2.04%)</div>
<div class="chart">
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<polyline points="0,70 40,60 80,64 120,40 160,48 200,26 240,34 300,16" fill="none" stroke="#3182f6" stroke-width="3"/>
</svg>
</div>
</div>
<div class="dialog">
<div class="t">Order</div>
<div class="row2"><span>Available</span><span>3,204,000</span></div>
<div class="row2"><span>Quantity</span><span>10 shares</span></div>
<div class="row2"><span>Est. total</span><span>924,000</span></div>
<div class="buyrow">
<button class="buybtn">Buy</button>
<button class="sellbtn">Sell</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#18181b; box-sizing:border-box;
font-family:"MiSans", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"Outfit", "MiSans", sans-serif; }
nav { height:56px; display:flex; align-items:center; padding:0 36px; }
.brand { font-size:15px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:32px; }
.navlinks span { font-size:14px; color:#45515e; }
.light-action { margin-left:auto; background:#f5f5f5; color:#181e25; border-radius:32px; height:40px; padding:0 28px;
display:flex; align-items:center; font-size:16px; }
.hero { padding:14px 36px 10px; }
.hero .kicker { font-size:13px; color:#86909c; margin-bottom:6px; }
.hero h1 { font-size:56px; font-weight:600; line-height:1.1; margin:0 0 14px; letter-spacing:-1px; }
.actions { display:flex; gap:8px; }
.dark-action { background:#000000; color:#ffffff; border-radius:8px; height:38px; padding:0 16px; display:flex;
align-items:center; font-size:14px; }
.light-pair { background:#ffffff; color:#222222; border:1px solid #e5e7eb; border-radius:8px; height:38px;
padding:0 16px; display:flex; align-items:center; font-size:14px; }
.divider { height:1px; background:#e5e7eb; margin:16px 36px; }
.audio { display:flex; align-items:center; gap:20px; padding:0 36px; }
.audio-panel { flex:1; background:#f5f5f5; border-radius:16px; padding:20px 22px; display:flex; align-items:center; gap:16px; }
.waveform { flex:1; height:40px; display:flex; align-items:flex-end; gap:3px; }
.waveform span { flex:1; background:#7659fa; opacity:0.6; border-radius:2px; }
.generate { background:#7659fa; color:#f8f8f8; border-radius:100px; height:36px; padding:0 20px; display:flex;
align-items:center; font-size:14px; font-weight:500; }
.careers { display:flex; align-items:center; gap:14px; padding:20px 36px 0; }
.careers-primary { background:#181e25; color:#ffffff; border-radius:9999px; height:44px; padding:12px 24px;
display:flex; align-items:center; font-size:14px; font-weight:500; }
.careers-outline { background:#ffffff; color:#18181b; border:1px solid #18181b; border-radius:9999px; height:44px;
padding:12px 32px; display:flex; align-items:center; font-size:16px; font-weight:500; }
</style></head>
<body>
<nav>
<p class="brand">MiniMax</p>
<div class="navlinks"><span>Models</span><span>Products</span><span>Platform</span><span>Careers</span></div>
<div class="light-action">Try now</div>
</nav>
<div class="hero">
<div class="kicker">MODEL LAUNCH</div>
<h1 class="display">Intelligence with everyone</h1>
<div class="actions"><div class="dark-action">Read the paper</div><div class="light-pair">View benchmarks</div></div>
</div>
<div class="divider"></div>
<div class="audio">
<div class="audio-panel">
<div class="waveform">
<span style="height:30%"></span><span style="height:60%"></span><span style="height:90%"></span>
<span style="height:45%"></span><span style="height:70%"></span><span style="height:35%"></span>
<span style="height:80%"></span><span style="height:50%"></span><span style="height:65%"></span>
<span style="height:40%"></span>
</div>
<div class="generate">Generate audio</div>
</div>
</div>
<div class="careers">
<div class="careers-primary">View open roles</div>
<div class="careers-outline">Life at MiniMax</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1e1e1e;
border: 1px solid #1e1e1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1e1e1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#1E1E1E; color:#FFFFFF; box-sizing:border-box; font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:22px 32px 0; }
.navrow { display:flex; justify-content:space-between; align-items:flex-start; }
.h1 { font-size:28px; font-weight:700; letter-spacing:-0.4pt; }
.sub { font-size:12px; color:#B3B3B3; margin-top:4px; }
.avatar32 { width:32px; height:32px; border-radius:50%; background:#A259FF; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; }
.searchbar { margin-top:16px; height:36px; background:#2C2C2C; border-radius:6px; display:flex; align-items:center; padding:0 12px; color:#757575; font-size:14px; gap:8px; }
.secH { font-size:17px; font-weight:700; margin:20px 0 12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.filecard { background:#2C2C2C; border-radius:6px; overflow:hidden; }
.thumb { aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; }
.thumb .initial { color:#fff; font-weight:700; font-size:28px; }
.fname { font-size:14px; font-weight:500; padding:8px 8px 0; }
.fmeta { font-size:12px; color:#757575; padding:2px 8px 8px; }
.projrow { display:flex; align-items:center; padding:12px 4px; border-top:1px solid #2C2C2C; }
.cube32 { width:32px; height:32px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; color:#fff; margin-right:12px; }
.projmain { flex:1; }
.projmain .n { font-size:15px; font-weight:500; }
.projmain .c { font-size:12px; color:#757575; margin-top:2px; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:12px;font-weight:600;color:#A259FF;margin-bottom:8px">Figma (iOS)</div>
<div class="navrow"><div><div class="h1">Recents</div><div class="sub">Personal · 4 teams</div></div><div class="avatar32">S</div></div>
<div class="searchbar">🔍 Search files and projects</div>
<div class="secH">Recently viewed</div>
<div class="grid">
<div class="filecard"><div class="thumb" style="background:linear-gradient(135deg,#1ABCFE,#0D99FF)"></div><div class="fname">Design System v3</div><div class="fmeta">Edited 2h ago · 4 collaborators</div></div>
<div class="filecard"><div class="thumb" style="background:#F24E1E"><span class="initial">M</span></div><div class="fname">Marketing Site</div><div class="fmeta">Edited 1d ago · 2 collaborators</div></div>
<div class="filecard"><div class="thumb" style="background:linear-gradient(135deg,#A259FF,#0ACF83)"></div><div class="fname">Onboarding Flows</div><div class="fmeta">Edited 3d ago · 6 collaborators</div></div>
<div class="filecard"><div class="thumb" style="background:#0ACF83"><span class="initial">Q</span></div><div class="fname">Q3 Pitch Deck</div><div class="fmeta">Edited 5d ago · 1 collaborator</div></div>
</div>
<div class="secH">Projects</div>
<div class="projrow"><div class="cube32" style="background:#FF7262">P</div><div class="projmain"><div class="n">Product Design</div><div class="c">12 files</div></div><div style="color:#757575">›</div></div>
<div class="projrow"><div class="cube32" style="background:#1ABCFE">B</div><div class="projmain"><div class="n">Brand & Marketing</div><div class="c">8 files</div></div><div style="color:#757575">›</div></div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ebcb45; color: #1a1a1a;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #ebcb45; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ebcb45; color: #1a1a1a;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'proxima-nova',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #ececec; }
.brand { font-size:19px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:500; letter-spacing:.8px; text-transform:uppercase; }
.navlinks span.active { color:#ebcb45; border-bottom:2px solid #ebcb45; padding-bottom:4px; }
.search { background:#f7f7f7; border-radius:999px; padding:9px 18px; font-size:12px; color:#666666; width:200px; }
.hero { background:#f7f7f7; padding:26px 40px; text-align:center; }
.hero h1 { font-size:28px; font-weight:600; margin:0 0 8px; }
.hero p { font-size:13px; color:#666666; margin:0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:20px 40px; }
.card { background:#fff; border-radius:4px; }
.cover { height:120px; background:linear-gradient(160deg,#3a2f1c,#5c4a2a); border-radius:4px; position:relative; }
.cover::after { content:''; position:absolute; left:8px; top:8px; right:8px; height:2px; background:#ebcb45; }
.cond { position:absolute; top:8px; right:8px; background:#ebcb45; color:#1a1a1a; font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 7px; border-radius:2px; }
.cbody { padding:8px 2px; }
.cbody h3 { font-size:13px; font-weight:600; margin:0 0 2px; }
.cbody .author { font-size:11px; color:#666666; margin:0 0 6px; }
.price { font-size:15px; font-weight:600; color:#ebcb45; }
footer { position:absolute; bottom:0; left:0; right:0; background:#f7f7f7; color:#333333; padding:14px 40px;
display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bauman Rare Books</p>
<div class="navlinks"><span class="active">Shop</span><span>Authors</span><span>Browse</span><span>About</span></div>
<div class="search">Search rare books...</div>
</nav>
<section class="hero">
<h1>First Editions, Finely Bound</h1>
<p>Rare, signed, and antiquarian books for collectors who read the provenance as closely as the text.</p>
</section>
<div class="grid" style="position:relative;">
<div class="card">
<div class="cover"><span class="cond">Fine</span></div>
<div class="cbody"><h3>The Great Gatsby</h3><p class="author">F. Scott Fitzgerald, 1925</p><div class="price">$18,500</div></div>
</div>
<div class="card">
<div class="cover"><span class="cond">Near Fine</span></div>
<div class="cbody"><h3>Moby-Dick</h3><p class="author">Herman Melville, 1851</p><div class="price">$42,000</div></div>
</div>
<div class="card">
<div class="cover"><span class="cond">Very Good</span></div>
<div class="cbody"><h3>Pride and Prejudice</h3><p class="author">Jane Austen, 1813</p><div class="price">$65,000</div></div>
</div>
<div class="card">
<div class="cover"><span class="cond">Fine</span></div>
<div class="cbody"><h3>Ulysses</h3><p class="author">James Joyce, 1922</p><div class="price">$28,750</div></div>
</div>
</div>
<footer>
<span>© Bauman Rare Books</span>
<span>Bauman Rare Books · Customer Service · Events · Sign Up</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a2a2a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: 1px solid #2a2a2a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1d1d1d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia, "Times New Roman", Times, serif; }
.mono { font-variant-numeric:tabular-nums; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:20px; font-weight:700; margin:0; }
.brand.serif { letter-spacing:0.2px; }
.navr span { font-size:12px; color:#B0B0B0; margin-left:20px; }
main { display:flex; height:calc(640px - 52px - 54px); padding:6px 32px 0; gap:36px; }
/* left: the player, Audible's actual home surface */
.player { width:360px; text-align:center; }
.coverwrap { position:relative; width:210px; height:210px; margin:6px auto 14px; border-radius:50%;
background:conic-gradient(#FF9900 0deg 252deg, #3A3A3A 252deg 360deg);
display:flex; align-items:center; justify-content:center; }
.cover { width:186px; height:186px; border-radius:10px; box-shadow:rgba(0,0,0,0.4) 0 6px 16px;
background:linear-gradient(150deg,#7a3d0a,#c96a12 60%,#FF9900); }
.booktitle { font-size:22px; font-weight:700; margin:2px 0 2px; }
.author { font-size:13px; color:#B0B0B0; margin:0 0 1px; }
.narrator { font-size:12px; color:#B0B0B0; font-weight:600; margin:0 0 14px; }
.transport { display:flex; align-items:center; justify-content:center; gap:26px; margin-bottom:12px; }
.skip { font-size:12px; font-weight:700; color:#FFFFFF; }
.play { width:58px; height:58px; border-radius:50%; background:#FF9900; color:#1A1A1A;
display:flex; align-items:center; justify-content:center; font-size:20px;
box-shadow:rgba(255,153,0,0.28) 0 6px 22px; }
.scrub { height:3px; background:#3A3A3A; border-radius:2px; margin:0 8px 6px; position:relative; }
.scrub::after { content:''; position:absolute; left:0; top:0; bottom:0; width:38%; background:#FF9900; border-radius:2px; }
.timerow { display:flex; justify-content:space-between; font-size:11px; color:#B0B0B0; padding:0 8px; }
.speedpill { display:inline-block; margin-top:14px; font-size:12px; font-weight:700; color:#FF9900;
background:rgba(255,153,0,0.12); padding:5px 14px; border-radius:8px; }
/* right: chapter list */
.chapters { flex:1; padding-top:4px; }
.chaphead { font-size:12px; font-weight:700; letter-spacing:0.4px; color:#B0B0B0; text-transform:uppercase; margin:0 0 10px; }
.chrow { display:flex; align-items:center; padding:11px 0; border-bottom:1px solid #3A3A3A; }
.chnum { width:22px; font-size:12px; color:#6E6E6E; }
.chinfo { flex:1; }
.chname { font-size:14px; font-weight:600; }
.chname.active { color:#FF9900; }
.chbar { width:3px; align-self:stretch; background:#FF9900; margin-right:10px; border-radius:2px; }
.chdur { font-size:12px; color:#B0B0B0; }
.chcheck { color:#FF9900; font-size:12px; margin-right:6px; }
footer { height:54px; border-top:1px solid #3A3A3A; margin:0 32px; padding-top:9px;
display:flex; align-items:center; gap:12px; }
.mini-cover { width:34px; height:34px; border-radius:6px; background:linear-gradient(150deg,#7a3d0a,#FF9900); }
.mini-t { font-size:12px; font-weight:700; }
.mini-a { font-size:10px; color:#B0B0B0; }
.foot-actions { margin-left:auto; font-size:11px; color:#B0B0B0; }
</style></head>
<body>
<nav>
<p class="brand serif">Audible (iOS)</p>
<div class="navr"><span>Home</span><span>Library</span><span>Discover</span></div>
</nav>
<main>
<div class="player">
<div class="coverwrap"><div class="cover"></div></div>
<p class="booktitle serif">Circe</p>
<p class="author">By Madeline Miller</p>
<p class="narrator">Narrated by Perdita Weeks</p>
<div class="transport">
<span class="skip">-30</span>
<div class="play">▶</div>
<span class="skip">+30</span>
</div>
<div class="scrub"></div>
<div class="timerow mono"><span>5:12:40</span><span>1.5×</span><span>-6:47:20</span></div>
<span class="speedpill">1.5× speed</span>
</div>
<div class="chapters">
<p class="chaphead">Chapters</p>
<div class="chrow"><div class="chbar" style="background:transparent"></div><span class="chnum mono">01</span>
<div class="chinfo"><span class="chname">A Daughter of Helios</span></div><span class="chdur mono">✓ 24:12</span></div>
<div class="chrow"><div class="chbar"></div><span class="chnum mono">02</span>
<div class="chinfo"><span class="chname active">The Halls of the Sun</span></div><span class="chdur mono">18:04</span></div>
<div class="chrow"><div class="chbar" style="background:transparent"></div><span class="chnum mono">03</span>
<div class="chinfo"><span class="chname">Glass and Stone</span></div><span class="chdur mono">21:47</span></div>
<div class="chrow"><div class="chbar" style="background:transparent"></div><span class="chnum mono">04</span>
<div class="chinfo"><span class="chname">A House of Herbs</span></div><span class="chdur mono">19:58</span></div>
<div class="chrow" style="border-bottom:none"><div class="chbar" style="background:transparent"></div><span class="chnum mono">05</span>
<div class="chinfo"><span class="chname">The Voice of Zeus</span></div><span class="chdur mono">26:31</span></div>
</div>
</main>
<footer>
<div class="mini-cover"></div>
<div><div class="mini-t">Circe · Ch. 2</div><div class="mini-a">Audible (iOS)</div></div>
<span class="foot-actions">-30 ▶ +30</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e4e3de; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #e4e3de;
border: 1px solid #e4e3de; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #242424; color: #e4e3de;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbf8; color:#000000; box-sizing:border-box;
font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.display { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.mono { font-family:"Space Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
nav { height:48px; display:flex; align-items:stretch; border-bottom:1px solid #e4e3de; }
.brand { font-size:15px; font-weight:500; letter-spacing:0.16px; margin:0; display:flex; align-items:center;
padding:0 20px; border-right:1px solid #e4e3de; }
.navlinks { display:flex; flex:1; }
.navlinks span { display:flex; align-items:center; padding:0 18px; font-size:15px; font-weight:500;
letter-spacing:0.16px; border-right:1px solid #e4e3de; }
.navcta { margin-left:auto; display:flex; align-items:center; padding:0 20px; font-size:15px; font-weight:500;
letter-spacing:0.16px; }
.hero { display:grid; grid-template-columns:1fr 300px; border-bottom:1px solid #e4e3de; }
.hero .left { padding:30px 32px; border-right:1px solid #e4e3de; }
.eyebrow { font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:#000000; opacity:0.55; margin-bottom:14px; }
.hero h1 { font-size:46px; font-weight:500; line-height:1.08; letter-spacing:-0.56px; margin:0 0 14px; max-width:480px; }
.hero p { font-size:16px; line-height:1.5; margin:0 0 20px; max-width:440px; color:#000000; opacity:0.75; }
.row { display:flex; gap:0; }
.btn { font-size:15px; font-weight:500; letter-spacing:0.16px; padding:11px 20px; border:1px solid #000000;
background:#000000; color:#fbfbf8; }
.btn.ghost { background:transparent; color:#000000; border-left:none; }
.hero .right { padding:24px 24px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.hero .right .cap { font-size:11px; letter-spacing:0.02em; margin-bottom:6px; opacity:0.55; }
.swatchrow { display:flex; gap:8px; margin-bottom:16px; }
.swatch { width:34px; height:34px; }
.s1 { background:#000000; }
.s2 { background:linear-gradient(135deg,#ff7a3d,#ff3d77 50%,#7a3dff); }
.s3 { background:#f5f4ef; border:1px solid #e4e3de; }
.s4 { background:#fbfbf8; border:1px solid #e4e3de; }
.rows { border-bottom:1px solid #e4e3de; }
.lrow { display:flex; align-items:center; justify-content:space-between; padding:13px 32px;
border-bottom:1px solid #e4e3de; font-size:16px; }
.lrow:last-child { border-bottom:none; }
.lrow .name { font-weight:400; }
.lrow .val { opacity:0.55; font-size:14px; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); }
.plan { border-right:1px solid #e4e3de; padding:20px 24px; }
.plan:last-child { border-right:none; }
.plan.alt { background:#f5f4ef; }
.plan .pname { font-size:11px; text-transform:uppercase; letter-spacing:0.04em; opacity:0.55; margin-bottom:8px; }
.plan .price { font-size:26px; font-weight:500; margin-bottom:6px; }
.plan .desc { font-size:13px; opacity:0.6; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e4e3de; padding:12px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; opacity:0.6; background:#fbfbf8; }
</style></head>
<body>
<nav>
<p class="brand display">Mistral AI</p>
<div class="navlinks display"><span>Models</span><span>Developers</span><span>Enterprise</span><span>Pricing</span></div>
<div class="navcta display">Try the API</div>
</nav>
<section class="hero">
<div class="left">
<div class="eyebrow mono">FRONTIER AI, BUILT IN EUROPE</div>
<h1 class="display">Putting frontier AI in everyone's hands</h1>
<p>Open, portable, and controllable models — plus the developer tools and compute to run them on your terms.</p>
<div class="row">
<button class="btn display">Try the API</button>
<button class="btn ghost display">Read the docs</button>
</div>
</div>
<div class="right">
<div class="cap mono">MODEL FAMILY</div>
<div class="swatchrow">
<div class="swatch s1"></div>
<div class="swatch s2"></div>
<div class="swatch s3"></div>
<div class="swatch s4"></div>
</div>
<div class="cap mono">DEPLOYMENT</div>
<div style="font-size:14px;">Cloud · on-prem · self-hosted</div>
</div>
</section>
<section class="rows">
<div class="lrow"><span class="name">Large — flagship reasoning model</span><span class="val mono">128K CTX</span></div>
<div class="lrow"><span class="name">Small — fast, cost-efficient</span><span class="val mono">32K CTX</span></div>
<div class="lrow"><span class="name">Codestral — built for code</span><span class="val mono">256K CTX</span></div>
</section>
<section class="plans">
<div class="plan"><div class="pname mono">FREE</div><div class="price">$0</div><div class="desc">Experiment with the API</div></div>
<div class="plan alt"><div class="pname mono">PRO</div><div class="price">$14 / mo</div><div class="desc">For individual developers</div></div>
<div class="plan"><div class="pname mono">ENTERPRISE</div><div class="price">Custom</div><div class="desc">Control, ownership, reliability</div></div>
</section>
<footer>
<span>© Mistral AI</span>
<span>Mistral AI · Models · Developers · Enterprise</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: -0.28px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12.73px; font-weight: 700; line-height: 28px; letter-spacing: 0.108px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: 0.3px; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: 0.3px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbdbdb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Georgia,"Times New Roman",Times,serif; }
* { box-sizing:border-box; }
.sans { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #000000; }
.wordmark { font-size:24px; font-weight:700; letter-spacing:-.5px; text-transform:uppercase; font-stretch:condensed; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#000000; }
.sub-navlinks { font-family:-apple-system,Arial,sans-serif; }
.masthead { text-align:center; padding:22px 60px 18px; border-bottom:1px solid #e0e0e0; }
.rubric { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#057dbc; margin-bottom:10px; }
.masthead h1 { font-size:52px; font-weight:700; line-height:1.0; letter-spacing:-1px; margin:0 0 12px; }
.byline { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#757575; }
.mag { display:flex; gap:30px; padding:22px 32px 0; }
.maincol { flex:1.5; }
.maincol p { font-size:14px; line-height:1.6; color:#1a1a1a; margin:0 0 12px; }
.dropcap { font-size:44px; float:left; line-height:.8; padding:4px 6px 0 0; font-weight:700; }
.side { flex:1; border-left:1px solid #e0e0e0; padding-left:22px; }
.side .lbl { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#757575; margin-bottom:12px; }
.row { display:flex; gap:12px; padding:12px 0; border-top:1px solid #e0e0e0; }
.row:first-of-type { border-top:none; padding-top:0; }
.thumb { width:58px; height:58px; border-radius:2px; flex-shrink:0; }
.th1 { background:#e0e0e0; } .th2 { background:#d4d4d4; } .th3 { background:#c9c9c9; }
.row h4 { font-size:14px; font-weight:700; margin:0 0 4px; line-height:1.2; }
.row .meta { font-size:10px; color:#757575; text-transform:uppercase; letter-spacing:.03em; }
</style></head>
<body>
<nav>
<div class="wordmark">WIRED</div>
<div class="navlinks sub-navlinks"><span>Business</span><span>Security</span><span>Culture</span><span>Science</span></div>
</nav>
<div class="masthead">
<div class="rubric sub-navlinks">Backchannel</div>
<h1>The Quiet Race to Build a Machine That Understands You</h1>
<div class="byline sub-navlinks">By a Senior Writer · 12 Min Read</div>
</div>
<div class="mag">
<div class="maincol">
<p><span class="dropcap">I</span>n a nondescript office park, a small team is quietly rebuilding the interface between people and machines — not with screens, but with something closer to attention. The prototype has no keyboard.</p>
<p>What began as a research curiosity has become the center of a very serious, very well-funded argument about what comes after the smartphone.</p>
</div>
<div class="side">
<div class="lbl sub-navlinks">More from this issue</div>
<div class="row"><div class="thumb th1"></div><div><h4>Inside the Chip That Runs on Light</h4><div class="meta sub-navlinks">Gear · 6 min</div></div></div>
<div class="row"><div class="thumb th2"></div><div><h4>The Last Undersea Cable Map</h4><div class="meta sub-navlinks">Science · 9 min</div></div></div>
<div class="row"><div class="thumb th3"></div><div><h4>Who Owns Your Face Now?</h4><div class="meta sub-navlinks">Security · 8 min</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ee5457; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ee5457; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f2adae; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ce4234; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ee5457; color: #000000;
border: 1px solid #ce4234; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ee5457; color: #f5f5f5;
border: 1px solid #ef6e70; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f2adae; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e95151; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"Iosevka", "SFMono-Regular", Consolas, monospace; }
nav { height:56px; display:flex; align-items:center; gap:24px; padding:0 32px; border-bottom:1px solid #eaeaea; }
.brand { font-size:16px; font-weight:700; color:#262626; margin:0; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:14px; color:#262626; }
.register { margin-left:auto; background:#2e4692; color:#ffffff; border-radius:8px; padding:10px 18px;
font-size:14px; font-weight:700; }
.layout { display:flex; gap:16px; padding:18px 32px 0; }
.promo { width:270px; display:flex; flex-direction:column; gap:14px; }
.promo-card { background:#272727; color:#ffffff; border-radius:16px; padding:18px 20px; }
.promo-card .k { font-size:12px; color:#9d9d9d; margin-bottom:6px; }
.promo-card .t { font-size:16px; font-weight:700; line-height:1.3; }
.buy-pill { display:inline-flex; align-items:center; justify-content:center; background:#ffffff; color:#2e4592;
border:1px solid #d5dbee; border-radius:22px; height:32px; padding:0 14px; font-size:13px; margin-top:12px; }
.market { flex:1; background:#f2f4fb; border:1px solid #d5dbee; border-radius:12px; padding:16px 18px; }
.market-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.market-head .pair { font-size:15px; font-weight:700; color:#253158; }
.market-head .price { font-size:20px; font-weight:700; color:#49a870; }
.row-head { display:flex; font-size:11px; color:#4a4a4a; padding:6px 0; border-bottom:1px solid #d5dbee; }
.row-head span, .row span { flex:1; text-align:right; }
.row-head span:first-child, .row span:first-child { text-align:left; }
.row { display:flex; padding:6px 0; font-size:13px; font-weight:700; border-bottom:1px solid #e6eaf5; }
.up { color:#49a870; }
.down { color:#ec5b5c; }
.badge { display:inline-block; border-radius:8px; padding:2px 8px; font-size:11px; color:#ffffff; }
.badge.up { background:#49a870; }
.badge.down { background:#ec5b5c; }
.stats { display:flex; gap:16px; padding:16px 32px 24px; }
.stat { flex:1; background:#f2f4fb; border-radius:12px; padding:16px 0; text-align:center; }
.stat .n { font-size:20px; font-weight:700; color:#253158; }
.stat .l { font-size:12px; color:#4d4d4d; margin-top:4px; }
</style></head>
<body>
<nav>
<p class="brand">MaiCoin / MAX</p>
<div class="navlinks"><span>Markets</span><span>Trade</span><span>Earn</span><span>NFT</span></div>
<div class="register">Sign Up</div>
</nav>
<div class="layout">
<div class="promo">
<div class="promo-card"><div class="k">EARN</div><div class="t">On-chain staking, hands-off returns</div><div class="buy-pill">Learn more</div></div>
<div class="promo-card"><div class="k">AUTOMATE</div><div class="t">24-hour trading bot, set your strategy once</div></div>
</div>
<div class="market">
<div class="market-head"><span class="pair">BTC / TWD</span><span class="price mono">2,158,300</span></div>
<div class="row-head"><span>Price</span><span>Amount</span><span>Change</span></div>
<div class="row"><span class="up mono">2,158,300</span><span class="mono">0.842</span><span><span class="badge up">+1.24%</span></span></div>
<div class="row"><span class="up mono">2,157,900</span><span class="mono">0.310</span><span><span class="badge up">+1.21%</span></span></div>
<div class="row"><span class="down mono">2,156,100</span><span class="mono">1.205</span><span><span class="badge down">-0.18%</span></span></div>
<div class="row"><span class="up mono">2,159,400</span><span class="mono">0.560</span><span><span class="badge up">+1.30%</span></span></div>
<div class="row" style="border-bottom:none"><span class="down mono">2,155,700</span><span class="mono">0.923</span><span><span class="badge down">-0.24%</span></span></div>
</div>
</div>
<div class="stats">
<div class="stat"><div class="n mono">$4.2B</div><div class="l">24h Volume</div></div>
<div class="stat"><div class="n mono">2.1M</div><div class="l">Verified Users</div></div>
<div class="stat"><div class="n mono">120+</div><div class="l">Trading Pairs</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f33d4d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f33d4d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f4a2a9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2c2c2f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f33d4d; color: #2c2c2f;
border: 1px solid #2c2c2f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f33d4d; color: #f5f5f5;
border: 1px solid #f35a68; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f4a2a9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d33a48; color: #2c2c2f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141415; box-sizing:border-box;
font-family:"Apple SD Gothic Neo", "Malgun Gothic", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { font-weight:700; font-size:18px; }
.brand span { color:#f33d4d; }
.navlinks { display:flex; gap:4px; }
.navlinks span { font-size:15px; padding:4px 12px; border-radius:8px; color:#2c2c2f; }
.navlinks span.active { background:#f2f2f3; }
.navr { display:flex; gap:8px; }
.btn-login { background:#fff; color:#2c2c2f; border:1px solid #eaeaeb; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:600; }
.btn-signup { background:#2c2c2f; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:600; }
.hero { padding:24px 28px 10px; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 6px; }
.hero p { font-size:14px; color:#62626a; margin:0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 28px; }
.card { background:#f9f9fa; border-radius:8px; overflow:hidden; }
.cover { height:100px; }
.c1 .cover { background:linear-gradient(150deg,#ffd0d6,#f33d4d); }
.c2 .cover { background:linear-gradient(150deg,#d6e0ff,#8956f8); }
.c3 .cover { background:linear-gradient(150deg,#d0f0ea,#3478ff); }
.ctitle { font-size:15px; font-weight:700; padding:12px 14px 4px; }
.cauthor { display:flex; align-items:center; gap:6px; padding:0 14px 8px; font-size:12px; color:#76767f; }
.av { width:18px; height:18px; border-radius:50%; }
.sub { background:#f2f2f3; color:#2c2c2f; border:none; border-radius:8px; padding:5px 12px; font-size:12px; font-weight:600; margin-left:auto; }
.tags { padding:0 14px 14px; }
.tag { display:inline-block; background:#f2f2f3; color:#2c2c2f; border-radius:24px; font-size:11px; padding:3px 9px; margin-right:5px; }
</style></head>
<body>
<nav>
<div class="brand">POSTYPE<span>.</span></div>
<div class="navlinks"><span class="active">Home</span><span>Open Channels</span><span>Requests</span><span>Character Chat</span><span>Library</span></div>
<div class="navr"><button class="btn-login">Log in</button><button class="btn-signup">Sign up</button></div>
</nav>
<div class="hero">
<h1>A creator community that turns taste into value</h1>
<p>A world where every taste has value — turn your posts and creativity into income.</p>
</div>
<div class="grid">
<div class="card c1"><div class="cover"></div><div class="ctitle">From the Harbor at Night</div><div class="cauthor"><span class="av" style="background:#f33d4d;"></span>writer_bora<button class="sub">Subscribe</button></div><div class="tags"><span class="tag">#fiction</span><span class="tag">#mystery</span></div></div>
<div class="card c2"><div class="cover"></div><div class="ctitle">Illustration Commissions Open</div><div class="cauthor"><span class="av" style="background:#8956f8;"></span>jihu.draws<button class="sub">Subscribe</button></div><div class="tags"><span class="tag">#illustration</span><span class="tag">#commission</span></div></div>
<div class="card c3"><div class="cover"></div><div class="ctitle">Weekly News Briefing</div><div class="cauthor"><span class="av" style="background:#3478ff;"></span>news.desk<button class="sub">Subscribe</button></div><div class="tags"><span class="tag">#current-events</span><span class="tag">#newsletter</span></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; color: #7e7e7e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: transparent; color: #ffffff;
border: 1px solid #ffffff; border-radius: 0px;
padding: 16px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; background: #1a1a1a; color: #ffffff;
border: 1px solid #404040; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7e7e7e; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #242424; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.logo { display:flex; align-items:center; gap:8px; }
.mchip { display:flex; height:14px; border-radius:2px; overflow:hidden; }
.mchip span { width:6px; }
.m1 { background:#0066b1; } .m2 { background:#1c69d4; } .m3 { background:#e22718; }
.wordmark { font-size:14px; font-weight:700; letter-spacing:1px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#bbbbbb; }
.heroband { position:relative; height:340px; display:flex; flex-direction:column; justify-content:center; padding:0 40px;
background:
radial-gradient(120% 90% at 75% 20%, rgba(226,39,24,0.18), transparent 60%),
linear-gradient(115deg,#1a1a1a 0%,#0d0d0d 55%,#000 100%); overflow:hidden; }
.heroband::after { content:''; position:absolute; right:-60px; bottom:-40px; width:520px; height:220px;
background:linear-gradient(100deg,#2b2b2b,#050505 70%); border-radius:8px; transform:rotate(-3deg); opacity:0.9; }
.heroband .content { position:relative; z-index:2; }
.heroband h1 { font-size:56px; font-weight:700; text-transform:uppercase; margin:0 0 8px; line-height:1.02; letter-spacing:0; max-width:560px; }
.heroband p { font-size:16px; font-weight:300; color:#bbbbbb; margin:0 0 16px; max-width:420px; }
.btnrow { display:flex; gap:14px; }
.btn { border:1px solid #fff; color:#fff; padding:13px 26px; font-size:13px; font-weight:700; letter-spacing:1.5px; }
.stripe { height:4px; background:linear-gradient(90deg,#0066b1 0 33%, #1c69d4 33% 66%, #e22718 66% 100%); }
.specrow { display:grid; grid-template-columns:repeat(4,1fr); }
.spec { background:#0d0d0d; padding:24px; border-right:1px solid #262626; }
.spec:last-child { border-right:none; }
.spec b { display:block; font-size:28px; font-weight:700; }
.spec span { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#7e7e7e; }
</style></head>
<body>
<nav>
<div class="logo"><span class="mchip"><span class="m1"></span><span class="m2"></span><span class="m3"></span></span><span class="wordmark">BMW M</span></div>
<div class="navlinks"><span>Models</span><span>Topics</span><span>Magazine</span><span>Configurator</span><span>Fastlane</span></div>
<div class="navlinks"><span>EN</span><span>Search</span></div>
</nav>
<div class="heroband">
<div class="content">
<h1>THE ULTIMATE<br>DRIVING MACHINE</h1>
<p>Track-bred precision. Street-legal restraint. This is BMW M.</p>
<div class="btnrow"><span class="btn">EXPLORE M MODELS</span><span class="btn">CONFIGURE</span></div>
</div>
</div>
<div class="stripe"></div>
<div class="specrow">
<div class="spec"><b>0-100</b><span>km/h in 3.0s</span></div>
<div class="spec"><b>503 kW</b><span>M TwinPower Turbo</span></div>
<div class="spec"><b>305 km/h</b><span>Top track speed</span></div>
<div class="spec"><b>xDrive</b><span>M All-Wheel Drive</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:500; }
.navlinks .on { color:#FA2D48; font-weight:700; }
.navlinks span:not(.on) { color:#98989F99; color:#8E8E93; }
.content { padding:6px 32px 0; height:492px; overflow:hidden; }
h1.big { font-size:30px; font-weight:700; margin:6px 0 14px; letter-spacing:-0.2px; }
.hero { position:relative; border-radius:16px; overflow:hidden; height:206px;
background:linear-gradient(135deg,#5B2A86 0%, #A22A4E 55%, #FA2D48 100%); margin-bottom:20px; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.72) 100%); }
.heroinner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:18px 22px; }
.herotag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.herotitle { font-size:26px; font-weight:700; margin:6px 0 2px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.herosub { font-size:13px; color:#EBEBF599; }
.shelfhead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.shelfhead h2 { font-size:19px; font-weight:700; margin:0; }
.row { display:flex; gap:16px; }
.tile { width:118px; }
.art { width:118px; height:118px; border-radius:12px; }
.a1 { background:linear-gradient(160deg,#2D6E7E,#0D2C33); }
.a2 { background:linear-gradient(160deg,#8E6C3C,#2A1E0C); }
.a3 { background:linear-gradient(160deg,#4A2D6E,#160B24); }
.a4 { background:linear-gradient(160deg,#C0392B,#3A0E09); }
.tt { font-size:13px; font-weight:600; margin:8px 0 2px; }
.ta { font-size:11.5px; color:#8E8E93; }
.player { position:absolute; left:0; right:0; bottom:0; height:76px;
background:rgba(28,28,30,0.86); backdrop-filter:blur(20px); display:flex; align-items:center; padding:0 24px; gap:14px;
border-top:1px solid #2C2C2E; }
.part { width:44px; height:44px; border-radius:8px; background:linear-gradient(160deg,#FA2D48,#5B2A86); }
.pinfo { flex:1; }
.pt { font-size:14.5px; font-weight:600; }
.pa { font-size:12px; color:#8E8E93; margin-top:1px; }
.scrub { height:3px; background:rgba(255,255,255,0.15); border-radius:2px; margin-top:6px; position:relative; width:220px; }
.scrub::before { content:''; position:absolute; left:0; top:0; bottom:0; width:38%; background:#FA2D48; border-radius:2px; }
.pctrl { display:flex; align-items:center; gap:20px; }
.playbtn { width:30px; height:30px; border-radius:50%; background:#FA2D48; display:flex; align-items:center; justify-content:center; }
.playbtn::before { content:''; border-left:9px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; margin-left:2px; }
.skip { width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #EBEBF5; opacity:0.8; }
.heart { width:16px; height:16px; position:relative; }
.heart::before, .heart::after { content:''; position:absolute; width:9px; height:14px; background:#FA2D48; border-radius:9px 9px 0 0; top:0; }
.heart::before { left:0; transform:rotate(-45deg); transform-origin:bottom right; }
.heart::after { right:0; transform:rotate(45deg); transform-origin:bottom left; }
.atmos { margin-left:auto; background:#D4A857; color:#fff; font-size:9px; font-weight:600; padding:3px 8px; border-radius:500px; }
</style></head>
<body>
<nav>
<p class="brand">Apple Music (iOS)</p>
<div class="navlinks"><span class="on">Home</span><span>New</span><span>Radio</span><span>Library</span><span>Search</span></div>
<span style="width:26px;height:26px;border-radius:50%;background:#2C2C2E;display:block;"></span>
</nav>
<div class="content">
<h1 class="big">Listen Now</h1>
<div class="hero">
<div class="heroinner">
<span class="herotag">New Release</span>
<p class="herotitle">Night Drive</p>
<p class="herosub">The Weekend Collective · Alternative</p>
</div>
</div>
<div class="shelfhead"><h2>Recently Played</h2><span style="font-size:12px;color:#8E8E93;">See All</span></div>
<div class="row">
<div class="tile"><div class="art a1"></div><div class="tt">Blue Hour</div><div class="ta">Mira Sol</div></div>
<div class="tile"><div class="art a2"></div><div class="tt">Analog Heart</div><div class="ta">The Levers</div></div>
<div class="tile"><div class="art a3"></div><div class="tt">Static Bloom</div><div class="ta">Kessler</div></div>
<div class="tile"><div class="art a4"></div><div class="tt">Ember Line</div><div class="ta">Roan Fields</div></div>
</div>
</div>
<div class="player">
<div class="part"></div>
<div class="pinfo">
<div class="pt">Night Drive</div>
<div class="pa">The Weekend Collective</div>
<div class="scrub"></div>
</div>
<div class="pctrl">
<span class="heart"></span>
<span class="skip" style="transform:rotate(180deg)"></span>
<span class="playbtn"></span>
<span class="skip"></span>
</div>
<span class="atmos">Dolby Atmos</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #343434;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #343434;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #343434; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.7px; background: #bbaf80; color: #000000;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.7px; background: #ffffff; color: #343434;
border: 1px solid #bbaf80; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; background: transparent; color: #343434;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.6px; background: #bbaf80; color: #000000;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#343434; box-sizing:border-box;
font-family:'Roboto Condensed',Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia,'Times New Roman',serif; }
nav { height:56px; background:#ffffff; border-bottom:1px solid #d4d4d4; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#343434; }
.navlinks span.on { color:#a3946a; }
.wrap { display:flex; height:520px; }
.cover { width:420px; background:linear-gradient(160deg,#1a1a1a 0%,#343434 100%); position:relative; }
.cover::after { content:''; position:absolute; inset:40px; border:1px solid rgba(187,175,128,.4); }
.cover-year { position:absolute; top:60px; left:60px; color:#bbaf80; font-size:13px; letter-spacing:.1em; }
.info { flex:1; padding:44px 44px; display:flex; flex-direction:column; gap:16px; }
.info .cat { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#8a8a8a; }
.info h1 { font-family:Georgia,serif; font-size:26px; font-weight:700; margin:0; line-height:1.3; }
.artist { font-size:13px; color:#4a4a4a; }
.format-row { display:flex; gap:10px; }
.format { border:1px solid #d4d4d4; padding:8px 16px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.format.on { border-color:#a3946a; color:#a3946a; }
.desc { font-size:13px; color:#4a4a4a; line-height:1.7; max-width:420px; font-family:Georgia,serif; }
.price { font-family:Georgia,serif; font-size:19px; color:#343434; }
.buy-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.btn-buy { background:transparent; border:1px solid #bbaf80; color:#a3946a; padding:12px 30px; font-size:12px;
text-transform:uppercase; letter-spacing:.1em; border-radius:8px; }
footer { height:64px; background:#f2f2f2; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-size:11px; color:#4a4a4a; }
</style></head>
<body>
<nav>
<p class="brand">4ad</p>
<div class="navlinks"><span>Releases</span><span class="on">Shop</span><span>Artists</span><span>Journal</span></div>
</nav>
<div class="wrap">
<div class="cover"><span class="cover-year">MMXXVI</span></div>
<div class="info">
<span class="cat">LP · Album</span>
<h1>Slow Light in Reverse</h1>
<span class="artist">Wren Sorrow</span>
<div class="format-row">
<span class="format on">Vinyl LP</span>
<span class="format">CD</span>
<span class="format">Digital</span>
</div>
<p class="desc">A quiet, corrosive record built from tape loops and half-remembered melodies — the label's first release in this register since its earliest years.</p>
<span class="price">£22.00</span>
<div class="buy-row">
<button class="btn-buy">Buy</button>
</div>
</div>
</div>
<footer><span>© 4ad, since 1980</span><span>Mailing List · Shipping · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a1ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a1ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cffa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f3438; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a1ff; color: #2f3438;
border: 1px solid #2f3438; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a1ff; color: #f5f5f5;
border: 1px solid #27aefd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cffa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0890df; color: #2f3438;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#424242; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e0e0e0; }
.brand { font-size:18px; font-weight:700; color:#2f3438; }
.search { width:255px; height:32px; border:1px solid #e0e0e0; border-radius:4px; font-size:14px; color:#8c9094;
display:flex; align-items:center; padding:0 12px; }
.navcta { background:#00a1ff; color:#ffffff; font-size:14px; height:40px; border-radius:4px; padding:0 16px;
display:flex; align-items:center; }
.body { padding:18px 32px 0; }
.tabrow { display:flex; gap:18px; margin-bottom:14px; }
.tabrow span { font-size:16px; font-weight:700; color:#2f3438; }
.tabrow span.muted { color:#828c94; font-weight:400; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.card { display:flex; flex-direction:column; gap:6px; }
.thumb { width:100%; aspect-ratio:1/1; border-radius:4px; position:relative; overflow:hidden;
background-color:#f4f4f4;
background-image: linear-gradient(135deg, rgba(0,161,255,0.14), rgba(0,0,0,0.02)); }
.thumb::after { content:''; position:absolute; left:14%; right:14%; top:30%; bottom:30%;
background:rgba(0,0,0,0.05); border-radius:6px; }
.ptitle { font-size:15px; font-weight:400; color:#424242; }
.pprice { font-size:15px; font-weight:700; color:#2f3438; }
.pmeta { font-size:14px; color:#828c94; }
.floatbtn { position:absolute; right:24px; bottom:24px; width:48px; height:48px; border-radius:24px;
background:#ffffff; box-shadow:0 2px 5px rgba(63,71,77,0.15); }
</style></head>
<body>
<nav>
<span class="brand">Ohouse</span>
<span class="search">Search furniture, rooms, brands</span>
<span class="navcta">Write a Post</span>
</nav>
<div class="body">
<div class="tabrow">
<span>Today's Feed</span>
<span class="muted">Store</span>
<span class="muted">Community</span>
<span class="muted">Renovation</span>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">One-room studio in warm oak</div><div class="pmeta">128 likes</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Fabric Sofa 3-Seater</div><div class="pprice">₩389,000</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Minimal pendant lamp</div><div class="pprice">₩58,000</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Small kitchen renovation diary</div><div class="pmeta">54 comments</div></div>
</div>
</div>
<div class="floatbtn"></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #212126; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #212126; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969698; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #36363d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212126; color: #ffffff;
border: 1px solid #36363d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #212126; color: #f5f5f5;
border: 1px solid #434347; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969698; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #24242a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212126; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e5e7eb; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:36px; }
.navlinks span { font-size:16px; font-weight:500; color:#36363d; }
.navlinks span.on { color:#212126; }
.hero { position:relative; padding:56px 40px 40px; overflow:hidden; }
/* folded-paper 27-degree fold motif — flat panels, no shadow, achromatic */
.fold { position:absolute; width:340px; height:340px; right:20px; top:20px; }
.fold .p { position:absolute; background:#f8f8f8; border:1px solid #e5e7eb; }
.fold .p1 { width:220px; height:220px; top:20px; left:60px; transform:rotate(27deg); }
.fold .p2 { width:160px; height:160px; top:110px; left:0; background:#efefef; transform:rotate(-16deg); }
.fold .p3 { width:120px; height:120px; top:190px; left:170px; background:#ffffff; border:1px solid #212126; transform:rotate(9deg); }
.hero h1 { position:relative; font-size:40px; font-weight:700; line-height:1.25; margin:0 0 14px; max-width:440px; }
.hero p { position:relative; font-size:16px; color:#57575b; line-height:1.5; max-width:420px; margin:0 0 20px; }
.tag { position:relative; display:inline-block; font-size:14px; font-weight:500; color:#62626a;
background:#f8f8f8; border-radius:50px; padding:4px 14px 4px 14px; }
.body { position:absolute; top:340px; left:0; right:0; bottom:0; padding:0 40px; border-top:1px solid #e5e7eb; }
.colgrid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; height:100%; }
.col { padding:22px 20px 0 0; border-right:1px solid #e5e7eb; }
.col:last-child { border-right:none; }
.col h3 { font-size:20px; font-weight:700; margin:0 0 10px; }
.col ul { list-style:none; margin:0; padding:0; }
.col li { font-size:16px; color:#36363d; padding:7px 0; }
.col li.muted { color:#57575b; }
</style></head>
<body>
<nav>
<span class="brand">NHN</span>
<div class="navlinks"><span class="on">Company</span><span>Services</span><span>IR</span><span>Careers</span></div>
</nav>
<div class="hero">
<div class="fold"><span class="p p1"></span><span class="p p2"></span><span class="p p3"></span></div>
<span class="tag">Weaving New Play</span>
<h1>Connection, woven<br>in every direction.</h1>
<p>From games to payments and technology, NHN weaves diverse businesses into one platform.</p>
</div>
<div class="body">
<div class="colgrid">
<div class="col">
<h3>Services</h3>
<ul><li>Games</li><li>Payments</li><li>Commerce</li><li class="muted">Content</li></ul>
</div>
<div class="col">
<h3>Technology</h3>
<ul><li>Cloud Infrastructure</li><li>Data Platform</li><li class="muted">AI Research</li></ul>
</div>
<div class="col">
<h3>Investor Relations</h3>
<ul><li>Consolidated Financials</li><li>Disclosures</li><li class="muted">Governance</li></ul>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4f6e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4f6e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faaab8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e8455f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4f6e; color: #000000;
border: 1px solid #e8455f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4f6e; color: #f5f5f5;
border: 1px solid #fd6a84; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faaab8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb4d6c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:296px; height:640px; float:left;
background:radial-gradient(circle at 50% 30%, #3a1626, #121212 70%); overflow:hidden; }
.scrim-top { position:absolute; top:0; left:0; right:0; height:90px; padding:16px;
background:linear-gradient(rgba(0,0,0,0.55), transparent); display:flex; justify-content:space-between; align-items:flex-start; }
.badge-live { background:#ff4f6e; color:#fff; font-size:11px; font-weight:700; border-radius:4px; padding:2px 6px; }
.viewer { font-size:11px; font-weight:700; color:rgba(255,255,255,0.85); background:rgba(0,0,0,0.4); border-radius:4px; padding:2px 6px; }
.scrim-bottom { position:absolute; bottom:64px; left:0; right:0; padding:14px 16px;
background:linear-gradient(transparent, rgba(0,0,0,0.65)); }
.liver { display:flex; align-items:center; gap:8px; }
.avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#ff4f6e,#8b5cf6); border:2px solid #ff4f6e; }
.liver b { font-size:15px; font-weight:700; }
.liver span { display:block; font-size:11px; color:rgba(255,255,255,0.6); }
.chat { position:absolute; bottom:70px; left:16px; right:80px; display:flex; flex-direction:column; gap:5px; }
.msg { font-size:11px; background:rgba(0,0,0,0.35); border-radius:10px; padding:4px 8px; color:rgba(255,255,255,0.85); width:fit-content; }
.msg b { color:#ffc83d; margin-right:4px; }
.composer { position:absolute; bottom:14px; left:16px; right:16px; height:36px; border-radius:24px;
background:#2c2c2e; display:flex; align-items:center; padding:0 14px; }
.composer span.ph { font-size:12px; color:rgba(255,255,255,0.45); }
.composer span.send { margin-left:auto; color:#ff4f6e; font-weight:700; font-size:14px; }
.heart { position:absolute; right:14px; bottom:60px; font-size:20px; }
.main { margin-left:296px; padding:20px 24px; }
.topbar { display:flex; justify-content:space-between; align-items:center; }
.brand { font-size:20px; font-weight:700; color:#ff4f6e; }
.golive { background:#ff4f6e; color:#fff; border-radius:24px; padding:10px 22px; font-size:15px; font-weight:700; }
h3.sec { font-size:16px; font-weight:600; margin:20px 0 10px; color:#fff; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.scard { position:relative; height:120px; border-radius:12px; overflow:hidden; background:linear-gradient(160deg,#2c2c2e,#1c1c1e); }
.scard .tag { position:absolute; top:6px; left:6px; background:#ff4f6e; color:#fff; font-size:9px; font-weight:700; border-radius:4px; padding:1px 5px; }
.scard .vc { position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.5); color:#fff; font-size:9px; font-weight:700; border-radius:4px; padding:1px 5px; }
.scard .nm { position:absolute; bottom:6px; left:8px; font-size:11px; font-weight:700; color:#fff; }
.rank { margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.rrow { display:flex; align-items:center; gap:10px; background:#1c1c1e; border-radius:12px; padding:8px 12px; }
.rrow .num { width:20px; height:20px; border-radius:50%; background:#ffc83d; color:#121212; font-size:11px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.rrow .av { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#8b5cf6,#ff4f6e); }
.rrow b { font-size:13px; }
.rrow .fol { margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,0.3); color:rgba(255,255,255,0.7);
border-radius:16px; padding:5px 14px; font-size:12px; font-weight:600; }
</style></head>
<body>
<div class="stage">
<div class="scrim-top">
<span class="badge-live">LIVE</span>
<span class="viewer">👁 12.4K</span>
</div>
<div class="chat">
<div class="msg"><b>Kevin</b>hi from Kaohsiung!</div>
<div class="msg"><b>Sakura</b>💗💗💗</div>
<div class="msg"><b>A-Zhe</b>let's gooo</div>
</div>
<div class="heart">💗</div>
<div class="scrim-bottom">
<div class="liver">
<div class="avatar"></div>
<div><b>17LIVE</b><span>Singing tonight · Fan club open</span></div>
</div>
</div>
<div class="composer"><span class="ph">Say something nice…</span><span class="send">➤</span></div>
</div>
<div class="main">
<div class="topbar">
<span class="brand">17LIVE</span>
<button class="golive">GO LIVE</button>
</div>
<h3 class="sec">Trending Now</h3>
<div class="grid">
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 8.1K</span><span class="nm">Mika</span></div>
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 5.6K</span><span class="nm">Ren</span></div>
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 3.2K</span><span class="nm">Yui</span></div>
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 2.9K</span><span class="nm">Kai</span></div>
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 1.7K</span><span class="nm">Sora</span></div>
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 940</span><span class="nm">Nao</span></div>
</div>
<h3 class="sec">Top Fan Ranking</h3>
<div class="rank">
<div class="rrow"><span class="num">1</span><div class="av"></div><b>A-Zhe</b><button class="fol">Following</button></div>
<div class="rrow"><span class="num">2</span><div class="av"></div><b>Sakura</b><button class="fol">Following</button></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0056; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0056; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa87ad; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0056; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0056; color: #f5f5f5;
border: 1px solid #fd276f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa87ad; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc054e; color: #222222;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:20px; font-weight:700; }
.navlinks { display:flex; gap:10px; }
.navitem { font-size:14px; font-weight:600; color:#212429; background:#fff; border-radius:4px; padding:5.5px 12px; }
.navitem.on { background:#222222; color:#fff; }
.hero { padding:20px 36px 0; }
.eyebrow { color:#767676; font-size:15px; font-weight:400; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; }
.hero h1 { font-size:42px; font-weight:700; line-height:1.2; margin:0 0 16px; max-width:520px; }
.cta-pink { display:inline-flex; align-items:center; background:#ff0056; color:#fff; font-size:16px; font-weight:700;
border-radius:30px; padding:8px 20px; height:40px; }
.darksection { position:absolute; top:250px; left:0; right:0; bottom:0; background:#111111; padding:24px 36px 0; }
.ds-title { color:#fff; font-size:23px; font-weight:700; margin-bottom:16px; }
.cards { display:flex; gap:16px; }
.dcard { flex:1; background:#212126; color:#fff; border-radius:12px; padding:18px; }
.dcard .icon { width:36px; height:36px; border-radius:9999px; background:linear-gradient(135deg,#ff0056,#8c1c55); margin-bottom:12px; }
.dcard h4 { font-size:16px; font-weight:700; margin:0 0 6px; }
.dcard p { font-size:13px; color:#c9c9c9; margin:0; line-height:1.4; }
.fab { position:absolute; right:24px; bottom:24px; width:48px; height:48px; border-radius:24px; background:#212529;
box-shadow:rgba(0,0,0,0.04) 0px 1px 2px 0px, rgba(0,0,0,0.06) 0px 8px 24px; }
</style></head>
<body>
<nav>
<span class="brand">NRISE (WIPPY)</span>
<div class="navlinks">
<span class="navitem on">Home</span>
<span class="navitem">Product</span>
<span class="navitem">Culture</span>
<span class="navitem">Career</span>
</div>
</nav>
<div class="hero">
<div class="eyebrow">Mission</div>
<h1>Comfortable connection,<br>everyday happiness.</h1>
<span class="cta-pink">Learn More</span>
</div>
<div class="darksection">
<div class="ds-title">What we build</div>
<div class="cards">
<div class="dcard"><div class="icon"></div><h4>Social Discovery</h4><p>Meet people who share your interests, safely and simply.</p></div>
<div class="dcard"><div class="icon"></div><h4>Healthy Habits</h4><p>Small daily routines that add up to real life change.</p></div>
<div class="dcard"><div class="icon"></div><h4>Trust First</h4><p>Safety is our top priority for every connection made.</p></div>
</div>
</div>
<div class="fab"></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c8a35a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #c8a35a;
border: 1px solid #c8a35a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #282217; color: #c8a35a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0A; color:#EDE9E2; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia, "Times New Roman", serif; }
.topbar { height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-bottom:1px solid #2A2620; }
.word { color:#C8A35A; font-size:20px; font-weight:700; letter-spacing:1px; }
.eyebrow { font-size:9px; letter-spacing:2px; color:#9E988C; margin-top:2px; }
.main { display:flex; height:calc(640px - 64px); }
.cardcol { width:400px; padding:22px; display:flex; flex-direction:column; gap:14px; }
.batch { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border:1px solid #2A2620; border-radius:4px; background:#141414; }
.batch .lab { font-size:11px; letter-spacing:1.5px; color:#9E988C; }
.batch .cnt { font-size:15px; color:#C8A35A; }
.card { flex:1; border:1px solid #2A2620; border-radius:6px; background:#100F0C; overflow:hidden; display:flex; flex-direction:column; }
.photo { height:280px; background:linear-gradient(155deg,#3a3226,#1c1a17 70%); position:relative; }
.seal { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:1px solid #C8A35A; background:rgba(10,10,10,0.6); color:#C8A35A; display:flex; align-items:center; justify-content:center; font-size:13px; }
.cbody { padding:16px 18px; flex:1; display:flex; flex-direction:column; gap:10px; }
.name { font-size:25px; font-weight:700; }
.name span { font-size:16px; font-weight:400; color:#9E988C; }
.rule { width:28px; height:1px; background:#C8A35A; }
.cred { font-size:13px; color:#9E988C; }
.cred b { color:#C8A35A; margin-right:6px; }
.actions { display:flex; gap:16px; align-items:center; margin-top:auto; padding-top:6px; }
.abtn { border-radius:50%; display:flex; align-items:center; justify-content:center; }
.a-pass { width:44px; height:44px; border:1px solid #2A2620; color:#9E988C; font-size:15px; }
.a-heart { width:52px; height:52px; border:1px solid #C8A35A; color:#C8A35A; font-size:20px; }
.a-msg { width:44px; height:44px; border:1px solid #2A2620; color:#C8A35A; font-size:15px; }
.side { flex:1; padding:34px 34px 34px 8px; display:flex; flex-direction:column; gap:22px; }
.concierge { background:#1C1A17; border:1px solid #2A2620; border-left:2px solid #C8A35A; border-radius:4px; padding:18px 20px; }
.cc-head { font-size:11px; letter-spacing:1.5px; color:#C8A35A; margin-bottom:10px; }
.cc-body { font-style:italic; font-size:16px; line-height:1.6; }
.cta { color:#C8A35A; font-size:12px; margin-top:12px; letter-spacing:0.6px; }
.cta-btn { align-self:flex-start; background:#C8A35A; color:#1A1408; padding:15px 30px; border-radius:3px; font-size:13px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; }
.out-btn { align-self:flex-start; border:1px solid #C8A35A; color:#C8A35A; padding:14px 26px; border-radius:3px; font-size:13px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; }
</style></head>
<body>
<div class="topbar"><div class="word serif">The League (iOS)</div><div class="eyebrow">MEMBERS ONLY</div></div>
<div class="main">
<div class="cardcol">
<div class="batch"><span class="lab">TODAY'S BATCH</span><span class="cnt serif">7 Prospects</span></div>
<div class="card">
<div class="photo"><div class="seal">★</div></div>
<div class="cbody">
<div class="name serif">Eleanor <span>29</span></div>
<div class="rule"></div>
<div class="cred"><b>◦</b>VP Strategy · Goldman Sachs</div>
<div class="cred"><b>◦</b>Harvard Business School</div>
<div class="cred"><b>◦</b>Tribeca, New York</div>
<div class="actions">
<div class="abtn a-pass">✕</div>
<div class="abtn a-heart">♥</div>
<div class="abtn a-msg">✉</div>
</div>
</div>
</div>
</div>
<div class="side">
<div class="concierge">
<div class="cc-head">★ YOUR CONCIERGE</div>
<div class="cc-body serif">I think you and Eleanor would hit it off — you both ran the New York Marathon and studied at HBS. Worth a quiet introduction.</div>
<div class="cta">Make the introduction →</div>
</div>
<div class="cta-btn">Send Heart</div>
<div class="out-btn">View Profile</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0096fa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0096fa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87caf7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0086e0; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0096fa; color: #000000;
border: 1px solid #0086e0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0096fa; color: #f5f5f5;
border: 1px solid #27a5f9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87caf7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0093f6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
background:#ffffff; border-bottom:1px solid #dddddd; }
.brand { font-weight:700; font-size:19px; color:#1a1a1a; }
.brand span { color:#0096fa; }
.search { flex:1; max-width:400px; margin:0 20px; height:34px; border-radius:20px; background:#f5f5f5;
display:flex; align-items:center; padding:0 16px; color:#999999; font-size:13px; }
.navr { display:flex; align-items:center; gap:10px; }
.btn-blue { background:#0096fa; color:#fff; border:none; border-radius:6px; padding:8px 18px; font-size:13px; font-weight:700; }
.btn-out { background:#fff; color:#0096fa; border:1px solid #0096fa; border-radius:6px; padding:7px 16px; font-size:13px; font-weight:700; }
.tabs { height:42px; display:flex; align-items:center; gap:22px; padding:0 24px; border-bottom:1px solid #eeeeee; background:#fff; }
.tab { font-size:13px; color:#858585; font-weight:700; padding:0 2px; }
.tab.active { color:#0096fa; border-bottom:2px solid #0096fa; padding-bottom:12px; }
.grid { padding:16px 24px; display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
.card { background:#fff; border-radius:8px; overflow:hidden; }
.thumb { width:100%; height:150px; border-radius:8px; position:relative; }
.badge { position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:2px 7px; }
.r18 { position:absolute; top:6px; left:6px; background:#ff4060; color:#fff; font-size:10px; font-weight:700; border-radius:4px; padding:2px 6px; }
.title { font-size:12px; font-weight:700; color:#1a1a1a; margin-top:6px; padding:0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.author { display:flex; align-items:center; gap:5px; font-size:11px; color:#666666; margin-top:3px; padding:0 2px; }
.av { width:16px; height:16px; border-radius:50%; }
.heart { display:flex; align-items:center; gap:3px; margin-left:auto; font-size:10.5px; color:#858585; }
.heart.filled { color:#ff4060; }
.t1 { background:linear-gradient(145deg,#ffd6e0,#ff9db3); }
.t2 { background:linear-gradient(145deg,#c7e9ff,#7fc4ff); }
.t3 { background:linear-gradient(145deg,#d9f0d1,#9fd88a); }
.t4 { background:linear-gradient(145deg,#fff0c2,#ffd166); }
.t5 { background:linear-gradient(145deg,#e3d6ff,#b79bff); }
.t6 { background:linear-gradient(145deg,#ffe0d1,#ffab8a); }
.t7 { background:linear-gradient(145deg,#d1f0ea,#8adfce); }
.t8 { background:linear-gradient(145deg,#f0d1e6,#dd9dc0); }
.t9 { background:linear-gradient(145deg,#cfd9ff,#9aabff); }
.t10 { background:linear-gradient(145deg,#ffe8b0,#f5c26b); }
.side { position:absolute; right:0; top:98px; width:200px; height:522px; background:#fafafa; border-left:1px solid #eeeeee; padding:16px; }
.side h4 { font-size:13px; font-weight:700; margin:0 0 10px; color:#1a1a1a; }
.tag { display:inline-block; background:#f5f5f5; color:#0096fa; font-size:11px; padding:4px 8px; border-radius:4px; margin:0 5px 6px 0; }
</style></head>
<body>
<nav>
<div class="brand">pixiv</div>
<div class="search">Search by tag or artist</div>
<div class="navr">
<button class="btn-out">Log in</button>
<button class="btn-blue">Sign up</button>
</div>
</nav>
<div class="tabs">
<div class="tab active">All</div>
<div class="tab">Illustrations</div>
<div class="tab">Manga</div>
<div class="tab">Novels</div>
<div class="tab">Rankings</div>
</div>
<div class="grid" style="width:calc(960px - 200px);">
<div class="card"><div class="thumb t1"><div class="badge">3P</div></div><div class="title">Corner at Dusk</div><div class="author"><span class="av" style="background:#ff9db3;"></span>hana_art<span class="heart filled">♥ 812</span></div></div>
<div class="card"><div class="thumb t2"></div><div class="title">Under a Falling Star</div><div class="author"><span class="av" style="background:#7fc4ff;"></span>umi_draws<span class="heart">♡ 340</span></div></div>
<div class="card"><div class="thumb t3"><div class="r18">R-18</div></div><div class="title">Fragments of Memory</div><div class="author"><span class="av" style="background:#9fd88a;"></span>midori.k<span class="heart filled">♥ 1.2k</span></div></div>
<div class="card"><div class="thumb t4"></div><div class="title">Cat Nap</div><div class="author"><span class="av" style="background:#ffd166;"></span>nekomaru<span class="heart">♡ 205</span></div></div>
<div class="card"><div class="thumb t5"><div class="badge">6P</div></div><div class="title">Library of Another World</div><div class="author"><span class="av" style="background:#b79bff;"></span>ruri_sketch<span class="heart filled">♥ 640</span></div></div>
<div class="card"><div class="thumb t6"></div><div class="title">Beneath the Cherry Blossoms</div><div class="author"><span class="av" style="background:#ffab8a;"></span>sakura_ink<span class="heart">♡ 118</span></div></div>
<div class="card"><div class="thumb t7"></div><div class="title">Reflections on Water</div><div class="author"><span class="av" style="background:#8adfce;"></span>mizu.works<span class="heart filled">♥ 990</span></div></div>
<div class="card"><div class="thumb t8"></div><div class="title">Pastel Girl</div><div class="author"><span class="av" style="background:#dd9dc0;"></span>momo_illust<span class="heart">♡ 77</span></div></div>
<div class="card"><div class="thumb t9"><div class="badge">2P</div></div><div class="title">Clockwork City</div><div class="author"><span class="av" style="background:#9aabff;"></span>tetsu_draw<span class="heart filled">♥ 455</span></div></div>
<div class="card"><div class="thumb t10"></div><div class="title">An Autumn Gift</div><div class="author"><span class="av" style="background:#f5c26b;"></span>momiji.art<span class="heart">♡ 63</span></div></div>
</div>
<div class="side">
<h4>Popular tags</h4>
<span class="tag">#original</span><span class="tag">#landscape</span><span class="tag">#watercolor</span>
<span class="tag">#creative</span><span class="tag">#cat</span><span class="tag">#fantasy</span>
<span class="tag">#study</span><span class="tag">#sketch</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da3743; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #da3743;
border: 1px solid #da3743; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9dfe1; color: #da3743;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:190px; background:linear-gradient(140deg,#3a2620,#6b4438 60%,#c99a6b); position:relative; }
.hero .navcirc { position:absolute; top:14px; width:32px; height:32px; border-radius:50%;
background:rgba(20,20,20,0.4); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
.hero .back { left:18px; }
.hero .heart { right:60px; }
.hero .share { right:18px; }
.content { padding:14px 28px 0; }
.name-row { display:flex; align-items:center; justify-content:space-between; }
.rname { font-size:25px; font-weight:800; letter-spacing:-0.4px; margin:0; }
.rating { display:flex; align-items:center; gap:6px; font-size:13px; color:#6B6B70; margin-top:4px; }
.stars { color:#E8A33D; letter-spacing:1px; font-size:13px; }
.meta { font-size:13.5px; color:#6B6B70; margin:6px 0 8px; }
.proof { display:inline-flex; align-items:center; gap:5px; background:rgba(47,168,106,0.16); color:#2FA86A;
border-radius:999px; padding:5px 12px; font-size:11px; font-weight:700; margin-bottom:12px; }
.selecttime { font-size:17px; font-weight:700; margin:6px 0 3px; }
.context { font-size:12.5px; color:#6B6B70; margin-bottom:10px; }
.slots { display:flex; gap:9px; margin-bottom:14px; }
.slot { width:78px; height:52px; border-radius:10px; background:#F6F6F7; border:1px solid #E4E4E7;
display:flex; flex-direction:column; align-items:center; justify-content:center; }
.slot .t { font-size:14px; font-weight:700; }
.slot .pts { font-size:9px; font-weight:700; color:#1F8A8A; margin-top:2px; }
.slot.sel { background:#DA3743; border:none; }
.slot.sel .t { color:#fff; }
.slot.sel .pts { color:rgba(255,255,255,0.85); }
.paramrow { display:flex; gap:10px; margin-bottom:16px; }
.paramchip { display:flex; align-items:center; gap:6px; background:#F6F6F7; border:1px solid #E4E4E7;
border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; }
.divider { border-top:0.5px solid #E4E4E7; margin:10px 0; }
.rec-title { font-size:15px; font-weight:700; margin:8px 0; }
.reccard { display:flex; gap:12px; margin-bottom:10px; }
.reccard .thumb { width:64px; height:64px; border-radius:14px; background:linear-gradient(135deg,#e8c9a0,#a06a3f); flex-shrink:0; }
.reccard .nm { font-size:14px; font-weight:700; }
.reccard .mt { font-size:12px; color:#6B6B70; }
.reccard .mini-slots { display:flex; gap:5px; margin-top:4px; }
.reccard .mslot { font-size:10px; font-weight:700; padding:3px 7px; border-radius:6px; background:#F6F6F7; border:1px solid #E4E4E7; }
.sticky { position:absolute; left:0; right:0; bottom:0; padding:12px 28px 16px; background:#FFFFFF;
box-shadow:0 -2px 16px rgba(0,0,0,0.10); }
.reservebtn { width:100%; height:50px; border-radius:999px; background:#DA3743; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }
</style></head>
<body style="position:relative;">
<div class="hero">
<div class="navcirc back">‹</div>
<div class="navcirc heart">♡</div>
<div class="navcirc share">↗</div>
</div>
<div class="content">
<div class="name-row">
<h1 class="rname">OpenTable (iOS)</h1>
</div>
<div class="rating"><span class="stars">★★★★★</span> 4.7 <span style="color:#9A9A9F;">(412)</span></div>
<div class="meta">Steakhouse · $$$$ · Downtown</div>
<div class="proof">🔥 Booked 38 times today</div>
<div class="selecttime">Select a time</div>
<div class="context">Tonight · Wed May 21 · Party of 2</div>
<div class="slots">
<div class="slot"><span class="t">6:45</span></div>
<div class="slot sel"><span class="t">7:00</span></div>
<div class="slot"><span class="t">7:15</span><span class="pts">+1,000</span></div>
<div class="slot"><span class="t">7:30</span></div>
<div class="slot"><span class="t">8:15</span><span class="pts">+1,000</span></div>
</div>
<div class="paramrow">
<div class="paramchip">👤 2 people</div>
<div class="paramchip">📅 May 21</div>
</div>
<div class="divider"></div>
<div class="rec-title">Recently viewed</div>
<div class="reccard">
<div class="thumb"></div>
<div><div class="nm">Casa Lumen</div><div class="mt">Italian · $$$ · Riverside</div>
<div class="mini-slots"><span class="mslot">6:30</span><span class="mslot">7:45</span><span class="mslot">8:00</span></div></div>
</div>
</div>
<div class="sticky"><div class="reservebtn">Reserve for 7:00 PM</div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #c8102e; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.5; background: #005b9a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', Roboto, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.mono { font-family:'Courier New', Courier, monospace; }
.announce { flex:0 0 auto; height:30px; background:#c8102e; color:#fff; font-size:12px; display:flex;
align-items:center; justify-content:center; }
nav { flex:0 0 auto; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 26px; border-bottom:1px solid #d1d1d1; }
.brand { font-size:16px; font-weight:700; margin:0; }
.searchbar { flex:1; max-width:340px; height:34px; border:2px solid #c8102e; margin:0 24px; display:flex; }
.searchbar .sbtn { background:#c8102e; width:44px; }
.icons { display:flex; gap:14px; }
.icons span { width:16px; height:16px; border-radius:2px; border:1px solid #313131; display:inline-block; }
main { flex:1 1 auto; display:flex; padding:16px 26px; gap:16px; min-height:0; }
.rail { flex:0 0 150px; font-size:12px; }
.rail h4 { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin:0 0 8px; }
.rail .opt { padding:5px 0; border-bottom:1px solid #ebebeb; color:#4a4a4a; }
.content { flex:1; display:flex; flex-direction:column; min-height:0; }
.breadcrumb { font-size:12px; color:#005b9a; margin-bottom:8px; }
.pdp { flex:0 0 auto; display:flex; gap:18px; margin-bottom:12px; }
.pdp-img { flex:0 0 180px; height:150px; background:#f5f5f5; border:1px solid #d1d1d1; border-radius:4px; position:relative; }
.pdp-img::after { content:''; position:absolute; inset:24px; border-radius:50%;
background:radial-gradient(circle, #d1d1d1 0 40%, transparent 42%),
conic-gradient(#b0b0b0 0 10deg, transparent 10deg 30deg, #b0b0b0 30deg 40deg, transparent 40deg 60deg,
#b0b0b0 60deg 70deg, transparent 70deg 90deg, #b0b0b0 90deg 100deg, transparent 100deg 120deg,
#b0b0b0 120deg 130deg, transparent 130deg 150deg, #b0b0b0 150deg 160deg, transparent 160deg 180deg,
#b0b0b0 180deg 190deg, transparent 190deg 210deg, #b0b0b0 210deg 220deg, transparent 220deg 240deg,
#b0b0b0 240deg 250deg, transparent 250deg 270deg, #b0b0b0 270deg 280deg, transparent 280deg 300deg,
#b0b0b0 300deg 310deg, transparent 310deg 330deg, #b0b0b0 330deg 340deg, transparent 340deg 360deg);
}
.pdp-info { flex:1; }
.pdp-info .part { font-size:12px; color:#767676; margin:0 0 4px; }
.pdp-info h1 { font-size:18px; margin:0 0 6px; }
.pdp-info .price { font-size:20px; font-weight:700; color:#313131; margin:0 0 10px; }
.btnrow { display:flex; gap:8px; }
.btn-primary { background:#c8102e; color:#fff; border:none; padding:9px 20px; font-size:13px; font-weight:700;
letter-spacing:0.4px; text-transform:uppercase; }
.btn-quote { background:#fff; color:#c8102e; border:2px solid #c8102e; padding:8px 20px; font-size:13px; font-weight:700;
letter-spacing:0.4px; text-transform:uppercase; }
.spectable { flex:1; border:1px solid #d1d1d1; min-height:0; overflow:hidden; }
.srow { display:flex; font-size:12px; border-bottom:1px solid #ebebeb; }
.srow.even { background:#f5f5f5; }
.srow span:first-child { flex:0 0 140px; font-weight:700; text-transform:uppercase; font-size:11px; color:#767676; padding:6px 12px; }
.srow span:last-child { padding:6px 12px; }
footer { flex:0 0 auto; height:52px; background:#1a1a1a; color:#cccccc; display:flex; align-items:center;
justify-content:space-between; padding:0 26px; font-size:12px; }
</style></head>
<body>
<div class="announce">Free freight on orders over $99 · Will-call available at 500+ branches</div>
<nav>
<p class="brand">Applied Industrial Technologies</p>
<div class="searchbar"><div class="sbtn"></div></div>
<div class="icons"><span></span><span></span></div>
</nav>
<main>
<div class="rail">
<h4>Filter By</h4>
<div class="opt">☐ Bearings</div>
<div class="opt">☐ Seals</div>
<div class="opt">☐ Bore Size</div>
<div class="opt">☐ In Stock Only</div>
</div>
<div class="content">
<div class="breadcrumb">Home / Power Transmission / Bearings</div>
<div class="pdp">
<div class="pdp-img"></div>
<div class="pdp-info">
<p class="part mono">PN 6205-2RS-C3</p>
<h1>Sealed Ball Bearing, 25mm Bore</h1>
<div class="price">$14.82 / ea</div>
<div class="btnrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-quote">Request Quote</button>
</div>
</div>
</div>
<div class="spectable">
<div class="srow"><span>Bore Diameter</span><span>25 mm</span></div>
<div class="srow even"><span>Outer Diameter</span><span>52 mm</span></div>
<div class="srow"><span>Load Rating (Dyn.)</span><span>14,000 N</span></div>
<div class="srow even"><span>Seal Type</span><span>Double Rubber (2RS)</span></div>
</div>
</div>
</main>
<footer>
<span>© Applied Industrial Technologies</span>
<span>Branch Locator · Support · Terms</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c88c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c88c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e1c6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dc9a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c88c; color: #000000;
border: 1px solid #00dc9a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c88c; color: #000000;
border: 1px solid #27cf9d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e1c6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00cb8e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Outfit","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #dddddd; }
.logo { font-size:22px; font-weight:700; }
.navlinks { display:flex; gap:26px; font-size:16px; font-weight:600; color:#777777; }
.navlinks .active { color:#171717; }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:36px 40px; gap:24px; }
.hero .tag { display:block; font-size:16px; font-weight:600; color:#00c88c; margin-bottom:10px; }
.hero h1 { font-family:"Outfit"; font-size:44px; font-weight:500; line-height:1.2; color:#133b55;
margin:0 0 14px; }
.hero p { font-size:16px; line-height:1.5; color:#303030; margin:0 0 20px; max-width:380px; }
.row { display:flex; gap:10px; }
.btn { border-radius:8px; height:52px; padding:14px 20px; font-size:16px; font-weight:700;
display:inline-flex; align-items:center; }
.btn-solid { background:#222222; color:#ffffff; }
.btn-outline { background:transparent; color:#222222; border:1px solid #222222; }
.hero-visual { background:#00c88c; border-radius:16px; height:220px; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:160px; height:160px; border-radius:16px;
background:#00dc9a; right:-30px; bottom:-40px; transform:rotate(-8deg); }
.hero-visual::after { content:'그린카'; position:absolute; left:24px; bottom:20px; color:#000000;
font-size:22px; font-weight:700; }
.band { background:#f6f6f6; padding:26px 40px; }
.band h2 { font-size:24px; font-weight:700; color:#222222; margin:0 0 16px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #dddddd; border-radius:12px; padding:16px;
box-shadow:rgba(0,0,0,0.08) 0px 4px 8px; }
.card .thumb { height:70px; border-radius:8px; background:#e6f8f2; margin-bottom:10px; }
.card h3 { font-size:15px; font-weight:700; margin:0 0 6px; color:#222222; }
.card p { font-size:12px; color:#5e5e5e; margin:0; line-height:1.4; }
footer { display:flex; justify-content:space-between; align-items:center; padding:14px 40px;
border-top:1px solid #dddddd; font-size:12px; color:#777777; }
footer a { color:#00c88c; font-weight:700; }
</style></head>
<body>
<nav>
<span class="logo">Greencar</span>
<div class="navlinks"><span class="active">Company</span><span>Service</span><span>Careers</span></div>
<button class="btn btn-solid" style="height:40px;padding:8px 18px;font-size:14px;">Go to app</button>
</nav>
<section class="hero">
<div>
<span class="tag">Premium Car Sharing</span>
<h1>Create a Better Life</h1>
<p>Greencar connects people, time, and space with a user-centered new mobility experience.</p>
<div class="row">
<button class="btn btn-solid">Learn more</button>
<button class="btn btn-outline">Browse cars</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="band">
<h2>Full mobility line-up</h2>
<div class="cards">
<div class="card"><div class="thumb"></div><h3>Round-trip Car</h3><p>Book by the hour, return to the same zone.</p></div>
<div class="card"><div class="thumb"></div><h3>One-way Zone</h3><p>Pick up here, drop off anywhere in the zone.</p></div>
<div class="card"><div class="thumb"></div><h3>Biz Fleet</h3><p>Corporate mobility for growing teams.</p></div>
</div>
</section>
<footer>
<span>© Greencar</span>
<span><a href="#">Privacy Policy</a> · Terms of Service</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #1c1c1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040405; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { font-weight:700; font-size:18px; letter-spacing:1px; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#86868b; }
.hero { height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:14px; background:radial-gradient(circle at 50% 30%,#161617,#000000); }
.hero h1 { font-size:44px; font-weight:700; letter-spacing:-1px; margin:0; }
.hero p { color:#86868b; font-size:15px; margin:0; }
.row { display:flex; gap:10px; }
.btn-w { background:#fff; color:#000; border-radius:4px; padding:12px 26px; font-size:14px; font-weight:500; }
.btn-ghost { background:transparent; color:#fff; border:1px solid #fff; border-radius:4px; padding:12px 26px; font-size:14px; font-weight:500; }
.spec-band { background:#000; padding:24px 40px 32px; }
.spec-title { font-size:12px; color:#86868b; margin-bottom:10px; letter-spacing:0.05em; }
.specrow { display:flex; border-bottom:1px solid #d2d2d7; padding:10px 0; }
.specrow .lbl { width:220px; color:#86868b; font-size:14px; }
.specrow .val { color:#1c1c1e; font-size:14px; }
.storefold { background:#fff; color:#1c1c1e; padding:28px 40px; display:flex; gap:16px; }
.tile { flex:1; background:#fff; border-radius:8px; padding:20px; text-align:center; }
.tile .img { height:60px; border-radius:6px; background:linear-gradient(135deg,#f5f5f7,#1c1c1e); margin-bottom:12px; }
.tile h4 { font-size:16px; margin:0 0 6px; }
.tile p { font-size:12px; color:#86868b; margin:0 0 12px; }
.tile .cta { display:inline-block; background:#000; color:#fff; border-radius:4px; padding:8px 20px; font-size:12px; }
</style></head>
<body>
<header>
<span class="logo">DJI</span>
<div class="navlinks"><span>Mavic</span><span>Air</span><span>Osmo</span><span>Enterprise</span><span>Support</span></div>
</header>
<section class="hero">
<h1>See It All.</h1>
<p>Up to 51 minutes of flight time. Transmission range 20km.</p>
<div class="row"><button class="btn-w">Buy Now</button><button class="btn-ghost">Learn More</button></div>
</section>
<section style="background:#fff; color:#1c1c1e;">
<div class="spec-band" style="background:#fff;">
<div class="spec-title">SPECIFICATIONS</div>
<div class="specrow"><span class="lbl">Max Flight Time</span><span class="val">51 min</span></div>
<div class="specrow"><span class="lbl">Max Transmission Range</span><span class="val">20 km (FCC)</span></div>
<div class="specrow"><span class="lbl">Sensor</span><span class="val">1-inch CMOS, 20MP</span></div>
</div>
</section>
<section class="storefold">
<div class="tile"><div class="img"></div><h4>Mavic 4 Pro</h4><p>The flagship, refined.</p><div class="cta">Buy Now</div></div>
<div class="tile"><div class="img"></div><h4>Air 3S</h4><p>Compact power, everyday flight.</p><div class="cta">Learn More</div></div>
<div class="tile"><div class="img"></div><h4>Osmo Pocket</h4><p>Just Fly. Just shoot.</p><div class="cta">Pre-order</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ff7b; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #00ff7b;
border: 1px solid #00ff7b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #08311c; color: #00ff7b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0A; color:#F5F5F7; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric: tabular-nums; }
.wrap { width:100%; height:100%; padding:24px 28px; display:flex; flex-direction:column; gap:14px; }
/* header */
.hdr { height:38px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:20px; font-weight:800; letter-spacing:-0.4px; color:#FFFFFF; margin:0; }
.hdr-right { display:flex; align-items:center; gap:10px; }
.sync-pill { height:26px; background:#2A2A2A; border-radius:13px; padding:0 12px; display:flex; align-items:center;
gap:6px; font-size:10px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#A1A1AA; }
.sync-pill b { color:#00FF7B; font-weight:700; }
.bell { width:20px; height:20px; border-radius:50%; border:1.5px solid #3A3A3A; }
/* day switcher */
.days { height:40px; display:flex; align-items:center; gap:8px; }
.day { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; color:#A1A1AA; border:1px solid #2A2A2A; }
.day span.dow { display:block; font-size:8px; letter-spacing:0.4px; opacity:0.7; }
.day.today { background:#00FF7B; color:#0A0A0A; border-color:#00FF7B; box-shadow:0 0 12px rgba(0,255,123,0.35); }
/* main row */
.main { display:flex; gap:18px; flex:1; min-height:0; }
.card { background:#1C1C1E; border:1px solid #252525; border-radius:12px; }
/* recovery card */
.recovery { width:308px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.recovery .lbl { font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#A1A1AA; }
.ringwrap { position:relative; width:168px; height:168px; }
.ringnum { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ringnum b { font-size:52px; font-weight:800; letter-spacing:-1.4px; color:#FFFFFF; line-height:1; }
.ringnum small { font-size:16px; font-weight:700; color:#FFFFFF; }
.metrics { width:100%; display:flex; justify-content:space-between; margin-top:4px; }
.metric { display:flex; flex-direction:column; align-items:center; gap:4px; }
.metric .v { font-size:15px; font-weight:700; color:#FFFFFF; }
.metric .l { font-size:9px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#5F5F65; }
/* right column */
.rcol { flex:1; display:flex; flex-direction:column; gap:16px; min-width:0; }
.strain { padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.row-between { display:flex; justify-content:space-between; align-items:baseline; }
.strain .lbl { font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#A1A1AA; }
.strain .val { font-size:30px; font-weight:800; letter-spacing:-0.8px; color:#00FF7B; }
.bar-track { position:relative; height:12px; border-radius:6px; background:#2A2A2A; margin-top:2px; }
.bar-fill { position:absolute; left:0; top:0; bottom:0; width:73%; border-radius:6px;
background:linear-gradient(90deg,#005F2F,#00FF7B 70%,#67E26B); }
.bar-marker { position:absolute; top:-2px; left:calc(73% - 8px); width:16px; height:16px; border-radius:50%;
background:#FFFFFF; border:2px solid #0A0A0A; box-shadow:0 0 8px rgba(255,255,255,0.5); }
.ticks { display:flex; justify-content:space-between; margin-top:2px; }
.ticks span { font-size:9px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:#5F5F65; }
.hr-card { flex:1; padding:16px 20px; display:flex; flex-direction:column; gap:8px; min-height:0; }
.hr-top { display:flex; align-items:center; gap:10px; }
.hr-top b { font-size:32px; font-weight:800; color:#FFFFFF; }
.hr-top .u { font-size:12px; color:#A1A1AA; font-weight:600; }
.hr-pills { display:flex; gap:8px; margin-top:auto; }
.hr-pill { background:#2A2A2A; border-radius:14px; padding:4px 10px; font-size:9px; font-weight:700;
letter-spacing:0.4px; text-transform:uppercase; color:#A1A1AA; }
.hr-pill b { color:#F5F5F7; }
/* activity list */
.activity { height:96px; display:flex; flex-direction:column; }
.arow { height:48px; display:flex; align-items:center; border-bottom:1px solid #252525; }
.arow:last-child { border-bottom:none; }
.aicon { width:34px; height:34px; border-radius:50%; border:1.5px solid #00FF7B; display:flex; align-items:center;
justify-content:center; flex-shrink:0; }
.abody { margin-left:12px; flex:1; min-width:0; }
.aname { font-size:13px; font-weight:600; color:#F5F5F7; }
.astrain { font-size:15px; font-weight:800; color:#00FF7B; }
.aright { text-align:right; flex-shrink:0; }
.adur { font-size:12px; font-weight:600; color:#F5F5F7; }
.atime { font-size:10px; color:#A1A1AA; }
</style></head>
<body>
<div class="wrap">
<div class="hdr">
<p class="brand">WHOOP (iOS)</p>
<div class="hdr-right">
<div class="sync-pill">BATT <b>82%</b> · SYNCED 6M AGO</div>
<div class="bell"></div>
</div>
</div>
<div class="days">
<div class="day"><span class="dow">M</span>12</div>
<div class="day"><span class="dow">T</span>13</div>
<div class="day"><span class="dow">W</span>14</div>
<div class="day"><span class="dow">T</span>15</div>
<div class="day"><span class="dow">F</span>16</div>
<div class="day"><span class="dow">S</span>17</div>
<div class="day today"><span class="dow" style="color:#0A0A0A">S</span>18</div>
</div>
<div class="main">
<div class="card recovery">
<span class="lbl">Recovery</span>
<div class="ringwrap">
<svg width="168" height="168" viewBox="0 0 168 168">
<circle cx="84" cy="84" r="74" fill="none" stroke="#2A2A2A" stroke-width="10"/>
<circle cx="84" cy="84" r="74" fill="none" stroke="#16EC06" stroke-width="10" stroke-linecap="round"
stroke-dasharray="339 465" stroke-dashoffset="0" transform="rotate(-90 84 84)"/>
</svg>
<div class="ringnum tnum"><b>73<small>%</small></b></div>
</div>
<div class="metrics">
<div class="metric"><span class="v tnum">57 ms</span><span class="l">HRV</span></div>
<div class="metric"><span class="v tnum">52 bpm</span><span class="l">RHR</span></div>
<div class="metric"><span class="v tnum">98%</span><span class="l">SpO₂</span></div>
<div class="metric"><span class="v tnum">88.1°</span><span class="l">Skin</span></div>
</div>
</div>
<div class="rcol">
<div class="card strain">
<div class="row-between">
<span class="lbl">Strain</span>
<span class="val tnum">13.2</span>
</div>
<div class="bar-track"><div class="bar-fill"></div><div class="bar-marker"></div></div>
<div class="ticks"><span>8 Low</span><span>10 Mod</span><span>14 High</span><span>18 All-Out</span></div>
</div>
<div class="card hr-card">
<span class="lbl" style="font-size:11px;">Heart Rate</span>
<svg width="100%" height="46" viewBox="0 0 520 46" preserveAspectRatio="none">
<polyline points="0,28 40,26 70,30 100,10 120,38 150,24 180,27 220,12 250,34 290,26 330,29 360,9 400,36 440,25 470,28 520,24"
fill="none" stroke="#00FF7B" stroke-width="2"/>
</svg>
<div class="hr-top"><b class="tnum">61</b><span class="u">BPM · LIVE</span></div>
<div class="hr-pills">
<div class="hr-pill">MIN <b class="tnum">54</b></div>
<div class="hr-pill">AVG <b class="tnum">63</b></div>
<div class="hr-pill">MAX <b class="tnum">142</b></div>
</div>
</div>
</div>
</div>
<div class="card activity">
<div class="arow" style="padding:0 16px;">
<div class="aicon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00FF7B" stroke-width="2"><path d="M13 4l-4 8h5l-4 8"/></svg>
</div>
<div class="abody"><div class="aname">Running</div><div class="astrain tnum">11.8</div></div>
<div class="aright"><div class="adur tnum">1h 32m</div><div class="atime tnum">6:42 AM</div></div>
</div>
<div class="arow" style="padding:0 16px;">
<div class="aicon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00FF7B" stroke-width="2"><circle cx="12" cy="12" r="8"/></svg>
</div>
<div class="abody"><div class="aname">Strength</div><div class="astrain tnum">7.4</div></div>
<div class="aright"><div class="adur tnum">48m</div><div class="atime tnum">6:10 PM</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #061c3d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #061c3d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8993a2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e85040; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #061c3d; color: #e85040;
border: 1px solid #e85040; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #061c3d; color: #f5f5f5;
border: 1px solid #2c3f5a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8993a2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2a243d; color: #e85040;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#061C3D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
.sidebar { width:180px; background:#061C3D; flex-shrink:0; display:flex; flex-direction:column; padding:20px 16px; gap:18px; }
.sidebar .brand { color:#ffffff; font-size:15px; font-weight:700; margin:0 0 6px; }
.sidebar .item { color:rgba(255,255,255,0.55); font-size:12px; padding:8px 10px; border-radius:6px; }
.sidebar .item.on { background:rgba(255,255,255,0.1); color:#ffffff; font-weight:600; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
header { height:52px; border-bottom:1px solid #F7F6FB; display:flex; align-items:center; justify-content:space-between;
padding:0 26px; }
header h1 { font-size:16px; font-weight:700; margin:0; }
.btn-coral { background:#E85040; color:#ffffff; border-radius:16px; padding:8px 18px; font-size:13px; font-weight:500; }
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:18px 26px 0; }
.tile { background:#F7F6FB; border-radius:16px; padding:14px 16px; }
.tile .label { font-size:11px; color:#061C3D; opacity:0.55; margin:0 0 6px; }
.tile .val { font-size:20px; font-weight:700; margin:0; }
.tile .delta { font-size:11px; color:#CB200E; }
.lower { display:flex; gap:16px; padding:16px 26px 0; flex:1; min-height:0; }
.chart { flex:1.3; background:#F7F6FB; border-radius:16px; padding:16px; display:flex; flex-direction:column; }
.chart h3 { font-size:13px; font-weight:600; margin:0 0 10px; }
.bars { flex:1; display:flex; align-items:flex-end; gap:8px; }
.bars i { flex:1; background:#061C3D; border-radius:3px 3px 0 0; }
.store { flex:1; background:#ffffff; border:1px solid #F7F6FB; border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.store h3 { font-size:13px; font-weight:600; margin:0; }
.store-preview { flex:1; border-radius:3px; background:linear-gradient(160deg,#061C3D,#12335e); position:relative; }
.store-preview span { position:absolute; bottom:10px; left:10px; color:#ffffff; font-size:11px; font-weight:600; }
.btn-primary { background:#061C3D; color:#ffffff; border-radius:16px; height:36px; display:flex; align-items:center;
justify-content:center; font-size:13px; font-weight:600; }
</style></head>
<body>
<div class="shell">
<div class="sidebar">
<p class="brand">91APP</p>
<div class="item on">Dashboard</div>
<div class="item">Storefront</div>
<div class="item">Orders</div>
<div class="item">Members</div>
<div class="item">Marketing</div>
<div class="item">Settings</div>
</div>
<div class="main">
<header>
<h1>Omnichannel Overview</h1>
<div class="btn-coral">Publish Campaign</div>
</header>
<div class="tiles">
<div class="tile"><p class="label">Online Sales</p><p class="val">NT$2.84M</p><span class="delta">▲ 12.4%</span></div>
<div class="tile"><p class="label">Offline Sales</p><p class="val">NT$1.12M</p><span class="delta">▲ 4.1%</span></div>
<div class="tile"><p class="label">Orders Today</p><p class="val">3,208</p><span class="delta">▲ 8.7%</span></div>
<div class="tile"><p class="label">Conversion</p><p class="val">3.6%</p><span class="delta">▲ 0.4pt</span></div>
</div>
<div class="lower">
<div class="chart">
<h3>OMO Sales, Last 7 Days</h3>
<div class="bars">
<i style="height:40%"></i><i style="height:58%"></i><i style="height:47%"></i><i style="height:70%"></i>
<i style="height:64%"></i><i style="height:82%"></i><i style="height:95%"></i>
</div>
</div>
<div class="store">
<h3>Storefront Preview</h3>
<div class="store-preview"><span>91APP Store</span></div>
<div class="btn-primary">Manage Storefront</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FDFAF5; color: #2C2416;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FDFAF5; color: #2C2416;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #2C2416; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #8A7B6A; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #3D8F8F; color: #FFFFFF;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #FDFAF5; color: #2C2416;
border: 1px solid #3D8F8F; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FDFAF5; color: #2C2416;
border: 1px solid #D4C8B8; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8A7B6A; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #B8D9D4; color: #2C2416;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FDFAF5; color:#2C2416; box-sizing:border-box;
font-family:'Inter','DM Sans',system-ui,sans-serif; }
* { box-sizing:border-box; }
.promo { height:32px; background:#3D8F8F; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #D4C8B8; }
.brand { font-size:17px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; }
.search { background:#F5EFE4; border-radius:999px; padding:8px 18px; font-size:12px; color:#8A7B6A; width:180px; }
.hero { display:flex; align-items:center; padding:22px 36px; gap:22px; }
.heroimg { flex:1; height:180px; background:linear-gradient(135deg,#B8D9D4,#3D8F8F); border-radius:12px; }
.herotext { flex:1; }
.herotext h1 { font-size:32px; font-weight:600; margin:0 0 10px; line-height:1.15; }
.herotext p { font-size:13px; color:#4A3E30; margin:0 0 14px; max-width:320px; }
.btn { display:inline-block; background:#3D8F8F; color:#fff; font-size:14px; font-weight:600; padding:13px 26px; border-radius:12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 36px; }
.card { background:#fff; border-radius:12px; overflow:hidden; }
.card-img { height:100px; background:linear-gradient(135deg,#C4A882,#3D8F8F); position:relative; }
.badge { position:absolute; top:8px; left:8px; background:#E87B5A; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.cbody { padding:10px 12px; }
.cbody h3 { font-size:14px; font-weight:600; margin:0 0 6px; }
.ing { display:inline-block; background:#B8D9D4; color:#2C2416; font-size:10px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:6px; }
.price { font-size:16px; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; height:40px; background:#EDE6DA; color:#4A3E30;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; }
</style></head>
<body>
<div class="promo">Free shipping over $40 · Salt spray, sun-lifted texture</div>
<nav>
<p class="brand">Beached</p>
<div class="navlinks"><span>Shampoo</span><span>Texture</span><span>Scalp Care</span><span>Sets</span></div>
<div class="search">Search...</div>
</nav>
<section class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Salt-Lifted Hair, Every Day</h1>
<p>Post-ocean texture without the ocean — sea kelp and mineral salts for hair that dries into effortless waves.</p>
<span class="btn">Shop Texture Spray</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge">New</span></div>
<div class="cbody">
<span class="ing">Sea Kelp</span>
<h3>Texture Sea Salt Spray</h3>
<div class="price">$24</div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody">
<span class="ing">Coconut Oil</span>
<h3>Repair Shampoo Bar</h3>
<div class="price">$18</div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody">
<span class="ing">Salt Minerals</span>
<h3>Scalp Renewal Serum</h3>
<div class="price">$32</div>
</div>
</div>
</div>
<footer>
<span>© Beached</span>
<span>Beached · Ingredients · Shipping · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; background: #163959; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #163959;
border: 1px solid #163959; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272727;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #9bca3e; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#272727; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#163959; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; }
.brand { color:#fff; font-size:18px; font-weight:700; letter-spacing:0.3px; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; }
.cart { color:#fff; font-size:13px; }
main { display:flex; height:580px; }
.stage { width:340px; background:#ebebeb; display:flex; align-items:center; justify-content:center; position:relative; }
.photo-frame { width:200px; height:250px; background:#fff; border:1px solid #dedede; box-shadow:0 16px 34px rgba(0,0,0,0.18);
display:flex; align-items:center; justify-content:center; padding:12px; }
.photo { width:100%; height:100%; background:linear-gradient(160deg,#4a4a4a,#1a1a1a); position:relative; }
.autograph { position:absolute; bottom:16px; left:16px; right:16px; font-family:'Brush Script MT', cursive; color:#f0f0f0;
font-size:22px; transform:rotate(-4deg); }
.cert-badge { position:absolute; top:20px; right:20px; background:#9bca3e; color:#1a2e08; font-size:10px;
font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:5px 10px; border-radius:3px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:3px 9px; border-radius:3px; color:#fff; }
.b-rare { background:#bd2426; } .b-cert { background:#9bca3e; color:#1a2e08; } .b-feat { background:#f68b1f; }
h1 { font-size:23px; font-weight:700; margin:0; letter-spacing:-0.1px; }
.sub { font-size:13px; color:#404040; margin:0; line-height:1.5; max-width:440px; }
.meta { display:flex; gap:20px; font-size:12px; color:#737373; margin-top:2px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:24px; font-weight:700; color:#163959; }
.authent { font-size:12px; color:#2f7bbf; }
.actions { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#163959; color:#fff; border-radius:4px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #163959; color:#163959; border-radius:4px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:600; }
.coa { margin-top:auto; border-top:1px solid #dedede; padding-top:12px; display:flex; gap:14px; align-items:center; }
.coa-icon { width:32px; height:32px; border-radius:999px; background:#163959; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.coa p { margin:0; font-size:12px; color:#404040; }
</style></head>
<body>
<nav>
<p class="brand">Autographia</p>
<div class="navlinks"><span>Film & TV</span><span>Music</span><span>Sports</span><span>Certification</span></div>
<span class="cart">Cart (0)</span>
</nav>
<main>
<div class="stage">
<span class="cert-badge">Certified</span>
<div class="photo-frame"><div class="photo"><div class="autograph">R. Halden</div></div></div>
</div>
<div class="info">
<div class="badges"><span class="badge b-rare">Rare</span><span class="badge b-cert">Certified Authentic</span><span class="badge b-feat">Featured</span></div>
<h1>Robert Halden Signed 11x14 Studio Photo</h1>
<p class="sub">Hand-signed in silver marker during the 1987 press tour. Includes full letter of authenticity and archival framing.</p>
<div class="meta"><span>Item #A-40218</span><span>Grade: A+</span><span>Est. 1987</span></div>
<div class="price-row"><span class="price">$1,250.00</span></div>
<p class="authent">✓ Third-party verified · JSA & Beckett witnessed</p>
<div class="actions">
<div class="btn-primary">Purchase Item</div>
<div class="btn-secondary">Request Provenance</div>
</div>
<div class="coa"><div class="coa-icon">COA</div><p>Ships with tamper-evident hologram and full chain-of-custody documentation.</p></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #F8F6F2; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #F8F6F2; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #2A4420; color: #FFFFFF;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #2A4420;
border: 1px solid #2A4420; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c0bfbc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #F0EDE7; color: #2A4420;
border-radius: 12px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F8F6F2; color:#1A1A1A; box-sizing:border-box;
font-family:'AG1Sans','Graphik','GT America',-apple-system,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#F8F6F2; border-bottom:1px solid #E0DDD8; }
.brand { font-size:20px; font-weight:600; letter-spacing:0.02em; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#3D3D3D; font-weight:500; }
.cart { background:#2A4420; color:#fff; font-size:12px; font-weight:600; padding:8px 16px; border-radius:8px; }
main { display:flex; height:576px; }
.gallery { width:400px; background:#2A4420; position:relative; display:flex; align-items:center; justify-content:center; }
.scoop { width:180px; height:180px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#4a6b38,#2A4420 70%);
box-shadow:0 20px 40px rgba(0,0,0,0.3); position:relative; }
.scoop::after { content:''; position:absolute; top:14px; left:14px; right:14px; bottom:14px;
border-radius:50%; background:linear-gradient(160deg,#6b8f52,#3a5a2a); opacity:0.8; }
.pouch { position:absolute; bottom:56px; width:90px; height:130px; background:#1D3316; border-radius:10px;
box-shadow:0 12px 24px rgba(0,0,0,0.3); }
.pouch::before { content:'AG1'; position:absolute; top:44px; left:0; right:0; text-align:center;
color:#C49A3C; font-size:13px; font-weight:700; letter-spacing:0.1em; }
.badge-trust { position:absolute; top:24px; left:24px; background:#C49A3C; color:#1D3316; font-size:10px;
font-weight:700; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:10px; }
.eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#2A4420; }
h1 { font-size:24px; font-weight:600; margin:0; line-height:1.28; }
.stars { font-size:12px; color:#C49A3C; }
.stars .n { color:#6B6B6B; margin-left:6px; font-size:11.5px; }
.price-card { background:#fff; border-radius:12px; padding:14px 16px; display:flex; align-items:center;
justify-content:space-between; box-shadow:0 1px 0 #E0DDD8 inset; }
.price-card .price { font-size:19px; font-weight:700; }
.price-card .save { font-size:11px; color:#C49A3C; font-weight:700; }
.check-list { display:flex; flex-direction:column; gap:6px; }
.check { font-size:12.5px; color:#3D3D3D; }
.check::before { content:'✓ '; color:#2A4420; font-weight:700; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#2A4420; color:#fff; border:none; border-radius:8px; padding:13px 18px;
font-size:14px; font-weight:600; }
.btn-outline { border:1.5px solid #2A4420; color:#2A4420; background:#fff; border-radius:8px; padding:11.5px 16px;
font-size:12.5px; font-weight:600; white-space:nowrap; }
.meta { font-size:11px; color:#6B6B6B; }
</style></head>
<body>
<nav>
<div class="brand">Ag1</div>
<div class="navlinks"><span>Shop</span><span>The Science</span><span>What's Inside</span><span>Reviews</span></div>
<div class="cart">Bag · 1</div>
</nav>
<main>
<div class="gallery">
<span class="badge-trust">Trusted by 1M+</span>
<div class="scoop"></div>
<div class="pouch"></div>
</div>
<div class="info">
<span class="eyebrow">Foundational Nutrition</span>
<h1>AG1 — Daily Greens Superfood Powder</h1>
<div class="stars">★★★★★ <span class="n">4.7 · 41,209 reviews</span></div>
<div class="price-card"><span class="price">$79.00 / mo</span><span class="save">Save $20 + free gift</span></div>
<div class="check-list">
<span class="check">75 vitamins, minerals & whole-food sourced ingredients</span>
<span class="check">Supports gut, immunity & energy</span>
<span class="check">Third-party tested for purity</span>
</div>
<div class="btn-row">
<button class="btn-primary">Subscribe & Save</button>
<button class="btn-outline">One-Time Purchase</button>
</div>
<span class="meta">Cancel or pause anytime</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #001935; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #001935; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87929f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001020; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001935; color: #ffffff;
border: 1px solid #001020; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #001935; color: #f5f5f5;
border: 1px solid #273c54; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87929f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #001832; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#001935; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:48px; display:flex; align-items:center; padding:0 30px; background:#001020; }
.word { font-weight:800; font-size:20px; }
.feed { width:520px; margin:14px auto 0; display:flex; flex-direction:column; gap:8px; }
.card { background:#0B2A45; border-radius:8px; overflow:hidden; }
.chead { display:flex; align-items:center; gap:10px; padding:12px 14px 8px; }
.av { width:36px; height:36px; border-radius:6px; flex-shrink:0; }
.bname { font-size:16px; font-weight:700; flex:1; }
.follow { border:1.5px solid #00CF35; color:#00CF35; font-size:12px; padding:5px 12px; border-radius:6px; }
.media { height:150px; background:linear-gradient(150deg,#264a6e,#0b2a45 70%); }
.cbody { padding:10px 14px; }
.ptext { font-size:15px; line-height:1.4; }
.tags { font-size:13px; color:#8A9AAE; margin-top:6px; }
.footer { display:flex; align-items:center; padding:10px 14px; border-top:1px solid #13395B; gap:16px; }
.notes { font-size:13px; font-weight:600; color:#8A9AAE; margin-right:auto; }
.icon { color:#8A9AAE; font-size:16px; }
.reblog { border-left:2px solid #36465D; margin:0 14px 10px 40px; padding-left:12px; }
.rname { color:#00B8FF; font-weight:700; font-size:13px; }
.rtext { font-size:14px; margin-top:2px; }
</style></head>
<body>
<div class="topnav"><span class="word">t · Tumblr (iOS)</span></div>
<div class="feed">
<div class="card">
<div class="chead"><div class="av" style="background:#5C6B80"></div><span class="bname">wanderlust-archive</span><span class="follow">Follow</span></div>
<div class="media"></div>
<div class="cbody">
<div class="reblog"><span class="rname">field-notebook</span><div class="rtext">the light out here does something to your brain</div></div>
<div class="tags">#travel #film #analog</div>
</div>
<div class="footer"><span class="notes">1,204 notes</span><span class="icon">↩</span><span class="icon">⟲</span><span class="icon">♥</span><span class="icon">↗</span></div>
</div>
<div class="card">
<div class="chead"><div class="av" style="background:#8A9AAE"></div><span class="bname">quiet-hours</span><span class="follow" style="background:#00CF35;border-color:#00CF35;color:#001935">Following</span></div>
<div class="cbody" style="padding-top:12px">
<div class="ptext">"You do not have to be good. You do not have to walk on your knees for a hundred miles through the desert."</div>
<div class="tags">#poetry #mary oliver</div>
</div>
<div class="footer"><span class="notes">842 notes</span><span class="icon">↩</span><span class="icon">⟲</span><span class="icon">♥</span><span class="icon">↗</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc72c; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc72c; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c631d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da291c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc72c; color: #da291c;
border: 1px solid #da291c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc72c; color: #111111;
border: 1px solid #d9aa28; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c631d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9ae29; color: #da291c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.greet { display:flex; align-items:center; padding:18px 26px 8px; gap:12px; }
.arches { width:30px; height:26px; background:#FFC72C; clip-path:polygon(20% 100%, 20% 55%, 0 30%, 20% 0, 50% 35%, 80% 0, 100% 30%, 80% 55%, 80% 100%); }
.greet h1 { font-size:22px; font-weight:800; margin:0; letter-spacing:-0.4pt; }
.greet h1 span { color:#FFC72C; }
.bell { margin-left:auto; width:36px; height:36px; border-radius:50%; background:#F4F4F5; }
.content { padding:8px 26px 0; display:flex; gap:20px; }
.left { width:430px; }
.right { flex:1; }
.rewards { border-radius:16px; background:#F4F4F5; padding:18px; position:relative; overflow:hidden; }
.rewards::before { content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px; border-radius:50%;
background:radial-gradient(circle, rgba(255,199,44,0.35), transparent 70%); }
.rewards .eyebrow { font-size:12px; font-weight:700; letter-spacing:0.4pt; text-transform:uppercase; color:#5C5C5C; }
.rewards .pts { font-size:28px; font-weight:900; color:#FFC72C; margin:4px 0; }
.rewards .pts span { font-size:13px; font-weight:700; color:#5C5C5C; }
.track { height:8px; border-radius:4px; background:#E3E3E5; margin:10px 0 8px; }
.track .fill { height:8px; width:62%; border-radius:4px; background:linear-gradient(90deg,#FFC72C,#FFD75E); }
.rewards .cap { font-size:13px; color:#5C5C5C; }
.rewards .cap b { color:#1A1A1A; }
.sectionhead { font-size:19px; font-weight:800; letter-spacing:-0.3pt; margin:18px 0 10px; }
.deals { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.deal { border-radius:16px; background:#F4F4F5; overflow:hidden; }
.deal .photo { height:70px; position:relative; }
.deal .flag { position:absolute; top:8px; left:8px; background:#DA291C; color:#fff; font-size:11px; font-weight:800; letter-spacing:0.3pt;
padding:2px 8px; border-radius:6px; text-transform:uppercase; }
.deal .body { padding:10px 12px; }
.deal .name { font-size:14px; font-weight:800; }
.deal .off { font-size:12px; color:#5C5C5C; margin:2px 0; }
.deal .pts { font-size:11px; font-weight:800; color:#FFC72C; }
.p1 { background:linear-gradient(135deg,#f7d774,#e3a13a); }
.p2 { background:linear-gradient(135deg,#e08b6b,#c0503a); }
.modes { display:flex; gap:10px; margin-top:14px; }
.mode { flex:1; border-radius:12px; border:1.5px solid #E3E3E5; padding:14px 8px; text-align:center; }
.mode.active { border-color:#FFC72C; background:rgba(255,199,44,0.08); }
.mode .ic { width:22px; height:22px; margin:0 auto 6px; border-radius:5px; background:#8A8A8A; }
.mode.active .ic { background:#FFC72C; }
.mode .lbl { font-size:11px; font-weight:700; }
.mode.active .lbl { color:#FFC72C; }
.order-fab { position:absolute; right:36px; bottom:26px; width:56px; height:56px; border-radius:50%; background:#FFC72C;
box-shadow:rgba(255,199,44,0.4) 0 6px 16px; display:flex; align-items:center; justify-content:center; }
.order-fab .cart { width:22px; height:16px; border:2.5px solid #1A1A1A; border-top:none; border-radius:0 0 4px 4px; }
</style></head>
<body>
<div class="greet">
<div class="arches"></div>
<h1>Hi, <span>Alex</span></h1>
<div class="bell"></div>
</div>
<div class="content">
<div class="left">
<div class="rewards">
<div class="eyebrow">McDonald's (iOS) Rewards</div>
<div class="pts">2,150<span> points</span></div>
<div class="track"><div class="fill"></div></div>
<div class="cap">Just 350 points away from a <b>free McNuggets</b></div>
</div>
<div class="sectionhead">Start an order</div>
<div class="modes">
<div class="mode active"><div class="ic"></div><div class="lbl">Pickup</div></div>
<div class="mode"><div class="ic"></div><div class="lbl">Curbside</div></div>
<div class="mode"><div class="ic"></div><div class="lbl">Drive Thru</div></div>
<div class="mode"><div class="ic"></div><div class="lbl">Delivery</div></div>
</div>
</div>
<div class="right">
<div class="sectionhead">Deals & Rewards</div>
<div class="deals">
<div class="deal"><div class="photo p1"><span class="flag">Deal</span></div>
<div class="body"><div class="name">Big Mac</div><div class="off">Buy one, get one $1</div><div class="pts">★ or 1,900 pts</div></div></div>
<div class="deal"><div class="photo p2"><span class="flag">Free</span></div>
<div class="body"><div class="name">McNuggets 6pc</div><div class="off">Free with any purchase</div><div class="pts">★ or 900 pts</div></div></div>
</div>
</div>
</div>
<div class="order-fab"><div class="cart"></div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #52f756; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #52f756; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #2e7830; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #24292e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #52f756; color: #24292e;
border: 1px solid #24292e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #52f756; color: #111111;
border: 1px solid #48d24b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #2e7830; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4bd650; color: #24292e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f8fa; color:#24292e; box-sizing:border-box;
font-family:"Sohne", "Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; border-radius:0 !important; }
.banner { background:#24292e; color:#52f756; border-bottom:1px solid #52f756; font-size:12px; font-weight:500;
padding:6px 32px; display:flex; justify-content:space-between; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#24292e; border-bottom:1px solid #3b434a; }
.brand { font-size:17px; font-weight:400; color:#f6f8fa; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; color:#d9e4ed; }
.navlinks span:last-child { color:#52f756; }
.contact { background:#000000; color:#52f756; padding:7px 18px; font-size:12px; font-weight:500; }
.hero { background:#24292e; padding:36px 32px 30px; text-align:center; }
.hero h1 { font-size:38px; font-weight:400; line-height:1.2; color:#f6f8fa; margin:0 0 14px; }
.hero p { font-size:15px; color:#8d959c; margin:0 0 20px; }
.herobtns { display:flex; gap:10px; justify-content:center; }
.btn { height:42px; padding:0 22px; font-size:14px; font-weight:600; display:flex; align-items:center; }
.btn.green { background:#52f756; color:#24292e; }
.btn.dark { background:#f6f8fa; color:#24292e; border:1px solid #f6f8fa; }
.segs { display:flex; justify-content:center; gap:0; background:#24292e; padding-bottom:26px; }
.seg { background:#1b1f23; color:#8d959c; font-size:13px; font-weight:500; padding:8px 28px; border-top:1px solid #3b434a; border-bottom:1px solid #3b434a; }
.seg.active { color:#52f756; border-color:#52f756; }
.seg:first-child { border-left:1px solid #3b434a; }
.seg:last-child { border-right:1px solid #3b434a; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#e1e4e8; padding:0 32px; margin-top:24px; }
.card { background:#ffffff; padding:20px 16px; }
.card .num { font-size:24px; font-weight:600; color:#24292e; margin:0 0 6px; font-family:"Space Mono",monospace; }
.card .lab { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:#8d959c; margin:0 0 8px; }
.card p { font-size:12px; color:#3b434a; margin:0; line-height:1.4; }
.strip { display:flex; justify-content:space-between; align-items:center; margin:24px 32px 0; padding:16px 20px;
background:#ffffff; border:1px solid #e1e4e8; }
.strip h3 { font-size:18px; font-weight:400; margin:0; }
.strip .btn { height:36px; padding:0 18px; font-size:13px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e1e4e8; padding:10px 32px;
display:flex; justify-content:space-between; font-size:12px; color:#8d959c; background:#f6f8fa; }
</style></head>
<body style="position:relative">
<div class="banner"><span>RAISE Summit 2026 — Meet Rebellions at booth A12 →</span><span>Seoul · Bundang</span></div>
<nav>
<span class="brand">Rebellions</span>
<div class="navlinks"><span>Products</span><span>Developers</span><span>Resources</span><span>Company</span><span>Let's Talk</span></div>
<span class="contact">Let's Talk</span>
</nav>
<section class="hero">
<h1>Power AI Inference.<br>Efficiently. At Scale.</h1>
<p>Purpose-built accelerators optimized for performance-per-watt.</p>
<div class="herobtns">
<span class="btn green">Explore Rebellions SDK</span>
<span class="btn dark">Explore RebelServer™</span>
</div>
</section>
<div class="segs">
<span class="seg active">Compute</span>
<span class="seg">Generality</span>
<span class="seg">Scalability</span>
<span class="seg">Capacity</span>
</div>
<section class="cards">
<div class="card"><p class="num">144GB</p><p class="lab">HBM3E</p><p>Fused into a single UCIe-Advanced AI chiplet.</p></div>
<div class="card"><p class="num">4×</p><p class="lab">Perf / Watt</p><p>Optimized for real-world AI deployment at scale.</p></div>
<div class="card"><p class="num">2022</p><p class="lab">ATOM Tape-Out</p><p>Shipped to KT Cloud within three months.</p></div>
<div class="card"><p class="num">2024</p><p class="lab">REBEL SoC</p><p>World's first UCIe-Advanced AI chiplet.</p></div>
</section>
<div class="strip">
<h3>Chiplet Design Strategy — Built for Inference</h3>
<span class="btn dark">RebelPOD™ Specs</span>
</div>
<footer>
<span>© Rebellions — Bundang, Seongnam, Korea</span>
<span>SDK Docs · GitHub · RebelRack™</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a62db; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a62db; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9ab3e9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2453ba; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a62db; color: #ffffff;
border: 1px solid #2453ba; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a62db; color: #f5f5f5;
border: 1px solid #4a7adf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ab3e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2960d6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f8fa; color:#0a101a; box-sizing:border-box;
font-family: Saans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.banner { height:26px; background:#0095ff; color:#ffffff; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:530; letter-spacing:0.1px; }
.banner b { font-weight:650; margin-right:6px; }
nav { height:54px; background:#ffffff; border-bottom:1px solid #d9e2ec; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; }
.logo { font-size:16px; font-weight:650; color:#0a101a; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:500; color:#0a101a; }
.navlinks .active { color:#2453ba; }
.navcta { display:flex; align-items:center; gap:10px; }
.quiet { font-size:13px; font-weight:530; color:#537696; }
.btn-sec { background:#ffffff; color:#000000; border:1px solid #d9e2ec; border-radius:4px; height:28px; padding:0 11px;
font-size:12px; font-weight:530; display:flex; align-items:center; }
.btn-pri { background:#2a62db; color:#ffffff; border-radius:4px; height:28px; padding:0 11px;
font-size:12px; font-weight:530; display:flex; align-items:center; }
.main { display:flex; gap:20px; padding:20px 28px; height:calc(640px - 26px - 54px); }
.left { flex:1.55; display:flex; flex-direction:column; gap:16px; min-width:0; }
.right { flex:1; display:flex; flex-direction:column; gap:14px; min-width:0; }
.spot { background:#ffffff; border-radius:5px; padding:22px 26px; box-shadow:rgba(0,0,0,0.25) 0px 0px 35px 0px; }
.spot .kicker { font-size:11px; font-weight:530; color:#6e7a84; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.spot .metric { font-size:40px; font-weight:650; line-height:1.05; color:#0a101a; }
.spot .sub { font-size:13px; font-weight:400; color:#486581; margin-top:6px; }
.chartwrap { margin-top:14px; height:96px; position:relative; }
.chartwrap svg { width:100%; height:100%; display:block; }
.featrow { display:flex; gap:16px; }
.feat { flex:1; background:#ffffff; border:1px solid #d9e2ec; border-radius:20px; padding:18px; min-width:0; }
.feat .ftitle { font-size:14px; font-weight:650; color:#0a101a; margin-bottom:6px; }
.feat .fbody { font-size:12px; font-weight:400; line-height:1.5; color:#6e7a84; }
.feat .ftag { display:inline-block; margin-top:10px; background:#ffffff; color:#243b53; border:1px solid #d9e2ec;
border-radius:360px; padding:3px 10px; font-size:10px; font-weight:500; }
.highlight { display:inline-flex; align-self:flex-start; background:#0a101a; color:#ffffff; border-radius:360px;
padding:4px 12px; font-size:11px; font-weight:500; letter-spacing:0.4px; }
.darkpanel { background:#102a43; border-radius:12px; padding:16px 18px; color:#ffffff; flex:1; }
.darkpanel .dtitle { font-size:12px; font-weight:650; color:#ffffff; margin-bottom:10px; }
.drow { display:flex; justify-content:space-between; font-size:11px; padding:7px 0; border-bottom:1px solid #243b53; color:#e5ebf2; }
.drow:last-child { border-bottom:none; }
.drow b { color:#ffffff; font-weight:650; }
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag { background:#ffffff; color:#243b53; border:1px solid #d9e2ec; border-radius:360px; padding:4px 12px;
font-size:11px; font-weight:500; }
.search { background:#ffffff; border:1px solid #d9e2ec; border-radius:360px; padding:8px 16px; font-size:12px;
color:#a7adb2; }
</style></head>
<body>
<div class="banner"><b>GLM-5.2 is live.</b> #1 throughput on OpenRouter →</div>
<nav>
<div class="logo">FriendliAI</div>
<div class="navlinks">
<span class="active">Product</span><span>Solutions</span><span>Models</span><span>Developers</span><span>Pricing</span>
</div>
<div class="navcta">
<span class="quiet">Log in</span>
<span class="btn-sec">Talk to an engineer</span>
<span class="btn-pri">Get started</span>
</div>
</nav>
<div class="main">
<div class="left">
<div class="spot">
<div class="kicker">Median throughput · Llama-4-70B, H100 cluster</div>
<div class="metric">12,400 tokens/sec</div>
<div class="sub">Inference performance drives profitability.</div>
<div class="chartwrap">
<svg viewBox="0 0 600 96" preserveAspectRatio="none">
<polyline points="0,70 60,64 120,68 180,50 240,55 300,38 360,42 420,26 480,30 540,14 600,18"
fill="none" stroke="#2a62db" stroke-width="2.5" />
<polygon points="0,70 60,64 120,68 180,50 240,55 300,38 360,42 420,26 480,30 540,14 600,18 600,96 0,96"
fill="#2a62db" opacity="0.08" />
</svg>
</div>
</div>
<div class="featrow">
<div class="feat">
<div class="ftitle">Dedicated Endpoints</div>
<div class="fbody">Reserved GPU capacity tuned for your model, with predictable cost and p99 latency.</div>
<span class="ftag">Inference</span>
</div>
<div class="feat">
<div class="ftitle">Serverless Endpoints</div>
<div class="fbody">Scale-to-zero inference for open and custom models — pay only for tokens served.</div>
<span class="ftag">NVIDIA</span>
</div>
</div>
</div>
<div class="right">
<span class="highlight">HIGHLIGHTS</span>
<div class="darkpanel">
<div class="dtitle">Recent benchmark results</div>
<div class="drow"><span>GLM-5.2, OpenRouter</span><b>#1 throughput</b></div>
<div class="drow"><span>Llama-4-70B, p50 latency</span><b>84ms</b></div>
<div class="drow"><span>Cost per 1M tokens</span><b>-38%</b></div>
<div class="drow"><span>Active endpoints today</span><b>1,204</b></div>
</div>
<div class="tags">
<span class="tag">Model Serving</span>
<span class="tag">Benchmarks</span>
<span class="tag">GPU Cloud</span>
</div>
<div class="search">Search docs</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5e6ad2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5e6ad2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b1b6e5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5e6ad2; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5e6ad2; color: #f5f5f5;
border: 1px solid #7680d8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b1b6e5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d69d7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#08090a; color:#f7f8f8; box-sizing:border-box;
font-family:"Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #1c1d1e; }
.brand { font-size:14px; font-weight:590; color:#f7f8f8; letter-spacing:-0.2px; margin-right:20px; }
.navleft { display:flex; align-items:center; }
.navtrig { color:#8a8f98; font-size:13px; padding:0 12px; height:32px; border-radius:9999px;
display:flex; align-items:center; }
.navright { display:flex; align-items:center; gap:10px; }
.btn-secondary { background:rgba(255,255,255,0.05); color:#f7f8f8; border-radius:9999px;
padding:0 20px; height:36px; font-size:13px; font-weight:510; display:flex; align-items:center; }
.btn-primary { background:#e5e5e6; color:#08090a; border:1px solid #e5e5e6; border-radius:9999px;
padding:0 20px; height:36px; font-size:13px; font-weight:590; display:flex; align-items:center; }
.layout { display:flex; height:calc(640px - 56px); }
.sidebar { width:200px; border-right:1px solid #1c1d1e; padding:20px 12px; }
.sidebar .id-tag { font-family:"Berkeley Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
font-size:11px; color:#62666d; padding:0 8px 14px; }
.menuitem { border-radius:8px; padding:8px 12px; font-size:13px; color:#8a8f98; margin-bottom:2px;
display:flex; align-items:center; gap:8px; }
.menuitem.active { background:rgba(255,255,255,0.06); color:#f7f8f8; }
.dotstat { width:7px; height:7px; border-radius:50%; background:#5e6ad2; }
.main { flex:1; padding:24px 32px; overflow:hidden; }
.headline { font-size:32px; font-weight:510; letter-spacing:-0.7px; line-height:1.1; margin:0 0 4px; }
.sub { font-size:13px; color:#8a8f98; margin:0 0 20px; }
.issuelist { border:1px solid #1c1d1e; border-radius:8px; overflow:hidden; }
.issuerow { display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid #1c1d1e; }
.issuerow:last-child { border-bottom:none; }
.issuerow .idc { font-family:"Berkeley Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
font-size:12px; color:#62666d; width:64px; flex:none; }
.statusdot { width:14px; height:14px; border-radius:50%; flex:none; border:2px solid #8a8f98; }
.statusdot.done { background:#5e6ad2; border-color:#5e6ad2; }
.statusdot.progress { border-color:#e5e5e6; background:conic-gradient(#e5e5e6 0 50%, transparent 50% 100%); }
.issuerow .title { flex:1; font-size:13px; color:#f7f8f8; }
.priority { font-size:11px; color:#8a8f98; width:60px; flex:none; }
.avatar-issue { width:20px; height:20px; border-radius:50%; background:#5e6ad2; flex:none;
display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#f7f8f8; }
.quote { margin-top:20px; background:transparent; border:1px solid #1c1d1e; border-radius:8px;
padding:24px 32px; }
.quote p { font-size:15px; line-height:1.6; letter-spacing:-0.16px; color:#d0d6e0; margin:0 0 10px; }
.quote .who { font-size:12px; color:#62666d; }
</style></head>
<body>
<nav>
<div class="navleft">
<span class="brand">Linear</span>
<span class="navtrig">Product</span>
<span class="navtrig">Method</span>
<span class="navtrig">Customers</span>
<span class="navtrig">Pricing</span>
</div>
<div class="navright">
<div class="btn-secondary">Contact sales</div>
<div class="btn-primary">Get started</div>
</div>
</nav>
<div class="layout">
<aside class="sidebar">
<div class="id-tag">ENG · Q3 CYCLE</div>
<div class="menuitem active"><span class="dotstat"></span>Active Issues</div>
<div class="menuitem">Projects</div>
<div class="menuitem">Cycles</div>
<div class="menuitem">Views</div>
<div class="menuitem">Triage</div>
<div class="menuitem">Backlog</div>
</aside>
<div class="main">
<h1 class="headline">Plan the work that matters</h1>
<p class="sub">Active Issues · 6 open · sorted by priority</p>
<div class="issuelist">
<div class="issuerow">
<span class="idc">ENG-142</span>
<span class="statusdot progress"></span>
<span class="title">Fix sync delay on offline reconnect</span>
<span class="priority">Urgent</span>
<span class="avatar-issue">AJ</span>
</div>
<div class="issuerow">
<span class="idc">ENG-138</span>
<span class="statusdot"></span>
<span class="title">Add keyboard shortcuts to command menu</span>
<span class="priority">High</span>
<span class="avatar-issue">PR</span>
</div>
<div class="issuerow">
<span class="idc">ENG-130</span>
<span class="statusdot done"></span>
<span class="title">Migrate webhook queue to new worker</span>
<span class="priority">Medium</span>
<span class="avatar-issue">JD</span>
</div>
<div class="issuerow">
<span class="idc">ENG-126</span>
<span class="statusdot progress"></span>
<span class="title">Investigate flaky export test</span>
<span class="priority">Low</span>
<span class="avatar-issue">CM</span>
</div>
</div>
<div class="quote">
<p>"Our team finally moved from a pile of tickets to a system we can actually plan around."</p>
<span class="who">Jordan Ahn · Head of Engineering</span>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f6f4; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f6f4; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c7079; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #14293a; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #14293a;
border: 1px solid #14293a; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1e1e;
border: 1px solid #d8d6d2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c7079; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #38871f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f6f4; color:#1e1e1e; box-sizing:border-box;
font-family:'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:72px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #d8d6d2; }
.brand { font-family:'Questrial', 'IBM Plex Sans', sans-serif; font-size:22px; font-weight:400;
letter-spacing:0.5px; color:#1e1e1e; margin:0; }
.navlinks { display:flex; gap:28px; }
.navlinks span { font-size:14px; font-weight:500; color:#1e1e1e; }
.navicons { display:flex; gap:16px; align-items:center; font-size:15px; color:#6c7079; }
.navicons .cta { background:#14293a; color:#ffffff; border-radius:4px; padding:9px 18px; font-size:13px;
font-weight:600; letter-spacing:0.2px; }
.hero { height:172px; background:#14293a; color:#ffffff; display:flex; flex-direction:column;
justify-content:center; padding:0 44px; gap:6px; }
.hero .over { font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:#b8b6b6; }
.hero h1 { font-family:'Questrial', 'IBM Plex Sans', sans-serif; font-size:38px; font-weight:400;
letter-spacing:-0.4px; line-height:1.1; margin:2px 0; max-width:520px; }
.hero p { font-size:14px; color:#d8d6d2; margin:0 0 8px; max-width:460px; }
.hero button { align-self:flex-start; background:#ffffff; color:#14293a; border:none; border-radius:4px;
padding:12px 24px; font-size:14px; font-weight:600; letter-spacing:0.3px; cursor:default; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:18px 40px; }
.card { background:#ffffff; border:1px solid #d8d6d2; border-radius:8px; padding:14px; display:flex;
flex-direction:column; gap:6px; }
.thumb { position:relative; width:100%; height:104px; border-radius:6px; background:#f1f1f1; }
.t1 { background:linear-gradient(135deg,#dfe3e6,#9aa4ac 55%,#4c565e); }
.t2 { background:linear-gradient(135deg,#e5e0d6,#b4ac9a 55%,#6b6252); }
.t3 { background:linear-gradient(135deg,#dde7e3,#8fa89e 55%,#3f5a51); }
.badge { position:absolute; top:8px; right:8px; font-size:11px; font-weight:700; letter-spacing:0.3px;
text-transform:uppercase; padding:4px 8px; border-radius:4px; color:#ffffff; }
.badge.energy { background:#38871f; }
.badge.promo { background:#db0002; }
.card .title { font-size:16px; font-weight:600; margin:2px 0 0; }
.card .desc { font-size:13px; color:#5e5e5e; margin:0; line-height:1.4; }
footer { height:72px; background:#14293a; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.footcol span { display:block; font-size:12px; color:rgba(255,255,255,0.7); line-height:1.7; }
.footcol .head { font-size:12px; font-weight:600; color:#ffffff; margin-bottom:2px; }
</style></head>
<body>
<nav>
<p class="brand">Asko</p>
<div class="navlinks"><span>Laundry</span><span>Dishwashing</span><span>Cooking</span><span>Cooling</span></div>
<div class="navicons">⚲<span class="cta">Find a Retailer</span></div>
</nav>
<section class="hero">
<span class="over">Washing Machines</span>
<h1>Engineered for the long run</h1>
<p>Steel Seal drum construction and Active Drum wash motion, built to outlast the ordinary.</p>
<button>Explore the Range</button>
</section>
<section class="cards">
<div class="card">
<div class="thumb t1"><span class="badge energy">A+++</span></div>
<p class="title">W6098 Washing Machine</p>
<p class="desc">Steel Seal drum · Active Drum wash motion · 9 kg capacity</p>
</div>
<div class="card">
<div class="thumb t2"><span class="badge promo">New</span></div>
<p class="title">DFI644G Dishwasher</p>
<p class="desc">Pro Wash spray system · Fully integrated · 14 place settings</p>
</div>
<div class="card">
<div class="thumb t3"><span class="badge energy">A++</span></div>
<p class="title">HI1955G Induction Hob</p>
<p class="desc">Flush-mounted control panel · 4 cooking zones · Touch controls</p>
</div>
</section>
<footer>
<div class="footcol"><span class="head">Products</span><span>Laundry · Cooking</span></div>
<div class="footcol"><span class="head">Support</span><span>Warranty · Service</span></div>
<div class="footcol"><span class="head">Company</span><span>About Asko</span></div>
<div class="footcol"><span class="head">Asko</span><span>© Asko</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.45; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 330; line-height: 1.45; letter-spacing: -0.14px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 480; line-height: 1.4; letter-spacing: -0.10px; background: #000000; color: #ffffff;
border: none; border-radius: 50px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 480; line-height: 1.4; letter-spacing: -0.10px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 50px;
padding: 8px 18px 10px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 320; line-height: 1.45; letter-spacing: -0.26px; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbdbdb; color: #000000;
border-radius: 50px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
/* 손으로 오려 붙인 듯한 파스텔 색블록 — 실제 각도를 살짝 어긋나게 회전시켜
"종이를 손으로 잘라 붙였다"는 느낌을 낸다. 배경이라 pointer-events 는
필요 없고(카드 자체가 클릭 대상), 흑백 그리드 위에 얹히는 순서만 중요. */
.paper { position:absolute; border-radius:28px; }
.p1 { width:260px; height:220px; left:-60px; top:-40px; background:#dceeb1; transform:rotate(-6deg); }
.p2 { width:230px; height:190px; right:-50px; top:60px; background:#c5b0f4; transform:rotate(8deg); }
.p3 { width:300px; height:170px; left:120px; bottom:-70px; background:#efd4d4; transform:rotate(4deg); }
.p4 { width:180px; height:180px; right:100px; bottom:-60px; background:#c8e6cd; transform:rotate(-9deg); }
nav { position:relative; z-index:2; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e6e6e6; background:#ffffff; }
.brand { font-size:18px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:28px; color:#000; opacity:0.6; font-size:14px; }
.btn-primary { background:#000000; color:#ffffff; border:none; border-radius:999px;
padding:10px 22px; font-weight:600; font-size:14px; white-space:nowrap; cursor:default; }
.btn-secondary { background:#ffffff; color:#000000; border:1.5px solid #000000; border-radius:999px;
padding:9px 22px; font-weight:600; font-size:14px; white-space:nowrap; cursor:default; }
.hero { position:relative; z-index:2; padding:64px 40px 40px; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:18px; }
.badge { background:#000000; color:#ffffff; border-radius:999px; padding:4px 12px;
font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.hero h1 { font-size:52px; font-weight:340; letter-spacing:-1.4px; margin:0; max-width:680px; line-height:1.02; }
.hero p { font-size:16px; color:#3a3a3a; margin:0; max-width:480px; }
.row { display:flex; gap:12px; align-items:center; justify-content:center; }
.cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr);
gap:20px; padding:16px 40px 40px; }
.card { position:relative; border:1px solid #000000; border-radius:20px; padding:22px;
background:#ffffff; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.card::before { content:''; position:absolute; top:-30px; right:-30px; width:90px; height:90px;
border-radius:24px; opacity:0.9; }
.card.c1::before { background:#dceeb1; transform:rotate(-10deg); }
.card.c2::before { background:#efd4d4; transform:rotate(12deg); }
.card.c3::before { background:#c5b0f4; transform:rotate(-6deg); }
.card .tag { position:relative; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.05em; color:#000; opacity:0.55; }
.card h3 { position:relative; font-size:18px; font-weight:700; margin:0; }
.card p { position:relative; font-size:13px; color:#3a3a3a; margin:0; line-height:1.45; }
footer { position:relative; z-index:2; border-top:1px solid #e6e6e6; padding:16px 40px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#3a3a3a;
background:#ffffff; }
</style></head>
<body>
<div class="paper p1"></div>
<div class="paper p2"></div>
<div class="paper p3"></div>
<div class="paper p4"></div>
<nav>
<p class="brand">Figma</p>
<div class="navlinks"><span>Design</span><span>Dev Mode</span><span>Community</span><span>Pricing</span></div>
<button class="btn-primary">Get started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>A tool for serious work, made by people who like color.</p>
<div class="row">
<button class="btn-primary">Get started</button>
<button class="btn-secondary">See plans</button>
</div>
</section>
<section class="cards">
<div class="card c1"><span class="tag">Design</span><h3>One canvas, every idea</h3><p>Sketch, prototype, and hand off — without leaving the file.</p></div>
<div class="card c2"><span class="tag">Dev Mode</span><h3>Ship what you designed</h3><p>Inspect real values and generate ready-to-use code.</p></div>
<div class="card c3"><span class="tag">Community</span><h3>Made by people who like color</h3><p>Templates, plugins, and widgets from the community.</p></div>
</section>
<footer>
<span>© Figma</span>
<span>Figma · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #232322;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #232322;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #232322; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fafafa; color: #232322;
border: 1px solid #108474; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #fafafa; color: #232322;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#232322; box-sizing:border-box;
font-family:'GT Walsheim Pro Light','Helvetica',Arial,sans-serif; }
* { box-sizing:border-box; }
.bold { font-family:'GT Walsheim Pro Bold','Baskerville',Georgia,serif; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; font-size:12px; color:#666666; }
.navlinks span.on { color:#108474; }
.search { background:#ffffff; border:1px solid #dddddd; border-radius:9999px; padding:7px 18px; font-size:11px; color:#999; width:150px; }
.wrap { display:flex; height:520px; padding:0 36px; gap:44px; align-items:center; }
.photo { width:300px; height:88%; background:#ffffff; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; }
.carb { width:64px; height:200px; border-radius:14px; background:linear-gradient(120deg,#e8e8e8,#108474 45%,#0d6b5d 100%); box-shadow:0 20px 40px rgba(0,0,0,.08); }
.new-badge { position:absolute; top:14px; left:14px; background:#fbcd0a; color:#232322; font-size:10px; font-weight:700; padding:4px 10px; border-radius:4px; text-transform:uppercase; }
.lav-glow { position:absolute; bottom:0; right:0; width:120px; height:120px; background:radial-gradient(circle,#a89cc8 0%,transparent 70%); opacity:.5; border-radius:8px; }
.info { flex:1; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; color:#999999; }
.info h1 { font-family:'GT Walsheim Pro Bold','Baskerville',Georgia,serif; font-size:30px; font-weight:700; margin:0; }
.stars { color:#232322; font-size:12px; }
.price { font-size:18px; font-weight:700; }
.swatch-row { display:flex; gap:8px; }
.swatch { width:24px; height:24px; border-radius:9999px; }
.sw1{background:#232322}.sw2{background:#c1e6e6}.sw3{background:#a89cc8}.sw4{background:#fbcd0a}
.desc { font-size:13px; color:#333333; line-height:1.65; max-width:420px; }
.buy-row { display:flex; gap:12px; margin-top:auto; }
.btn-buy { flex:1; background:#108474; color:#fff; border:none; border-radius:9999px; padding:14px; font-size:13px; font-weight:700; }
.btn-wish { border:1px solid #232322; border-radius:9999px; padding:14px 20px; font-size:13px; }
footer { height:62px; background:#f2f2f2; display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; color:#666666; }
</style></head>
<body>
<nav>
<p class="brand">Aarke</p>
<div class="navlinks"><span>Carbonator</span><span class="on">Carbonator III</span><span>Cylinders</span><span>Journal</span></div>
<span class="search">Search</span>
</nav>
<div class="wrap">
<div class="photo"><span class="new-badge">New</span><div class="lav-glow"></div><div class="carb"></div></div>
<div class="info">
<span class="cat">Sparkling Water Maker</span>
<h1 class="bold">Carbonator III</h1>
<span class="stars">★★★★★ 4.8 (612)</span>
<span class="price">$219.00</span>
<div class="swatch-row"><div class="swatch sw1"></div><div class="swatch sw2"></div><div class="swatch sw3"></div><div class="swatch sw4"></div></div>
<p class="desc">A design museum gift shop object disguised as a kitchen appliance. Stainless steel body, glass carafe, and a single quiet accent — the teal button that turns still into sparkling.</p>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© Aarke — Swedish design since 2013</span><span>Cylinder Refill · Warranty · Stockists</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #07beb8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #07beb8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8adcda; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2fdf6; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #07beb8; color: #000000;
border: 1px solid #f2fdf6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #07beb8; color: #000000;
border: 1px solid #2dc7c2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8adcda; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2dc8c2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffdfa; color:#000000; box-sizing:border-box;
font-family:"NanumSquareRound", sans-serif; }
* { box-sizing:border-box; }
.wrap { text-align:center; padding:36px 60px 0; }
.wrap h1 { font-size:44px; margin:0 0 6px; }
.wrap h1 .reg { font-weight:400; color:#07beb8; }
.wrap h1 .bold { font-weight:700; color:#07beb8; }
.wrap h3 { font-size:22px; font-weight:400; color:#404642; margin:0 0 20px; }
.pills { display:flex; justify-content:center; gap:12px; }
.pill { border-radius:20px; height:53px; padding:0 32px; display:flex; align-items:center; font-size:13px; }
.p1 { background:#f2fdf6; color:#000; } .p2 { background:#f9f7f2; color:#000; }
.blocks { display:flex; gap:16px; padding:30px 60px 0; }
.block { flex:1; border-radius:20px; padding:18px; text-align:left; }
.b1 { background:#f9f7f2; } .b2 { background:#e6e4e2; }
.block h4 { font-size:16px; color:#404642; margin:0 0 6px; }
.block p { font-size:12px; color:#666f6a; margin:0; line-height:1.5; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 60px; display:flex;
justify-content:space-between; font-size:11px; color:#807f7d; }
</style></head>
<body>
<div class="wrap">
<h1><span class="reg">A time to </span><span class="bold">know yourself</span></h1>
<h3>Once a day, answer a question and get closer to who you really are.</h3>
<div class="pills">
<div class="pill p1">Start</div>
<div class="pill p2">Download the app</div>
</div>
</div>
<div class="blocks">
<div class="block b1"><h4>A question just for you</h4><p>Delivered every morning at 6am, so you never face a blank page.</p></div>
<div class="block b2"><h4>Feelings made simple</h4><p>Six gentle emotion stickers help you organize how each entry felt.</p></div>
</div>
<footer><span>© TellingMe</span><span>TellingMe · Newsletter · Team Story</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0079bf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0079bf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bddd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1f2f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0079bf; color: #f1f2f4;
border: 1px solid #f1f2f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0079bf; color: #f5f5f5;
border: 1px solid #278dc8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bddd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #278cc7; color: #f1f2f4;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0079BF; color:#172B4D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:56px; display:flex; align-items:center; padding:0 24px; gap:14px; }
.boardname { color:#fff; font-size:20px; font-weight:700; }
.avs { display:flex; margin-left:auto; }
.avs span { width:28px; height:28px; border-radius:50%; border:2px solid #0079BF; margin-left:-8px; }
.chip { background:rgba(255,255,255,0.16); color:#fff; font-size:13px; padding:6px 14px; border-radius:8px; }
.board { display:flex; gap:12px; padding:8px 16px; height:calc(640px - 56px); overflow:hidden; }
.list { width:272px; background:#F1F2F4; border-radius:12px; flex-shrink:0; padding:12px; display:flex; flex-direction:column; gap:8px; }
.list-head { display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:600; padding:0 4px; }
.list-head .cnt { color:#5E6C84; font-weight:400; font-size:13px; }
.card { background:#fff; border-radius:8px; padding:10px 12px; box-shadow:rgba(9,30,66,0.13) 0 1px 1px, rgba(9,30,66,0.06) 0 0 1px; display:flex; flex-direction:column; gap:6px; }
.labels { display:flex; gap:4px; }
.labels span { height:8px; width:36px; border-radius:4px; }
.cardtitle { font-size:15px; font-weight:600; }
.badges { display:flex; gap:10px; font-size:12px; color:#5E6C84; }
.avatars { display:flex; margin-left:auto; }
.avatars span { width:22px; height:22px; border-radius:50%; margin-left:-6px; border:1px solid #fff; }
.addcard { color:#5E6C84; font-size:14px; padding:6px 4px; }
</style></head>
<body>
<div class="topbar">
<div class="boardname">Trello (iOS) · Sprint Board</div>
<div class="chip">Filter</div>
<div class="avs"><span style="background:#F87168"></span><span style="background:#579DFF"></span><span style="background:#4BCE97"></span></div>
</div>
<div class="board">
<div class="list">
<div class="list-head">To Do <span class="cnt">4</span></div>
<div class="card"><div class="labels"><span style="background:#F5CD47"></span><span style="background:#579DFF"></span></div>
<div class="cardtitle">Design onboarding empty states</div>
<div class="badges"><span>📅 Fri</span><span>💬 2</span><div class="avatars"><span style="background:#F87168"></span></div></div></div>
<div class="card"><div class="labels"><span style="background:#F87168"></span></div>
<div class="cardtitle">Fix flaky checkout tests</div>
<div class="badges"><span>✓ 1/4</span></div></div>
<div class="addcard">+ Add a card</div>
</div>
<div class="list">
<div class="list-head">In Progress <span class="cnt">2</span></div>
<div class="card"><div class="labels"><span style="background:#4BCE97"></span></div>
<div class="cardtitle">Migrate billing service to v2</div>
<div class="badges"><span>📅 Today</span><span>💬 5</span><div class="avatars"><span style="background:#579DFF"></span><span style="background:#4BCE97"></span></div></div></div>
<div class="card"><div class="cardtitle">Write release notes for v3.2</div>
<div class="badges"><span>✓ 2/3</span></div></div>
<div class="addcard">+ Add a card</div>
</div>
<div class="list">
<div class="list-head">Done <span class="cnt">6</span></div>
<div class="card"><div class="labels"><span style="background:#9F8FEF"></span></div>
<div class="cardtitle">Set up staging environment</div>
<div class="badges"><span>✓ 5/5</span></div></div>
<div class="card"><div class="cardtitle">Kickoff meeting notes</div></div>
<div class="addcard">+ Add a card</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fefdfb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #fefdfb;
border: 1px solid #fefdfb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292828; color: #fefdfb;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fefdfb; color:#000000; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.nav .brand { font-weight:700; font-size:18px; }
.nav .links { display:flex; gap:20px; font-size:14px; color:#79756d; }
.navbtn-dark { background:#000; color:#fefdfb; border-radius:12px; padding:8px 16px; font-size:13.92px; font-weight:500; }
.navbtn-light { background:#f3f2ed; color:#000; border-radius:12px; padding:8px 16px; font-size:13.92px; font-weight:500; }
.hero { text-align:center; padding:16px 60px 0; }
.hero h1 { font-size:38px; font-weight:700; margin:0 0 10px; }
.hero p { font-size:15px; color:#79756d; margin:0 0 18px; }
.tabs { display:flex; justify-content:center; gap:8px; }
.tab { background:#f4f3f0; border-radius:12px; padding:8px 16px; font-size:13px; font-weight:500; color:#000; }
.tab.active { background:#aaebfd; }
.diagram { margin:24px 32px 0; height:250px; border-radius:18px; background:#f4f3f0; position:relative; overflow:hidden; }
.node { position:absolute; background:#fff; border-radius:12px; padding:10px 14px; font-size:12px; font-weight:600;
box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.n1{top:30px;left:40px;background:#aaebfd;} .n2{top:100px;left:220px;} .n3{top:30px;left:400px;background:#ffd7ec;}
.n4{top:170px;left:70px;} .n5{top:170px;left:420px;background:#d7ffd0;} .n6{top:100px;left:580px;background:#fff2b8;}
.line { position:absolute; height:2px; background:#d8d5cb; }
.l1{top:56px;left:150px;width:80px;} .l2{top:120px;left:320px;width:90px;} .l3{top:180px;left:180px;width:100px;} .l4{top:120px;left:520px;width:70px;}
.logos { display:flex; gap:14px; padding:20px 32px 0; }
.logocard { background:#fefdfb; border:1px solid #e8e6de; border-radius:18px; padding:16px 20px; font-size:13px; font-weight:600; color:#79756d; flex:1; text-align:center; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Clay</div>
<div class="links"><span>Product</span><span>Solutions</span><span>Pricing</span></div>
<div style="display:flex;gap:8px;"><button class="navbtn-light">Sign in</button><button class="navbtn-dark">Get started</button></div>
</nav>
<div class="hero">
<h1>Go-to-market infrastructure for revenue teams</h1>
<p>Data, agents, orchestration, and execution — one connected system.</p>
<div class="tabs">
<div class="tab active">Data</div><div class="tab">Agents</div><div class="tab">Orchestration</div><div class="tab">Execution</div>
</div>
</div>
<div class="diagram">
<div class="line l1"></div><div class="line l2"></div><div class="line l3"></div><div class="line l4"></div>
<div class="node n1">Enrichment</div>
<div class="node n2">Agent step</div>
<div class="node n3">Scoring</div>
<div class="node n4">CRM sync</div>
<div class="node n5">Sequence</div>
<div class="node n6">Slack alert</div>
</div>
<div class="logos">
<div class="logocard">Northwind</div>
<div class="logocard">Verdant Labs</div>
<div class="logocard">Fieldstone</div>
<div class="logocard">Harbor & Co</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4e2eed; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4e2eed; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aa9bf1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5d4cf2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4e2eed; color: #ffffff;
border: 1px solid #5d4cf2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4e2eed; color: #f5f5f5;
border: 1px solid #694eee; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aa9bf1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5033ee; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body {
display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#010a26; box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #dedede; }
.brand { font-size:17px; font-weight:800; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#010a26; }
.navlinks span.active { color:#4e2eed; font-weight:700; }
.cta-violet { background:#4e2eed; color:#fff; border:none; border-radius:100px; padding:8px 18px; font-size:12px; font-weight:700; white-space:nowrap; }
.hero { flex:0 0 auto; padding:20px 32px 12px; }
.badge { display:inline-block; background:#5d4cf2; color:#fff; border-radius:9999px; padding:3px 10px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { font-size:30px; font-weight:800; letter-spacing:-0.6px; line-height:1.15; margin:0 0 6px; max-width:560px; }
.hero p { font-size:14px; color:#3a415a; margin:0 0 14px; max-width:520px; }
.chiprow { display:flex; gap:10px; }
.chip { background:#15161b; color:#f5f6fa; border-radius:60px; padding:9px 18px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.chip .dot { width:6px; height:6px; border-radius:50%; background:#4e2eed; }
.tablewrap { flex:1 1 auto; margin:8px 32px 0; background:#f5f6fa; border-radius:16px; padding:16px 20px; overflow:hidden; }
.tw-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.tw-head h2 { font-size:15px; font-weight:800; margin:0; }
.tw-head span { font-size:12px; color:#65798e; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; font-weight:700; color:#737a94; text-transform:uppercase; letter-spacing:.04em; padding:0 0 8px; border-bottom:1px solid #dedede; }
td { padding:10px 0; border-bottom:1px solid #dedede; font-size:13px; }
tr:last-child td { border-bottom:none; }
.bankname { display:flex; align-items:center; gap:10px; font-weight:700; }
.bankdot { width:28px; height:28px; border-radius:8px; flex:0 0 28px; }
.rate { font-weight:800; color:#010a26; }
.rate small { font-weight:400; color:#65798e; font-size:11px; }
.applybtn { background:#ffffff; color:#4e2eed; border:1.5px solid #4e2eed; border-radius:100px; padding:5px 14px; font-size:11px; font-weight:700; }
footer { flex:0 0 40px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-top:1px solid #dedede; font-size:11px; color:#65798e; }
</style></head>
<body>
<nav>
<p class="brand">Finda</p>
<div class="navlinks"><span class="active">Loans</span><span>Insurance</span><span>Compare</span><span>About</span></div>
<button class="cta-violet">Get the app</button>
</nav>
<section class="hero">
<span class="badge">1-min compare</span>
<h1>See every bank's rate before you apply</h1>
<p>Finda lines up offers from Korea's largest lenders side by side — no steering, no hidden terms.</p>
<div class="chiprow">
<div class="chip"><span class="dot"></span>Loan Interest</div>
<div class="chip"><span class="dot"></span>Take-home Pay</div>
<div class="chip"><span class="dot"></span>DSR Calculator</div>
</div>
</section>
<section class="tablewrap">
<div class="tw-head"><h2>Top matches for you</h2><span>Updated just now</span></div>
<table>
<thead><tr><th>Lender</th><th>APR</th><th>Monthly</th><th>Term</th><th></th></tr></thead>
<tbody>
<tr><td><div class="bankname"><span class="bankdot" style="background:#c5b0f4"></span>Silverline Bank</div></td><td class="rate">3.4%<br><small>fixed</small></td><td>₩412,000</td><td>36 mo</td><td><button class="applybtn">Apply</button></td></tr>
<tr><td><div class="bankname"><span class="bankdot" style="background:#dceeb1"></span>Northgate Trust</div></td><td class="rate">3.9%<br><small>variable</small></td><td>₩398,500</td><td>48 mo</td><td><button class="applybtn">Apply</button></td></tr>
<tr><td><div class="bankname"><span class="bankdot" style="background:#efd4d4"></span>Crestview Capital</div></td><td class="rate">4.2%<br><small>fixed</small></td><td>₩375,200</td><td>60 mo</td><td><button class="applybtn">Apply</button></td></tr>
<tr><td><div class="bankname"><span class="bankdot" style="background:#c8e6cd"></span>Bluewave Savings</div></td><td class="rate">4.6%<br><small>variable</small></td><td>₩361,000</td><td>60 mo</td><td><button class="applybtn">Apply</button></td></tr>
</tbody>
</table>
</section>
<footer>
<span>© Finda</span>
<span>Finda · Terms · Privacy · Partner lenders</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #1c1c1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040405; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; border-bottom:1px solid rgba(255,255,255,0.08); }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; color:rgba(255,255,255,0.45); font-weight:600; }
.navlinks span.on { color:#ffffff; }
.btn-primary { background:#ffffff; color:#000000; border:none; border-radius:999px;
padding:9px 20px; font-weight:700; font-size:13px; white-space:nowrap; }
main { display:flex; padding:34px 36px 0; gap:44px; }
.copy { width:330px; padding-top:14px; }
.badge { display:inline-block; background:#ffffff; color:#000; border-radius:999px; padding:4px 11px;
font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px; }
.copy h1 { font-size:38px; font-weight:700; letter-spacing:-1.2px; margin:0 0 12px; line-height:1.06; }
.copy p { font-size:14px; color:rgba(255,255,255,0.55); line-height:1.5; margin:0 0 22px; max-width:290px; }
.row { display:flex; gap:10px; }
.btn-secondary { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.4);
border-radius:999px; padding:9px 18px; font-weight:700; font-size:13px; }
.timerpill { margin-top:26px; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.06);
border:1px solid rgba(255,214,10,0.4); border-radius:999px; padding:7px 14px; }
.timerpill span { font-size:12px; font-weight:700; color:#FFD60A; font-variant-numeric:tabular-nums; }
/* the dual-lens composite — BeReal's one true hero element */
.stage { position:relative; width:210px; height:280px; flex-shrink:0; }
.backphoto { position:absolute; inset:0; border-radius:20px;
background:linear-gradient(155deg,#3a3a3a 0%,#1c1c1c 55%,#000 100%); overflow:hidden;
box-shadow:rgba(0,0,0,0.6) 0 8px 24px; }
.backphoto::after { content:''; position:absolute; left:14%; bottom:0; width:72%; height:46%;
background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 100%);
clip-path:polygon(20% 100%, 80% 100%, 62% 30%, 38% 30%); }
.selfie { position:absolute; top:12px; left:12px; width:70px; height:94px; border-radius:14px;
background:linear-gradient(155deg,#555 0%,#2a2a2a 100%); border:2px solid #000;
box-shadow:rgba(0,0,0,0.5) 0 4px 10px; }
.late { position:absolute; top:14px; right:14px; font-size:10px; font-weight:700; color:#FFD60A;
background:rgba(0,0,0,0.55); border-radius:999px; padding:3px 9px; }
.retake { position:absolute; bottom:14px; left:14px; font-size:9px; font-weight:600; color:#fff;
background:rgba(255,255,255,0.14); border-radius:999px; padding:3px 9px; }
.capmeta { margin-top:14px; display:flex; align-items:center; gap:8px; }
.avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(140deg,#666,#222); }
.capmeta b { font-size:13px; font-weight:600; }
.capmeta small { font-size:11px; color:rgba(255,255,255,0.4); }
.realmojis { display:flex; margin-top:12px; }
.realmojis span { width:22px; height:22px; border-radius:50%; border:2px solid #000; margin-left:-8px;
background:linear-gradient(140deg,#777,#2a2a2a); }
.realmojis span:first-child { margin-left:0; }
/* mini friends-feed strip below */
.feedrow { display:flex; gap:20px; padding:26px 36px 0; }
.minicard { flex:1; }
.minihead { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.miniava { width:20px; height:20px; border-radius:50%; background:linear-gradient(140deg,#555,#222); }
.minihead b { font-size:11px; font-weight:600; }
.minitag { font-size:9px; font-weight:700; color:#FFD60A; margin-left:auto; }
.ministage { position:relative; width:100%; height:112px; border-radius:12px;
background:linear-gradient(155deg,#3a3a3a 0%,#151515 100%); }
.miniselfie { position:absolute; top:6px; left:6px; width:34px; height:46px; border-radius:7px;
background:linear-gradient(155deg,#555,#222); border:1.5px solid #000; }
.minicap { font-size:11px; color:rgba(255,255,255,0.55); margin-top:8px; }
footer { position:absolute; bottom:0; left:0; right:0; height:46px; border-top:1px solid rgba(255,255,255,0.08);
display:flex; align-items:center; justify-content:space-between; padding:0 36px;
font-size:11px; color:rgba(255,255,255,0.4); }
</style></head>
<body>
<nav>
<p class="brand">BeReal (iOS)</p>
<div class="navlinks"><span class="on">Friends</span><span>Discovery</span><span>Memories</span></div>
<button class="btn-primary">Open camera</button>
</nav>
<main>
<div class="copy">
<span class="badge">2 min left</span>
<h1>Be real.</h1>
<p>One photo. No filters. Both cameras, at the same time — whenever the notification says so.</p>
<div class="row">
<button class="btn-primary">Post a BeReal</button>
<button class="btn-secondary">See friends</button>
</div>
<div class="timerpill"><span>⏰ 1:47 to capture</span></div>
<div class="capmeta"><div class="avatar"></div><b>jordan</b><small> · Paris, France</small></div>
</div>
<div class="stage">
<div class="backphoto"></div>
<div class="selfie"></div>
<div class="late">⚠ 2h late</div>
<div class="retake">3 retakes</div>
</div>
</main>
<div class="realmojis" style="padding-left:36px;"><span></span><span></span><span></span></div>
<div class="feedrow">
<div class="minicard">
<div class="minihead"><div class="miniava"></div><b>mei</b><span class="minitag">⚠ 40m</span></div>
<div class="ministage"><div class="miniselfie"></div></div>
<p class="minicap">rooftop, finally sunny</p>
</div>
<div class="minicard">
<div class="minihead"><div class="miniava"></div><b>theo</b></div>
<div class="ministage"><div class="miniselfie"></div></div>
<p class="minicap">library grind</p>
</div>
<div class="minicard">
<div class="minihead"><div class="miniava"></div><b>ana</b><span class="minitag">⚠ 1h</span></div>
<div class="ministage"><div class="miniselfie"></div></div>
<p class="minicap">kitchen chaos</p>
</div>
</div>
<footer>
<span>© BeReal (iOS)</span>
<span>BeReal (iOS) · Friends · Discovery · Memories</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3efe8; color: #1b1a1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3efe8; color: #1b1a1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1b1a1f; overflow: hidden; max-height: 2.6em; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #e22828; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f3efe8; color: #1b1a1f;
border: 1px solid #e22828; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #383635;
border: 1px solid #bdbab6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e22828; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f3efe8; color:#1b1a1f; box-sizing:border-box;
font-family:'Brandon Grotesque', 'Figtree', Poppins, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 58px; height:58px; display:flex; align-items:center; justify-content:space-between;
padding:0 44px; border-bottom:1px solid #e6e6e6; background:#f3efe8; }
.brand { font-size:20px; font-weight:700; letter-spacing:-0.3px; margin:0; color:#1b1a1f; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:12.5px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#808080; }
.navlinks span.on { color:#1b1a1f; border-bottom:2px solid #1b1a1f; padding-bottom:4px; }
.navicons { display:flex; align-items:center; gap:16px; }
.icon-search { width:14px; height:14px; border:1.5px solid #1b1a1f; border-radius:50%; position:relative; }
.icon-search::after { content:''; position:absolute; width:6px; height:1.5px; background:#1b1a1f; right:-5px; bottom:-1px; transform:rotate(45deg); }
.icon-cart { width:17px; height:14px; border:1.5px solid #1b1a1f; border-radius:0 0 3px 3px; position:relative; }
.icon-cart::before { content:''; position:absolute; top:-6px; left:2px; width:10px; height:6px; border:1.5px solid #1b1a1f; border-bottom:none; border-radius:6px 6px 0 0; }
.hero { flex:0 0 148px; height:148px; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px; text-align:center; padding:0 40px; background:#f3efe8; }
.hero h1 { margin:0; font-size:32px; font-weight:700; letter-spacing:-0.4px; line-height:1.15; max-width:520px; }
.hero p { margin:0; font-family:'Cardinal Fruit','Figtree',serif; font-size:14.5px; color:#383635; max-width:420px; line-height:1.5; }
.hero-cta { background:#e22828; color:#ffffff; border:none; border-radius:999px; padding:12px 30px;
font-size:14px; font-weight:600; letter-spacing:0.2px; margin-top:4px; }
main.grid { flex:1 1 auto; overflow:hidden; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
padding:14px 44px 0; }
.card { position:relative; background:#ffffff; border-radius:20px; display:flex; flex-direction:column; overflow:hidden; }
.card-img { flex:0 0 60%; position:relative; }
.img1 { background:linear-gradient(155deg,#e5cba0 0%,#d9a877 55%,#c98a5c 100%); }
.img2 { background:linear-gradient(155deg,#d8cdbd 0%,#b39a7f 55%,#8f7458 100%); }
.img3 { background:linear-gradient(155deg,#e7d9c9 0%,#c9ac8e 55%,#a9835f 100%); }
.card-img::after { content:''; position:absolute; left:50%; bottom:14%; width:34%; height:38%;
transform:translateX(-50%); background:rgba(255,255,255,0.35); border-radius:8px 8px 3px 3px; }
.pill-badge { position:absolute; top:10px; left:10px; z-index:2; border-radius:999px; padding:4px 11px;
font-size:10px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; }
.pill-badge.sale { background:#e22828; color:#ffffff; }
.pill-badge.new { background:#6b3a5b; color:#ffffff; }
.card-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:5px; flex:1; }
.card-body h3 { margin:0; font-size:15.5px; font-weight:600; letter-spacing:0; }
.rating { font-size:11px; color:#1b1a1f; letter-spacing:1px; }
.rating span { color:#808080; font-weight:500; margin-left:5px; letter-spacing:0; font-family:'Brandon Grotesque','Figtree',sans-serif; }
.price-row { display:flex; align-items:baseline; gap:7px; margin-top:2px; }
.price { font-family:'Cardinal Fruit','Figtree',serif; font-size:14.5px; color:#383635; }
.price.sale { color:#e22828; font-weight:600; font-family:'Brandon Grotesque','Figtree',sans-serif; }
.price.orig { font-size:12px; color:#acacac; text-decoration:line-through; font-family:'Brandon Grotesque','Figtree',sans-serif; }
.trustrow { flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center; gap:12px; padding:0 40px; }
.trust { background:#f7f5f0; color:#808080; font-size:10.5px; font-weight:500; letter-spacing:0.2px;
border-radius:8px; padding:5px 12px; }
footer { flex:0 0 46px; height:46px; background:#1b1a1f; color:#f3efe8; display:flex; align-items:center;
justify-content:space-between; padding:0 44px; font-size:11.5px; }
footer span.dim { color:#acacac; }
</style></head>
<body>
<nav>
<p class="brand">Arrae</p>
<div class="navlinks">
<span class="on">Shop</span><span>Ingredients</span><span>Our Story</span><span>Reviews</span>
</div>
<div class="navicons">
<div class="icon-search"></div>
<div class="icon-cart"></div>
</div>
</nav>
<section class="hero">
<h1>Wellness, without the noise.</h1>
<p>Clean formulas made from ingredients you can pronounce, in a jar you'll actually want on your shelf.</p>
<button class="hero-cta">Shop Best Sellers</button>
</section>
<main class="grid">
<div class="card">
<div class="card-img img1"><span class="pill-badge sale">Sale</span></div>
<div class="card-body">
<h3>Balance Daily Capsules</h3>
<div class="rating">★★★★★<span>4.8 (2,341)</span></div>
<div class="price-row"><span class="price sale">$42</span><span class="price orig">$52</span></div>
</div>
</div>
<div class="card">
<div class="card-img img2"><span class="pill-badge new">New</span></div>
<div class="card-body">
<h3>Rest Nighttime Blend</h3>
<div class="rating">★★★★★<span>4.9 (876)</span></div>
<div class="price-row"><span class="price">$38</span></div>
</div>
</div>
<div class="card">
<div class="card-img img3"></div>
<div class="card-body">
<h3>Glow Skin Support</h3>
<div class="rating">★★★★☆<span>4.6 (1,204)</span></div>
<div class="price-row"><span class="price">$45</span></div>
</div>
</div>
</main>
<div class="trustrow">
<span class="trust">Free Shipping</span>
<span class="trust">30-Day Guarantee</span>
<span class="trust">Made in USA</span>
</div>
<footer>
<span>© Arrae</span>
<span class="dim">Arrae · Shop · Support · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.38; letter-spacing: 0.2px; margin: 0; color: #62605d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.1px; background: #006fba; color: #ffffff;
border: none; border-radius: 12px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.1px; background: #ffffff; color: #006fba;
border: 1px solid #006fba; border-radius: 12px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #cfcfcf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #62605d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #d63a2f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#303030; box-sizing:border-box;
font-family:'Work Sans', system-ui, -apple-system, sans-serif; }
* { box-sizing:border-box; }
.announce { height:28px; background:#006fba; color:#fff; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:500; letter-spacing:0.2px; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #cfcfcf; background:#fff; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.3px; color:#121212; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#62605d; }
.navlinks span.active { color:#006fba; font-weight:600; }
.cart-ico { width:36px; height:36px; border-radius:8px; background:#ebebeb; display:flex; align-items:center; justify-content:center; font-size:15px; }
.main { display:flex; height:552px; }
.gallery { width:420px; background:#ebebeb; position:relative; display:flex; align-items:center; justify-content:center; }
.swatch-strip { position:absolute; left:20px; top:20px; display:flex; flex-direction:column; gap:8px; }
.swatch { width:52px; height:52px; border-radius:8px; background:#fff; border:1px solid #dedede; }
.swatch.sel { border:2px solid #006fba; }
.prod-shape { width:220px; height:280px; border-radius:24px; background:linear-gradient(160deg,#308ac7,#005a9e); position:relative; }
.prod-shape::before { content:''; position:absolute; top:34px; left:34px; right:34px; height:96px; border-radius:14px; background:rgba(255,255,255,0.18); }
.prod-shape::after { content:''; position:absolute; bottom:26px; left:50%; transform:translateX(-50%); width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.14); }
.badge-instock { position:absolute; top:20px; right:20px; background:#559b60; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:3px 8px; border-radius:4px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:10px; }
.tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#6c69de; }
h1 { font-size:24px; font-weight:600; margin:0; letter-spacing:-0.25px; color:#121212; }
.stars { color:#006fba; font-size:13px; }
.stars .count { color:#62605d; font-weight:400; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:26px; font-weight:700; color:#006fba; }
.price-old { font-size:14px; color:#aaaaaa; text-decoration:line-through; }
.badge-sale { background:#d63a2f; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.desc { font-size:13px; line-height:1.55; color:#62605d; max-width:420px; }
.features { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.feat-chip { background:#ebebeb; border:1px solid #cfcfcf; border-radius:999px; padding:5px 12px; font-size:11px; font-weight:600; color:#303030; }
.qty-row { display:flex; align-items:center; gap:14px; margin-top:10px; }
.qty { display:flex; align-items:center; background:#ebebeb; border:1px solid #cfcfcf; border-radius:8px; height:40px; }
.qty span { width:40px; text-align:center; font-weight:600; }
.qty button { width:36px; height:40px; border:none; background:transparent; font-size:16px; color:#303030; }
.btn-cart { flex:1; height:48px; background:#006fba; color:#fff; border:none; border-radius:12px; font-weight:600; font-size:15px; }
.trust-row { display:flex; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid #dedede; }
.trust { flex:1; text-align:center; font-size:10.5px; color:#62605d; font-weight:600; }
.trust b { display:block; color:#006fba; font-size:14px; margin-bottom:2px; }
</style></head>
<body>
<div class="announce">Free shipping on orders over $75 · Registry-ready gifting available</div>
<nav>
<p class="brand">Baby Brezza</p>
<div class="navlinks"><span class="active">Feeding</span><span>Sterilizers</span><span>Formula Pro</span><span>Sale</span></div>
<div class="cart-ico">🛒</div>
</nav>
<div class="main">
<div class="gallery">
<div class="swatch-strip">
<div class="swatch sel"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</div>
<div class="prod-shape"></div>
<div class="badge-instock">Ships Today</div>
</div>
<div class="info">
<span class="tag">Bestseller · Formula Pro Advanced</span>
<h1>Formula Pro Advanced Formula Mixer</h1>
<div class="stars">★★★★★<span class="count">4.8 (2,140 reviews)</span></div>
<div class="price-row">
<span class="price">$179.99</span>
<span class="price-old">$209.99</span>
<span class="badge-sale">Sale</span>
</div>
<p class="desc">Precisely mixes formula to the perfect temperature and consistency in seconds. Compatible with most bottle brands, whisper-quiet motor, and a self-cleaning cycle for busy 2am feedings.</p>
<div class="features">
<span class="feat-chip">32 dB Quiet Mode</span>
<span class="feat-chip">Self-Cleaning Cycle</span>
<span class="feat-chip">Fits Most Bottles</span>
<span class="feat-chip">2-Year Warranty</span>
</div>
<div class="qty-row">
<div class="qty"><button>−</button><span>1</span><button>+</button></div>
<button class="btn-cart">Add to Cart</button>
</div>
<div class="trust-row">
<div class="trust"><b>Free</b>Shipping $75+</div>
<div class="trust"><b>2yr</b>Warranty</div>
<div class="trust"><b>30d</b>Easy Returns</div>
<div class="trust"><b>BPA</b>Free Materials</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #917e57; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #917e57; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c8bfae; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #917e57; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #917e57; color: #f5f5f5;
border: 1px solid #a19170; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c8bfae; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #887a70; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #cccccc; }
.brand { font-weight:700; font-size:20px; letter-spacing:2px; color:#917e57; }
.search { flex:1; max-width:340px; margin:0 30px; height:40px; display:flex; }
.search input { flex:1; border:1px solid #cccccc; border-right:none; border-radius:8px 0 0 8px; padding:6px 16px 6px 16px;
color:#999999; font-size:16px; }
.search .go { width:44px; background:#917e57; color:#fff; display:flex; align-items:center; justify-content:center;
border-radius:0; }
.navlinks { display:flex; gap:18px; font-size:13px; color:#212529; }
.banner { padding:20px 40px; }
.banner .band { height:120px; border-radius:0; background:linear-gradient(135deg,#f0ede4,#d8cdb0);
display:flex; align-items:center; padding:0 30px; }
.banner .band span { font-size:20px; font-weight:700; color:#5c4d2e; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#e6e6e6; padding:0 40px 24px; }
.card { background:#fff; height:270px; padding:14px; }
.card .cover { height:150px; background:linear-gradient(160deg,#efece4,#c9bc9a); margin-bottom:10px; }
.card h5 { font-size:13px; margin:0 0 6px; line-height:1.4; }
.card .price { font-size:13px; color:#917e57; font-weight:700; }
.section-title { padding:0 40px; font-size:15px; font-weight:700; margin:6px 0 12px; }
</style></head>
<body>
<nav>
<span class="brand">Eslite</span>
<div class="search"><input placeholder="Search books, products"><div class="go">🔍</div></div>
<div class="navlinks"><span>Books</span><span>Stationery & Design</span><span>Apparel</span><span>Home & Living</span></div>
</nav>
<section class="banner"><div class="band"><span>Live your Dream — 35th Anniversary</span></div></section>
<div class="section-title">Staff Picks</div>
<section class="grid">
<div class="card"><div class="cover"></div><h5>Designer's Everyday Objects</h5><div class="price">NT$420</div></div>
<div class="card"><div class="cover"></div><h5>Handcrafted Ceramic Tea Set</h5><div class="price">NT$1,280</div></div>
<div class="card"><div class="cover"></div><h5>Local Artisan Picks: Woven Rush Grass</h5><div class="price">NT$680</div></div>
<div class="card"><div class="cover"></div><h5>Literary Magazine — 2026 Autumn Issue</h5><div class="price">NT$260</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #efeae6; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #efeae6; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.33; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.5px; background: #304038; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.5px; background: transparent; color: #304038;
border: 1px solid #304038; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdfcfc; color: #272727;
border: 1px solid #bdb9b6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 1.2px; background: #bfccb8; color: #304038;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#efeae6; color:#272727; box-sizing:border-box;
font-family:-apple-system, 'Helvetica Neue', Arial, Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fdfcfc; display:flex; align-items:center; justify-content:space-between;
padding:0 34px; border-bottom:1px solid #eaeaea; }
.brand { font-size:17px; font-weight:500; letter-spacing:0.3px; margin:0; color:#304038; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; letter-spacing:0.3px; color:#272727; }
.icons { display:flex; gap:14px; font-size:13px; color:#304038; }
main { display:flex; height:576px; }
.stage { width:320px; background:#efeae6; display:flex; align-items:center; justify-content:center; }
.ring { width:130px; height:130px; border-radius:999px; border:16px solid; border-color:#d9a441 #b26118 #d9a441 #ffd196;
box-shadow:0 20px 40px rgba(178,97,24,0.2); position:relative; }
.ring::after { content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:16px; height:16px;
background:#fff; border-radius:999px; box-shadow:0 0 0 3px #ffd196, 0 4px 10px rgba(0,0,0,0.2); }
.info { flex:1; padding:30px 36px; display:flex; flex-direction:column; gap:12px; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; border-radius:999px; padding:4px 10px; }
.b-mat { background:#bfccb8; color:#304038; }
.b-gold { background:#ffd196; color:#b26118; }
h1 { font-size:26px; font-weight:400; margin:0; letter-spacing:-0.3px; }
.sub { font-size:14px; color:#5f6a66; margin:0; max-width:440px; line-height:1.5; }
.price { font-size:18px; color:#b26118; font-weight:400; margin-top:2px; }
.size-row { display:flex; gap:8px; margin-top:6px; }
.size { width:40px; height:40px; border:1px solid #e8e8e8; border-radius:4px; display:flex; align-items:center;
justify-content:center; font-size:13px; color:#272727; }
.size.on { background:#304038; color:#fff; border-color:#304038; }
.qty { display:flex; align-items:center; gap:0; border:1px solid #e8e8e8; border-radius:4px; width:120px; height:40px; margin-top:6px; }
.qty div { flex:1; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500; }
.actions { display:flex; gap:12px; margin-top:8px; }
.btn-primary { background:#304038; color:#fff; border-radius:8px; padding:14px 32px; height:48px;
display:flex; align-items:center; font-size:14px; font-weight:500; letter-spacing:0.5px; }
.btn-secondary { background:transparent; border:1px solid #304038; color:#304038; border-radius:8px; padding:13px 24px;
height:48px; display:flex; align-items:center; font-size:14px; font-weight:500; }
.sustain { margin-top:auto; background:#e6f7f4; border-top:1px solid #739487; border-bottom:1px solid #739487;
padding:10px 0; font-size:11px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; color:#304038;
text-align:center; }
</style></head>
<body>
<nav>
<p class="brand">Aurate New York</p>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Earrings</span><span>Gifts</span></div>
<div class="icons"><span>Search</span><span>Account</span><span>Bag (0)</span></div>
</nav>
<main>
<div class="stage"><div class="ring"></div></div>
<div class="info">
<div class="badges"><span class="badge b-mat">Recycled Gold</span><span class="badge b-gold">14K</span></div>
<h1>The Bezel Solitaire Ring</h1>
<p class="sub">A single lab-grown diamond set in a hand-finished bezel — cast from 100% recycled 14K gold.</p>
<p class="price">$495</p>
<div class="size-row">
<div class="size">5</div><div class="size on">6</div><div class="size">7</div><div class="size">8</div>
</div>
<div class="qty"><div>–</div><div>1</div><div>+</div></div>
<div class="actions">
<div class="btn-primary">Add to Bag</div>
<div class="btn-secondary">Save for Later</div>
</div>
</div>
</main>
<div class="sustain">100% Recycled Gold · Lab-Grown Diamonds · Carbon Neutral Shipping</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1032cf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1032cf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9de4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #151515; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1032cf; color: #ffffff;
border: 1px solid #151515; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1032cf; color: #f5f5f5;
border: 1px solid #3551d5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9de4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #112db1; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#232f32; box-sizing:border-box;
font-family:"Lexend", -apple-system, "Segoe UI", Helvetica, sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"ClashGrotesk", "Lexend", sans-serif; font-weight:400; }
.band-white { background:#ffffff; }
.band-black { background:#000000; color:#ffffff; }
.band-off { background:#eff0f4; color:#232f32; }
nav { height:50px; display:flex; align-items:center; gap:26px; padding:0 32px; }
.brand { font-size:15px; font-weight:600; color:#151515; margin:0; }
.navlinks { display:flex; gap:24px; margin-left:20px; }
.navlinks span { font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; color:#232f32; }
.hero { padding:14px 32px 26px; }
.hero h1 { font-size:50px; font-weight:400; line-height:1.06; letter-spacing:-0.5px; margin:0 0 12px; color:#151515; max-width:640px; }
.hero p { font-size:16px; font-weight:300; line-height:1.4; margin:0 0 20px; color:#232f32; max-width:480px; }
.pill { display:inline-flex; align-items:center; background:#000000; color:#ffffff; border-radius:100px;
padding:12px 26px; font-size:15px; font-weight:400; }
.stats { display:flex; align-items:center; padding:26px 32px; gap:0; }
.stat { flex:1; padding-right:24px; }
.stat .num { font-family:"ClashGrotesk","Lexend",sans-serif; font-size:34px; font-weight:400; color:#ffffff; }
.stat .lbl { font-size:14px; font-weight:300; color:#c9cdd6; margin-top:2px; }
.accent-line { width:3px; height:34px; background:#1032cf; margin-right:16px; flex:none; }
footer { padding:20px 32px; display:flex; gap:60px; }
.fcol h4 { font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; font-weight:500; margin:0 0 10px; color:#5a636a; }
.fcol .frow { font-size:13.5px; font-weight:300; color:#232f32; margin-bottom:7px; }
</style></head>
<body>
<div class="band-white">
<nav>
<p class="brand">Lunit</p>
<div class="navlinks"><span>Solutions</span><span>Technology</span><span>Evidence</span><span>Company</span></div>
</nav>
<div class="hero">
<h1 class="display">AI that reads medical<br>images with clinicians</h1>
<p>Detection and triage support built for radiology and oncology workflows, validated across large-scale clinical evidence.</p>
<div class="pill">Contact Us</div>
</div>
</div>
<div class="band-black">
<div class="stats">
<div class="accent-line"></div>
<div class="stat"><div class="num display">10,000+</div><div class="lbl">Customer Sites</div></div>
<div class="stat"><div class="num display">65+</div><div class="lbl">Countries</div></div>
<div class="stat"><div class="num display">700+</div><div class="lbl">Publications</div></div>
</div>
</div>
<div class="band-off">
<footer>
<div class="fcol"><h4>Solutions</h4><div class="frow">Chest X-ray</div><div class="frow">Mammography</div><div class="frow">Digital Pathology</div></div>
<div class="fcol"><h4>Company</h4><div class="frow">About</div><div class="frow">Careers</div><div class="frow">Newsroom</div></div>
<div class="fcol"><h4>Resources</h4><div class="frow">Evidence</div><div class="frow">Publications</div><div class="frow">Support</div></div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0061fe; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0061fe; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b2f9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f5f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0061fe; color: #f7f5f2;
border: 1px solid #f7f5f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0061fe; color: #f5f5f5;
border: 1px solid #2779fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b2f9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2879fc; color: #f7f5f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f5f2; color:#1e1919; box-sizing:border-box;
font-family:"Sharp Grotesk","Atlas Grotesk",-apple-system,sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:18px; }
.navlinks { display:flex; gap:20px; font-size:15px; }
.cta-blue { background:#0061fe; color:#f7f5f2; border:2px solid #0061fe; border-radius:12px; padding:0 16px; height:40px;
display:flex; align-items:center; font-size:15px; }
.hero { display:flex; gap:30px; padding:24px 32px; align-items:center; }
.hero-txt { flex:1; }
.hero h1 { font-size:34px; font-weight:500; line-height:1.2; margin:0 0 14px; }
.row { display:flex; gap:10px; }
.btn-blue { background:#0061fe; color:#f7f5f2; border:2px solid #0061fe; border-radius:16px; padding:14px 22px;
font-size:15px; font-weight:400; }
.btn-outline { background:transparent; color:#1e1919; border:2px solid #1e1919; border-radius:16px; padding:14px 22px;
font-size:15px; }
.hero-visual { flex:1; height:180px; border-radius:16px; background:#eee9e2; position:relative; }
.hero-visual .chip { position:absolute; background:#fff; border-radius:12px; padding:12px; font-size:12px; }
.hero-visual .chip.c1 { top:16px; left:16px; }
.hero-visual .chip.c2 { bottom:20px; right:24px; background:#cd2f7b; color:#fff; }
.band { background:#1e1919; color:#f7f5f2; padding:26px 32px; display:flex; gap:20px; align-items:center; }
.band .txt { flex:1; }
.band h2 { font-size:24px; font-weight:500; margin:0 0 6px; }
.band p { font-size:14px; margin:0; opacity:0.8; }
.band .btn-out2 { border:2px solid #f7f5f2; color:#f7f5f2; border-radius:16px; padding:10px 18px; font-size:14px; }
.menu { display:flex; gap:14px; padding:22px 32px; }
.mcard { flex:1; border-radius:12px; padding:16px; height:60px; }
.mcard.a { background:#eee9e2; }
.mcard.b { background:#ffffff; border:1px solid #eee9e2; }
.mcard h4 { font-size:14px; margin:0; }
</style></head>
<body>
<header>
<span class="brand">Dropbox</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Enterprise</span><span>Pricing</span></div>
<div class="cta-blue">Get started</div>
</header>
<section class="hero">
<div class="hero-txt">
<h1>Get to work, with a lot less work.</h1>
<div class="row"><button class="btn-blue">Try Dropbox free</button><button class="btn-outline">Learn more</button></div>
</div>
<div class="hero-visual">
<div class="chip c1">Q4-report.pdf<br><b>Synced</b></div>
<div class="chip c2">Shared with 4</div>
</div>
</section>
<section class="band">
<div class="txt"><h2>Security never comes second.</h2><p>These aren't just your files. They are pieces of your life.</p></div>
<div class="btn-out2">Learn more</div>
</section>
<section class="menu">
<div class="mcard a"><h4>Dropbox</h4></div>
<div class="mcard b"><h4>Replay</h4></div>
<div class="mcard a"><h4>Sign</h4></div>
<div class="mcard b"><h4>Dash</h4></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #93939f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.71; background: #17171c; color: #ffffff;
border: none; border-radius: 32px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; background: transparent; color: #212121;
border: 1px solid #17171c; border-radius: 4px;
padding: 8px 0; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 16px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #93939f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: -0.32px; background: transparent; color: #ff7759;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:13px; }
.btnp { background:#17171c; color:#fff; border-radius:32px; padding:11px 20px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:14px 32px 18px; }
.hero h1 { font-size:52px; font-weight:400; letter-spacing:-1.2px; line-height:1.0; margin:0 0 14px; }
.hero p { font-size:15px; color:#616161; margin:0 auto 16px; max-width:460px; }
.trust { display:flex; align-items:center; justify-content:center; gap:40px; padding:8px 0 18px;
color:#93939f; font-size:13px; letter-spacing:0.5px; font-weight:600; }
.greenband { background:#003c33; color:#fff; border-radius:22px; margin:0 32px; padding:30px 32px;
display:flex; gap:20px; }
.greenband .txt { flex:0 0 260px; }
.greenband h2 { font-size:28px; font-weight:400; margin:0 0 10px; letter-spacing:-0.5px; }
.greenband p { font-size:13px; color:#c9d6d3; margin:0; line-height:1.5; }
.capcards { flex:1; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.capcard { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:12px; padding:16px; }
.capcard h3 { font-size:14px; font-weight:400; margin:0 0 6px; }
.capcard p { font-size:12px; color:#9fb8b3; margin:0; line-height:1.4; }
.capcard .ic { width:20px; height:20px; border:1.5px solid #edfce9; border-radius:4px; margin-bottom:10px; }
</style></head>
<body>
<nav>
<div class="brand">Cohere</div>
<div class="navlinks"><span>Platform</span><span>Solutions</span><span>Research</span><span>Pricing</span></div>
<span class="btnp">Contact sales</span>
</nav>
<div class="hero">
<h1>The leading AI<br>platform for enterprise</h1>
<p>Reduce complexity and deploy AI agents and applications powered by the world's leading AI models.</p>
<span class="btnp">Talk to our team</span>
</div>
<div class="trust">TELUS NOTION OKTA LG FUJITSU</div>
<div class="greenband">
<div class="txt">
<h2>Secure AI for the enterprise</h2>
<p>Deploy in your own VPC, on-prem, or air-gapped — your data never leaves your control.</p>
</div>
<div class="capcards">
<div class="capcard"><div class="ic"></div><h3>North</h3><p>An agentic platform for the modern workforce.</p></div>
<div class="capcard"><div class="ic"></div><h3>Command</h3><p>Enterprise-grade language models built for scale.</p></div>
<div class="capcard"><div class="ic"></div><h3>Embed</h3><p>State-of-the-art retrieval for search and RAG.</p></div>
<div class="capcard"><div class="ic"></div><h3>Rerank</h3><p>Boost search relevance in a single API call.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e32c2b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #e32c2b; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f0b300; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Assistant', 'Montserrat', -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
.tg { font-family:'Trade Gothic', 'Montserrat', 'Assistant', sans-serif; }
nav { height:64px; background:#272d45; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#fff; font-size:19px; font-weight:700; margin:0; text-transform:uppercase; letter-spacing:0.5px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#fff; }
.navlinks span:first-child { color:#f0b300; }
.search { width:160px; height:34px; background:#1c2135; border:1px solid #444a63; border-radius:8px; font-size:12px;
color:#9a9db1; display:flex; align-items:center; padding-left:14px; }
.hero { background:#272d45; padding:28px 40px; display:flex; align-items:center; gap:32px; min-height:150px; }
.hero-copy { flex:1.2; }
.hero h1 { color:#fff; font-size:32px; font-weight:700; line-height:1.2; letter-spacing:-0.3px; margin:0 0 10px; text-transform:uppercase; }
.hero p { color:#9a9db1; font-size:14px; margin:0 0 16px; max-width:400px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-primary { background:#e32c2b; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-size:14px;
font-weight:600; text-transform:uppercase; letter-spacing:0.3px; height:44px; }
.btn-gold { background:#f0b300; color:#121212; border:none; border-radius:8px; padding:12px 24px; font-size:14px;
font-weight:600; text-transform:uppercase; letter-spacing:0.3px; height:44px; }
.hero-visual { flex:1; height:150px; border-radius:8px; background:#1c2135; position:relative; overflow:hidden; border:1px solid #444a63; }
.hero-visual::before { content:''; position:absolute; width:80px; height:100px; border-radius:6px;
background:linear-gradient(160deg,#f0b300,#e32c2b); left:40px; top:14px; }
.hero-visual::after { content:''; position:absolute; width:60px; height:70px; border-radius:6px;
background:linear-gradient(160deg,#00caaa,#00756a); right:50px; bottom:12px; }
.section { padding:18px 40px 0; background:#f4f4f6; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; padding-top:4px; }
.sec-head h2 { font-size:20px; font-weight:600; margin:0; text-transform:uppercase; }
.sec-head span { font-size:13px; color:#e32c2b; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border-radius:8px; overflow:hidden; border:1px solid #dbdde4; }
.thumb { aspect-ratio:1/1; position:relative; }
.t1 { background:linear-gradient(150deg,#272d45,#1c2135); }
.t2 { background:linear-gradient(150deg,#e32c2b,#8f1f1e); }
.t3 { background:linear-gradient(150deg,#00caaa,#00756a); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
padding:2px 8px; border-radius:4px; }
.badge.gold { background:#f0b300; color:#121212; }
.badge.sale { background:#e32c2b; color:#fff; }
.cbody { padding:10px 14px 14px; }
.stars { color:#f0b300; font-size:12px; margin-bottom:4px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 4px; text-transform:uppercase; }
.price { font-size:16px; font-weight:400; margin:0; }
footer { background:#2c3e50; color:#e5e5eb; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; }
footer a { color:#e5e5eb; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand tg">Bethesda Gear</p>
<div class="navlinks"><span>Fallout</span><span>Elder Scrolls</span><span>Starfield</span><span>Doom</span></div>
<div class="search">Search…</div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1 class="tg">Gear up for the wasteland</h1>
<p>Official apparel, collectibles, and loot from every world Bethesda has built.</p>
<div class="row"><button class="btn-primary">Shop Now</button><button class="btn-gold">Pre-Order</button></div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2 class="tg">Featured Loot</h2><span>Shop All →</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge gold">New</span></div>
<div class="cbody"><div class="stars">★★★★★</div><h3 class="tg">Vault-Tec Bomber Jacket</h3><p class="price">$89.99</p></div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge sale">Sale</span></div>
<div class="cbody"><div class="stars">★★★★☆</div><h3 class="tg">Doom Slayer Statue</h3><p class="price">$149.99</p></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="cbody"><div class="stars">★★★★★</div><h3 class="tg">Starfield Constellation Tee</h3><p class="price">$32.99</p></div>
</div>
</div>
</section>
<footer>
<span>© Bethesda Gear</span>
<div><a href="#">Support</a><a href="#">Shipping</a><a href="#">Legal</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #191919; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #191919; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191919; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #191919; color: #f5f5f5;
border: 1px solid #3c3c3c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3e3e3e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e5e7eb; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:500; color:#5d6875; }
.navlinks span.on { color:#191919; }
.locale { border:1px solid transparent; border-radius:8px; padding:8px 10px; font-size:13px; color:#191919; }
.hero { padding:44px 40px 28px; display:flex; gap:36px; align-items:center; }
.hero-copy { flex:1; }
.badge { display:inline-block; background:#111111; color:#fff; border-radius:999px; padding:4px 12px;
font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:14px; }
.hero h1 { font-size:38px; font-weight:700; letter-spacing:-1.6px; line-height:1.15; margin:0 0 14px; }
.hero p { font-size:15px; color:#5d6875; max-width:400px; line-height:1.5; margin:0 0 20px; }
.row { display:flex; gap:10px; }
.btn-dark { background:#111111; color:#fff; border-radius:999px; padding:12px 22px; font-size:14px; font-weight:600; }
.btn-outline { background:#fff; color:#111111; border:1px solid #111111; border-radius:999px; padding:11px 22px; font-size:14px; font-weight:600; }
.link-blue { color:#007aff; font-size:13px; font-weight:600; align-self:center; }
.hero-visual { flex:1; height:210px; border-radius:16px; background:linear-gradient(135deg,#f2f5fa,#e9eef7);
position:relative; overflow:hidden; }
.chip { position:absolute; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px 14px;
font-size:12px; color:#5d6875; box-shadow:none; }
.chip b { color:#191919; font-size:18px; display:block; }
.chip.c1 { top:24px; left:24px; }
.chip.c2 { bottom:28px; left:60px; }
.chip.c3 { top:70px; right:30px; }
.curve { position:absolute; inset:0; }
.tabs { margin:0 40px; display:flex; gap:6px; background:#f2f5fa; border:1px solid rgba(25,25,25,0.1);
border-radius:999px; padding:5px; width:fit-content; }
.tab { padding:8px 16px; border-radius:999px; font-size:12px; color:#191919; }
.tab.sel { background:#fff; font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 40px 0; }
.card { border:1px solid #e5e7eb; border-radius:10px; padding:18px; }
.card .tag { font-size:11px; font-weight:700; text-transform:uppercase; color:#5d6875; letter-spacing:0.05em; }
.card h3 { font-size:15px; margin:8px 0 6px; }
.card p { font-size:12.5px; color:#5d6875; line-height:1.5; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Datarize</p>
<div class="navlinks"><span class="on">Audience</span><span>Campaigns</span><span>Analytics</span><span>Pricing</span></div>
<div class="locale">EN</div>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="badge">Autonomous</span>
<h1>Behavior captured.<br>Growth automated.</h1>
<p>Turn every click, scroll, and pause into a campaign your store runs while you sleep.</p>
<div class="row">
<button class="btn-dark">Get started</button>
<button class="btn-outline">See plans</button>
<span class="link-blue">Watch demo →</span>
</div>
</div>
<div class="hero-visual">
<div class="chip c1">Repeat rate<b>+18.4%</b></div>
<div class="chip c2">Segments live<b>32</b></div>
<div class="chip c3">Revenue lift<b>$412K</b></div>
</div>
</section>
<div class="tabs">
<div class="tab sel">Monthly</div>
<div class="tab">Annual</div>
<div class="tab">Enterprise</div>
</div>
<section class="cards">
<div class="card"><span class="tag">Audience</span><h3>Behavior, segmented</h3><p>Build cohorts from real on-site signal, not guesswork demographics.</p></div>
<div class="card"><span class="tag">On-site</span><h3>Banners that adapt</h3><p>Show the next best offer to the shopper standing in front of it.</p></div>
<div class="card"><span class="tag">Metrics</span><h3>Growth you can trace</h3><p>Every campaign ties back to a number your CFO already trusts.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0b0b0b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0b0b0b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.25; margin: 0; color: #0b0b0b; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d7175; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #f94c43; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #ffffff; color: #0b0b0b;
border: 1px solid #f94c43; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0b0b0b;
border: 1px solid #c2c2c2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d7175; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: 0.6px; background: #f94c43; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0b0b0b; box-sizing:border-box;
font-family:Mulish,sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#0b0b0b; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; letter-spacing:.4px; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #dedede; }
.brand { font-family:Georgia,serif; font-size:20px; margin:0; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.cart { font-size:11px; font-weight:700; text-transform:uppercase; }
.hero { display:flex; padding:22px 36px; gap:20px; align-items:center; }
.heroimg { flex:1; height:200px; background:linear-gradient(135deg,#f94c43,#f6a429); position:relative; }
.heroimg::after { content:''; position:absolute; left:20px; top:16px; font-family:Georgia,serif; font-size:13px; font-weight:700; color:#fff; content:'JUST DROPPED'; }
.herotext { flex:1; }
.herotext .eyebrow { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#f94c43; margin:0 0 8px; }
.herotext h1 { font-family:Georgia,serif; font-size:32px; font-weight:400; margin:0 0 10px; line-height:1.1; }
.herotext p { font-size:13px; color:#6d7175; margin:0 0 12px; }
.btn { display:inline-block; background:#f94c43; color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:13px 26px; }
.pillrow { display:flex; gap:8px; padding:0 36px 14px; }
.fpill { border:1px solid #dedede; border-radius:999px; padding:6px 14px; font-size:11px; font-weight:700; text-transform:uppercase; }
.fpill.active { background:#0b0b0b; color:#fff; border-color:#0b0b0b; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:0 36px; }
.card { position:relative; }
.card-img { height:96px; background:linear-gradient(135deg,#f6a429,#f94c43); position:relative; }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:800; text-transform:uppercase; padding:3px 7px; }
.badge.new { background:#0b0b0b; color:#fff; }
.badge.personalize { background:#f6a429; color:#0b0b0b; }
.card h3 { font-size:13px; font-weight:400; margin:8px 0 4px; }
.price { font-size:14px; font-weight:700; }
.swrow { display:flex; gap:5px; margin-top:6px; }
.sw { width:14px; height:14px; border-radius:50%; }
footer { position:absolute; bottom:0; left:0; right:0; height:40px; background:#0b0b0b; color:#c5c8d1;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; }
</style></head>
<body>
<div class="announce">JUST DROPPED: The Aurora Charm Collection — Shop Now</div>
<nav>
<p class="brand">Baublebar</p>
<div class="navlinks"><span>New</span><span>Charms</span><span>Bracelets</span><span>Gifting</span></div>
<div class="cart">Bag (3)</div>
</nav>
<section class="hero">
<div class="heroimg"></div>
<div class="herotext">
<p class="eyebrow">Limited Drop</p>
<h1>Charm Bracelets, Layered Your Way</h1>
<p>Personalize your set with initials, birthstones, and charms that actually mean something.</p>
<span class="btn">Shop the Drop</span>
</div>
</section>
<div class="pillrow">
<div class="fpill active">All</div><div class="fpill">Charms</div><div class="fpill">Gold</div><div class="fpill">Gifting</div>
</div>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge new">New</span></div>
<h3>Sherbet Charm Set</h3>
<div class="price">$58</div>
<div class="swrow"><div class="sw" style="background:#f94c43"></div><div class="sw" style="background:#f6a429"></div></div>
</div>
<div class="card">
<div class="card-img"><span class="badge personalize">Personalize</span></div>
<h3>Initial Pendant Necklace</h3>
<div class="price">$42</div>
<div class="swrow"><div class="sw" style="background:#c9a961"></div></div>
</div>
<div class="card">
<div class="card-img"></div>
<h3>Lavender Beaded Bracelet</h3>
<div class="price">$36</div>
<div class="swrow"><div class="sw" style="background:#c5c8d1"></div></div>
</div>
<div class="card">
<div class="card-img"></div>
<h3>Layered Chain Set</h3>
<div class="price">$64</div>
<div class="swrow"><div class="sw" style="background:#009879"></div></div>
</div>
</div>
<footer>
<span>© Baublebar</span>
<span>Baublebar · Gifting · Personalize · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5e3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066cc; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066cc; color: #f5f5f5;
border: 1px solid #277dd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e66d2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#151515; box-sizing:border-box;
font-family:"Red Hat Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #d2d2d2; background:#ffffff; }
.brand { font-family:"Red Hat Display", sans-serif; font-size:18px; font-weight:600; margin:0; color:#151515; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#4d4d4d; }
.btn-primary { background:#0066cc; color:#ffffff; border:none; border-radius:999px;
padding:8px 22px; font-size:14px; font-weight:400; white-space:nowrap; }
.layout { display:flex; height:calc(640px - 56px); }
.sidebar { width:210px; background:#f5f5f5; border-right:1px solid #d2d2d2; padding:20px 0; }
.sidebar .group-label { font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
color:#4d4d4d; padding:6px 20px; margin-top:8px; }
.sidebar .item { font-size:14px; color:#151515; padding:7px 20px; display:flex; align-items:center; gap:8px; }
.sidebar .item.active { background:#e7f1fa; border-left:3px solid #0066cc; color:#0066cc; font-weight:600; padding-left:17px; }
.dot { width:6px; height:6px; border-radius:9999px; background:#8a8d90; flex-shrink:0; }
.main { flex:1; padding:28px 32px; overflow:hidden; }
.main h1 { font-family:"Red Hat Display", sans-serif; font-size:30px; font-weight:600; line-height:1.3;
margin:0 0 6px; color:#151515; }
.main .desc { font-size:14px; color:#4d4d4d; line-height:1.5; margin:0 0 22px; max-width:560px; }
.variants { display:flex; gap:12px; margin-bottom:24px; }
.btn-demo { border-radius:999px; padding:8px 24px; font-size:14px; font-family:"Red Hat Text", sans-serif; }
.btn-demo.primary { background:#0066cc; color:#ffffff; }
.btn-demo.secondary { background:#ffffff; color:#0066cc; border:1px solid #0066cc; }
.btn-demo.plain { background:transparent; color:#151515; text-decoration:underline; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #d2d2d2; border-radius:16px; padding:18px; }
.card .tag { font-size:11px; color:#0066cc; text-transform:uppercase; letter-spacing:0.04em; font-weight:600; }
.card h3 { font-family:"Red Hat Display", sans-serif; font-size:16px; font-weight:600; margin:8px 0 6px; color:#151515; }
.card p { font-size:13px; color:#4d4d4d; margin:0; line-height:1.5; }
</style></head>
<body>
<nav>
<p class="brand">PatternFly</p>
<div class="navlinks"><span>Get started</span><span>Components</span><span>Patterns</span><span>Contribute</span></div>
<button class="btn-primary">Get started</button>
</nav>
<div class="layout">
<aside class="sidebar">
<div class="group-label">Foundations</div>
<div class="item"><span class="dot"></span>Colors</div>
<div class="item"><span class="dot"></span>Typography</div>
<div class="item"><span class="dot"></span>Spacing</div>
<div class="group-label">Components</div>
<div class="item active"><span class="dot"></span>Button</div>
<div class="item"><span class="dot"></span>Card</div>
<div class="item"><span class="dot"></span>Data list</div>
<div class="item"><span class="dot"></span>Form</div>
<div class="group-label">Patterns</div>
<div class="item"><span class="dot"></span>Empty state</div>
</aside>
<main class="main">
<h1>Button</h1>
<p class="desc">Consistent, accessible action components for PatternFly — shared standards and working code for enterprise product teams.</p>
<div class="variants">
<button class="btn-demo primary">Primary</button>
<button class="btn-demo secondary">Secondary</button>
<button class="btn-demo plain">Link</button>
</div>
<div class="cards">
<div class="card">
<span class="tag">Guidance</span>
<h3>Consistent across products</h3>
<p>Share standards, patterns, and working code across cross-functional teams.</p>
</div>
<div class="card">
<span class="tag">Accessible</span>
<h3>Built for enterprise scale</h3>
<p>Every component ships with accessibility guidance baked into the pattern.</p>
</div>
</div>
</main>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0063d1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0063d1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b3e5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0063d1; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0063d1; color: #f5f5f5;
border: 1px solid #277ad7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b3e5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #085bb8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbfb; color:#333333; box-sizing:border-box;
font-family:"Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#fbfbfb; border-bottom:1px solid #e5e7eb; }
.brand { font-size:18px; font-weight:700; color:#333333; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:14px; color:#384e69; }
.navlinks span.active { color:#566881; font-weight:500; }
.signup { background:#0063d1; color:#fff; font-size:14px; font-weight:500; border-radius:4px; padding:8px 16px; height:36px;
display:flex; align-items:center; }
.hero { padding:34px 40px 18px; text-align:center; }
.hero h1 { font-size:30px; font-weight:500; line-height:1.4; margin:0 0 8px; color:#333333; }
.hero p { font-size:14px; color:#8596ad; margin:0 0 18px; }
.searchbar { max-width:520px; margin:0 auto; background:#ffffff; border-radius:6px; border:1px solid #e5e7eb;
padding:12px 18px; font-size:14px; color:#8596ad; text-align:left;
box-shadow: rgb(242,242,242) 2px 3px 0px 0px; }
.tiles { display:flex; gap:10px; padding:18px 40px 4px; justify-content:center; flex-wrap:wrap; }
.tile { background:#edf8ff; color:#0063d1; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:400; }
.sect { padding:18px 40px 8px; font-size:15px; font-weight:500; color:#333333; }
.cards { display:flex; gap:16px; padding:0 40px; }
.jcard { flex:1; background:#ffffff; border:1px solid #e5e7eb; border-radius:8px; padding:16px;
box-shadow: rgb(242,242,242) 2px 3px 0px 0px; }
.jcard .logo { width:40px; height:40px; border-radius:9999px; margin-bottom:10px; }
.jc1 .logo { background:linear-gradient(135deg,#8fc7ff,#0063d1); }
.jc2 .logo { background:linear-gradient(135deg,#9adfc4,#1fa878); }
.jc3 .logo { background:linear-gradient(135deg,#ffcf9a,#ff8a3d); }
.jcard .title { font-size:15px; font-weight:700; color:#333333; margin-bottom:3px; }
.jcard .co { font-size:12px; color:#8596ad; margin-bottom:10px; }
.jcard .tagrow { display:flex; gap:6px; flex-wrap:wrap; }
.jtag { background:#edf8ff; color:#0063d1; border-radius:8px; padding:3px 9px; font-size:11px; }
.jtag.n { background:#eceff6; color:#566881; border-radius:4px; }
.footerpanel { position:absolute; left:0; right:0; bottom:0; height:118px; background:#eceff6;
padding:18px 40px; display:flex; align-items:center; justify-content:space-between; }
.fp-left { font-size:13px; color:#384e69; line-height:1.6; }
.fp-left b { color:#333333; font-weight:700; }
.fp-btn { background:#ffffff; color:#0063d1; border:1px solid #e5e7eb; border-radius:4px; padding:9px 18px;
font-size:13px; font-weight:500; }
</style></head>
<body>
<div class="app">
<nav>
<span class="brand">Yourator</span>
<div class="navlinks">
<span class="active">Jobs</span>
<span>Companies</span>
<span>Resume Builder</span>
<span>Career Guide</span>
</div>
<span class="signup">Sign up</span>
</nav>
<div class="hero">
<h1>Expand your job search horizon,<br>find your ideal role</h1>
<p>Curated startup and tech roles across the region</p>
<div class="searchbar">Frontend engineer · Taipei</div>
</div>
<div class="tiles">
<span class="tile">Startup Internships</span>
<span class="tile">New Grad Friendly</span>
<span class="tile">Senior Roles</span>
<span class="tile">DEI Hiring</span>
<span class="tile">Overseas Track</span>
</div>
<div class="sect">Recommended for you</div>
<div class="cards">
<div class="jcard jc1">
<div class="logo"></div>
<div class="title">Frontend Engineer</div>
<div class="co">Northline Labs · Taipei</div>
<div class="tagrow"><span class="jtag">React</span><span class="jtag n">Hybrid</span></div>
</div>
<div class="jcard jc2">
<div class="logo"></div>
<div class="title">Product Designer</div>
<div class="co">Harbor Studio · Hsinchu</div>
<div class="tagrow"><span class="jtag">Figma</span><span class="jtag n">Senior</span></div>
</div>
<div class="jcard jc3">
<div class="logo"></div>
<div class="title">Growth Marketer</div>
<div class="co">Fieldtrip Inc. · Remote</div>
<div class="tagrow"><span class="jtag">Growth</span><span class="jtag n">New Grad</span></div>
</div>
</div>
<div class="footerpanel">
<div class="fp-left">Build a resume that gets noticed.<br><b>Free resume builder</b> for every Yourator member.</div>
<span class="fp-btn">Start building</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #1c1b1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #1c1b1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #1c1b1e; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #646467; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #069697; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #069697;
border: 1px solid #069697; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1b1e;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646467; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #069697; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f4; color:#1c1b1e; box-sizing:border-box;
font-family:'Helvetica Neue', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#1c1b1e; border-bottom:1px solid #39393b; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:700; color:#fff; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#fff; }
.navlinks span:nth-child(2) { color:#54c4c8; }
.subbtn { background:#069697; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; }
.hero { background:#14233c; padding:26px 32px; display:flex; align-items:center; gap:28px; position:relative; }
.hero::before { content:''; position:absolute; left:0; top:16px; bottom:16px; width:4px; background:#069697; }
.hero-copy { flex:1.2; padding-left:16px; }
.hero h1 { font-size:30px; font-weight:700; color:#fff; line-height:1.1; letter-spacing:-0.5px; margin:0 0 8px; }
.hero p { font-size:14px; color:#d9d9d9; margin:0 0 14px; max-width:420px; line-height:1.4; }
.heroRow { display:flex; gap:10px; }
.btn-primary { background:#069697; color:#fff; border:none; border-radius:8px; padding:11px 20px; font-size:14px; font-weight:600; height:40px; }
.btn-ghost { background:transparent; color:#fff; border:1px solid #fff; border-radius:8px; padding:10px 19px; font-size:14px; font-weight:600; height:40px; }
.slab { flex:1; background:#14233c; border:2px solid #069697; border-radius:12px; padding:16px; text-align:center; }
.slab-grade { font-size:40px; font-weight:700; color:#b6975b; line-height:1; letter-spacing:-1px; }
.slab-label { font-size:11px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:0.3px; margin-top:4px; }
.slab-sub { display:flex; justify-content:space-between; margin-top:10px; font-size:10px; color:#a2a2a3; }
.slab-sub b { color:#54c4c8; display:block; font-size:12px; }
.section { padding:20px 32px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.sec-head h2 { font-size:18px; font-weight:700; margin:0; }
.sec-head span { font-size:12px; color:#069697; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fff; border:1px solid #e7e7e8; border-radius:8px; padding:10px; position:relative; }
.thumb { height:110px; border-radius:6px; position:relative; margin-bottom:8px; }
.t1 { background:linear-gradient(160deg,#ddf3f4,#a2d8d9); }
.t2 { background:linear-gradient(160deg,#fdf3e2,#e5cf9e); }
.t3 { background:linear-gradient(160deg,#e7f6ec,#a9d8b8); }
.t4 { background:linear-gradient(160deg,#e7e7e8,#c7c7c9); }
.gb { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.3px; padding:2px 8px; border-radius:4px; color:#fff; }
.gb.teal { background:#069697; }
.gb.gold { background:#b6975b; }
.gb.green { background:#198754; }
.card h3 { font-size:13px; font-weight:600; margin:0 0 2px; }
.card .meta { font-size:11px; color:#646467; margin:0 0 6px; }
.card .price { font-size:16px; font-weight:700; margin:0; }
.pop { background:#fff; border:1px solid #e7e7e8; border-radius:8px; margin-top:16px; }
.pop-row { display:grid; grid-template-columns:2.4fr 1fr 1fr 1fr; padding:8px 16px; font-size:12px;
border-bottom:1px solid #e7e7e8; align-items:center; }
.pop-row.head { background:#f2f2f2; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#646467; }
.pop-row:hover:not(.head) { background:#ddf3f4; }
.pop-row b { font-weight:700; }
footer { background:#1c1b1e; color:#737375; font-size:11px; padding:12px 32px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#54c4c8; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Beckett</p>
<div class="navlinks"><span>Grading</span><span>Marketplace</span><span>Price Guide</span><span>Magazine</span></div>
<button class="subbtn">Subscribe</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Know exactly what it's worth</h1>
<p>Submit for grading, track population reports, and shop verified graded cards backed by the industry's trusted slab.</p>
<div class="heroRow">
<button class="btn-primary">Grade this card</button>
<button class="btn-ghost">View pop report</button>
</div>
</div>
<div class="slab">
<div class="slab-grade">9.5</div>
<div class="slab-label">Gem Mint</div>
<div class="slab-sub">
<div>Centering<b>9.5</b></div>
<div>Corners<b>10</b></div>
<div>Surface<b>9.5</b></div>
<div>Edges<b>9.5</b></div>
</div>
</div>
</section>
<section class="section">
<div class="sec-head"><h2>Marketplace listings</h2><span>Browse all</span></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="gb teal">9.5</span></div><h3>1998 Chrome #1</h3><p class="meta">Refractor · PSA pop 412</p><p class="price">$1,240</p></div>
<div class="card"><div class="thumb t2"><span class="gb gold">Pristine</span></div><h3>Rookie Auto Patch</h3><p class="meta">/99 · Beckett 10</p><p class="price">$3,850</p></div>
<div class="card"><div class="thumb t3"><span class="gb green">Authentic</span></div><h3>Vintage Signature</h3><p class="meta">1971 · Encapsulated</p><p class="price">$610</p></div>
<div class="card"><div class="thumb t4"><span class="gb teal">9</span></div><h3>Silver Prizm #88</h3><p class="meta">Mint · Low pop</p><p class="price">$275</p></div>
</div>
<div class="pop">
<div class="pop-row head"><span>Card / Set</span><span>Grade</span><span>Pop</span><span>Value</span></div>
<div class="pop-row"><span>1998 Chrome #1 Refractor</span><span>9.5</span><span>412</span><b>$1,240</b></div>
<div class="pop-row"><span>Rookie Auto Patch /99</span><span>10</span><span>18</span><b>$3,850</b></div>
</div>
</section>
<footer>
<span>© Beckett</span>
<div><a href="#">Grading</a><a href="#">Resources</a><a href="#">Company</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b7aff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #ffffff;
border: 1px solid #0b7aff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0269ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#131313; color:#ffffff; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; padding:0 36px; }
.brand { font-size:15px; font-weight:700; margin:0; color:#ffffff; }
.navlinks { display:flex; gap:20px; margin-left:32px; }
.navlinks span { font-size:14px; font-family:"Roboto", sans-serif; color:#ffffff; }
.navlinks span.on { color:#0066ff; }
.hero { text-align:center; padding:26px 60px 20px; }
.hero h1 { font-size:48px; font-weight:700; line-height:1.2; margin:0 0 16px; color:#ffffff; }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; background:#ffffff; color:#0066ff;
border:2px solid #0066ff; border-radius:4px; height:56px; padding:0 40px; font-size:15px; font-weight:400;
box-shadow:0 10px 20px rgba(0,0,0,0.3); }
.cards { display:flex; gap:16px; padding:24px 36px 26px; }
.card { flex:1; background:#131313; border-radius:28px; text-align:center; padding:22px 16px; position:relative; }
.card .icon { width:56px; height:56px; border-radius:14px; margin:0 auto 12px; background:linear-gradient(135deg,#0066ff,#0045ff); }
.card .t { font-size:18px; font-weight:600; color:#ffffff; margin-bottom:14px; }
.pill { display:inline-flex; align-items:center; background:#131313; border:1px solid #333333; color:#ffffff;
border-radius:28px; height:40px; padding:0 18px; font-size:13px; font-weight:500; box-shadow:0 10px 20px rgba(0,0,0,0.25); }
.white-panel { background:#ffffff; color:#333333; border-radius:16px 16px 0 0; margin:0 20px; padding:22px 24px;
display:flex; gap:20px; }
.feature { flex:1; background:#ffffff; border-radius:8px; box-shadow:0 10px 20px rgba(0,0,0,0.07); padding:16px 18px; }
.feature h4 { margin:0 0 6px; font-size:15px; color:#1c1e1f; }
.feature p { margin:0; font-size:13px; color:#333333; line-height:1.5; }
.tag { display:inline-block; background:#ebf1ff; color:#0066ff; border-radius:4px; padding:4px 7px; font-size:12px; font-weight:500; margin-bottom:8px; }
</style></head>
<body>
<nav>
<p class="brand">MediBloc (Dr.Palette)</p>
<div class="navlinks"><span class="on">Panacea</span><span>Wallet</span><span>Explorer</span><span>Blog</span><span>Github</span></div>
</nav>
<div class="hero">
<h1>Own your health data.<br>It's rightfully yours.</h1>
<div class="btn-outline">Validator Guide</div>
</div>
<div class="cards">
<div class="card"><div class="icon"></div><div class="t">Wallet</div><div class="pill">Visit</div></div>
<div class="card"><div class="icon"></div><div class="t">Explorer</div><div class="pill">Visit</div></div>
<div class="card"><div class="icon"></div><div class="t">Panacea Chain</div><div class="pill">Visit</div></div>
</div>
<div class="white-panel">
<div class="feature"><span class="tag">CLOUD EMR</span><h4>No servers, no downloads</h4><p>A web-based clinic record system that updates itself.</p></div>
<div class="feature"><span class="tag">MOBILE</span><h4>Review from anywhere</h4><p>Sync a patient's chart in real time from a phone.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #006bd6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #006bd6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b7e7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0090ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006bd6; color: #ffffff;
border: 1px solid #0090ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #006bd6; color: #f5f5f5;
border: 1px solid #2781db; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b7e7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0071dd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#17181B; box-sizing:border-box;
font-family:"Segoe UI", -apple-system, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #DDE4EB; }
.brand { font-size:16px; font-weight:700; color:#006BD6; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#17181B; }
.signin { border:1px solid #AEB3BB; color:#79818F; border-radius:3px; padding:4px 10px; font-size:12px; }
.toolbar { display:flex; align-items:center; justify-content:space-between; padding:14px 32px;
background:#f7faff; }
.pairname { font-size:20px; font-weight:700; }
.pairprice { font-size:26px; font-weight:700; color:#0090FF; margin-left:10px; }
.pairchg { font-size:13px; color:#0090FF; margin-left:8px; }
.buysell { display:flex; gap:8px; }
.btn-buy { background:#0090FF; color:#fff; border-radius:6px; padding:8px 18px; font-size:13px; font-weight:500; }
.btn-sell { background:#ffffff; border:1px solid #DDE4EB; color:#17181B; border-radius:6px; padding:8px 18px; font-size:13px; font-weight:500; }
table { width:100%; border-collapse:collapse; margin-top:2px; }
thead td { font-size:11px; color:#79818F; padding:8px 32px; border-bottom:1px solid #DDE4EB; }
tbody td { font-size:13px; padding:9px 32px; border-bottom:1px solid #DDE4EB; }
.up { color:#0090FF; } .down { color:#e05353; }
.coin { font-weight:500; }
.sub { color:#79818F; font-size:11px; margin-left:6px; }
</style></head>
<body>
<nav>
<p class="brand">Coinone</p>
<div class="navlinks"><span>Exchange</span><span>Deposit/Withdraw</span><span>Promotions</span><span>Support</span></div>
<span class="signin">Sign In</span>
</nav>
<div class="toolbar">
<div>
<span class="pairname">BTC/KRW</span>
<span class="pairprice">142,580,000</span>
<span class="pairchg">+2.14%</span>
</div>
<div class="buysell">
<button class="btn-buy">Buy</button>
<button class="btn-sell">Sell</button>
</div>
</div>
<table>
<thead><tr><td>Coin</td><td>Price</td><td>Change</td><td>Volume</td></tr></thead>
<tbody>
<tr><td class="coin">Ethereum <span class="sub">ETH</span></td><td>5,231,000</td><td class="up">+1.82%</td><td>41.2B</td></tr>
<tr><td class="coin">Ripple <span class="sub">XRP</span></td><td>812</td><td class="down">-0.64%</td><td>9.8B</td></tr>
<tr><td class="coin">Solana <span class="sub">SOL</span></td><td>231,400</td><td class="up">+4.23%</td><td>25.6B</td></tr>
<tr><td class="coin">Cardano <span class="sub">ADA</span></td><td>612</td><td class="up">+0.51%</td><td>4.4B</td></tr>
<tr><td class="coin">Dogecoin <span class="sub">DOGE</span></td><td>214</td><td class="down">-1.12%</td><td>7.7B</td></tr>
<tr><td class="coin">Polkadot <span class="sub">DOT</span></td><td>7,140</td><td class="up">+0.94%</td><td>3.1B</td></tr>
</tbody>
</table>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3c3c3c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3c3c3c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a2a2a2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3c3c3c; color: #ffffff;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3c3c3c; color: #f5f5f5;
border: 1px solid #5a5a5a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a2a2a2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #373737; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1a1a; color:#d6d6d6; box-sizing:border-box;
font-family:"Inter", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #2e2e2e; }
.brand { color:#fff; font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#8a8a8a; }
.btn-accent { background:#e0613a; color:#fff; border-radius:6px; padding:7px 18px; font-size:13px; font-weight:600; }
.app { display:flex; height:396px; }
.tray { width:150px; background:#0e0e0e; border-right:1px solid #2e2e2e; padding:14px 10px; }
.tray .lab { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:#6b6b6b; margin:0 0 8px 4px; }
.comp { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; font-size:12px; color:#b4b4b4; margin-bottom:2px; }
.comp .ic { width:16px; height:16px; border-radius:4px; background:#3c3c3c; flex-shrink:0; }
.comp.active { background:#232323; color:#fff; }
.canvas { flex:1; background:#1a1a1a; padding:16px; position:relative; }
.canvas .grid-bg { position:absolute; inset:16px; background-image:linear-gradient(#2e2e2e 1px, transparent 1px), linear-gradient(90deg, #2e2e2e 1px, transparent 1px);
background-size:20px 20px; opacity:0.4; }
.mockcard { position:relative; z-index:1; background:#232323; border:1px solid #2e2e2e; border-radius:8px; padding:14px; margin-bottom:10px; }
.mockcard h4 { font-size:13px; font-weight:600; color:#fff; margin:0 0 8px; }
.table-row { display:flex; gap:10px; font-size:11px; color:#8a8a8a; padding:5px 0; border-bottom:1px solid #2e2e2e; }
.table-row.head { color:#6b6b6b; text-transform:uppercase; letter-spacing:0.04em; font-size:10px; }
.table-row span { flex:1; }
.badge { display:inline-block; border-radius:4px; font-size:10px; font-weight:600; padding:2px 8px; }
.badge.success { background:rgba(47,168,106,0.14); color:#2fa86a; }
.badge.warn { background:rgba(224,162,58,0.14); color:#e0a23a; }
.inspector { width:170px; background:#0e0e0e; border-left:1px solid #2e2e2e; padding:14px; font-size:11px; color:#8a8a8a; }
.inspector h5 { font-size:11px; color:#fff; margin:0 0 10px; }
.fld { margin-bottom:10px; }
.fld .k { color:#6b6b6b; margin-bottom:3px; }
.fld .v { background:#1a1a1a; border:1px solid #2e2e2e; border-radius:6px; padding:5px 8px; color:#d6d6d6; font-family:"IBM Plex Mono",monospace; font-size:11px; }
footer { border-top:1px solid #2e2e2e; padding:10px 28px; display:flex; justify-content:space-between; font-size:11px; color:#6b6b6b; }
</style></head>
<body>
<nav>
<span class="brand">Retool</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Docs</span><span>Pricing</span></div>
<span class="btn-accent">Start for free</span>
</nav>
<div class="app">
<div class="tray">
<p class="lab">Components</p>
<div class="comp active"><span class="ic"></span>Table</div>
<div class="comp"><span class="ic"></span>Button</div>
<div class="comp"><span class="ic"></span>Text Input</div>
<div class="comp"><span class="ic"></span>Chart</div>
<div class="comp"><span class="ic"></span>JSON Form</div>
</div>
<div class="canvas">
<div class="grid-bg"></div>
<div class="mockcard">
<h4>Customer Refunds Queue</h4>
<div class="table-row head"><span>ID</span><span>Customer</span><span>Amount</span><span>Status</span></div>
<div class="table-row"><span>#8841</span><span>Acme Corp</span><span>$482.00</span><span><span class="badge success">Approved</span></span></div>
<div class="table-row"><span>#8842</span><span>Nimbus Inc</span><span>$129.50</span><span><span class="badge warn">Pending</span></span></div>
<div class="table-row"><span>#8843</span><span>Fintra Ltd</span><span>$76.00</span><span><span class="badge success">Approved</span></span></div>
</div>
<div class="mockcard"><h4>Query: get_refund_queue.sql</h4><div class="table-row"><span style="font-family:'IBM Plex Mono',monospace;color:#e0613a;">SELECT</span><span style="font-family:'IBM Plex Mono',monospace;">* FROM refunds WHERE status != 'closed'</span></div></div>
</div>
<div class="inspector">
<h5>Inspector</h5>
<div class="fld"><div class="k">Component</div><div class="v">table1</div></div>
<div class="fld"><div class="k">Data source</div><div class="v">{{ get_refund_queue.data }}</div></div>
<div class="fld"><div class="k">Row height</div><div class="v">Compact</div></div>
</div>
</div>
<footer>
<span>© Retool</span>
<span>Products · Solutions · Docs · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #444444;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #444444;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #4d4d4d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #044573; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #044573;
border: 1px solid #044573; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #d0d0d0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4d4d4d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #baf0c6; color: #444444;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#444444; box-sizing:border-box;
font-family:'Zilla Slab', 'Noto Sans', -apple-system, sans-serif; }
* { box-sizing:border-box; }
.head { font-family:'Poppins', 'Montserrat', sans-serif; }
nav { height:64px; background:#044573; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#fff; font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#fff; }
.search { width:220px; height:36px; background:#f5f5f5; border-radius:9999px; font-size:12px; color:#4d4d4d; display:flex; align-items:center; padding-left:16px; }
.hero { background:#f5f5f5; padding:30px 40px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.2; }
.hero h1 { font-family:'Poppins'; font-size:32px; font-weight:700; line-height:1.2; letter-spacing:-0.4px; margin:0 0 10px; max-width:440px; }
.hero p { font-size:15px; color:#313131; margin:0 0 16px; max-width:400px; line-height:1.5; }
.btn-primary { background:#044573; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-family:'Poppins';
font-size:14px; font-weight:600; letter-spacing:0.5px; height:44px; }
.hero-visual { flex:1; height:160px; border-radius:8px; background:#fff; position:relative; overflow:hidden; border:1px solid #eee; }
.hero-visual .book { position:absolute; width:52px; height:76px; border-radius:2px; bottom:14px; }
.b1 { background:#044573; left:60px; transform:rotate(-4deg); }
.b2 { background:#baf0c6; left:120px; transform:rotate(3deg); }
.b3 { background:#f11e28; left:180px; transform:rotate(-2deg); }
.section { padding:20px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-family:'Poppins'; font-size:20px; font-weight:600; margin:0; }
.sec-head span { font-size:13px; color:#044573; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#fff; border-radius:8px; padding:12px; }
.thumb { aspect-ratio:2/3; border-radius:4px; position:relative; margin-bottom:8px; }
.t1 { background:linear-gradient(150deg,#044573,#02335a); }
.t2 { background:linear-gradient(150deg,#baf0c6,#7fd89a); }
.t3 { background:linear-gradient(150deg,#f11e28,#a5141c); }
.t4 { background:linear-gradient(150deg,#8baac4,#5a7e9c); }
.badge { position:absolute; top:6px; left:6px; font-size:10px; font-weight:600; padding:2px 8px; border-radius:4px; }
.badge.green { background:#baf0c6; color:#444; }
.badge.red { background:#f11e28; color:#fff; }
.card h3 { font-family:'Poppins'; font-size:13px; font-weight:600; margin:0 0 2px; }
.author { font-size:12px; color:#4d4d4d; margin:0 0 6px; }
.price { font-family:'Poppins'; font-size:15px; font-weight:600; margin:0; }
.orig { font-size:11px; color:#aaaaaa; text-decoration:line-through; margin-left:4px; font-weight:400; }
footer { background:#044573; color:#dbe7f0; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#dbe7f0; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand head">Better World Books</p>
<div class="navlinks"><span>Textbooks</span><span>Fiction</span><span>Nonfiction</span><span>Our Mission</span></div>
<div class="search">Search books, authors, ISBN…</div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Every book bought funds literacy</h1>
<p>Millions of used books, carbon-balanced shipping, and a growing global library fund.</p>
<button class="btn-primary">Shop Now</button>
</div>
<div class="hero-visual"><div class="book b1"></div><div class="book b2"></div><div class="book b3"></div></div>
</section>
<section class="section">
<div class="sec-head"><h2 class="head">Staff Picks</h2><span>Browse All</span></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge green">Eco Ship</span></div><h3>The Overstory</h3><p class="author">Richard Powers</p><p class="price">$6.99</p></div>
<div class="card"><div class="thumb t2"></div><h3>Educated</h3><p class="author">Tara Westover</p><p class="price">$7.49</p></div>
<div class="card"><div class="thumb t3"><span class="badge red">Sale</span></div><h3>Sapiens</h3><p class="author">Yuval Noah Harari</p><p class="price">$5.99<span class="orig">$9.99</span></p></div>
<div class="card"><div class="thumb t4"></div><h3>Circe</h3><p class="author">Madeline Miller</p><p class="price">$6.49</p></div>
</div>
</section>
<footer>
<span>© Better World Books</span>
<div><a href="#">Sell Books</a><a href="#">Donate</a><a href="#">Our Impact</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc6b2d; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc6b2d; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b3a1e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #363a44; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc6b2d; color: #363a44;
border: 1px solid #363a44; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc6b2d; color: #111111;
border: 1px solid #d65d29; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b3a1e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc6331; color: #363a44;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111827; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Malgun Gothic", sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:6px; }
.navlinks span { font-size:14px; color:#111827; padding:8px 12px; border-radius:64px; }
.navlinks span:first-child { color:#fc6b2d; }
.navr { display:flex; gap:10px; }
.btn-charcoal { background:#363a44; color:#fff; border:none; border-radius:9999px; padding:9px 16px; font-size:13px; font-weight:400; }
.btn-orange { background:#fc6b2d; color:#fff; border:none; border-radius:9999px; padding:9px 16px; font-size:13px; font-weight:700; }
.hero { padding:34px 40px 20px; text-align:center; }
.eyebrow { color:#fc6b2d; font-weight:800; font-size:16px; margin-bottom:8px; }
.hero h1 { font-size:42px; font-weight:400; margin:0 0 20px; color:#111827; }
.section { background:#f9fafb; margin:0 40px; border-radius:30px; padding:22px 26px; }
.section h2 { font-size:22px; font-weight:1000; margin:0 0 14px; }
.cards { display:flex; gap:14px; }
.c { flex:1; background:#fff; border:1px solid #d1d5db; border-radius:20px; padding:18px; }
.c h4 { font-size:14px; margin:0 0 6px; }
.c p { font-size:12px; color:#6b7280; margin:0; }
.badge-succ { display:inline-block; background:#dcfce7; color:#374151; border-radius:8px; font-size:11px; font-weight:500; padding:3px 9px; margin-bottom:8px; }
</style></head>
<body>
<nav>
<div class="brand">PortOne</div>
<div class="navlinks"><span>One Payment Infra</span><span>Solutions</span><span>Pricing</span><span>Help Center</span></div>
<div class="navr"><button class="btn-charcoal">Get started</button><button class="btn-orange">Talk to sales</button></div>
</nav>
<div class="hero">
<div class="eyebrow">One Payment Infra</div>
<h1>Run payments and finance freely with AI</h1>
</div>
<div class="section">
<h2>From payment integration to global finance operations</h2>
<div class="cards">
<div class="c"><span class="badge-succ">Settled</span><h4>Domestic Payments</h4><p>Connect 25 payment gateways through a single API.</p></div>
<div class="c"><span class="badge-succ">Automated</span><h4>Partner Settlements</h4><p>Automate payouts to hundreds of partners.</p></div>
<div class="c"><span class="badge-succ">Global</span><h4>Cross-Border Payments</h4><p>Support 100+ payment methods across 8 countries.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00aaf5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00aaf5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d3f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0088d2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00aaf5; color: #000000;
border: 1px solid #0088d2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00aaf5; color: #000000;
border: 1px solid #27b6f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d3f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00a5ef; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:#ffffff; }
.brand { font-size:18px; font-weight:600; color:#0088d2; }
.createbtn { background:#2ab3fc; color:#fff; border:none; border-radius:3px; padding:6px 11px; font-size:14px; }
.tabs { display:flex; gap:24px; padding:0 28px 10px; border-bottom:1px solid #d8dde4; }
.tab { font-size:14px; font-weight:600; color:#b5bac1; }
.tab.act { color:#0088d2; }
.band { background:#f8fbff; padding:18px 28px; }
.sectitle { font-size:23px; font-weight:600; color:#333333; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#ffffff; border-radius:16px; box-shadow:rgba(0,0,0,0.1) 0px 2px 8px 0px; overflow:hidden; }
.card .cover { height:90px; border-radius:16px 16px 0 0; background:linear-gradient(135deg,#bfe6ff,#7fd0ff); position:relative; }
.card .cbody { padding:12px; }
.card .date { font-size:12px; color:#00aaf5; font-weight:600; }
.card .title { font-size:14px; font-weight:600; color:#333333; margin:4px 0; }
.card .loc { font-size:12px; color:#959ba1; }
.tagrow { display:flex; gap:6px; margin-top:8px; }
.tag { border-radius:4px; padding:3px 10px; font-size:11px; color:#fff; }
.tag.blue { background:#00aaf5; box-shadow:rgba(0,170,245,0.3) 0px 2px 4px; }
.tag.pink { background:#ff93c2; box-shadow:rgba(255,147,194,0.3) 0px 2px 4px; }
.morebtn { display:block; margin:16px auto 0; background:#009ce6; color:#fff; border:none; border-radius:22px;
padding:12px 48px; font-size:14px; font-weight:700; }
.chiprow { display:flex; gap:8px; padding:14px 28px; }
.chip { border:1px solid #d8dde4; border-radius:100px; padding:8px 16px; font-size:14px; color:#959ba1; }
footer { position:absolute; bottom:0; left:0; right:0; background:#1a1f23; color:#f5faff; padding:14px 28px;
display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<header><span class="brand">Accupass</span><button class="createbtn">Create Event</button></header>
<div class="tabs">
<span class="tab act">Featured Events</span><span class="tab">Learning</span><span class="tab">Art</span><span class="tab">Experience</span>
</div>
<div class="band">
<div class="sectitle">Popular Events</div>
<div class="grid">
<div class="card"><div class="cover"></div><div class="cbody"><span class="date">SEP 12 · 2:00 PM</span><div class="title">UX Design Workshop</div><span class="loc">Taipei · NT$800</span><div class="tagrow"><span class="tag blue">Learning</span></div></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#ffd6ea,#ffb0d6);"></div><div class="cbody"><span class="date">SEP 15 · 7:00 PM</span><div class="title">Night Market Art Fair</div><span class="loc">Taichung · Free</span><div class="tagrow"><span class="tag pink">Offline Event</span></div></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#c8f0d8,#9fe3bd);"></div><div class="cbody"><span class="date">SEP 20 · 10:00 AM</span><div class="title">Startup Founders Meetup</div><span class="loc">Kaohsiung · NT$300</span><div class="tagrow"><span class="tag blue">Experience</span></div></div></div>
</div>
<button class="morebtn">More</button>
</div>
<div class="chiprow">
<span class="chip">Design System</span><span class="chip">UI/UX</span><span class="chip">Figma</span>
</div>
<footer><span>© Accupass</span><span>Ask ACCUPASS</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1px; background: #4a7c59; color: #ffffff;
border: none; border-radius: 8px; padding: 13px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1px; background: #ffffff; color: #4a7c59;
border: 1px solid #4a7c59; border-radius: 8px;
padding: 12px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c1c;
border: 1px solid #dedad4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; background: #e8f0ea; color: #4a7c59;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fff; border-bottom:1px solid #dedad4; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; color:#3d3d3d; }
.hero { background:#f5f1eb; padding:30px 40px; display:flex; align-items:center; gap:34px; }
.hero-copy { flex:1.2; }
.hero h1 { font-size:36px; font-weight:700; line-height:1.15; letter-spacing:-0.5px; margin:0 0 10px; max-width:440px; }
.hero p { font-size:14px; color:#3d3d3d; margin:0 0 16px; max-width:400px; line-height:1.5; }
.btn-primary { background:#4a7c59; color:#fff; border:none; border-radius:8px; padding:13px 24px; font-size:15px; font-weight:500; height:48px; }
.hero-visual { flex:1; height:160px; border-radius:8px; background:#fff; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:70px; height:110px; border-radius:6px; background:#c8a96d; left:60px; top:20px; }
.hero-visual::after { content:''; position:absolute; width:70px; height:110px; border-radius:6px; background:#e8f0ea; border:2px solid #4a7c59; left:150px; top:20px; }
.section { padding:20px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:22px; font-weight:600; margin:0; }
.sec-head span { font-size:14px; color:#4a7c59; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border:1px solid #dedad4; border-radius:8px; padding:16px; }
.thumb { aspect-ratio:1/1; background:#f5f1eb; border-radius:8px; position:relative; margin-bottom:10px; }
.t1::after { content:''; position:absolute; inset:24px; background:#c8a96d; border-radius:6px; }
.t2::after { content:''; position:absolute; inset:24px; background:linear-gradient(150deg,#e8f0ea,#a8c9b4); border-radius:6px; }
.t3::after { content:''; position:absolute; inset:24px; background:linear-gradient(150deg,#dedad4,#c8a96d); border-radius:6px; }
.sus { display:inline-block; background:#e8f0ea; color:#4a7c59; font-size:12px; padding:4px 10px; border-radius:9999px; margin-bottom:8px; }
.card h3 { font-size:18px; font-weight:600; margin:0 0 4px; }
.price { font-size:14px; color:#717171; margin:0; }
.trust { display:flex; gap:20px; padding:16px 40px 0; font-size:11px; font-weight:600; letter-spacing:0.5px;
text-transform:uppercase; color:#717171; border-top:1px solid #dedad4; margin-top:16px; }
footer { background:#f5f1eb; color:#717171; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:14px; }
footer a { color:#4a7c59; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Betterway</p>
<div class="navlinks"><span>Toilet Paper</span><span>Paper Towels</span><span>Tissues</span><span>Subscribe</span></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>100% bamboo. Zero plastic. Every roll.</h1>
<p>Tree-free, plastic-free paper goods shipped straight to your door — better for you, better for the forest.</p>
<button class="btn-primary">Subscribe & Save</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Shop the Essentials</h2><span>View All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"></div>
<span class="sus">FSC Certified</span>
<h3>Bamboo Toilet Paper, 24ct</h3>
<p class="price">$29.99</p>
</div>
<div class="card">
<div class="thumb t2"></div>
<span class="sus">No Plastic</span>
<h3>Bamboo Paper Towels, 6ct</h3>
<p class="price">$19.99</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<span class="sus">Carbon Neutral</span>
<h3>Facial Tissues, 12-Pack</h3>
<p class="price">$16.99</p>
</div>
</div>
<div class="trust"><span>FSC Certified</span><span>Carbon Neutral</span><span>1% For The Planet</span></div>
</section>
<footer>
<span>© Betterway</span>
<div><a href="#">Sustainability</a><a href="#">Subscriptions</a><a href="#">Support</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #125de6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #125de6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fb1ee; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #125de6; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #125de6; color: #f5f5f5;
border: 1px solid #3675e8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fb1ee; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3877ea; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e5e7eb; }
.brand { font-size:19px; font-weight:700; }
.navlinks { display:flex; gap:8px; align-items:center; }
.menu-trigger { color:#727781; border:1px solid #51565f; border-radius:6px; padding:10px 16px; height:42px;
font-size:16px; display:flex; align-items:center; gap:6px; }
.header-cta { background:#125de6; color:#ffffff; border:1px solid #125de6; border-radius:30px; padding:8px 19px;
height:40px; font-size:15px; display:flex; align-items:center; }
.hero { position:relative; padding:44px 40px 0; }
.hero .eyebrow { color:#125de6; font-size:13px; font-weight:700; letter-spacing:0.04em; margin-bottom:10px; }
.hero h1 { font-size:38px; font-weight:700; line-height:1.25; margin:0 0 12px; max-width:560px; }
.hero p { font-size:16px; color:#57575b; margin:0 0 20px; max-width:480px; }
.section-cta { display:inline-flex; align-items:center; background:#125de6; color:#fff; border-radius:30px;
padding:10px 27px; height:48px; font-size:17px; font-weight:500; }
.menu-panel { position:absolute; right:40px; top:44px; width:220px; background:#111111; color:#ffffff;
border:1px solid #727781; border-radius:8px; padding:8px 0; box-shadow:0px 4px 8px rgba(0,0,0,0.06); }
.menu-panel .mi { padding:9px 16px; font-size:15px; color:#e6e6e6; }
.menu-panel .mi.hd { color:#727781; font-size:12px; padding-top:12px; }
.metrics { position:absolute; top:300px; left:0; right:0; bottom:0; padding:0 40px; border-top:1px solid #e5e7eb; }
.mgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; padding-top:22px; }
.mcard { border:1px solid #e5e7eb; border-radius:8px; padding:16px; }
.mcard .label { font-size:13px; color:#727781; margin-bottom:6px; }
.mcard .value { font-size:24px; font-weight:700; color:#111111; }
.mcard .bar { height:6px; border-radius:3px; background:#e9f1ff; margin-top:12px; position:relative; overflow:hidden; }
.mcard .bar::after { content:''; position:absolute; left:0; top:0; bottom:0; width:64%; background:#125de6; border-radius:3px; }
</style></head>
<body>
<nav>
<span class="brand">NHN Cloud</span>
<div class="navlinks">
<span class="menu-trigger">Resources ⌄</span>
<span class="header-cta">Console Login</span>
</div>
</nav>
<div class="hero">
<div class="eyebrow">CLOUD PLATFORM</div>
<h1>Infrastructure for your next<br>technical challenge.</h1>
<p>Compute, storage, and AI services built for teams that ship fast and scale reliably.</p>
<span class="section-cta">Start Free Trial</span>
</div>
<div class="menu-panel">
<div class="mi hd">PRODUCTS</div>
<div class="mi">Compute</div>
<div class="mi">Object Storage</div>
<div class="mi">Data & AI</div>
<div class="mi hd">RESOURCES</div>
<div class="mi">Documentation</div>
</div>
<div class="metrics">
<div class="mgrid">
<div class="mcard"><div class="label">CPU Usage</div><div class="value">64%</div><div class="bar"></div></div>
<div class="mcard"><div class="label">Storage</div><div class="value">2.1 TB</div><div class="bar"></div></div>
<div class="mcard"><div class="label">Requests / min</div><div class="value">18.4K</div><div class="bar"></div></div>
<div class="mcard"><div class="label">Uptime</div><div class="value">99.98%</div><div class="bar"></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdf7f0; color: #041e29;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdf7f0; color: #041e29;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #041e29; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6aa5a3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #0e3c31; color: #fdf7f0;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fdf7f0; color: #0e3c31;
border: 1px solid #0e3c31; border-radius: 8px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdf7f0; color: #121212;
border: 1px solid #bfc1be; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6aa5a3; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ecfbb0; color: #041e29;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#fdf7f0; color:#121212; box-sizing:border-box; font-family:'Inter',sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; border-bottom:1px solid #e5edeb; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-family:'Newsreader',serif; font-size:20px; font-weight:500; color:#0e3c31; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#121212; }
.navlinks span.active { color:#0e3c31; border-bottom:2px solid #0e3c31; padding-bottom:22px; }
.search-pill { background:#fdf7f0; border-radius:999px; padding:10px 20px; box-shadow:0 2px 8px rgba(4,30,41,0.06); font-size:13px; color:#121212; }
.main { display:flex; gap:24px; padding:20px 32px; height:328px; }
.gallery { width:340px; background:#ffffff; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.bottle { width:70px; height:150px; background:linear-gradient(180deg,#0e3c31,#041e29); border-radius:12px; position:relative; }
.bottle::before { content:''; position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:30px; height:20px; background:#0e3c31; border-radius:4px; }
.badge-bestseller { position:absolute; top:16px; left:16px; background:#ee9441; color:#121212; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-family:'Newsreader',serif; font-size:26px; font-weight:400; margin:0; }
.subheading { font-family:'Newsreader',serif; font-style:italic; font-size:15px; color:#6aa5a3; margin:0; }
.price { font-size:18px; font-weight:600; }
.desc { font-size:14px; line-height:1.55; color:#121212; max-width:420px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#0e3c31; color:#fdf7f0; border:none; border-radius:8px; font-weight:600; font-size:15px; }
.btn-secondary { flex:1; height:48px; background:#fdf7f0; color:#0e3c31; border:2px solid #0e3c31; border-radius:8px; font-weight:600; font-size:15px; }
.accordion { padding:8px 32px; }
.acc-header { display:flex; justify-content:space-between; padding:12px 16px; font-size:14px; font-weight:500; background:#fdf7f0; border:1px solid #e5edeb; border-radius:8px; margin-bottom:8px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#0e3c31; color:#fdf7f0; padding:14px 32px; display:flex; justify-content:space-between; font-size:12px; }
footer span { opacity:0.85; }
</style></head>
<body>
<nav>
<p class="brand">Barefaced</p>
<div class="navlinks"><span class="active">Cleanse</span><span>Treat</span><span>Moisturize</span><span>Sets</span></div>
<div class="search-pill">🔍 Search</div>
</nav>
<div class="main">
<div class="gallery">
<span class="badge-bestseller">Bestseller</span>
<div class="bottle"></div>
</div>
<div class="info">
<h1>Simplified Cleansing Serum</h1>
<p class="subheading">Skincare, simplified.</p>
<span class="price">$42.00</span>
<p class="desc">A single, considered formula that cleanses, balances, and hydrates in one step — free from fragrance, sulfates, and the twelve-step routine you never had time for.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
<div class="accordion">
<div class="acc-header"><span>Ingredients</span><span>+</span></div>
</div>
<footer>
<span>© Barefaced</span>
<span>Barefaced · Ingredients · Sustainability · FAQ</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #4388e8; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #4388e8; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff4d00; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#18191b; box-sizing:border-box;
font-family:'Hind','Montserrat',-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
.mont { font-family:'Montserrat','Hind',sans-serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#222222; }
.logo { font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; color:#fff; text-transform:uppercase;
letter-spacing:0.5px; }
.navlinks { display:flex; gap:22px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px;
text-transform:uppercase; letter-spacing:0.5px; color:#cfd3d8; }
.cart-pill { background:#4388e8; color:#fff; font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px;
text-transform:uppercase; padding:6px 14px; border-radius:8px; }
main { display:flex; height:calc(640px - 60px - 28px); }
.stage { width:440px; background:#f5f5f5; position:relative; display:flex; align-items:center; justify-content:center; }
.chair { position:relative; width:190px; }
.headrest { width:120px; height:56px; margin:0 auto; background:linear-gradient(160deg,#4388e8,#2b6fd4);
border-radius:16px; }
.back { width:170px; height:170px; margin:6px auto 0; background:linear-gradient(180deg,#2c2f34,#18191b);
border-radius:20px; position:relative; }
.back::after { content:''; position:absolute; left:14px; right:14px; top:16px; bottom:16px; border-radius:14px;
background:linear-gradient(180deg,#3a3f45,#22252a); box-shadow:inset 0 0 0 1px rgba(67,136,232,0.35); }
.seat { width:190px; height:36px; margin:-6px auto 0; background:#18191b; border-radius:0 0 18px 18px; }
.armL,.armR { position:absolute; top:150px; width:16px; height:52px; background:#3a3f45; border-radius:6px; }
.armL { left:-14px; } .armR { right:-14px; }
.base { width:150px; height:10px; margin:8px auto 0; background:#111; border-radius:9999px; }
.stripe { position:absolute; left:50%; top:70px; transform:translateX(-50%); width:6px; height:150px;
background:linear-gradient(180deg,#ff4200,#e81e63); border-radius:4px; opacity:0.9; }
.badges { position:absolute; top:20px; left:20px; display:flex; gap:8px; }
.b { font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; text-transform:uppercase;
letter-spacing:0.4px; border-radius:4px; padding:4px 8px; color:#fff; }
.b-sale { background:#ff4d00; } .b-feat { background:#e81e63; }
.info { flex:1; padding:26px 34px; display:flex; flex-direction:column; }
.crumb { font-size:11px; color:#878787; margin-bottom:8px; }
h1 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:24px; letter-spacing:-0.3px; margin:0 0 8px; }
.stars { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.stars .s { color:#e6c273; font-size:14px; }
.stars .n { font-size:12px; color:#878787; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-family:'Montserrat',sans-serif; font-size:24px; font-weight:700; color:#ff4200; }
.was { font-size:13px; color:#a0a0a0; text-decoration:line-through; }
p.desc { font-size:14px; line-height:1.6; color:#18191b; margin:0 0 16px; max-width:420px; }
.spec { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; background:#f5f5f5; border-radius:12px;
padding:14px 16px; margin-bottom:18px; }
.spec div { font-size:10px; color:#878787; text-transform:uppercase; letter-spacing:0.3px; }
.spec b { display:block; font-size:13px; color:#222; font-weight:600; margin-top:3px; text-transform:none; letter-spacing:0; }
.opt-label { font-size:11px; color:#878787; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.chips { display:flex; gap:8px; margin-bottom:20px; }
.chip { width:26px; height:26px; border-radius:8px; border:2px solid transparent; }
.chip.active { border-color:#4388e8; }
.c1{background:#4388e8;} .c2{background:#18191b;} .c3{background:#ff4200;} .c4{background:#e81e63;}
.cta-row { display:flex; gap:12px; margin-top:auto; }
.btn-primary { background:#4388e8; color:#fff; border:none; border-radius:8px; padding:13px 30px;
font-family:'Montserrat',sans-serif; text-transform:uppercase; font-weight:600; font-size:13px; letter-spacing:0.5px; }
.btn-secondary { background:#fff; color:#222; border:1px solid #222; border-radius:8px; padding:12px 24px;
font-family:'Montserrat',sans-serif; text-transform:uppercase; font-weight:600; font-size:13px; letter-spacing:0.5px; }
</style></head>
<body>
<nav>
<span class="logo">Andaseat</span>
<div class="navlinks"><span>Gaming Chairs</span><span>Ergonomic</span><span>Accessories</span><span>Support</span></div>
<span class="cart-pill">Cart · 1</span>
</nav>
<main>
<div class="stage">
<div class="badges"><span class="b b-sale">Sale</span><span class="b b-feat">Pro Series</span></div>
<div class="chair">
<div class="stripe"></div>
<div class="headrest"></div>
<div class="back"></div>
<div class="armL"></div><div class="armR"></div>
<div class="seat"></div>
<div class="base"></div>
</div>
</div>
<div class="info">
<div class="crumb">Gaming Chairs / Pro Series / <b>Kaiser 3</b></div>
<h1>Kaiser 3 Gaming Throne</h1>
<div class="stars"><span class="s">★★★★★</span><span class="n">4.7 · 3,204 reviews</span></div>
<div class="price-row"><span class="price">$429.00</span><span class="was">$549.00</span></div>
<p class="desc">Cold-rolled steel frame, 4D adjustable armrests, and a full lumbar & neck support system built for marathon sessions.</p>
<div class="spec">
<div>Max Load<b>180 kg</b></div>
<div>Recline<b>90°–160°</b></div>
<div>Warranty<b>4 Years</b></div>
</div>
<div class="opt-label">Color</div>
<div class="chips">
<span class="chip c1 active"></span><span class="chip c2"></span><span class="chip c3"></span><span class="chip c4"></span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Models</button>
</div>
</div>
</main>
<footer style="height:28px; background:#111111; display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; color:#878787;">
<span>© Andaseat</span><span>Built for the long game</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0600; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0600; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa8987; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0600; color: #1c1c1c;
border: 1px solid #1c1c1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0600; color: #f5f5f5;
border: 1px solid #fd2c27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa8987; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db0a04; color: #1c1c1c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 44px;
border-bottom:1px solid #dddddd; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#212121; }
.navlinks span:first-child { color:#ff0600; }
.cta { background:transparent; color:#ff0600; border:1px solid #ff0600; border-radius:4px;
padding:8px 22px; font-weight:400; font-size:14px; }
.hero { padding:56px 44px 30px; text-align:left; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.34; margin:0 0 16px; max-width:560px; }
.hero p { font-size:16px; color:#3b3b3b; line-height:1.6; max-width:480px; margin:0 0 24px; }
.band { background:#f9f9f9; padding:26px 44px; display:flex; gap:36px; align-items:center; border-top:1px solid #dddddd; }
.stat { }
.stat b { display:block; font-size:23px; font-weight:700; margin-bottom:2px; }
.stat span { font-size:13px; color:#808080; }
.section { padding:26px 44px 0; }
.section h2 { font-size:23px; font-weight:700; margin:0 0 18px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.panel { background:#ffffff; border:1px solid #dddddd; border-radius:8px; padding:18px; }
.panel .tag { font-size:12px; color:#999999; margin-bottom:8px; display:block; }
.panel h3 { font-size:15px; font-weight:700; margin:0 0 6px; }
.panel p { font-size:13px; color:#3b3b3b; line-height:1.5; margin:0; }
em.mark { color:#ff0600; font-style:normal; }
</style></head>
<body>
<nav>
<p class="brand">Sandoll</p>
<div class="navlinks"><span>Inquiries</span><span>Story</span><span>Research</span><span>Partners</span></div>
<button class="cta">Production Inquiry</button>
</nav>
<section class="hero">
<h1>Where letters become <em class="mark">voice</em></h1>
<p>A type foundry drawing Hangul letterforms since 1984. The typeface is the brand.</p>
</section>
<div class="band">
<div class="stat"><b>40 years</b><span>of typography research</span></div>
<div class="stat"><b>SDGretaSans</b><span>our own typeface</span></div>
<div class="stat"><b><em class="mark">Red</em></b><span>the single brand accent</span></div>
</div>
<section class="section">
<h2>Services</h2>
<div class="grid">
<div class="panel"><span class="tag">Type Branding</span><h3>Custom Corporate Type</h3><p>Bespoke typeface design for a company's identity.</p></div>
<div class="panel"><span class="tag">Sandoll Cloud</span><h3>A Font Platform for Everyone</h3><p>The best font subscription service for every creator.</p></div>
<div class="panel"><span class="tag">Research</span><h3>Hangul Form Studies</h3><p>A lab exploring legibility and typographic rhythm.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5b52ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5b52ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b0acfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5b52ff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5b52ff; color: #f5f5f5;
border: 1px solid #746cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b0acfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #756eff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0d14; box-sizing:border-box;
font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e2e4e9; }
.brand { font-weight:700; font-size:17px; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#52525b; }
.btn { background:#5b52ff; color:#ffffff; border:1px solid #5b52ff; border-radius:8px; padding:10px 18px;
font-weight:500; font-size:14px; }
.btn-outline { background:#ffffff; color:#5b52ff; border:1px solid #5b52ff; border-radius:8px; padding:10px 18px;
font-weight:500; font-size:14px; }
.hero { padding:40px 40px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero h1 { font-size:44px; font-weight:600; line-height:1.1; letter-spacing:-1px; margin:0; max-width:680px; }
.hero h1 span { color:#5b52ff; }
.hero p { font-size:16px; color:#52525b; margin:0; max-width:520px; line-height:1.5; }
.row { display:flex; gap:12px; margin-top:6px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 40px 20px; }
.card { border:1px solid #e2e4e9; border-radius:8px; padding:18px; background:#ffffff; }
.card .tag { font-size:11px; font-weight:700; color:#5b52ff; text-transform:uppercase; letter-spacing:.05em; }
.card h3 { font-size:15px; font-weight:600; margin:8px 0 6px; }
.card p { font-size:12.5px; color:#52525b; line-height:1.5; margin:0; }
.pricing { margin:0 40px; border-top:1px solid #e2e4e9; padding-top:18px; display:flex; gap:14px; }
.pcard { flex:1; border:1px solid #cdd0d5; border-radius:8px; padding:18px 20px 18px 18px; background:#ffffff;
display:flex; flex-direction:column; gap:6px; }
.pcard.current { border:1px solid #e2e4e9; background:#fafafb; }
.ptag { font-size:11px; font-weight:500; color:#0a0d14; }
.ptitle { font-size:17px; font-weight:600; }
.pdesc { font-size:11.5px; color:#525866; line-height:1.5; }
</style></head>
<body>
<nav>
<span class="brand">Upstage</span>
<div class="navlinks"><span>Solar</span><span>Document AI</span><span>Studio</span><span>Pricing</span></div>
<div class="row"><button class="btn-outline">Sign in</button><button class="btn">Get started</button></div>
</nav>
<section class="hero">
<h1>Enterprise AI for <span>document-heavy</span> work</h1>
<p>Build controllable, traceable document intelligence for insurance, healthcare, and financial services workflows.</p>
<div class="row"><button class="btn">Talk to sales</button><button class="btn-outline">View documentation</button></div>
</section>
<section class="grid">
<div class="card"><span class="tag">Document Parse</span><h3>Structure any document</h3><p>Extract layout, tables, and text with production-grade accuracy.</p></div>
<div class="card"><span class="tag">Information Extract</span><h3>Turn pages into fields</h3><p>Pull structured values out of unstructured filings automatically.</p></div>
<div class="card"><span class="tag">Studio</span><h3>Design and deploy agents</h3><p>Operate document workflows with review, governance, and traceability.</p></div>
</section>
<section class="pricing">
<div class="pcard current"><span class="ptag">Solar Mini</span><span class="ptitle">Free tier</span><span class="pdesc">Best for prototyping and evaluation.</span></div>
<div class="pcard"><span class="ptag">Solar Pro 3</span><span class="ptitle">$0.002 / 1K tokens</span><span class="pdesc">Production document reasoning at scale.</span></div>
<div class="pcard"><span class="ptag">Enterprise</span><span class="ptitle">Custom</span><span class="pdesc">Dedicated deployment, security review, SLA.</span></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc629; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc629; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c621c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5b616; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc629; color: #000000;
border: 1px solid #f5b616; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc629; color: #111111;
border: 1px solid #d9a925; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c621c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdc326; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1F1F1F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:0.5px solid #E5E5E5; }
.brand { font-size:17px; font-weight:900; margin:0; }
.hexnav { display:flex; gap:14px; }
.hexnav i { width:24px; height:24px; clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
background:#EDEDED; display:inline-block; }
.hexnav i.on { background:#FFC629; }
.main { display:flex; height:calc(640px - 56px - 54px); }
.yellowpanel { width:420px; background:#FFC629; display:flex; flex-direction:column; align-items:center;
justify-content:center; padding:0 40px; text-align:center; }
.hivelogo { width:44px; height:44px; clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
background:#1F1F1F; margin-bottom:18px; }
.yellowpanel h1 { font-size:30px; font-weight:900; letter-spacing:-0.6px; margin:0 0 8px; line-height:1.1; }
.yellowpanel p { font-size:13px; font-weight:600; margin:0 0 16px; }
.countchip { background:#FFC629; border:1px solid #F5B616; border-radius:999px; padding:6px 16px;
font-size:12px; font-weight:700; margin-bottom:16px; }
.movebtn { background:#ffffff; color:#1F1F1F; border:none; border-radius:28px; padding:13px 30px;
font-weight:700; font-size:14px; }
.swipeside { flex:1; display:flex; align-items:center; justify-content:center; gap:28px; padding:20px 30px; }
.swipecard { position:relative; width:190px; height:254px; border-radius:12px; flex-shrink:0;
background:linear-gradient(155deg,#ffdd94 0%,#f5a04a 55%,#c96f3a 100%); box-shadow:rgba(0,0,0,0.12) 0 4px 16px; overflow:hidden; }
.progressbar { position:absolute; top:8px; left:8px; right:8px; display:flex; gap:4px; }
.progressbar i { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.4); }
.progressbar i.on { background:#fff; }
.cardgrad { position:absolute; left:0; right:0; bottom:0; height:40%;
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); }
.cardname { position:absolute; left:12px; bottom:12px; color:#fff; font-size:19px; font-weight:700; }
.cardname small { font-size:12px; font-weight:500; display:block; margin-top:2px; }
.infob { position:absolute; right:10px; bottom:12px; width:26px; height:26px; border-radius:50%;
background:rgba(0,0,0,0.4); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; }
.actionrow { display:flex; flex-direction:column; align-items:center; gap:14px; }
.abtn { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; }
.a-rewind { width:36px; height:36px; background:#F5F5F5; color:#9C9C9C; font-size:14px; }
.a-x { width:44px; height:44px; background:#fff; border:1.5px solid #1F1F1F; color:#1F1F1F; font-size:16px; }
.a-heart { width:56px; height:56px; background:#FFC629; color:#000; font-size:22px;
box-shadow:rgba(255,198,41,0.5) 0 6px 16px; }
.a-star { width:44px; height:44px; background:#FFC629; color:#000; font-size:16px; }
.a-bee { width:36px; height:36px; background:#fff; border:1.5px solid #FFC629; color:#1F1F1F; font-size:13px; }
footer { position:absolute; bottom:0; left:0; right:0; height:54px; background:#fff; border-top:0.5px solid #E5E5E5;
display:flex; align-items:center; justify-content:space-around; padding:0 36px; }
footer .tab { text-align:center; font-size:10px; font-weight:700; color:#9C9C9C; }
footer .tab.on { color:#1F1F1F; }
footer .tab.on .dot { width:4px; height:4px; border-radius:50%; background:#FFC629; margin:3px auto 0; }
</style></head>
<body>
<nav>
<p class="brand">Bumble (iOS)</p>
<div class="hexnav"><i class="on"></i><i></i><i></i></div>
</nav>
<div class="main">
<div class="yellowpanel">
<div class="hivelogo"></div>
<h1>Make the first move.</h1>
<p>She has 24 hours to start the conversation.</p>
<div class="countchip">Your turn: 23h 14m</div>
<button class="movebtn">Send a Move</button>
</div>
<div class="swipeside">
<div class="swipecard">
<div class="progressbar"><i class="on"></i><i></i><i></i><i></i></div>
<div class="cardgrad"></div>
<div class="cardname">Sigrún, 28<small>2 km away</small></div>
<div class="infob">i</div>
</div>
<div class="actionrow">
<div class="abtn a-star">★</div>
<div class="abtn a-heart">♥</div>
<div class="abtn a-x">✕</div>
</div>
</div>
</div>
<footer>
<div class="tab on">People<div class="dot"></div></div>
<div class="tab">Hives</div>
<div class="tab">Matches</div>
<div class="tab">Chats</div>
<div class="tab">Profile</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0052b4; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f8f8f8; color: #1a1a1a;
border: 1px solid #0052b4; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #f8f8f8; color: #1a1a1a;
border: 1px solid #c0c0c0; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d80027; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#1a1a1a; box-sizing:border-box;
font-family:'Aktiv Grotesk', -apple-system, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e5e5e5; background:#f8f8f8; }
.brand { font-family:'Bigger Display','Aktiv Grotesk Extended','Aktiv Grotesk',sans-serif; font-size:19px;
font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:12.5px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; color:#666666; }
.navlinks span.on { color:#1a1a1a; border-bottom:2px solid #0052b4; padding-bottom:4px; }
.navicons { display:flex; align-items:center; gap:16px; }
.icon-search { width:14px; height:14px; border:1.5px solid #1a1a1a; border-radius:50%; position:relative; }
.icon-search::after { content:''; position:absolute; width:6px; height:1.5px; background:#1a1a1a; right:-5px; bottom:-1px; transform:rotate(45deg); }
.icon-cart { width:17px; height:14px; border:1.5px solid #1a1a1a; border-radius:0 0 3px 3px; position:relative; }
.icon-cart::before { content:''; position:absolute; top:-6px; left:2px; width:10px; height:6px; border:1.5px solid #1a1a1a; border-bottom:none; border-radius:6px 6px 0 0; }
.hero { flex:0 0 126px; height:126px; background:#1a1a1a; display:flex; flex-direction:column;
justify-content:center; gap:8px; padding:0 40px; color:#ffffff; }
.hero h1 { margin:0; font-family:'Bigger Display','Aktiv Grotesk Extended','Aktiv Grotesk',sans-serif;
font-size:27px; font-weight:700; letter-spacing:-0.6px; line-height:1.12; max-width:600px; }
.hero p { margin:0; font-size:13px; color:#999999; max-width:460px; }
.hero .btn-primary { align-self:flex-start; margin-top:6px; background:#0052b4; color:#ffffff; border:none;
border-radius:4px; padding:9px 18px; font-size:13px; font-weight:600; }
.filterrow { flex:0 0 34px; height:34px; display:flex; align-items:center; gap:8px; padding:0 40px; background:#f8f8f8; }
.ftag { font-size:11.5px; color:#333333; background:#f2f2f2; border-radius:999px; padding:5px 13px; }
.ftag.on { background:#0052b4; color:#ffffff; }
main.grid { flex:1 1 auto; overflow:hidden; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
padding:14px 40px 0; }
.card { position:relative; background:#ffffff; border-radius:8px; display:flex; flex-direction:column; overflow:hidden; }
.card-img { flex:0 0 68%; position:relative; }
.img1 { background:linear-gradient(165deg,#2a0a0a 0%,#5c1010 55%,#d80027 130%); }
.img2 { background:linear-gradient(165deg,#0a1a2a 0%,#0d3a5c 55%,#00a2a9 130%); }
.img3 { background:linear-gradient(165deg,#1a0a2a 0%,#3d1050 55%,#ad3381 130%); }
.img4 { background:linear-gradient(165deg,#0a0a0a 0%,#1a1a1a 55%,#0052b4 130%); }
.card-img::after { content:''; position:absolute; left:0; right:0; bottom:0; height:34%;
background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.55)); }
.card-badges { position:absolute; top:8px; left:8px; z-index:2; display:flex; flex-direction:column; gap:5px; }
.b-limited { background:#d80027; color:#fff; font-size:9.5px; font-weight:700; letter-spacing:0.4px;
text-transform:uppercase; border-radius:4px; padding:3px 7px; align-self:flex-start; }
.b-label { background:#00a2a9; color:#fff; font-size:9.5px; font-weight:700; letter-spacing:0.4px;
text-transform:uppercase; border-radius:4px; padding:3px 7px; align-self:flex-start; }
.card-body { padding:9px 11px 11px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card-body h3 { margin:0; font-size:13px; font-weight:600; line-height:1.25; }
.fmt-badge { background:#f2f2f2; color:#666666; font-size:9.5px; font-weight:700; text-transform:uppercase;
letter-spacing:0.4px; border-radius:4px; padding:2px 7px; align-self:flex-start; }
.price { font-size:13.5px; font-weight:600; color:#d80027; margin-top:auto; }
footer { flex:0 0 46px; height:46px; background:#1a1a1a; color:#999999; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Arrow Films</p>
<div class="navlinks">
<span class="on">Cult</span><span>Classic</span><span>Horror</span><span>New Releases</span><span>Labels</span>
</div>
<div class="navicons">
<div class="icon-search"></div>
<div class="icon-cart"></div>
</div>
</nav>
<section class="hero">
<h1>The definitive home of cult, classic & horror cinema.</h1>
<p>Restored in 4K from original elements, with new commentary and collectible packaging.</p>
<button class="btn-primary">Shop New Restorations</button>
</section>
<div class="filterrow">
<span class="ftag on">Horror</span>
<span class="ftag">Cult</span>
<span class="ftag">Classic</span>
<span class="ftag">4K UHD</span>
<span class="ftag">Arrow Video</span>
</div>
<main class="grid">
<div class="card">
<div class="card-img img1"><div class="card-badges"><span class="b-limited">Limited Edition</span></div></div>
<div class="card-body">
<h3>Midnight Reel</h3>
<span class="fmt-badge">4K UHD</span>
<span class="price">$44.99</span>
</div>
</div>
<div class="card">
<div class="card-img img2"><div class="card-badges"><span class="b-label">Arrow Video</span></div></div>
<div class="card-body">
<h3>The Coastal Road</h3>
<span class="fmt-badge">Blu-ray</span>
<span class="price">$29.99</span>
</div>
</div>
<div class="card">
<div class="card-img img3"></div>
<div class="card-body">
<h3>Nightshade Sonata</h3>
<span class="fmt-badge">Blu-ray</span>
<span class="price">$27.99</span>
</div>
</div>
<div class="card">
<div class="card-img img4"><div class="card-badges"><span class="b-limited">Pre-order</span></div></div>
<div class="card-body">
<h3>Second Run Archive</h3>
<span class="fmt-badge">4K UHD</span>
<span class="price">$54.99</span>
</div>
</div>
</main>
<footer>
<span>© Arrow Films</span>
<span>Arrow Films · Customer Service · About · Newsletter</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #758e6d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #dbf482; color: #121212;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #dbf482; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #232933;
border: 1px solid #c4c4c4; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #758e6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #dbf482; color: #121212;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'proxima-nova', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; border-bottom:1px solid #e8e8e8; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; }
.logo { font-family:'arquitecta','Helvetica Neue',Arial,sans-serif; font-weight:700; font-size:19px; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.navlinks span:first-child { border-bottom:2px solid #121212; padding-bottom:4px; }
.icons { display:flex; gap:14px; font-size:14px; }
main { display:flex; padding:20px 36px 0; gap:36px; height:474px; }
.shot { width:340px; position:relative; background:#f5f5f5; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:0;
background:
radial-gradient(circle at 30% 15%, rgba(219,244,130,0.9), transparent 45%),
radial-gradient(circle at 75% 80%, rgba(249,202,230,0.7), transparent 50%),
linear-gradient(160deg, #232933 0%, #121212 100%); }
.badge-new { position:absolute; top:12px; left:12px; background:#dbf482; color:#121212; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:8px; padding:2px 10px; }
.thumbstrip { display:flex; gap:8px; margin-top:8px; }
.thumbstrip div { flex:1; height:52px; background:#f5f5f5; }
.thumbstrip div:nth-child(1) { background:linear-gradient(160deg,#758e6d,#232933); }
.thumbstrip div:nth-child(2) { background:linear-gradient(160deg,#dbf482,#758e6d); }
.thumbstrip div:nth-child(3) { background:linear-gradient(160deg,#f9cae6,#232933); }
.info { flex:1; display:flex; flex-direction:column; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#758e6d; margin-bottom:6px; }
.name { font-family:'arquitecta','Helvetica Neue',Arial,sans-serif; font-size:28px; font-weight:700;
line-height:1.15; letter-spacing:-0.5px; margin:0 0 8px; }
.stars { font-size:13px; margin-bottom:10px; }
.stars span { color:#9baa94; font-weight:600; margin-left:4px; }
.price { font-size:18px; font-weight:600; margin-bottom:16px; }
.field { margin-bottom:14px; }
.field .lbl { font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:8px; }
.colors { display:flex; gap:10px; }
.dot { width:26px; height:26px; border-radius:999px; border:2px solid transparent; }
.dot.a { background:#232933; border-color:#121212; }
.dot.b { background:#f9cae6; }
.dot.c { background:#dbf482; }
.sizes { display:flex; gap:8px; }
.size { width:44px; height:44px; border:1px solid #dedede; border-radius:8px; display:flex; align-items:center;
justify-content:center; font-size:13px; }
.size.active { background:#121212; color:#fff; border-color:#121212; }
.cta { margin-top:auto; display:flex; gap:10px; }
.btn-add { flex:1; background:#dbf482; color:#121212; border:none; border-radius:999px; height:48px;
font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.btn-fav { width:48px; height:48px; border-radius:999px; border:1px solid #dedede; display:flex;
align-items:center; justify-content:center; }
.promo { margin-top:12px; font-size:12px; color:#758e6d; font-weight:600; }
footer { border-top:none; margin-top:6px; padding:14px 36px; display:flex; justify-content:space-between;
background:#121212; color:#fff; font-size:11px; letter-spacing:0.5px; }
</style></head>
<body>
<nav>
<div class="logo">Alo Yoga</div>
<div class="navlinks"><span>New</span><span>Bestsellers</span><span>Studio</span><span>Men</span></div>
<div class="icons">⌕ ♡ ⬭</div>
</nav>
<main>
<div class="shot">
<span class="badge-new">Best Seller</span>
<div class="thumbstrip"><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="eyebrow">Airbrush Collection</div>
<h1 class="name">High-Waist Airlift Legging</h1>
<div class="stars">★★★★★ <span>4.8 (2,391)</span></div>
<div class="price">$98.00</div>
<div class="field">
<div class="lbl">Color — Charcoal</div>
<div class="colors"><span class="dot a"></span><span class="dot b"></span><span class="dot c"></span></div>
</div>
<div class="field">
<div class="lbl">Size</div>
<div class="sizes">
<span class="size">XS</span><span class="size active">S</span><span class="size">M</span>
<span class="size">L</span><span class="size">XL</span>
</div>
</div>
<div class="cta">
<button class="btn-add">Add to Bag</button>
<div class="btn-fav">♡</div>
</div>
<div class="promo">Free shipping on orders $100+</div>
</div>
</main>
<footer>
<span>© Alo Yoga</span>
<span>SHIPPING · RETURNS · REWARDS</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0cefd3; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0cefd3; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #0f7568; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0cefd3; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0cefd3; color: #111111;
border: 1px solid #0dcbb4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #0f7568; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #18d9d8; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.left { width:520px; flex:0 0 520px; display:flex; flex-direction:column; border-right:1px solid #f6f6f6; }
.hero { height:150px; background:linear-gradient(135deg,#0cefd3 0%, #05c9ad 100%); position:relative; padding:18px 24px; }
.hero .back { color:#ffffff; font-size:13px; font-weight:700; opacity:0.9; }
.hero .title { color:#000000; font-size:26px; font-weight:800; margin-top:34px; letter-spacing:-0.5px; }
.hero .meta { color:#000000; opacity:0.7; font-size:13px; margin-top:6px; font-weight:700; }
.menulist { flex:1; overflow:hidden; padding:8px 0; }
.menuhead { padding:14px 24px 6px; font-size:15px; font-weight:800; }
.item { display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1px solid #f6f6f6; }
.thumb { width:64px; height:64px; border-radius:12px; flex:0 0 64px; }
.t1 { background:linear-gradient(135deg,#ffd7a8,#ff9f43); }
.t2 { background:linear-gradient(135deg,#c8f7dc,#0cefd3); }
.t3 { background:linear-gradient(135deg,#ffd1dc,#ff7597); }
.t4 { background:linear-gradient(135deg,#d8d4ff,#8f7bff); }
.iteminfo { flex:1; min-width:0; }
.iteminfo .name { font-size:15px; font-weight:700; }
.iteminfo .desc { font-size:12px; color:#6c6d6f; margin-top:3px; }
.iteminfo .price { font-size:14px; font-weight:800; margin-top:6px; }
.addbtn { width:28px; height:28px; border-radius:8px; border:1.5px solid #0cefd3; color:#0cefd3;
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; flex:0 0 28px; }
.right { flex:1; display:flex; flex-direction:column; background:#f6f6f6; }
.rhead { padding:20px 24px 10px; font-size:16px; font-weight:800; }
.cart { flex:1; padding:0 24px; overflow:hidden; }
.cartrow { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #e6e6e6; font-size:13px; }
.cartrow .qty { color:#6c6d6f; margin-right:6px; }
.cartrow .amt { font-weight:700; }
.promo { margin:14px 0; padding:12px 14px; background:#ffffff; border-radius:12px; display:flex;
justify-content:space-between; align-items:center; }
.promo .lbl { font-size:12px; color:#232324; font-weight:700; }
.promo .tag { background:rgba(12,239,211,0.18); color:#04a98f; font-size:11px; font-weight:800;
padding:4px 8px; border-radius:8px; }
.summary { padding:16px 24px; background:#ffffff; border-top:1px solid #e6e6e6; }
.sumrow { display:flex; justify-content:space-between; font-size:13px; color:#6c6d6f; margin-bottom:6px; }
.sumrow.total { font-size:16px; font-weight:800; color:#000000; margin-top:8px; }
.cta { margin-top:14px; width:100%; height:52px; border-radius:14px; border:none;
background:#000000; color:#0cefd3; font-size:16px; font-weight:800; }
</style></head>
<body>
<div class="app">
<div class="left">
<div class="hero">
<div class="back">← Baemin</div>
<div class="title">Golden Bowl Kitchen</div>
<div class="meta">4.9 · 1.2km · 25–35 min</div>
</div>
<div class="menulist">
<div class="menuhead">Popular menu</div>
<div class="item">
<div class="thumb t1"></div>
<div class="iteminfo">
<div class="name">Soy Garlic Fried Chicken</div>
<div class="desc">Crispy half · house soy garlic glaze</div>
<div class="price">18,900 won</div>
</div>
<div class="addbtn">+</div>
</div>
<div class="item">
<div class="thumb t2"></div>
<div class="iteminfo">
<div class="name">Cold Buckwheat Noodles</div>
<div class="desc">Chilled broth · extra egg</div>
<div class="price">9,500 won</div>
</div>
<div class="addbtn">+</div>
</div>
<div class="item">
<div class="thumb t3"></div>
<div class="iteminfo">
<div class="name">Tteokbokki Set</div>
<div class="desc">Rice cake · fish cake · noodles</div>
<div class="price">12,000 won</div>
</div>
<div class="addbtn">+</div>
</div>
<div class="item">
<div class="thumb t4"></div>
<div class="iteminfo">
<div class="name">Sparkling Yogurt Drink</div>
<div class="desc">Chilled · 500ml</div>
<div class="price">3,200 won</div>
</div>
<div class="addbtn">+</div>
</div>
</div>
</div>
<div class="right">
<div class="rhead">Your order</div>
<div class="cart">
<div class="cartrow"><span><span class="qty">1x</span>Soy Garlic Fried Chicken</span><span class="amt">18,900</span></div>
<div class="cartrow"><span><span class="qty">1x</span>Tteokbokki Set</span><span class="amt">12,000</span></div>
<div class="cartrow"><span><span class="qty">2x</span>Sparkling Yogurt Drink</span><span class="amt">6,400</span></div>
<div class="promo">
<span class="lbl">Free delivery over 20,000 won</span>
<span class="tag">Applied</span>
</div>
</div>
<div class="summary">
<div class="sumrow"><span>Items subtotal</span><span>37,300 won</span></div>
<div class="sumrow"><span>Delivery fee</span><span>0 won</span></div>
<div class="sumrow total"><span>Total</span><span>37,300 won</span></div>
<button class="cta">Place order</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3f3f3f;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.topbar { height:56px; background:#313131; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { font-size:15px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; }
.navlinks span { opacity:0.8; }
.navlinks span.on { opacity:1; border-bottom:2px solid #fff; padding-bottom:18px; }
.subbar { height:36px; background:#fff; border-bottom:1px solid #d4d4d4; display:flex; align-items:center; padding:0 28px; font-size:12px; color:#3f3f3f; gap:20px; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 92px); }
.stage { padding:24px; border-right:1px solid #e8e8e8; display:flex; flex-direction:column; gap:12px; }
.panel { flex:1; border-radius:12px; position:relative; overflow:hidden;
background:linear-gradient(180deg,#3a3a3a,#1f1f1f); }
.panel .strip { position:absolute; left:8%; top:14%; width:84%; height:72%; border-radius:6px; background:#232323; box-shadow:inset 0 0 0 1px #444; display:flex; padding:14px 10px; gap:8px; }
.fader { flex:1; background:linear-gradient(#161616,#0d0d0d); border-radius:4px; position:relative; }
.fader::after { content:''; position:absolute; left:2px; right:2px; height:6px; border-radius:2px; background:#aeaeae; box-shadow:0 0 4px rgba(0,0,0,0.5); }
.fader:nth-child(1)::after{ top:30%; } .fader:nth-child(2)::after{ top:50%; } .fader:nth-child(3)::after{ top:20%; }
.fader:nth-child(4)::after{ top:60%; } .fader:nth-child(5)::after{ top:40%; } .fader:nth-child(6)::after{ top:70%; }
.rec { position:absolute; right:16px; top:16px; width:8px; height:8px; border-radius:50%; background:#c8102e; box-shadow:0 0 8px rgba(200,16,46,0.8); }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.badges { display:flex; gap:6px; }
.badge { background:#313131; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 10px; border-radius:999px; }
.badge-live { background:#c8102e; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 10px; border-radius:999px; }
h1 { margin:0; font-size:22px; font-weight:600; }
.price { font-size:20px; font-weight:600; }
.spec-table { border:1px solid #e8e8e8; border-radius:4px; overflow:hidden; }
.spec-row { display:flex; justify-content:space-between; padding:8px 12px; font-size:13px; border-bottom:1px solid #e8e8e8; }
.spec-row:last-child { border-bottom:none; }
.spec-row .l { font-weight:600; color:#1a1a1a; }
.spec-row .v { color:#3f3f3f; }
.spec-row.head { background:#f5f5f5; font-weight:600; }
.tabs { display:flex; gap:8px; }
.tab { padding:8px 16px; font-size:13px; font-weight:600; border-radius:8px; background:#f5f5f5; color:#6a6a6a; }
.tab.on { background:#313131; color:#fff; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#313131; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; }
.btn-download { width:170px; height:44px; background:#2ecc71; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; }
</style></head>
<body>
<div class="topbar">
<p class="brand">Allen And Heath</p>
<div class="navlinks"><span>Mixers</span><span class="on">Digital Consoles</span><span>Interfaces</span><span>Support</span></div>
</div>
<div class="subbar">Allen And Heath > Live Sound > dLive Series</div>
<main>
<div class="stage">
<div class="panel"><div class="rec"></div><div class="strip">
<div class="fader"></div><div class="fader"></div><div class="fader"></div><div class="fader"></div><div class="fader"></div><div class="fader"></div>
</div></div>
</div>
<div class="info">
<div class="badges"><span class="badge">Flagship</span><span class="badge-live">Live-tested</span></div>
<h1>dLive S5000 Digital Mixing Surface</h1>
<div class="price">$18,499.00</div>
<div class="spec-table">
<div class="spec-row head"><span class="l">Specification</span><span class="v">Value</span></div>
<div class="spec-row"><span class="l">Faders</span><span class="v">24 motorized</span></div>
<div class="spec-row"><span class="l">Processing</span><span class="v">128 channels</span></div>
<div class="spec-row"><span class="l">I/O</span><span class="v">Dual gigaACE</span></div>
<div class="spec-row"><span class="l">Firmware</span><span class="v">v1.92</span></div>
</div>
<div class="tabs"><span class="tab on">Overview</span><span class="tab">Specs</span><span class="tab">Firmware</span></div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-download">Download Manual</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #a3a3a3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #000000; color: #ffffff;
border: none; border-radius: 9999px; padding: 8px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 9999px;
padding: 8px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3a3a3; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.43; background: #fafafa; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 정말 아무것도 없다 — README 같은 단일 중앙 컬럼, 검은 필 하나, 터미널 스니펫,
손그림풍 라마 마스코트(원+삼각형만으로 절제해 표현) 하나가 유일한 장식. */
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #e5e5e5; }
.brand { font-size:15px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#737373; }
.btn-pill { background:#000; color:#fff; border:none; border-radius:999px; padding:8px 18px; font-size:13px; font-weight:500; }
.main { display:flex; flex-direction:column; align-items:center; padding:56px 40px 0; text-align:center; }
.llama { width:64px; height:64px; margin-bottom:18px; position:relative; }
.llama .body { position:absolute; width:40px; height:44px; background:#525252; border-radius:50% 50% 45% 45%; left:12px; top:18px; }
.llama .neck { position:absolute; width:14px; height:30px; background:#525252; left:24px; top:-6px; border-radius:6px; transform:rotate(-8deg); }
.llama .head { position:absolute; width:18px; height:16px; background:#525252; left:16px; top:-16px; border-radius:50%; }
.llama .ear { position:absolute; width:5px; height:10px; background:#525252; left:18px; top:-24px; border-radius:3px; }
.llama .ear2 { position:absolute; width:5px; height:10px; background:#525252; left:27px; top:-24px; border-radius:3px; }
.main h1 { font-size:34px; font-weight:500; letter-spacing:-0.5px; margin:0; max-width:520px; }
.main p { font-size:14px; color:#737373; margin:12px 0 0; }
.install { margin-top:20px; background:#171717; color:#e5e5e5; border-radius:999px; padding:12px 24px;
font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:13px; }
.install .p { color:#27c93f; }
.row { display:flex; gap:10px; margin-top:18px; }
.btn-black { background:#000; color:#fff; border:none; border-radius:999px; padding:11px 26px; font-size:13px; font-weight:600; }
.btn-out { background:#fff; color:#000; border:1px solid #d4d4d4; border-radius:999px; padding:10px 26px; font-size:13px; font-weight:600; }
.cards { display:flex; gap:14px; padding:34px 40px 0; justify-content:center; }
.card { flex:1; max-width:220px; border:1px solid #e5e5e5; border-radius:16px; padding:18px; text-align:left; }
.card h4 { font-size:14px; font-weight:600; margin:0 0 6px; }
.card p { font-size:12px; color:#737373; margin:0; line-height:1.5; }
</style></head>
<body>
<nav>
<p class="brand">Ollama</p>
<div class="navlinks"><span>Models</span><span>Docs</span><span>Blog</span></div>
<button class="btn-pill">Download</button>
</nav>
<div class="main">
<div class="llama"><span class="ear"></span><span class="ear2"></span><span class="head"></span><span class="neck"></span><span class="body"></span></div>
<h1>Get up and running with large language models, locally.</h1>
<p>Run open models on your own machine. No cloud, no lock-in.</p>
<div class="install"><span class="p">$</span> ollama run llama3.2</div>
<div class="row"><button class="btn-black">Download</button><button class="btn-out">View docs</button></div>
</div>
<div class="cards">
<div class="card"><h4>Your data stays yours</h4><p>Everything runs locally — nothing ever leaves your machine.</p></div>
<div class="card"><h4>Free forever</h4><p>Open source, no seat limits, no surprise invoices.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #00b2a9; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #00b2a9;
border: 1px solid #00b2a9; border-radius: 12px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #141414;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #126072; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141414; box-sizing:border-box;
font-family:'ITC Avant Garde Gothic','Avant Garde',Montserrat,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#ffffff; border-bottom:1px solid #dde0e3; }
.brand { font-size:19px; font-weight:700; color:#00b2a9; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#364151; font-weight:600; }
.cart { background:#00b2a9; color:#fff; font-size:12px; font-weight:700; padding:7px 14px; border-radius:9999px; }
main { display:flex; height:576px; }
.gallery { width:400px; background:linear-gradient(180deg,#f4f9f9 0%,#bee6e3 100%); position:relative;
display:flex; align-items:center; justify-content:center; }
.tower { width:110px; height:230px; background:linear-gradient(180deg,#ffffff,#e8f4f4); border-radius:16px;
position:relative; box-shadow:0 20px 40px rgba(18,96,114,0.2); }
.tower::before { content:''; position:absolute; top:16px; left:16px; right:16px; bottom:16px;
border:2px solid #00a4a1; border-radius:10px; opacity:0.5; }
.tower .ring { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:56px; height:56px;
border-radius:50%; border:6px solid #00b2a9; }
.airflow { position:absolute; top:60px; width:150px; height:150px; border-radius:50%;
background:radial-gradient(circle, rgba(0,178,169,0.15), transparent 70%); }
.badge-clean { position:absolute; top:22px; left:22px; background:#126072; color:#fff; font-size:10px;
font-weight:700; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#6d6d6d; }
h1 { font-size:22px; font-weight:700; margin:0; line-height:1.3; }
.stars { font-size:12px; color:#f3712a; }
.stars .n { color:#6d6d6d; margin-left:6px; font-size:11.5px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:700; }
.desc { font-size:13.5px; color:#364151; line-height:1.55; max-width:340px; }
.feat-row { display:flex; gap:8px; flex-wrap:wrap; }
.feat { background:#f6f6f6; border-radius:8px; padding:6px 12px; font-size:11.5px; font-weight:600; color:#364151; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#00b2a9; color:#fff; border:none; border-radius:8px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #00b2a9; color:#00b2a9; background:#fff; border-radius:8px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#6d6d6d; }
</style></head>
<body>
<nav>
<div class="brand">Alen</div>
<div class="navlinks"><span>Air Purifiers</span><span>Filters</span><span>Room Guide</span><span>Reviews</span></div>
<div class="cart">Cart · 1</div>
</nav>
<main>
<div class="gallery">
<span class="badge-clean">HEPA-Silent</span>
<div class="airflow"></div>
<div class="tower"><div class="ring"></div></div>
</div>
<div class="info">
<span class="cat">Air Purifier · Large Room</span>
<h1>Alen BreatheSmart 75i HEPA Purifier</h1>
<div class="stars">★★★★★ <span class="n">4.7 · 3,340 reviews</span></div>
<div class="price-row"><span class="price">$599.00</span></div>
<p class="desc">Covers up to 1,300 sq ft with true HEPA filtration — whisper-quiet operation and swappable filter styles.</p>
<div class="feat-row">
<span class="feat">1,300 sq ft coverage</span>
<span class="feat">Auto Mode Sensor</span>
<span class="feat">Lifetime Warranty</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Build Your Filter</button>
</div>
<span class="meta">Free shipping · 30-day trial</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #7d7d7d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: 0.3px; background: #006bb4; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: 0.3px; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #111111;
border: 1px solid #cfcfcf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7d7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #c72935; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Open Sans',Helvetica Neue,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #dbdbdb; }
.brand { font-size:16px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:24px; font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#424242; }
.navlinks span.on { color:#006bb4; border-bottom:2px solid #006bb4; padding-bottom:16px; }
.util { font-size:12px; color:#7d7d7d; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 56px); }
.stage { padding:26px; border-right:1px solid #dbdbdb; display:flex; flex-direction:column; gap:12px; }
.crumb { font-size:11px; color:#7d7d7d; }
.pan { flex:1; border-radius:0; background:#f6f6f6; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:52%; width:230px; height:230px; transform:translate(-50%,-50%); border-radius:50%;
background:radial-gradient(circle at 35% 30%, #eaeaea, #cfcfcf 45%, #8f8f8f 70%, #5a5a5a 100%);
box-shadow:0 18px 30px rgba(0,0,0,0.18); }
.pan::after { content:''; position:absolute; left:50%; top:26%; width:270px; height:20px; transform:translate(-50%,0) rotate(-3deg); border-radius:10px;
background:linear-gradient(90deg,#cfcfcf,#eaeaea 50%,#8f8f8f); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#eeeeee; border:1px solid #dbdbdb; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#7d7d7d; }
h1 { margin:0; font-size:22px; font-weight:600; line-height:1.25; }
.rating { display:flex; align-items:center; gap:8px; font-size:12px; color:#7d7d7d; }
.stars { color:#ff5501; font-size:13px; letter-spacing:1px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; }
.badge-sale { background:#c72935; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.desc { font-size:13px; color:#424242; line-height:1.55; }
.selectors { display:flex; gap:10px; }
.size-chip { border:1px solid #cfcfcf; padding:8px 14px; font-size:13px; font-weight:600; }
.size-chip.on { background:#111111; color:#fff; border-color:#111111; }
.trust { background:#fdf0d5; border:1px solid #c07600; border-left:4px solid #c07600; color:#6f4400; font-size:12px; font-weight:700; padding:10px 12px; border-radius:4px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#006bb4; color:#fff; border:none; height:44px; font-size:14px; font-weight:700; letter-spacing:0.3px; border-radius:4px; }
.btn-secondary { width:150px; background:#fff; border:1px solid #111111; color:#111111; height:44px; font-size:14px; font-weight:700; border-radius:4px; }
</style></head>
<body>
<nav>
<p class="brand">All Clad</p>
<div class="navlinks"><span>Cookware</span><span class="on">Bakeware</span><span>Kitchen Tools</span><span>Sale</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">All Clad / Cookware / Stainless Steel</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">D3 Stainless Collection</span>
<h1>D3 Stainless 12" Fry Pan with Lid</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.8 · 642 reviews</div>
<div class="price-row"><span class="price">$189.95</span><span class="badge-sale">Save 15%</span></div>
<p class="desc">Tri-ply bonded construction fuses an aluminum core between two layers of stainless steel for even, responsive heating from edge to edge — oven safe to 600°F.</p>
<div class="selectors">
<span class="size-chip">8"</span><span class="size-chip">10"</span><span class="size-chip on">12"</span>
</div>
<div class="trust">Lifetime Warranty · Made in Canonsburg, PA, USA</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f7f8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#282829; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia, 'Times New Roman', 'Iowan Old Style', serif; }
nav { height:44px; border-bottom:1px solid #E0E0E0; display:flex; align-items:center; gap:28px; padding:0 32px; }
.brand { font-family:Georgia, serif; font-weight:700; font-size:19px; color:#B92B27; margin:0 24px 0 0; }
.segment { font-size:14px; font-weight:700; color:#636466; padding:0 2px; position:relative; height:44px; display:flex; align-items:center; }
.segment.active { color:#282829; }
.segment.active::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:#B92B27; }
.search { margin-left:auto; width:220px; height:30px; background:#F7F7F8; border-radius:8px; display:flex;
align-items:center; padding:0 10px; font-size:13px; color:#9A9A9C; gap:6px; }
.body { display:flex; gap:0; height:596px; }
.feed { flex:1; padding:16px 24px; overflow:hidden; }
.card { background:#fff; padding:16px 0; border-bottom:8px solid #F7F7F8; }
.authrow { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.av { width:24px; height:24px; border-radius:50%; background:#dcdcdc; }
.authname { font-size:13px; font-weight:700; }
.cred { font-size:12px; color:#636466; font-weight:600; }
.qtitle { font-size:19px; font-weight:700; margin:0 0 8px; line-height:1.35; letter-spacing:-0.1px; }
.apreview { font-size:15px; line-height:1.55; color:#282829; margin:0 0 6px; }
.more { font-size:13px; color:#2E69FF; font-weight:600; margin-bottom:10px; }
.footer { display:flex; align-items:center; gap:20px; }
.votepill { display:flex; align-items:center; height:30px; border:1px solid #E0E0E0; border-radius:15px; overflow:hidden; }
.votepill span { padding:0 10px; font-size:13px; font-weight:600; color:#636466; }
.votepill .up { background:#EAF0FF; color:#2E69FF; }
.votepill .div { width:1px; height:16px; background:#E0E0E0; }
.icon-txt { font-size:12px; color:#636466; }
.side { width:220px; padding:16px 20px; border-left:1px solid #E0E0E0; }
.side h4 { font-size:15px; font-weight:700; margin:0 0 10px; }
.space-tile { border:1px solid #E0E0E0; border-radius:10px; margin-bottom:10px; overflow:hidden; }
.banner { height:34px; }
.b1 { background:#3a7bd5; }
.b2 { background:#c1447e; }
.sp-body { padding:8px 10px; }
.sp-name { font-size:12px; font-weight:700; }
.sp-mem { font-size:10px; color:#636466; margin:2px 0 6px; }
.followbtn { font-size:10px; font-weight:600; border:1px solid #E0E0E0; border-radius:6px; padding:3px 8px; display:inline-block; }
.answer-card { border-top:8px solid #F7F7F8; padding-top:12px; }
</style></head>
<body>
<nav>
<p class="brand">Quora (iOS)</p>
<span class="segment active">Home</span>
<span class="segment">Following</span>
<span class="segment">Spaces</span>
<div class="search">🔍 Search Quora</div>
</nav>
<div class="body">
<div class="feed">
<div class="card">
<div class="authrow"><span class="av"></span><span class="authname">Dana Rourke</span><span class="cred">· Former Data Scientist · 1.4M views</span></div>
<h3 class="qtitle serif">Why do experienced engineers prefer boring technology?</h3>
<p class="apreview">Because novelty is a cost you pay every single day it's in production, and boring tools have already had their surprises found by someone else...</p>
<div class="more">(more)</div>
<div class="footer">
<div class="votepill"><span class="up">▲ 1.2K</span><span class="div"></span><span>▼</span></div>
<span class="icon-txt">💬 84</span>
<span class="icon-txt">↗ Share</span>
</div>
</div>
<div class="card answer-card">
<div class="authrow"><span class="av"></span><span class="authname">Mateo Silva</span><span class="cred">· Staff Engineer, 12 yrs · 812K views</span></div>
<h3 class="qtitle serif">What separates a good manager from a great one?</h3>
<p class="apreview">A good manager removes blockers. A great one notices the blocker before you do, and quietly makes sure it never becomes one again...</p>
<div class="more">(more)</div>
<div class="footer">
<div class="votepill"><span class="up">▲ 634</span><span class="div"></span><span>▼</span></div>
<span class="icon-txt">💬 41</span>
<span class="icon-txt">↗ Share</span>
</div>
</div>
</div>
<div class="side">
<h4>Spaces for you</h4>
<div class="space-tile"><div class="banner b1"></div><div class="sp-body"><div class="sp-name">Systems Design</div><div class="sp-mem">228K members</div><span class="followbtn">Follow</span></div></div>
<div class="space-tile"><div class="banner b2"></div><div class="sp-body"><div class="sp-name">Product Strategy</div><div class="sp-mem">91K members</div><span class="followbtn">Follow</span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #3c404d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #3c404d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #3c404d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7585; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.2px; background: #ffd100; color: #3c404d;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #3c404d;
border: 1px solid #ffd100; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3c404d;
border: 1px solid #cecfd2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7585; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #ffd100; color: #3c404d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3c404d; box-sizing:border-box;
font-family:Calibri, Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#3c404d; }
.brand { font-size:17px; font-weight:700; color:#ffd100; letter-spacing:0.02em; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#c1ccd0; font-weight:600; }
.navlinks span.on { color:#ffd100; }
.search { background:#4c5160; color:#c1ccd0; font-size:12px; padding:7px 14px; border-radius:4px; width:220px; }
main { display:flex; height:580px; }
.breadcrumb { padding:10px 32px; font-size:11px; color:#6b7585; border-bottom:1px solid #eaeaea; }
.body-row { display:flex; height:544px; }
.gallery { width:340px; background:#f4f5f6; display:flex; align-items:center; justify-content:center; position:relative; }
.device { width:170px; height:230px; background:#3c404d; border-radius:8px; position:relative;
box-shadow:0 16px 30px rgba(60,64,77,0.28); }
.device::before { content:''; position:absolute; top:18px; left:18px; right:18px; height:76px;
background:linear-gradient(160deg,#7fcdfe,#aadeff); border-radius:4px; }
.device::after { content:'A M E C'; position:absolute; bottom:16px; left:0; right:0; text-align:center;
color:#ffd100; font-size:11px; font-weight:700; letter-spacing:0.2em; }
.clamp { position:absolute; top:74px; left:50%; transform:translateX(-50%); width:60px; height:60px;
border:8px solid #c1ccd0; border-radius:50%; border-left-color:transparent; }
.badge-cal { position:absolute; top:18px; left:18px; background:#ffd100; color:#3c404d; font-size:10px;
font-weight:700; padding:5px 10px; border-radius:4px; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:10px; }
.partno { font-size:11px; color:#6b7585; font-weight:600; }
h1 { font-size:21px; font-weight:700; margin:0; line-height:1.3; }
.stars { font-size:12px; color:#3c404d; }
.stars .n { color:#6b7585; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; padding:8px 0; border-top:1px solid #eaeaea;
border-bottom:1px solid #eaeaea; }
.price { font-size:22px; font-weight:700; }
.spec-table { font-size:12px; border-collapse:collapse; width:100%; }
.spec-table td { padding:5px 0; border-bottom:1px solid #eaeaea; }
.spec-table td.k { color:#6b7585; width:130px; }
.spec-table td.v { font-weight:600; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#ffd100; color:#3c404d; border:none; border-radius:4px; padding:12px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #3c404d; color:#3c404d; background:#fff; border-radius:4px; padding:11px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.stock { font-size:11.5px; color:#1f873d; font-weight:700; }
</style></head>
<body>
<nav>
<div class="brand">Aemc Instruments</div>
<div class="navlinks"><span class="on">Clamp Meters</span><span>Power Analyzers</span><span>Insulation Testers</span><span>Support</span></div>
<div class="search">Search part #...</div>
</nav>
<div class="breadcrumb">Home / Test & Measurement / Clamp Meters / MTX 3630</div>
<div class="body-row">
<div class="gallery">
<span class="badge-cal">ISO Calibrated</span>
<div class="clamp"></div>
<div class="device"></div>
</div>
<div class="info">
<span class="partno">Part No. 2140.63</span>
<h1>MTX 3630 True-RMS Power Clamp Meter</h1>
<div class="stars">★★★★☆ <span class="n">4.4 · 96 verified reviews</span></div>
<div class="price-row"><span class="price">$612.00</span></div>
<table class="spec-table">
<tr><td class="k">Current range</td><td class="v">0.5 A – 1200 A AC/DC</td></tr>
<tr><td class="k">Accuracy</td><td class="v">±0.5% rdg</td></tr>
<tr><td class="k">CAT rating</td><td class="v">CAT IV 600V</td></tr>
<tr><td class="k">Interface</td><td class="v">Bluetooth · DataView®</td></tr>
</table>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Download Datasheet</button>
</div>
<span class="stock">✓ In stock — ships within 24 hours</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7e3aaf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7e3aaf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bfa1d6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a73aaf; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7e3aaf; color: #ffffff;
border: 1px solid #a73aaf; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7e3aaf; color: #f5f5f5;
border: 1px solid #9158ba; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bfa1d6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #853aaf; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#18131d; color:#e3e3e3; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
aside { width:110px; background:#251633; padding:16px 0; display:flex; flex-direction:column; gap:2px; }
aside .item { padding:12px 8px; font-size:11px; text-align:center; color:#e3e3e3; }
aside .item.active { background:rgba(126,58,175,0.2); font-weight:600; }
main { flex:1; display:flex; flex-direction:column; }
nav { height:64px; background:linear-gradient(to right,#210040,#1d102b); display:flex; align-items:center;
justify-content:space-between; padding:0 28px; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:20px; font-size:13px; }
.row { display:flex; gap:10px; }
.btnp { background:linear-gradient(135.73deg,#653aaf,#a73aaf 98.77%); color:#ffffff; border-radius:9999px;
height:36px; padding:0 18px; font-size:13px; font-weight:500; display:flex; align-items:center; }
.btno { background:transparent; border:1px solid #e3e3e3; color:#e3e3e3; border-radius:9999px; height:36px;
padding:0 18px; font-size:13px; font-weight:500; display:flex; align-items:center; }
.content { flex:1; padding:24px 28px; overflow:hidden; }
.h1 { font-size:24px; font-weight:700; margin:0 0 4px; }
.h1sub { font-size:13px; color:#b4b4b4; margin:0 0 18px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#251633; border-radius:6px; overflow:hidden; }
.thumb { height:80px; }
.th1 { background:linear-gradient(135deg,#7e3aaf,#3a2050); }
.th2 { background:linear-gradient(135deg,#a73aaf,#4a2060); }
.th3 { background:linear-gradient(135deg,#4283e4,#2a3a70); }
.th4 { background:linear-gradient(135deg,#33991d,#204020); }
.cbody { padding:10px; }
.cbody h4 { font-size:12.5px; margin:0 0 6px; line-height:1.3; }
.tag { background:#7e3aaf; color:#e3e3e3; border-radius:4px; padding:2.5px 10px; font-size:11px; display:inline-block; }
</style></head>
<body>
<div class="shell">
<aside>
<div class="item active">Videos</div>
<div class="item">Hero</div>
<div class="item">Vclass</div>
<div class="item">Dictionary</div>
</aside>
<main>
<nav>
<span class="brand">VoiceTube</span>
<div class="navlinks"><span>Article</span><span>Team</span><span>Philosophy</span></div>
<div class="row"><span class="btno">Log in</span><span class="btnp">Join free</span></div>
</nav>
<div class="content">
<div class="h1">Connect. Have fun!</div>
<div class="h1sub">Where is the work that makes me serious? Learn English through video you actually want to watch.</div>
<div class="grid">
<div class="card"><div class="thumb th1"></div><div class="cbody"><span class="tag">Business</span><h4>Negotiation phrases used in real meetings</h4></div></div>
<div class="card"><div class="thumb th2"></div><div class="cbody"><span class="tag">Travel</span><h4>Ordering coffee like a local, five ways</h4></div></div>
<div class="card"><div class="thumb th3"></div><div class="cbody"><span class="tag">Tech</span><h4>How keynote speakers structure a demo</h4></div></div>
<div class="card"><div class="thumb th4"></div><div class="cbody"><span class="tag">Daily</span><h4>Small talk that doesn't feel forced</h4></div></div>
</div>
</div>
</main>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f0eb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f0eb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #767573; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #edebe9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f0eb; color: #000000;
border: 1px solid #edebe9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f2f0eb; color: #111111;
border: 1px solid #ceccc8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767573; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f1efeb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f0eb; color:rgba(0,0,0,.87); box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing:-.01em; }
* { box-sizing:border-box; }
nav { height:56px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:600; font-size:16px; color:#006241; }
.navlinks { display:flex; gap:22px; font-size:13px; }
.pill50 { border-radius:50px; padding:7px 16px; font-size:14px; font-weight:600; border:none; }
.pill50.dark { background:#000; color:#fff; }
.pill50.outline { background:transparent; border:1px solid rgba(0,0,0,.87); color:rgba(0,0,0,.87); }
.hero { display:grid; grid-template-columns:1fr 1.2fr; gap:20px; padding:22px 32px; align-items:center; }
.herophoto { height:160px; border-radius:16px; background:radial-gradient(circle at 40% 40%, #ffe3d0, #e07a4a 70%); position:relative; }
.herophoto::after { content:''; position:absolute; left:40%; top:15%; width:22%; height:70%; background:rgba(255,255,255,.35); border-radius:8px; }
.hero h1 { font-size:32px; font-weight:600; color:#006241; margin:0 0 8px; }
.hero p { font-size:14px; color:rgba(0,0,0,.58); margin:0 0 14px; max-width:340px; }
.greenband { background:#1E3932; color:#fff; padding:20px 32px; }
.sizes { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.sizeopt { text-align:center; }
.cup { width:22px; height:30px; margin:0 auto 6px; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5));
clip-path:polygon(15% 0%,85% 0%,100% 100%,0% 100%); }
.sizeopt.active .cup { outline:2px solid #00754A; outline-offset:3px; border-radius:2px; }
.sizeopt .nm { font-size:13px; font-weight:700; color:#c2ef4e; color:#fff; }
.sizeopt .oz { font-size:10.5px; color:rgba(255,255,255,.7); }
.rewardrow { display:flex; align-items:center; gap:10px; }
.goldpill { border:1px solid #cba258; color:#cba258; border-radius:50px; padding:4px 12px; font-size:12px; font-weight:700; }
.addorder { background:#00754A; color:#fff; border:none; border-radius:50px; padding:12px 26px; font-size:14px; font-weight:700; margin-left:auto; }
.giftgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:16px 32px; }
.gift { height:64px; border-radius:12px; box-shadow:0 0 6px rgba(0,0,0,.1); }
.g1 { background:linear-gradient(135deg,#ffd8a8,#ff922b); }
.g2 { background:linear-gradient(135deg,#c1fbd4,#2f9e44); }
.g3 { background:linear-gradient(135deg,#ffc9de,#e64980); }
.g4 { background:linear-gradient(135deg,#d0ebff,#1c7ed6); }
.frap { position:absolute; right:24px; bottom:56px; width:56px; height:56px; border-radius:50%; background:#00754A;
box-shadow:0 0 6px rgba(0,0,0,.24), 0 8px 12px rgba(0,0,0,.14); display:flex; align-items:center; justify-content:center; }
.frap::after { content:'☕'; font-size:22px; }
footer { background:#1E3932; color:rgba(255,255,255,.7); padding:12px 32px; display:flex; justify-content:space-between;
font-size:11px; position:relative; }
</style></head>
<body>
<div style="position:relative;">
<nav>
<div class="brand">Starbucks</div>
<div class="navlinks"><span>Menu</span><span>Rewards</span><span>Gift Cards</span></div>
<div style="display:flex;gap:8px;"><button class="pill50 outline">Sign in</button><button class="pill50 dark">Join now</button></div>
</nav>
<section class="hero">
<div class="herophoto"></div>
<div>
<h1>Pink Energy Drink</h1>
<p>Strawberry açaí, coconut milk, and a scoop of freeze-dried strawberries.</p>
<button class="pill50" style="background:#00754A;color:#fff;">Give them a try</button>
</div>
</section>
<section class="greenband">
<div class="sizes">
<div class="sizeopt"><div class="cup"></div><div class="nm">Tall</div><div class="oz">12 fl oz</div></div>
<div class="sizeopt active"><div class="cup"></div><div class="nm">Grande</div><div class="oz">16 fl oz</div></div>
<div class="sizeopt"><div class="cup"></div><div class="nm">Venti</div><div class="oz">24 fl oz</div></div>
<div class="sizeopt"><div class="cup"></div><div class="nm">Trenta</div><div class="oz">30 fl oz</div></div>
</div>
<div class="rewardrow">
<span class="goldpill">★ 200★ item</span>
<button class="addorder">Add to Order</button>
</div>
</section>
<section class="giftgrid">
<div class="gift g1"></div><div class="gift g2"></div><div class="gift g3"></div><div class="gift g4"></div>
</section>
<div class="frap"></div>
<footer>
<span>© Starbucks</span>
<span>Starbucks · Rewards · Careers · Legal</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #13bd7e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #13bd7e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fdcbf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #13bd7e; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #13bd7e; color: #000000;
border: 1px solid #37c691; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fdcbf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1eaf91; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.side { width:200px; flex:0 0 200px; background:#ffffff; border-right:1px solid #f0f2f5; padding:20px 0; }
.side .brand { padding:0 20px 18px; font-size:16px; font-weight:700; }
.navitem { padding:10px 20px; font-size:14px; color:#555c68; }
.navitem.active { color:#111111; font-weight:700; background:rgba(19,189,126,0.10);
border-left:3px solid #13bd7e; padding-left:17px; }
.main { flex:1; padding:22px 26px; overflow:hidden; display:flex; flex-direction:column; }
.toprow { display:flex; justify-content:space-between; align-items:flex-start; }
.greet { font-size:14px; color:#555c68; }
.balance { font-size:32px; font-weight:700; letter-spacing:-0.08px; margin-top:4px; }
.balance .unit { font-size:16px; font-weight:500; color:#555c68; }
.chip-row { display:flex; gap:8px; }
.chip { background:rgba(19,189,126,0.15); color:#13bd7e; border-radius:6px; padding:8px 12px;
font-size:13px; font-weight:500; }
.chip.off { background:#f0f2f5; color:#555c68; }
.cols { display:flex; gap:20px; margin-top:20px; flex:1; overflow:hidden; }
.donutwrap { width:230px; flex:0 0 230px; display:flex; flex-direction:column; align-items:center; }
.donut { width:150px; height:150px; border-radius:50%;
background: conic-gradient(#13bd7e 0deg 158deg, #06a96c 158deg 245deg, #9fa4b0 245deg 300deg, #f0f2f5 300deg 360deg);
display:flex; align-items:center; justify-content:center; margin:6px 0 14px; }
.donutcenter { width:96px; height:96px; border-radius:50%; background:#ffffff; display:flex;
flex-direction:column; align-items:center; justify-content:center; }
.donutcenter .n { font-size:18px; font-weight:700; }
.donutcenter .l { font-size:11px; color:#9fa4b0; }
.legend { width:100%; font-size:12px; }
.legend .li { display:flex; align-items:center; gap:8px; padding:4px 0; }
.legend .sw { width:8px; height:8px; border-radius:50%; }
.legend .lbl { flex:1; color:#555c68; }
.legend .amt { font-weight:600; }
.accounts { flex:1; min-width:0; display:flex; flex-direction:column; }
.sectitle { font-size:16px; font-weight:700; margin-bottom:10px; }
.acct { display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid #f0f2f5; }
.acct:first-of-type { border-top:none; }
.icon { width:40px; height:40px; border-radius:24px; flex:0 0 40px; }
.ic1 { background:linear-gradient(135deg,#13bd7e,#06a96c); }
.ic2 { background:linear-gradient(135deg,#555c68,#111111); }
.ic3 { background:linear-gradient(135deg,#9fa4b0,#555c68); }
.acctinfo { flex:1; min-width:0; }
.acctinfo .nm { font-size:14px; font-weight:700; }
.acctinfo .sub { font-size:12px; color:#9fa4b0; margin-top:2px; }
.acctamt { font-size:15px; font-weight:700; }
.cta { margin-top:auto; width:100%; height:56px; border-radius:16px; border:none;
background:#06a96c; color:#ffffff; font-size:16px; font-weight:700; }
</style></head>
<body>
<div class="app">
<div class="side">
<div class="brand">Banksalad</div>
<div class="navitem active">Assets</div>
<div class="navitem">Cards</div>
<div class="navitem">Loans</div>
<div class="navitem">Insurance</div>
<div class="navitem">Credit score</div>
<div class="navitem">Safety center</div>
</div>
<div class="main">
<div class="toprow">
<div>
<div class="greet">Total net asset</div>
<div class="balance">32,480,200 <span class="unit">won</span></div>
</div>
<div class="chip-row">
<div class="chip">This month +2.4%</div>
<div class="chip off">Compare products</div>
</div>
</div>
<div class="cols">
<div class="donutwrap">
<div class="donut"><div class="donutcenter"><div class="n">6</div><div class="l">accounts</div></div></div>
<div class="legend">
<div class="li"><span class="sw" style="background:#13bd7e"></span><span class="lbl">Savings</span><span class="amt">44%</span></div>
<div class="li"><span class="sw" style="background:#06a96c"></span><span class="lbl">Investment</span><span class="amt">24%</span></div>
<div class="li"><span class="sw" style="background:#9fa4b0"></span><span class="lbl">Pension</span><span class="amt">15%</span></div>
<div class="li"><span class="sw" style="background:#f0f2f5"></span><span class="lbl">Card debt</span><span class="amt">17%</span></div>
</div>
</div>
<div class="accounts">
<div class="sectitle">Linked accounts</div>
<div class="acct">
<div class="icon ic1"></div>
<div class="acctinfo"><div class="nm">Everyday Savings</div><div class="sub">Woori Bank · updated 3m ago</div></div>
<div class="acctamt">14,200,000</div>
</div>
<div class="acct">
<div class="icon ic2"></div>
<div class="acctinfo"><div class="nm">Growth Fund A</div><div class="sub">Mirae Asset · updated 1h ago</div></div>
<div class="acctamt">7,850,000</div>
</div>
<div class="acct">
<div class="icon ic3"></div>
<div class="acctinfo"><div class="nm">Retirement Pension</div><div class="sub">Samsung Life · updated today</div></div>
<div class="acctamt">4,870,200</div>
</div>
<button class="cta">Compare a lower interest rate</button>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #6b53cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #6b53cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b7ace3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7231c6; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6b53cc; color: #ffffff;
border: 1px solid #7231c6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #6b53cc; color: #f5f5f5;
border: 1px solid #816dd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b7ace3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6c4ecb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:'Poppins', 'Roboto', -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; border-bottom:1px solid #e5e0df; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:20px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; }
.navlinks span:first-child { color:#6b53cc; border-bottom:3px solid #6b53cc; padding-bottom:20px; border-radius:9999px 9999px 0 0; }
.search { width:150px; height:34px; background:#f2f2f2; border-radius:9999px; font-size:12px; color:#9e9e9e;
display:flex; align-items:center; padding-left:16px; }
.hero { background:#222222; padding:28px 40px; display:flex; align-items:center; gap:32px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:linear-gradient(to right, rgba(107,83,204,0.35), transparent 65%); }
.hero-copy { flex:1.2; position:relative; z-index:1; }
.hero h1 { color:#fff; font-size:32px; font-weight:700; line-height:1.15; letter-spacing:-0.4px; margin:0 0 10px; max-width:420px; }
.hero p { color:#d8d3f2; font-size:14px; margin:0 0 16px; max-width:380px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-primary { background:#6b53cc; color:#fff; border:none; border-radius:8px; padding:14px 26px; font-size:14px; font-weight:600; height:48px; }
.btn-accent { background:#e94b20; color:#fff; border:none; border-radius:8px; padding:14px 26px; font-size:14px; font-weight:600; height:48px; }
.hero-visual { flex:1; height:150px; border-radius:12px; position:relative; z-index:1; overflow:hidden;
background:linear-gradient(135deg,#492582,#b27aff); }
.hero-visual::before { content:''; position:absolute; width:80px; height:100px; border-radius:6px; background:#1a1a1a; left:36px; top:16px; }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:20px; font-weight:600; margin:0; }
.sec-head span { font-size:13px; color:#6b53cc; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border-radius:8px; padding:14px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.thumb { aspect-ratio:4/3; background:#f2f2f2; border-radius:4px; position:relative; margin-bottom:10px; }
.t1::after { content:''; position:absolute; inset:20%; background:linear-gradient(150deg,#6b53cc,#492582); border-radius:4px; }
.t2::after { content:''; position:absolute; inset:20%; background:linear-gradient(150deg,#cdb889,#e7d7b5); border-radius:4px; }
.t3::after { content:''; position:absolute; inset:20%; background:linear-gradient(150deg,#e94b20,#ba3c1a); border-radius:4px; }
.badge { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
padding:4px 10px; border-radius:4px; color:#fff; z-index:2; }
.badge.p { background:#6b53cc; }
.badge.g { background:#cdb889; color:#222; }
.chip { display:inline-block; background:#e6e6f2; color:#492582; font-size:11px; padding:4px 10px; border-radius:9999px; margin-bottom:6px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 4px; }
.price { font-size:20px; font-weight:700; margin:0; }
footer { background:#222222; color:#9e9e9e; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#9e9e9e; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Benq</p>
<div class="navlinks"><span>Monitors</span><span>Projectors</span><span>ScreenBar</span><span>Speakers</span></div>
<div class="search">Search…</div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Color that means something</h1>
<p>Pantone Validated monitors and studio-grade lighting, built for creators who see the difference.</p>
<div class="row"><button class="btn-primary">Shop Monitors</button><button class="btn-accent">Buy Now</button></div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Featured Products</h2><span>View all →</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge p">HDRi</span></div>
<div class="chip">Delta E<2</div>
<h3>PD2725U Designer Monitor</h3>
<p class="price">$899</p>
</div>
<div class="card">
<div class="thumb t2"><span class="badge g">Premium</span></div>
<div class="chip">Eye-Care</div>
<h3>ScreenBar Halo</h3>
<p class="price">$129</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="chip">4K HDR</div>
<h3>TK700STi Projector</h3>
<p class="price">$1,299</p>
</div>
</div>
</section>
<footer>
<span>© Benq</span>
<div><a href="#">Support</a><a href="#">Warranty</a><a href="#">Company</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f3336; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #2f3336; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #080809; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#E7E9EA; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { width:100%; height:100%; display:flex; flex-direction:column; position:relative; }
.topnav { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; flex-shrink:0; }
.avatar-sm { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#1D9BF0,#00BA7C); }
.xlogo { font-size:22px; font-weight:800; color:#FFFFFF; }
.grok { width:24px; height:24px; }
.filterbar { height:44px; display:flex; align-items:stretch; padding:0 16px; flex-shrink:0; }
.ftab { flex:0 0 auto; margin-right:28px; display:flex; align-items:center; font-size:15px; font-weight:700; color:#71767B; position:relative; }
.ftab.active { color:#E7E9EA; }
.ftab.active::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:#1D9BF0; border-radius:3px; }
.feed { flex:1; min-height:0; overflow:hidden; }
.post { display:flex; padding:11px 16px; border-bottom:1px solid #2F3336; }
.post .av { width:32px; height:32px; border-radius:50%; flex-shrink:0; }
.av1 { background:linear-gradient(135deg,#7856FF,#1D9BF0); }
.av2 { background:linear-gradient(135deg,#00BA7C,#1D9BF0); }
.av3 { background:linear-gradient(135deg,#F91880,#7856FF); }
.pbody { margin-left:12px; flex:1; min-width:0; }
.prow { display:flex; align-items:center; gap:4px; }
.pname { font-size:15px; font-weight:700; color:#E7E9EA; }
.pverify { width:15px; height:15px; border-radius:50%; background:#1D9BF0; display:inline-flex; align-items:center; justify-content:center; }
.pverify svg { width:9px; height:9px; }
.phandle { font-size:15px; color:#71767B; margin-left:2px; }
.pmore { margin-left:auto; color:#71767B; font-size:15px; }
.ptext { font-size:15px; line-height:1.33; color:#E7E9EA; margin-top:2px; }
.ptext .link { color:#1D9BF0; }
.actions { display:flex; align-items:center; gap:0; margin-top:8px; max-width:420px; justify-content:space-between; }
.act { display:flex; align-items:center; gap:6px; color:#71767B; font-size:13px; }
.act svg { width:17px; height:17px; }
.act.reply:hover, .act.reply.on { color:#1D9BF0; }
.act.repost.on { color:#00BA7C; }
.act.like.on { color:#F91880; }
.tabbar { height:49px; display:flex; align-items:center; justify-content:space-around; border-top:1px solid #2F3336; flex-shrink:0; background:rgba(0,0,0,0.85); }
.tabbar svg { width:26px; height:26px; }
.tab.active svg { color:#E7E9EA; }
.tab svg { color:#71767B; }
.fab { position:absolute; right:16px; bottom:65px; width:56px; height:56px; border-radius:50%; background:#FFFFFF;
display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.fab svg { width:24px; height:24px; }
</style></head>
<body>
<div class="wrap">
<div class="topnav">
<div class="avatar-sm"></div>
<p class="xlogo">X (Twitter) (iOS)</p>
<svg class="grok" viewBox="0 0 24 24" fill="none" stroke="#E7E9EA" stroke-width="1.6"><path d="M12 3l2.2 5.8L20 11l-5.8 2.2L12 19l-2.2-5.8L4 11l5.8-2.2z"/></svg>
</div>
<div class="filterbar">
<div class="ftab active">For you</div>
<div class="ftab">Following</div>
</div>
<div class="feed">
<div class="post">
<div class="av av1"></div>
<div class="pbody">
<div class="prow">
<span class="pname">Nova Reyes</span>
<span class="pverify"><svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16l-4-4 1.4-1.4L9 13.2l8.6-8.6L19 6z"/></svg></span>
<span class="phandle">@novareyes · 2h</span>
<span class="pmore">…</span>
</div>
<div class="ptext">Shipped the new onboarding flow tonight — three fewer taps to first value. Numbers already trending the right way. <span class="link">#buildinpublic</span></div>
<div class="actions">
<div class="act reply"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12c0 4-4 7-9 7-1.2 0-2.4-.2-3.4-.6L4 20l1.3-3.9C4.5 15 4 13.6 4 12c0-4 4-7 9-7s9 3 9 7z"/></svg><span>128</span></div>
<div class="act repost on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 7h10v4l4-5-4-5v4H5v7h2zM17 17H7v-4l-4 5 4 5v-4h12v-7h-2z"/></svg><span>342</span></div>
<div class="act like on"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-7-4.6-9.6-8.9C.6 8.7 2 5 5.4 5c1.9 0 3.3 1 4.6 2.7C11.3 6 12.7 5 14.6 5 18 5 19.4 8.7 21.6 12.1 19 16.4 12 21 12 21z"/></svg><span>2.1K</span></div>
<div class="act views"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 17l5-5 4 4 8-9"/></svg><span>84.2K</span></div>
<div class="act share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12M7 8l5-5 5 5M5 15v4h14v-4"/></svg></div>
</div>
</div>
</div>
<div class="post">
<div class="av av2"></div>
<div class="pbody">
<div class="prow">
<span class="pname">Marcus Lin</span>
<span class="phandle">@marcuslin · 5h</span>
<span class="pmore">…</span>
</div>
<div class="ptext">Hot take: the best roadmap review is the one where nobody talks about the roadmap.</div>
<div class="actions">
<div class="act reply"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12c0 4-4 7-9 7-1.2 0-2.4-.2-3.4-.6L4 20l1.3-3.9C4.5 15 4 13.6 4 12c0-4 4-7 9-7s9 3 9 7z"/></svg><span>19</span></div>
<div class="act repost"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 7h10v4l4-5-4-5v4H5v7h2zM17 17H7v-4l-4 5 4 5v-4h12v-7h-2z"/></svg><span>44</span></div>
<div class="act like"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-4.6-9.6-8.9C.6 8.7 2 5 5.4 5c1.9 0 3.3 1 4.6 2.7C11.3 6 12.7 5 14.6 5 18 5 19.4 8.7 21.6 12.1 19 16.4 12 21 12 21z"/></svg><span>560</span></div>
<div class="act views"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 17l5-5 4 4 8-9"/></svg><span>32.9K</span></div>
<div class="act share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12M7 8l5-5 5 5M5 15v4h14v-4"/></svg></div>
</div>
</div>
</div>
<div class="post">
<div class="av av3"></div>
<div class="pbody">
<div class="prow">
<span class="pname">Priya Shah</span>
<span class="pverify"><svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16l-4-4 1.4-1.4L9 13.2l8.6-8.6L19 6z"/></svg></span>
<span class="phandle">@priyashah · 9h</span>
<span class="pmore">…</span>
</div>
<div class="ptext">Reminder that "move fast" and "break things you can't undo" are not the same instruction.</div>
<div class="actions">
<div class="act reply"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12c0 4-4 7-9 7-1.2 0-2.4-.2-3.4-.6L4 20l1.3-3.9C4.5 15 4 13.6 4 12c0-4 4-7 9-7s9 3 9 7z"/></svg><span>7</span></div>
<div class="act repost"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 7h10v4l4-5-4-5v4H5v7h2zM17 17H7v-4l-4 5 4 5v-4h12v-7h-2z"/></svg><span>12</span></div>
<div class="act like"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-4.6-9.6-8.9C.6 8.7 2 5 5.4 5c1.9 0 3.3 1 4.6 2.7C11.3 6 12.7 5 14.6 5 18 5 19.4 8.7 21.6 12.1 19 16.4 12 21 12 21z"/></svg><span>210</span></div>
<div class="act views"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 17l5-5 4 4 8-9"/></svg><span>18.4K</span></div>
<div class="act share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12M7 8l5-5 5 5M5 15v4h14v-4"/></svg></div>
</div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/></svg></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="8" cy="10" r="3"/><circle cx="16" cy="10" r="3"/><path d="M3 19c0-3 2.5-5 5-5s5 2 5 5M11 19c0-3 2.5-5 5-5s5 2 5 5"/></svg></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v12H8l-4 4z"/></svg></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 5h16v13l-4-3H4z"/></svg></div>
</div>
<div class="fab"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2"><path d="M4 20l1-5 11-11 4 4-11 11-5 1z"/></svg></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.75; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.67; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #76b900; color: #000000;
border: none; border-radius: 2px; padding: 11px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: transparent; color: #000000;
border: 1px solid #76b900; border-radius: 2px;
padding: 11px 13px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.43; background: #f7f7f7; color: #1a1a1a;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 두 표면 모드: 블랙 히어로/풋터 + 화이트 본문, 연결고리는 단 하나의 채도 —
NVIDIA 그린. 2px 라운드, 그림자 없음, 코너 사각형이 유일한 장식. */
.hero { background:#000000; height:210px; position:relative; padding:0 40px; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:12px; color:rgba(255,255,255,0.75); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; }
.btn { background:#76b900; color:#000; border:none; border-radius:2px; padding:9px 20px; font-weight:700; font-size:12px; }
.herocopy { padding-top:20px; }
.herocopy .eyebrow { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#76b900; }
.herocopy h1 { font-size:44px; font-weight:700; letter-spacing:0; margin:8px 0 0; color:#fff; max-width:560px; line-height:1.15; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#cccccc; padding:0 40px; margin-top:26px; }
.cell { background:#fff; padding:20px; position:relative; }
.cell::before { content:''; position:absolute; top:12px; right:12px; width:10px; height:10px; background:#76b900; }
.cell .k { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#898989; }
.cell h4 { font-size:18px; font-weight:700; margin:8px 0 6px; color:#000; }
.cell p { font-size:12px; color:#757575; margin:0; line-height:1.5; }
.cell .link { display:inline-block; margin-top:10px; font-size:12px; font-weight:700; color:#0046a4; }
footer { background:#000; padding:16px 40px; display:flex; justify-content:space-between; align-items:center;
font-size:11px; color:rgba(255,255,255,0.7); margin-top:26px; }
</style></head>
<body>
<div class="hero">
<nav>
<p class="brand">NVIDIA</p>
<div class="navlinks"><span>AI</span><span>Gaming</span><span>Data Center</span><span>Developer</span></div>
<button class="btn">Get started</button>
</nav>
<div class="herocopy">
<span class="eyebrow">Accelerated computing</span>
<h1>Engineering the platform for AI</h1>
</div>
</div>
<div class="grid">
<div class="cell"><span class="k">Platform</span><h4>CUDA-X</h4><p>Libraries and frameworks for every domain, from HPC to generative AI.</p><span class="link">Explore →</span></div>
<div class="cell"><span class="k">Hardware</span><h4>Blackwell</h4><p>The architecture powering the next generation of AI factories.</p><span class="link">Explore →</span></div>
<div class="cell"><span class="k">Developer</span><h4>NIM Microservices</h4><p>Deploy optimized inference containers in minutes, not weeks.</p><span class="link">Explore →</span></div>
</div>
<footer>
<span>© NVIDIA Corporation</span>
<span>AI · Gaming · Data Center · Developer</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #161616;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #161616;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #161616; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; margin: 0; color: #525252; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; background: #0f62fe; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; background: #161616; color: #ffffff;
border: 1px solid #0f62fe; border-radius: 0px;
padding: 12px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.16px; background: #f4f4f4; color: #161616;
border: 1px solid #c5c5c5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #525252; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dde9ff; color: #0f62fe;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#161616; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.utilbar { height:28px; background:#f4f4f4; color:#525252; font-size:11px; display:flex; align-items:center;
padding:0 32px; letter-spacing:0.16px; }
nav { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e0e0e0; }
.brand { font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-size:13px; letter-spacing:0.16px; }
.btn-blue { background:#0f62fe; color:#fff; border:none; border-radius:0; padding:11px 16px; font-size:13px;
letter-spacing:0.16px; }
.hero { padding:26px 32px 18px; border-bottom:1px solid #e0e0e0; }
.hero h1 { font-weight:300; font-size:48px; line-height:1.18; letter-spacing:-0.4px; margin:0 0 10px; max-width:620px; }
.hero p { font-size:16px; color:#525252; margin:0 0 14px; letter-spacing:0.16px; max-width:480px; }
.btn-row { display:flex; gap:0; }
.btn-secondary { background:#161616; color:#fff; border:none; padding:11px 16px; font-size:13px; letter-spacing:0.16px; }
.cardgrid { display:grid; grid-template-columns:repeat(4,1fr); }
.card { border-right:1px solid #e0e0e0; padding:20px 20px; }
.card:last-child { border-right:none; }
.card .eyebrow { font-size:13px; color:#525252; letter-spacing:0.16px; margin-bottom:8px; }
.card h3 { font-size:19px; font-weight:400; line-height:1.25; margin:0 0 8px; }
.card p { font-size:13px; color:#525252; line-height:1.35; margin:0; letter-spacing:0.16px; }
.ctabanner { background:#0f62fe; color:#fff; padding:22px 32px; display:flex; align-items:center;
justify-content:space-between; margin-top:auto; }
.ctabanner h2 { font-size:24px; font-weight:400; margin:0; }
.btn-white { background:#fff; color:#0f62fe; border:none; padding:11px 16px; font-size:13px; letter-spacing:0.16px; }
footer { background:#161616; color:#c6c6c6; padding:12px 32px; display:flex; justify-content:space-between;
font-size:12px; letter-spacing:0.16px; }
</style></head>
<body>
<div class="utilbar">United States | ibm.com</div>
<nav>
<span class="brand">IBM</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Consulting</span><span>Support</span></div>
<button class="btn-blue">Contact sales</button>
</nav>
<div class="hero">
<h1>AI built for business.</h1>
<p>Deploy trusted AI across your enterprise with watsonx and hybrid cloud.</p>
<div class="btn-row"><button class="btn-blue">Learn more</button><button class="btn-secondary">Watch the keynote</button></div>
</div>
<div class="cardgrid">
<div class="card"><div class="eyebrow">AI</div><h3>watsonx</h3><p>Train, tune, and deploy AI models across your business.</p></div>
<div class="card"><div class="eyebrow">Cloud</div><h3>Hybrid cloud</h3><p>Build once, deploy anywhere with Red Hat OpenShift.</p></div>
<div class="card"><div class="eyebrow">Consulting</div><h3>IBM Consulting</h3><p>Strategy and technology expertise for enterprise transformation.</p></div>
<div class="card"><div class="eyebrow">Infrastructure</div><h3>Z and Power</h3><p>Mission-critical infrastructure for the world's biggest workloads.</p></div>
</div>
<div class="ctabanner">
<h2>Ready to see what AI can do for your business?</h2>
<button class="btn-white">Get started</button>
</div>
<footer>
<span>© IBM</span>
<span>IBM · Products · Solutions · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #061232; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #061232; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #898f9d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a82dd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #061232; color: #3a82dd;
border: 1px solid #3a82dd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #061232; color: #f5f5f5;
border: 1px solid #2c3651; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #898f9d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e244d; color: #3a82dd;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>iKala</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#525151; box-sizing:border-box;
font-family:"Noto Sans TC","Noto Sans",-apple-system,BlinkMacSystemFont,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; border-bottom:1px solid #edf1f7; }
.brand { font-size:20px; font-weight:800; letter-spacing:-0.5px; color:#061232; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:700; }
.navlinks span { color:#333333; }
.navlinks span.active { color:#3a82dd; }
.btn-navy { background:#061232; color:#ffffff; border:none; border-radius:8px; height:36px;
padding:0 18px; font-size:14px; font-weight:500; box-shadow:none; white-space:nowrap; }
.hero { background:radial-gradient(120% 160% at 20% 20%,#0a1c47 0%,#061232 55%,#031234 100%);
padding:36px 40px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#3a82dd; margin:0; }
.hero h1 { font-size:40px; font-weight:800; line-height:1.14; letter-spacing:-1.2px; color:#ffffff;
margin:10px 0 0; max-width:600px; }
.hero p { font-size:16px; font-weight:400; line-height:1.5; color:rgba(255,255,255,0.72);
margin:12px 0 0; max-width:480px; }
.hero-cta { display:flex; align-items:center; gap:20px; margin-top:20px; }
.btn-ghost { background:#ffffff; color:#061232; border:none; border-radius:8px; height:40px;
padding:0 20px; font-size:15px; font-weight:500; box-shadow:none; white-space:nowrap; }
.link-ondark { color:#ffffff; font-size:14px; opacity:0.85; }
.section-title { text-align:center; font-size:20px; font-weight:600; color:#333333; letter-spacing:-0.4px;
margin:22px 0 16px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px 20px; }
.card { background:#ffffff; border:1px solid #edf1f7; border-radius:8px; padding:16px;
box-shadow:rgba(0,0,0,0.04) 0px 0px 10px 0px; }
.icon-swatch { width:32px; height:32px; border-radius:8px; background:#edf1f7; position:relative; }
.icon-swatch::after { content:''; position:absolute; width:12px; height:12px; border-radius:4px;
background:#3a82dd; top:10px; left:10px; }
.card h3 { font-size:14px; font-weight:600; letter-spacing:-0.3px; color:#333333; margin:10px 0 0; }
.card p { font-size:12px; line-height:1.4; color:#525151; margin:6px 0 0; }
.chip { display:inline-block; margin-top:10px; background:#ffffff; border:1px solid #edf1f7; border-radius:30px;
padding:3px 10px; font-size:11px; font-weight:500; color:#3a82dd; }
footer { height:40px; border-top:1px solid #edf1f7; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
footer span { font-size:11px; color:#6b7280; }
</style></head>
<body>
<nav>
<p class="brand">iKala</p>
<div class="navlinks">
<span class="active">Solutions</span><span>Industries</span><span>Resources</span><span>About</span>
</div>
<button class="btn-navy">Contact</button>
</nav>
<section class="hero">
<p class="eyebrow">AI Transformation Platform</p>
<h1>Data → Intelligence → Impact</h1>
<p>Total AI transformation solutions and services for manufacturing, retail, and finance.</p>
<div class="hero-cta">
<button class="btn-ghost">Try it Now</button>
<span class="link-ondark">Get in Touch →</span>
</div>
</section>
<p class="section-title">Built for every industry</p>
<div class="cards">
<div class="card">
<div class="icon-swatch"></div>
<h3>Manufacturing</h3>
<p>Operational intelligence for the factory floor, from forecasting to quality control.</p>
<span class="chip">Case Study →</span>
</div>
<div class="card">
<div class="icon-swatch"></div>
<h3>Retail</h3>
<p>AI-driven demand planning and customer insight across every channel.</p>
<span class="chip">Case Study →</span>
</div>
<div class="card">
<div class="icon-swatch"></div>
<h3>Finance</h3>
<p>Risk and compliance automation built for regulated APAC institutions.</p>
<span class="chip">Case Study →</span>
</div>
</div>
<footer>
<span>© iKala</span>
<span>Privacy · Terms · Contact</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181818; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: 1px solid #181818; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1a1a1a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181818; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #dfe0e2; background:#ffffff; }
.brand { font-size:17px; font-weight:600; letter-spacing:-0.3px; color:#1a1a1a; }
.navlinks { display:flex; gap:28px; }
.navlinks span { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; color:#1a1a1a; }
.navlinks span.on { border-bottom:2px solid #1a1a1a; padding-bottom:16px; }
.cta-map { background:#000000; color:#fff; border-radius:20px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { position:relative; height:230px; display:flex; align-items:flex-end; padding:24px 40px;
background:linear-gradient(135deg,#e7ded0 0%,#cfc2ab 45%,#b7a385 100%); }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%); }
.hero-inner { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; width:100%; }
.hero h1 { color:#fff; font-size:26px; font-weight:600; margin:0 0 4px; letter-spacing:-0.4px; }
.hero p { color:rgba(255,255,255,0.85); font-size:13px; margin:0; }
.pills { display:flex; gap:8px; }
.pill { background:#fff; border:1px solid #dfe0e2; border-radius:100px; height:36px; padding:0 16px;
display:flex; align-items:center; font-size:12px; color:#181818; box-shadow:rgba(0,0,0,0.08) 0px 4px 8px; }
.pill.active { font-weight:600; }
.section-head { padding:20px 40px 8px; display:flex; justify-content:space-between; align-items:baseline; }
.section-head h2 { font-size:19px; font-weight:600; letter-spacing:-0.4px; color:#171719; margin:0; }
.section-head span { font-size:12px; color:#6b6b6e; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0 40px; }
.card { background:#fff; }
.thumb { height:110px; }
.t1 { background:linear-gradient(160deg,#a9c7b4,#4f6f5a); }
.t2 { background:linear-gradient(160deg,#d9c3a5,#8a6b48); }
.t3 { background:linear-gradient(160deg,#c9d3da,#5a7080); }
.t4 { background:linear-gradient(160deg,#e0cfd6,#9a7683); }
.card h3 { font-size:14px; font-weight:600; color:#333333; margin:8px 0 2px; letter-spacing:-0.1px; }
.card p { font-size:11px; color:#6b6b6e; margin:0 8px 0 0; }
.card .row { padding-right:6px; }
.promo { margin:16px 40px 0; background:#017bc6; color:#fff; border-radius:0; padding:12px 16px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; }
.promo b { font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #dfe0e2; padding:12px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#979799; background:#fff; }
</style></head>
<body>
<nav>
<div class="brand">Stayfolio</div>
<div class="navlinks"><span class="on">Find Stay</span><span>Promotion</span><span>Journal</span><span>Pre-order</span></div>
<div class="cta-map">Map</div>
</nav>
<div class="hero">
<div class="hero-inner">
<div>
<h1>When the rain deepens the scent of the mountains</h1>
<p>Set out for a forest stay</p>
</div>
<div class="pills">
<div class="pill active">Domestic</div>
<div class="pill">Overseas</div>
</div>
</div>
</div>
<div class="section-head"><h2>Editor's Picks This Week</h2><span>See all</span></div>
<div class="cards">
<div class="card"><div class="thumb t1"></div><div class="row"><h3>Amber Pure Hill</h3><p>Yangpyeong, Gyeonggi</p></div></div>
<div class="card"><div class="thumb t2"></div><div class="row"><h3>Villa Mardi</h3><p>Jeju Island</p></div></div>
<div class="card"><div class="thumb t3"></div><div class="row"><h3>Chwiho House</h3><p>Gangneung, Gangwon</p></div></div>
<div class="card"><div class="thumb t4"></div><div class="row"><h3>Forest Pine Lodge</h3><p>Hongcheon, Gangwon</p></div></div>
</div>
<div class="promo"><span>Overseas stays are open for booking now — <b>go take a look</b></span><span>→</span></div>
<footer><span>© Stayfolio</span><span>Stayfolio · Journal · Pre-order · Company</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; color: #62625b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; background: #e60023; color: #ffffff;
border: none; border-radius: 16px; padding: 6px 14px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; background: #e5e5e0; color: #000000;
border: 1px solid #e60023; border-radius: 16px;
padding: 6px 14px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 16px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #62625b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; background: #f6f6f3; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbf9; color:#211922; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:700; color:#e60023; margin:0; }
.navlinks { display:flex; gap:10px; }
.navlinks span { background:#e5e5e0; border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; color:#211922; }
.navlinks span.on { background:#211922; color:#fff; }
.btn-red { background:#e60023; color:#fff; border:none; border-radius:999px; padding:9px 20px; font-weight:700; font-size:13px; }
.headline { text-align:center; padding:8px 40px 18px; }
.headline h1 { font-size:40px; font-weight:600; letter-spacing:-1px; margin:0; }
.headline p { font-size:13px; color:#62625b; margin:6px 0 0; }
/* 핀터레스트의 진짜 신원: 컬럼 기반 매서너리 핀 그리드 — 사진 대신 CSS 그라디언트 타일로
정사각/세로/가로 3종 비율을 섞는다. 16px 라운드, 8px 갭. */
.masonry { columns:5; column-gap:8px; padding:0 40px 20px; }
.pin { break-inside:avoid; margin-bottom:8px; border-radius:16px; position:relative; overflow:hidden; }
.pin .save { position:absolute; top:8px; right:8px; background:#e60023; color:#fff; font-size:10px; font-weight:700;
border-radius:999px; padding:4px 10px; }
.p1 { height:150px; background:linear-gradient(160deg,#ffd8f4,#e60023); }
.p2 { height:100px; background:linear-gradient(160deg,#c8c8c1,#62625b); }
.p3 { height:180px; background:linear-gradient(160deg,#7e238b,#211922); }
.p4 { height:120px; background:linear-gradient(160deg,#fde0f0,#91918c); }
.p5 { height:90px; background:linear-gradient(160deg,#e5e5e0,#c8c8c1); }
.p6 { height:160px; background:linear-gradient(160deg,#e60023,#620006); }
.p7 { height:110px; background:linear-gradient(160deg,#dadad3,#91918c); }
.p8 { height:140px; background:linear-gradient(160deg,#6845ab,#211922); }
.p9 { height:95px; background:linear-gradient(160deg,#f6f6f3,#c8c8c1); }
.p10 { height:170px; background:linear-gradient(160deg,#ffb0dd,#7e238b); }
</style></head>
<body>
<nav>
<p class="brand">Pinterest</p>
<div class="navlinks"><span class="on">Home</span><span>Explore</span><span>Create</span></div>
<button class="btn-red">Sign up</button>
</nav>
<div class="headline">
<h1>Get your next idea</h1>
<p>Millions of ideas to explore, save, and try.</p>
</div>
<div class="masonry">
<div class="pin p1"><span class="save">Save</span></div>
<div class="pin p6"><span class="save">Save</span></div>
<div class="pin p2"></div>
<div class="pin p7"></div>
<div class="pin p3"><span class="save">Save</span></div>
<div class="pin p8"><span class="save">Save</span></div>
<div class="pin p4"></div>
<div class="pin p9"></div>
<div class="pin p5"></div>
<div class="pin p10"><span class="save">Save</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5a5a5d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #d9aa4d; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #fafafa; color: #232323;
border: 1px solid #d9aa4d; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #fafafa; color: #232323;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a5d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d9aa4d; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#fafafa; color:#232323; box-sizing:border-box; font-family:'Proxima Nova Rg',-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#232323; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:700; color:#fff; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#fff; }
.navlinks span.active { color:#d9aa4d; }
.gold-btn { background:#d9aa4d; color:#fff; border:none; border-radius:8px; padding:10px 22px; font-size:13px; font-weight:600; }
.main { display:flex; gap:24px; padding:24px 32px; height:456px; }
.gallery { width:400px; background:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; }
.ball { width:180px; height:180px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#3a3a3a,#232323); position:relative; }
.ball::before { content:''; position:absolute; inset:0; border-radius:50%;
background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(217,170,77,0.5) 18px 20px); mask:radial-gradient(circle,#000 70%,transparent 71%); }
.badge-custom { position:absolute; top:16px; left:16px; background:#1f2937; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:26px; font-weight:600; margin:0; letter-spacing:-0.3px; }
.stars { color:#f59e0b; font-size:12px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:24px; font-weight:700; }
.price-sale { color:#e22120; }
.price-old { color:#5c5c5c; text-decoration:line-through; font-size:13px; }
.desc { font-size:13px; line-height:1.55; color:#5c5c5c; max-width:440px; }
.size-row { display:flex; gap:8px; margin-top:4px; }
.size-chip { width:40px; height:40px; border:1px solid #dcdcdc; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.size-chip.sel { background:#232323; color:#fff; border-color:#232323; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-cart { flex:1; height:48px; background:#232323; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:15px; }
.btn-outline { flex:1; height:48px; background:transparent; color:#232323; border:2px solid #232323; border-radius:8px; font-weight:600; font-size:15px; }
.spec-strip { display:flex; gap:0; padding:0 32px; }
.spec-item { flex:1; text-align:center; padding:12px 0; border-right:1px solid #dcdcdc; }
.spec-item:last-child { border-right:none; }
.spec-item b { display:block; font-size:18px; font-weight:700; }
.spec-item span { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:#5a5a5d; }
</style></head>
<body>
<nav>
<p class="brand">Baden Sports</p>
<div class="navlinks"><span class="active">Basketballs</span><span>Volleyballs</span><span>Team Gear</span><span>Custom</span></div>
<button class="gold-btn">Customize</button>
</nav>
<div class="main">
<div class="gallery">
<div class="badge-custom">Custom</div>
<div class="ball"></div>
</div>
<div class="info">
<h1>Elite Championship Basketball</h1>
<div class="stars">★★★★★ 4.9 (860 reviews)</div>
<div class="price-row">
<span class="price price-sale">$64.99</span>
<span class="price-old">$79.99</span>
</div>
<p class="desc">Official size and weight, moisture-wicking composite leather cover, and deep channel design for a consistent grip and true bounce — trusted by coaches and athletic directors nationwide.</p>
<div class="size-row">
<div class="size-chip sel">29.5"</div>
<div class="size-chip">28.5"</div>
<div class="size-chip">27.5"</div>
</div>
<div class="btn-row">
<button class="btn-cart">Add to Cart</button>
<button class="btn-outline">Bulk Order</button>
</div>
</div>
</div>
<div class="spec-strip">
<div class="spec-item"><b>29.5"</b><span>Official Size</span></div>
<div class="spec-item"><b>22oz</b><span>Weight</span></div>
<div class="spec-item"><b>8-Panel</b><span>Construction</span></div>
<div class="spec-item"><b>2-Yr</b><span>Warranty</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #108910; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #108910; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8ec48e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003d29; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #108910; color: #003d29;
border: 1px solid #003d29; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #108910; color: #f5f5f5;
border: 1px solid #359a35; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8ec48e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d7d14; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#242529; box-sizing:border-box;
font-family:"Instacart Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav.top { flex:0 0 60px; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; }
.logo { font-size:20px; font-weight:600; color:#108910; margin:0; letter-spacing:-0.2px; }
.navactions { display:flex; align-items:center; gap:12px; }
.btn-outline { background:#ffffff; color:#242529; border:1px solid #C7C8CD; border-radius:20px;
height:40px; padding:0 16px; font-size:16px; font-weight:400; white-space:nowrap; }
.btn-green { background:#108910; color:#ffffff; border:none; border-radius:20px;
height:40px; padding:0 16px; font-size:16px; font-weight:400; white-space:nowrap; }
.hero { flex:0 0 auto; padding:16px 40px 14px; display:flex; flex-direction:column; align-items:center;
text-align:center; gap:12px; }
.hero h1 { margin:0; font-size:26px; font-weight:600; line-height:1.25; color:#242529; max-width:620px; }
.searchbar { width:100%; max-width:600px; height:56px; border-radius:28px; border:1px solid #C7C8CD;
background:#ffffff; box-shadow: rgba(0,0,0,0.05) 0px 2px 4px 0px inset; display:flex; align-items:center;
padding:0 6px 0 24px; }
.searchbar span { flex:1; font-size:15px; color:#343538; }
.searchbar .go { width:44px; height:44px; border-radius:999px; background:#108910; border:none; position:relative; flex:0 0 44px; }
.searchbar .go::before { content:''; position:absolute; width:11px; height:11px; border:1.6px solid #fff; border-radius:50%; top:12px; left:12px; }
.searchbar .go::after { content:''; position:absolute; width:6px; height:1.6px; background:#fff; top:23px; left:22px; transform:rotate(45deg); }
.ctarow { display:flex; flex-direction:column; align-items:center; gap:4px; }
.btn-hero { background:#108910; color:#ffffff; border:none; border-radius:28px; height:52px;
padding:0 24px; font-size:16px; font-weight:400; }
.note { font-size:12px; color:#7b7b78; }
.storessec { flex:0 0 auto; padding:10px 40px 0; }
.storessec h2 { margin:0 0 10px; font-size:20px; font-weight:700; color:#242529; line-height:1.17; }
.storerow { display:flex; gap:14px; }
.storecard { flex:1; background:#F6F7F8; border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.storeicon { width:36px; height:36px; border-radius:8px; color:#ffffff; font-size:15px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.storecard .name { font-size:15px; font-weight:600; color:#242529; margin:0; }
.storecard .eta { font-size:13px; color:#343538; margin:0; }
.chiprow { flex:0 0 auto; padding:12px 40px 0; display:flex; gap:8px; }
.chip { border-radius:999px; height:32px; padding:0 16px; font-size:14px; font-weight:600;
display:flex; align-items:center; white-space:nowrap; }
.chip.active { background:#242529; color:#ffffff; }
.chip.inactive { background:#E8E9EB; color:#242529; }
.productsec { flex:1; padding:12px 40px 0; }
.productrow { display:flex; gap:12px; height:100%; align-items:flex-start; }
.productcard { flex:1; background:#F6F7F8; border-radius:8px; padding:10px; display:flex; align-items:center; gap:10px; }
.pthumb { width:52px; height:52px; border-radius:8px; flex:0 0 52px; }
.pinfo { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.pinfo .pname { font-size:14px; font-weight:600; color:#242529; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pinfo .pprice { font-size:13px; color:#343538; margin:0; }
.addbtn { background:#108910; color:#ffffff; border:none; border-radius:20px; height:32px;
padding:0 14px; font-size:13px; font-weight:400; flex:0 0 auto; }
footer { flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; font-size:12px; color:#7b7b78; }
</style></head>
<body>
<nav class="top">
<p class="logo">Instacart</p>
<div class="navactions">
<button class="btn-outline">Log in</button>
<button class="btn-green">Sign up</button>
</div>
</nav>
<section class="hero">
<h1>Order groceries for delivery or pickup today</h1>
<div class="searchbar"><span>Enter your delivery address</span><button class="go" aria-hidden="true"></button></div>
<div class="ctarow">
<button class="btn-hero">Sign up to get $0 delivery fee*</button>
<span class="note">*On your first order over $35</span>
</div>
</section>
<section class="storessec">
<h2>Stores to help you save</h2>
<div class="storerow">
<div class="storecard"><div class="storeicon" style="background:#108910;">F</div><p class="name">Fresh Market</p><p class="eta">Delivery by 5:40pm</p></div>
<div class="storecard"><div class="storeicon" style="background:#003D29;">C</div><p class="name">Corner Grocer</p><p class="eta">Delivery by 6:10pm</p></div>
<div class="storecard"><div class="storeicon" style="background:#1E6F30;">S</div><p class="name">Sunrise Foods</p><p class="eta">Delivery by 5:55pm</p></div>
<div class="storecard"><div class="storeicon" style="background:#242529;">V</div><p class="name">Value Grocery</p><p class="eta">Delivery by 6:30pm</p></div>
</div>
</section>
<div class="chiprow">
<span class="chip active">All</span>
<span class="chip inactive">EBT</span>
<span class="chip inactive">Fastest</span>
<span class="chip inactive">Offers</span>
<span class="chip inactive">Grocery</span>
</div>
<section class="productsec">
<div class="productrow">
<div class="productcard"><div class="pthumb" style="background:#108910;"></div><div class="pinfo"><p class="pname">Organic Avocados</p><p class="pprice">$1.99 each</p></div><button class="addbtn">Add</button></div>
<div class="productcard"><div class="pthumb" style="background:#E8E9EB;"></div><div class="pinfo"><p class="pname">Whole Milk, 1 gal</p><p class="pprice">$3.49</p></div><button class="addbtn">Add</button></div>
<div class="productcard"><div class="pthumb" style="background:#1E6F30;"></div><div class="pinfo"><p class="pname">Baby Spinach, 5oz</p><p class="pprice">$2.79</p></div><button class="addbtn">Add</button></div>
</div>
</section>
<footer>
<span>© Instacart</span>
<span>Instacart · Delivery · Pickup · EBT</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0f1f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0f1f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8e95; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0048ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0f1f; color: #0048ff;
border: 1px solid #0048ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0f1f; color: #f5f5f5;
border: 1px solid #303441; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8e95; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #091843; color: #0048ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0F1F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; background:#0B0F1F; }
.miniplayer { position:absolute; top:0; left:0; right:0; height:150px;
background:linear-gradient(135deg,#0048FF 0%, #00C2FF 60%, #0B0F1F 130%); overflow:hidden; }
.livechip { position:absolute; top:12px; left:14px; background:rgba(0,0,0,0.4); border-radius:999px;
padding:4px 10px; display:flex; align-items:center; gap:6px; }
.livedot { width:7px; height:7px; border-radius:50%; background:#FF3B5C; }
.livechip span.lbl { color:#fff; font-size:10px; font-weight:800; letter-spacing:0.05em; }
.mpbottom { position:absolute; left:14px; bottom:10px; right:14px; }
.mpchannel { color:#00C2FF; font-size:11px; font-weight:700; margin:0 0 4px; }
.mptitle { color:#fff; font-size:18px; font-weight:800; margin:0 0 8px; }
.mptrack { height:3px; background:rgba(255,255,255,0.2); border-radius:2px; }
.mpfill { height:3px; background:#FFE100; border-radius:2px; width:41%; }
.brandtag { position:absolute; top:12px; right:14px; color:#fff; font-size:13px; font-weight:800; letter-spacing:0.02em; }
.pillstrip { position:absolute; top:150px; left:0; right:0; height:40px; display:flex; align-items:center;
gap:8px; padding:0 14px; background:#0B0F1F; }
.pill { border-radius:999px; padding:6px 12px; font-size:11px; font-weight:700; color:#9DA8C7; background:#1C2440; }
.pill.active { background:#0048FF; color:#fff; }
.timebar { position:absolute; top:190px; left:86px; right:0; height:26px; background:#0B0F1F;
border-bottom:0.5px solid #2A3556; display:flex; align-items:center; }
.tlabel { width:218px; font-size:10px; font-weight:700; color:#6B7595; padding-left:10px; flex-shrink:0; }
.chcolhead { position:absolute; top:190px; left:0; width:86px; height:26px; background:#0B0F1F; }
.grid { position:absolute; top:216px; left:0; right:0; bottom:54px; overflow:hidden; }
.row { height:64px; display:flex; border-bottom:0.5px solid #2A3556; }
.chcol { width:86px; flex-shrink:0; background:#141A2E; border-right:0.5px solid #2A3556;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.chnum { font-size:10px; font-weight:800; color:#6B7595; }
.chlogo { width:40px; height:28px; border-radius:5px; display:flex; align-items:center; justify-content:center;
font-size:9px; font-weight:800; color:#fff; }
.lg1 { background:linear-gradient(135deg,#0048FF,#00C2FF); }
.lg2 { background:linear-gradient(135deg,#FF6B2C,#FF2C6B); }
.lg3 { background:linear-gradient(135deg,#21D07A,#00A6A6); }
.lg4 { background:linear-gradient(135deg,#7E57C2,#0048FF); }
.lg5 { background:linear-gradient(135deg,#FFE100,#FF6B2C); }
.timeline { flex:1; display:flex; }
.cell { width:218px; flex-shrink:0; border-right:1px solid #0B0F1F; background:#141A2E; padding:8px 10px;
display:flex; flex-direction:column; justify-content:center; gap:3px; }
.cell .t { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.cell .m { font-size:12px; font-weight:500; color:#6B7595; margin:0; }
.cell.now { background:#1C2440; border-left:3px solid #FFE100; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:54px; background:rgba(11,15,31,0.96);
border-top:0.5px solid #2A3556; display:flex; align-items:center; justify-content:space-around; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; }
.tab .ic { font-size:19px; color:#6B7595; }
.tab .lb { font-size:10px; font-weight:600; color:#6B7595; }
.tab.active .ic, .tab.active .lb { color:#FFE100; }
</style></head>
<body>
<div class="app">
<div class="miniplayer">
<div class="livechip"><span class="livedot"></span><span class="lbl">LIVE</span></div>
<div class="brandtag">Pluto TV (iOS)</div>
<div class="mpbottom">
<p class="mpchannel">CH 612 · PLUTO TV ACTION</p>
<p class="mptitle">Nightwatch Protocol</p>
<div class="mptrack"><div class="mpfill"></div></div>
</div>
</div>
<div class="pillstrip">
<span class="pill active">All</span><span class="pill">Featured</span><span class="pill">Movies</span>
<span class="pill">News</span><span class="pill">Sports</span><span class="pill">Comedy</span>
</div>
<div class="chcolhead"></div>
<div class="timebar">
<span class="tlabel">9:00 PM</span><span class="tlabel">9:30 PM</span><span class="tlabel">10:00 PM</span><span class="tlabel">10:30 PM</span>
</div>
<div class="grid">
<div class="row">
<div class="chcol"><span class="chnum">612</span><div class="chlogo lg1">ACT</div></div>
<div class="timeline">
<div class="cell now"><p class="t">Nightwatch Protocol</p><p class="m">9:00 - 10:00 PM</p></div>
<div class="cell"><p class="t">Nightwatch Protocol</p><p class="m">9:00 - 10:00 PM</p></div>
<div class="cell"><p class="t">Signal Loss</p><p class="m">10:00 - 11:00 PM</p></div>
<div class="cell"><p class="t">Signal Loss</p><p class="m">10:00 - 11:00 PM</p></div>
</div>
</div>
<div class="row">
<div class="chcol"><span class="chnum">705</span><div class="chlogo lg2">MOV</div></div>
<div class="timeline">
<div class="cell"><p class="t">The Long Reel</p><p class="m">8:30 - 10:30 PM</p></div>
<div class="cell now"><p class="t">The Long Reel</p><p class="m">8:30 - 10:30 PM</p></div>
<div class="cell now"><p class="t">The Long Reel</p><p class="m">8:30 - 10:30 PM</p></div>
<div class="cell"><p class="t">Midnight Feature</p><p class="m">10:30 PM</p></div>
</div>
</div>
<div class="row">
<div class="chcol"><span class="chnum">318</span><div class="chlogo lg3">SPT</div></div>
<div class="timeline">
<div class="cell"><p class="t">Full Court Replay</p><p class="m">9:00 - 9:30 PM</p></div>
<div class="cell"><p class="t">League Highlights</p><p class="m">9:30 - 10:00 PM</p></div>
<div class="cell now"><p class="t">League Highlights</p><p class="m">9:30 - 10:00 PM</p></div>
<div class="cell"><p class="t">Overtime Show</p><p class="m">10:00 - 11:00 PM</p></div>
</div>
</div>
<div class="row">
<div class="chcol"><span class="chnum">140</span><div class="chlogo lg4">CMD</div></div>
<div class="timeline">
<div class="cell"><p class="t">Stand-Up Hour</p><p class="m">9:00 - 9:30 PM</p></div>
<div class="cell"><p class="t">Stand-Up Hour</p><p class="m">9:00 - 9:30 PM</p></div>
<div class="cell"><p class="t">Sketch Vault</p><p class="m">9:30 - 10:30 PM</p></div>
<div class="cell"><p class="t">Sketch Vault</p><p class="m">9:30 - 10:30 PM</p></div>
</div>
</div>
<div class="row">
<div class="chcol"><span class="chnum">201</span><div class="chlogo lg5">NWS</div></div>
<div class="timeline">
<div class="cell"><p class="t">Evening Report</p><p class="m">9:00 - 10:00 PM</p></div>
<div class="cell"><p class="t">Evening Report</p><p class="m">9:00 - 10:00 PM</p></div>
<div class="cell"><p class="t">World Desk</p><p class="m">10:00 - 11:00 PM</p></div>
<div class="cell"><p class="t">World Desk</p><p class="m">10:00 - 11:00 PM</p></div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="ic">📺</span><span class="lb">LIVE TV</span></div>
<div class="tab"><span class="ic">🎥</span><span class="lb">ON DEMAND</span></div>
<div class="tab"><span class="ic">🔍</span><span class="lb">SEARCH</span></div>
<div class="tab"><span class="ic">★</span><span class="lb">MY PLUTO</span></div>
<div class="tab"><span class="ic">👤</span><span class="lb">ACCOUNT</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffd618; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffd618; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6a14; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd618; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffd618; color: #111111;
border: 1px solid #d9b617; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6a14; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6b414; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>KakaoPage detail mock</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:'Pretendard Variable', 'Pretendard', -apple-system, system-ui, 'Segoe UI', 'Noto Sans KR', 'Malgun Gothic', sans-serif; }
* { box-sizing:border-box; }
.wrap { width:960px; height:640px; display:grid; grid-template-rows:56px 220px 48px 1fr; }
/* top nav */
.topnav { display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #eeeeee; }
.topnav .brand { font-size:18px; font-weight:700; color:#000000; }
.topnav .right { display:flex; align-items:center; gap:14px; }
.search { font-size:13px; color:#999999; }
.coin { background:#ffd618; color:#000000; border-radius:2px; padding:3px 8px; font-size:13px; font-weight:400; }
/* detail hero */
.detail { display:flex; gap:20px; padding:20px 28px; }
.cover { flex:0 0 130px; width:130px; height:180px; border-radius:12px; background:#eeeeee; position:relative; overflow:hidden; }
.cover .shade1 { position:absolute; inset:0; background:linear-gradient(150deg, #d8d8d8, #eeeeee 60%); }
.cover .shade2 { position:absolute; width:120px; height:120px; border-radius:50%; right:-40px; bottom:-40px;
background:radial-gradient(circle, rgba(255,214,24,0.5), rgba(255,214,24,0) 70%); }
.info { flex:1; display:flex; flex-direction:column; gap:8px; padding-top:2px; }
.info h1 { margin:0; font-size:21px; font-weight:700; line-height:1.24; color:#000000; }
.info .byline { font-size:12px; font-weight:400; line-height:1.33; color:#000000; }
.tags { display:flex; gap:6px; margin-top:2px; }
.tags span { font-size:12px; font-weight:400; line-height:1.33; color:#666666; background:#eeeeee; border-radius:2px; padding:2px 8px; }
.ctas { display:flex; gap:10px; margin-top:auto; }
.cta-primary { flex:1; background:#ffd618; color:#222222; border-radius:8px; height:56px; font-size:12px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.cta-secondary { flex:0 0 120px; border:1px solid #000000; color:#000000; border-radius:100px; height:56px; font-size:12px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
/* section tabs */
.tabs { display:flex; align-items:center; gap:8px; padding:0 28px; border-bottom:1px solid #eeeeee; }
.pill { border-radius:16px; height:32px; padding:7px 14px; font-size:13px; font-weight:700; display:flex; align-items:center; }
.pill.active { background:#000000; color:#ffffff; }
.pill.inactive { color:#000000; font-weight:400; }
/* episode list */
.episodes { padding:10px 28px 0 28px; overflow:hidden; }
.row { display:flex; align-items:center; gap:14px; height:84px; background:#eeeeee; border-radius:8px; padding:0 16px; margin-bottom:8px; position:relative; }
.row .thumb { width:52px; height:52px; border-radius:8px; background:linear-gradient(160deg,#dcdcdc,#c8c8c8); flex:0 0 52px; }
.row .text { flex:1; }
.row .text .t { font-size:14px; font-weight:400; line-height:1.43; color:#000000; }
.row .text .d { margin-top:4px; font-size:11px; font-weight:400; line-height:1.45; color:#666666; }
.badge-best { position:absolute; top:8px; left:58px; background:#ff3042; color:#ffffff; font-size:11px; font-weight:700; border-radius:5px; padding:0 3px; }
.badge-free { background:#000000; color:#ffffff; font-size:10px; font-weight:700; border-radius:2px; padding:0 4px; }
.chip { background:rgba(0,0,0,0.05); color:#000000; font-size:14px; font-weight:400; border-radius:8px; height:28px; padding:0 10px; display:flex; align-items:center; }
</style></head>
<body>
<div class="wrap">
<div class="topnav">
<div class="brand">KakaoPage</div>
<div class="right"><span class="search">Title, author...</span><span class="coin">Recharge</span></div>
</div>
<div class="detail">
<div class="cover"><div class="shade1"></div><div class="shade2"></div></div>
<div class="info">
<h1>Ember Trial</h1>
<div class="byline">by J. Winters</div>
<div class="tags"><span>Fantasy</span><span>Action</span></div>
<div class="ctas">
<div class="cta-primary">Start Reading</div>
<div class="cta-secondary">Subscribe</div>
</div>
</div>
</div>
<div class="tabs">
<div class="pill active">Home</div>
<div class="pill inactive">Info</div>
<div class="pill inactive">News</div>
</div>
<div class="episodes">
<div class="row">
<div class="badge-best">BEST</div>
<div class="thumb"></div>
<div class="text"><div class="t">Episode 142 · The Last Ember</div><div class="d">Sep 3</div></div>
<div class="chip">128</div>
</div>
<div class="row">
<div class="thumb"></div>
<div class="text"><div class="t">Episode 141 · Rebirth</div><div class="d">Aug 27</div></div>
<div class="chip">64</div>
</div>
<div class="row">
<div class="thumb"></div>
<div class="text"><div class="t">Episode 140 · Shattered Vow</div><div class="d"><span class="badge-free">FREE</span></div></div>
<div class="chip">211</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #275cfd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #275cfd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #98b0f9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2250f7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #275cfd; color: #ffffff;
border: 1px solid #2250f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #275cfd; color: #f5f5f5;
border: 1px solid #4874fc; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #98b0f9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #265afc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#dbdbdc; color:#0d0e0f; box-sizing:border-box;
font-family:"Manrope", -apple-system, sans-serif; }
* { box-sizing:border-box; }
h1,h2,h3 { font-family:"Sora", sans-serif; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#ffffff; }
.brand { font-family:"Sora",sans-serif; font-weight:700; font-size:18px; margin:0; }
.navlinks { display:flex; gap:8px; }
.pill-nav { background:#2d2f2f; color:#ffffff; border-radius:9999px; padding:5px 14px; font-size:13px; font-family:"Sora",sans-serif; }
.btn-primary { background:#275cfd; color:#ffffff; border:none; border-radius:15px; padding:0 18px; height:38px; font-size:13px; }
.hero { padding:24px 32px 6px; max-width:560px; }
.hero h1 { font-size:34px; font-weight:550; line-height:1.25; margin:0 0 8px; }
.hero p { font-size:15px; font-weight:300; color:#333333; margin:0 0 12px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-pill { background:#275cfd; color:#ffffff; border:none; border-radius:9999px; padding:0 26px; height:38px; font-size:14px; font-weight:500; }
.btn-glass { background:rgba(255,255,255,0.5); color:#0d0e0f; border:none; border-radius:15px; padding:0 20px; height:38px; font-size:13px; }
.cardsrow { display:flex; gap:12px; padding:14px 32px 0; }
.wcard { background:#ffffff; border-radius:15px; padding:14px 16px; flex:1; display:flex; flex-direction:column; gap:4px; }
.wcard h3 { font-size:16px; font-weight:600; margin:0; }
.wcard p { font-size:11px; color:#696a6a; margin:0; }
.wcard .num { font-family:"Sora",sans-serif; font-size:20px; font-weight:700; color:#275cfd; }
.darkband { margin-top:14px; background:#081b68; padding:20px 32px; display:flex; gap:12px; }
.glass { flex:1; background:rgba(255,255,255,0.16); border-radius:12.75px; padding:16px 18px; color:#ffffff;
display:flex; flex-direction:column; gap:6px; box-shadow:rgba(0,0,0,0.1) 0px 0px 50px 0px; }
.glass .tag { font-family:"Sora",sans-serif; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; opacity:0.7; }
.glass h3 { font-size:16px; margin:0; }
.glass .price { font-family:"Sora",sans-serif; font-size:18px; font-weight:600; }
.glass .up { color:#4ade80; font-size:12px; }
.tint { margin:14px 32px 0; background:#ebf2ff; border-radius:15px; padding:12px 18px; display:flex; justify-content:space-between; font-size:12px; color:#0d0e0f; }
.tint b { font-family:"Sora",sans-serif; font-size:16px; display:block; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; font-size:11px; color:#696a6a; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<p class="brand">XREX</p>
<div class="navlinks"><span class="pill-nav">Pay</span><span class="pill-nav">RegTech</span><span class="pill-nav">Resources</span></div>
<button class="btn-primary">Contact Sales</button>
</nav>
<section class="hero">
<h1>Redefine banking together.</h1>
<p>Inclusive finance for cross-border merchants — compliant, blockchain-powered, built for real trade.</p>
<div class="row">
<button class="btn-pill">Contact Sales</button>
<button class="btn-glass">Log In</button>
</div>
</section>
<div class="cardsrow">
<div class="wcard"><h3>Global USD Liquidity</h3><p>Settle cross-border trade without the delay.</p><span class="num">98.4%</span></div>
<div class="wcard"><h3>XRAY OnChain Analysis</h3><p>Traceable, auditable transaction flows.</p><span class="num">24/7</span></div>
<div class="wcard"><h3>Founded</h3><p>Regulated since day one.</p><span class="num">2018</span></div>
</div>
<div class="darkband">
<div class="glass"><span class="tag">USDT/USD</span><h3>Trading Pair</h3><span class="price">1.0002</span><span class="up">▲ 0.03%</span></div>
<div class="glass"><span class="tag">BTC/USDT</span><h3>Trading Pair</h3><span class="price">64,210.5</span><span class="up">▲ 1.24%</span></div>
<div class="glass"><span class="tag">Compliance</span><h3>US · SG · TW Licensed</h3><span class="price">FinCEN · MAS · FSC</span></div>
</div>
<footer>
<span>© XREX</span>
<span>Pay · RegTech · Resources · Company</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff153c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff153c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa90a2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff153c; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff153c; color: #f5f5f5;
border: 1px solid #fd395a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa90a2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d61232; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:Pretendard, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:13.2px; color:#a3a3a3; }
.navlinks span.on { color:#ffffff; }
.menutrig { border:1px solid #a3a3a3; color:#a3a3a3; border-radius:5px; padding:0 16.5px; height:28px;
display:flex; align-items:center; font-size:13.2px; }
.livebar { display:flex; gap:8px; padding:10px 32px 4px; }
.livetab { border-radius:110px; padding:8.8px 13.2px; font-size:14.3px; color:#a3a3a3; border:1px solid transparent; }
.livetab.on { background:rgba(255,255,255,0.2); color:#ffffff; border-color:#ffffff; font-weight:700; }
h2 { font-size:22px; font-weight:700; padding:16px 32px 10px; margin:0; }
.row { display:flex; gap:12px; padding:0 32px; }
.poster { width:150px; flex-shrink:0; }
.poster .art { height:200px; border-radius:6px; background:linear-gradient(160deg,#2e2e2e,#141414); position:relative; border:1px solid #4f4f4f; }
.poster .t { font-size:13px; margin-top:8px; color:#ffffff; }
.poster .m { font-size:11px; color:#6e6e6e; }
</style></head>
<body>
<nav>
<span class="brand">TVING</span>
<div class="navlinks"><span class="on">Home</span><span>Series</span><span>Movies</span><span>Live</span><span>Sports</span></div>
<span class="menutrig">All ▾</span>
</nav>
<div class="livebar">
<span class="livetab on">Channel 1</span>
<span class="livetab">Channel 2</span>
<span class="livetab">Sports</span>
<span class="livetab">News</span>
</div>
<h2>Continue watching</h2>
<div class="row">
<div class="poster"><div class="art"></div><div class="t">Late Autumn Letters</div><div class="m">S1 · Ep 4</div></div>
<div class="poster"><div class="art"></div><div class="t">Northbound</div><div class="m">Movie</div></div>
<div class="poster"><div class="art"></div><div class="t">Signal Zero</div><div class="m">S2 · Ep 1</div></div>
<div class="poster"><div class="art"></div><div class="t">The Long Harbor</div><div class="m">Movie</div></div>
<div class="poster"><div class="art"></div><div class="t">Studio Live: Weekend</div><div class="m">Live</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #5d5d5d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 2px; background: #9e703c; color: #f8f8f8;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 2px; background: transparent; color: #1c1c1c;
border: 1px solid #9e703c; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #f8f8f8; color: #1c1c1c;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5d5d5d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: #9e703c; color: #f8f8f8;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f8f8f8; color:#2a2f37; box-sizing:border-box; font-family:'brandon-grotesque','Futura',sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#9e703c; color:#f8f8f8; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
display:flex; align-items:center; justify-content:center; }
nav { height:64px; background:#272d45; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#f8f8f8; margin:0; }
.navlinks { display:flex; gap:20px; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#f8f8f8; }
.navlinks span.active { color:#748cab; }
.main { display:flex; gap:0; height:392px; }
.gallery { width:440px; background:#efece6; display:flex; align-items:center; justify-content:center; position:relative; }
.lantern { width:60px; height:120px; position:relative; }
.lantern::before { content:''; position:absolute; top:0; left:6px; right:6px; height:70px; background:radial-gradient(circle,#ff763d,#f04600); border-radius:8px; }
.lantern::after { content:''; position:absolute; bottom:0; left:0; right:0; height:44px; background:#1c1c1c; border-radius:4px; }
.material-badge { position:absolute; top:20px; left:20px; background:#ddcfbe; color:#71491d; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:3px 8px; border:1px solid #d8c6b1; }
.info { flex:1; padding:28px 36px; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:28px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.price { font-size:18px; font-weight:700; margin-top:2px; }
.desc { font-size:14px; line-height:1.6; color:#2a2f37; max-width:400px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#9e703c; color:#f8f8f8; border:none; border-radius:4px; font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; }
.btn-secondary { flex:1; height:48px; background:transparent; color:#1c1c1c; border:1.5px solid #1c1c1c; border-radius:4px; font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; }
.feature-strip { display:flex; gap:32px; padding:16px 32px; border-top:1px solid #dedede; border-bottom:1px solid #dedede; }
.feature-strip div { flex:1; text-align:center; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#5d5d5d; }
</style></head>
<body>
<div class="announce">Free Shipping Over $75</div>
<nav>
<p class="brand">Barebones Living</p>
<div class="navlinks"><span class="active">Lighting</span><span>Cookware</span><span>Fire Tools</span><span>Camp Kitchen</span></div>
</nav>
<div class="main">
<div class="gallery">
<span class="material-badge">Steel & Brass</span>
<div class="lantern"></div>
</div>
<div class="info">
<h1>The Beacon Camp Lantern</h1>
<span class="price">$89.00</span>
<p class="desc">Solid brass and hand-blown glass, built to run for 12 hours on a single fuel fill. No plastic, no gimmicks — just a light that will outlast the tent it hangs in.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
<div class="feature-strip">
<div>Lifetime Guarantee</div>
<div>Free Shipping Over $75</div>
<div>American Designed</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #242424; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #242424; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #979797; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242424; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #242424; color: #f5f5f5;
border: 1px solid #454545; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979797; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #474747; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#242424; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; padding:0 32px; }
.brand { font-size:15px; font-weight:700; color:#242424; margin:0; }
.navlinks { display:flex; gap:20px; margin-left:28px; }
.navlinks span { font-size:13px; color:#6f6f6f; }
.util-btn { margin-left:auto; background:#333333; color:#ffffff; border-radius:4px; height:32px; padding:0 12px;
display:flex; align-items:center; font-size:12px; }
.hero { position:relative; margin:0 32px; height:260px; border-radius:20px; overflow:hidden;
background:linear-gradient(135deg,#3a3a3a,#1a1a1a); }
.hero-caption { position:absolute; left:24px; bottom:50px; color:#ffffff; }
.hero-caption .k { font-size:12px; opacity:0.75; }
.hero-caption h1 { font-size:24px; font-weight:700; margin:4px 0 0; }
.play { position:absolute; left:24px; bottom:14px; width:32px; height:32px; border-radius:100px;
background:rgba(0,0,0,0.3); }
.play::before { content:'▶'; color:#ffffff; font-size:11px; position:absolute; left:11px; top:8px; }
.pagi { position:absolute; right:24px; bottom:14px; height:32px; border-radius:100px; background:rgba(0,0,0,0.3);
padding:4px 10px; color:#ffffff; font-size:12px; display:flex; align-items:center; }
.row-title { font-size:14px; font-weight:600; color:#242424; padding:16px 32px 8px; }
.cards { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:0 32px 20px; }
.book { background:#f7f7f7; border-radius:16px; padding:16px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.cover { width:100%; aspect-ratio:3/4; border-radius:8px; }
.cover.a{background:linear-gradient(150deg,#d8d8d8,#a8a8a8);} .cover.b{background:linear-gradient(150deg,#e6ded0,#bfb29a);}
.cover.c{background:linear-gradient(150deg,#d9e2e6,#9fb2ba);} .cover.d{background:linear-gradient(150deg,#e6d6d6,#b99a9a);}
.cover.e{background:linear-gradient(150deg,#dde6d6,#a9bf9a);}
.book span { font-size:12px; color:#242424; line-height:1.4; }
</style></head>
<body>
<nav>
<p class="brand">Millie</p>
<div class="navlinks"><span>Recommend</span><span>Category</span><span>Audio</span><span>Web Novel</span></div>
<div class="util-btn">Login</div>
</nav>
<div class="hero">
<div class="hero-caption"><div class="k">Today's Pick</div><h1>An ordinary day, a good book</h1></div>
<div class="play"></div>
<div class="pagi">1 / 5</div>
</div>
<div class="row-title">Recommended for you</div>
<div class="cards">
<div class="book"><div class="cover a"></div><span>Notes on a Quiet Morning</span></div>
<div class="book"><div class="cover b"></div><span>The Long Way Home</span></div>
<div class="book"><div class="cover c"></div><span>Small Rooms, Big Ideas</span></div>
<div class="book"><div class="cover d"></div><span>A Season Without Rain</span></div>
<div class="book"><div class="cover e"></div><span>Letters Never Sent</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e16; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e16; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181826; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e16; color: #ffffff;
border: 1px solid #181826; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e16; color: #f5f5f5;
border: 1px solid #33333a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #101019; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E16; color:#F3F3FB; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { padding:30px 40px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:1.2px; color:#C2F94E; text-transform:uppercase; }
.title { font-size:30px; font-weight:800; letter-spacing:-.4px; margin-top:6px; }
.strip { display:flex; gap:8px; margin-top:22px; }
.cell { flex:1; aspect-ratio:.68; background:#181826; border:1px solid #2C2C42; border-radius:14px;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.cell .dow { font-size:10px; font-weight:700; color:#65657E; }
.cell .date { font-size:15px; font-weight:800; }
.cell .dot { width:7px; height:7px; border-radius:50%; }
.cell.done { background:rgba(52,211,153,0.12); border-color:rgba(52,211,153,0.35); }
.cell.done .date { color:#34D399; }
.cell.today { background:#4F46E5; border-color:#6366F1; }
.cell.today .dow, .cell.today .date { color:#fff; }
.cell.today .dot { background:#C2F94E; }
.cell.rest .date { color:#65657E; }
.session { margin-top:22px; border-radius:22px; padding:22px; position:relative; overflow:hidden;
background:linear-gradient(150deg,#4F46E5,#3A33B8); box-shadow: rgba(79,70,229,0.30) 0 10px 28px; }
.session::after { content:''; position:absolute; width:220px; height:220px; border-radius:50%;
background:rgba(194,249,78,0.14); right:-70px; bottom:-90px; }
.tag { display:inline-block; background:#C2F94E; color:#1A1A1A; font-size:10px; font-weight:800; text-transform:uppercase;
padding:5px 10px; border-radius:8px; }
.sess-title { font-size:21px; font-weight:800; margin-top:12px; }
.stats { display:flex; gap:32px; margin-top:16px; position:relative; z-index:1; }
.stat b { font-size:18px; font-weight:800; display:block; }
.stat span { font-size:10px; font-weight:600; text-transform:uppercase; color:rgba(255,255,255,.7); }
.go { margin-top:18px; background:#C2F94E; color:#1A1A1A; font-size:16px; font-weight:800; text-align:center;
padding:13px; border-radius:14px; position:relative; z-index:1; }
.side { position:absolute; top:30px; right:40px; width:300px; }
.struct-hdr { font-size:13px; font-weight:700; margin-bottom:10px; }
.bar { display:flex; height:30px; border-radius:8px; overflow:hidden; gap:3px; }
.bar div { height:100%; }
.step { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #2C2C42; }
.phase { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#1A1A1A; }
.step-title { font-size:15px; font-weight:700; }
.step-desc { font-size:11px; color:#9C9CB8; }
.pace { margin-left:auto; text-align:right; font-size:13px; font-weight:800; }
.pace span { display:block; font-size:10px; color:#65657E; font-weight:600; }
</style></head>
<body>
<div class="wrap">
<div class="eyebrow">Runna (iOS) · 5K Plan · Week 4 of 8</div>
<div class="title">Your plan</div>
<div class="strip">
<div class="cell done"><div class="dow">MON</div><div class="date">12</div><div class="dot" style="background:#34D399"></div></div>
<div class="cell done"><div class="dow">TUE</div><div class="date">13</div><div class="dot" style="background:#34D399"></div></div>
<div class="cell rest"><div class="dow">WED</div><div class="date">14</div><div class="dot" style="background:#65657E"></div></div>
<div class="cell today"><div class="dow">THU</div><div class="date">15</div><div class="dot"></div></div>
<div class="cell"><div class="dow">FRI</div><div class="date">16</div><div class="dot" style="background:#FBBF24"></div></div>
<div class="cell"><div class="dow">SAT</div><div class="date">17</div><div class="dot" style="background:#4F46E5"></div></div>
<div class="cell rest"><div class="dow">SUN</div><div class="date">18</div><div class="dot" style="background:#65657E"></div></div>
</div>
<div style="display:flex; gap:24px; margin-top:22px;">
<div class="session" style="flex:1.3;">
<div class="tag">Today · Intervals</div>
<div class="sess-title">6 × 800m @ 5K pace</div>
<div class="stats">
<div class="stat"><b>8.4 km</b><span>Distance</span></div>
<div class="stat"><b>48 min</b><span>Duration</span></div>
<div class="stat"><b>4:52</b><span>Avg Pace</span></div>
</div>
<div class="go">▶ Start guided run</div>
</div>
<div style="flex:1;">
<div class="struct-hdr">Workout structure</div>
<div class="bar"><div style="flex:1;background:#34D399;"></div><div style="flex:3;background:#FB7185;"></div><div style="flex:1;background:#34D399;"></div></div>
<div class="step"><div class="phase" style="background:#34D399;">WU</div><div><div class="step-title">Warm-up</div><div class="step-desc">10 min easy jog</div></div><div class="pace">6:10<span>/km</span></div></div>
<div class="step"><div class="phase" style="background:#FB7185;">6×</div><div><div class="step-title">Main set</div><div class="step-desc">800m · 90s recovery</div></div><div class="pace">4:35<span>/km</span></div></div>
<div class="step"><div class="phase" style="background:#34D399;">CD</div><div><div class="step-title">Cool-down</div><div class="step-desc">8 min easy jog</div></div><div class="pace">6:20<span>/km</span></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0f11; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0f11; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8e8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d50a0a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0f11; color: #d50a0a;
border: 1px solid #d50a0a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0f11; color: #f5f5f5;
border: 1px solid #333435; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2e0e10; color: #d50a0a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0E0F11; color:#FFFFFF; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-weight:700; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:20px 28px 0; }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.logoblock { background:#D50A0A; padding:5px 10px; font-weight:900; border-radius:3px; font-size:14px; }
.ticker { display:flex; gap:8px; margin-top:16px; overflow:hidden; border-bottom:1px solid #2A2C30; padding-bottom:14px; }
.chip { width:116px; flex-shrink:0; background:#212327; border-radius:8px; padding:8px 10px; }
.chiphead { display:flex; justify-content:space-between; font-size:10px; font-weight:800; color:#9AA0A6; text-transform:uppercase; }
.live { color:#FF1A1A; }
.chline { display:flex; justify-content:space-between; font-size:13px; font-variant-numeric:tabular-nums; margin-top:4px; }
.chline .w { color:#fff; } .chline .l { color:#9AA0A6; }
.gamecard { margin-top:18px; background:#18191B; border-radius:12px; border:1px solid #2A2C30; }
.gchead { background:#212327; border-radius:12px 12px 0 0; padding:10px 14px; display:flex; justify-content:space-between; font-size:11px; font-weight:800; color:#9AA0A6; text-transform:uppercase; letter-spacing:0.5pt; }
.livepill { background:#FF1A1A; border-radius:3px; padding:4px 9px; display:flex; align-items:center; gap:5px; font-size:11px; font-weight:900; color:#fff; }
.puls { width:6px; height:6px; border-radius:50%; background:#fff; }
.teamrow { display:flex; justify-content:space-between; align-items:center; padding:14px; border-bottom:1px solid #2A2C30; }
.teamrow:last-child { border-bottom:none; }
.tinfo { display:flex; align-items:center; gap:12px; }
.logo30 { width:30px; height:30px; border-radius:50%; }
.tname { font-size:18px; font-weight:700; } .trecord { font-size:12px; font-weight:400; color:#9AA0A6; margin-top:2px; }
.tscore { font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; }
.tscore.dim { color:#9AA0A6; }
.gcfoot { padding:10px 14px; display:flex; justify-content:space-between; font-size:13px; }
.watch { color:#CC0000; font-weight:800; font-size:12px; }
</style>
</head>
<body>
<div class="stage">
<div class="topbar"><div class="logoblock">ESPN (iOS)</div><div style="font-size:20px">🔍 🔔</div></div>
<div class="ticker">
<div class="chip"><div class="chiphead"><span>NBA</span><span class="live">LIVE</span></div><div class="chline"><span>LAL 30</span><span class="w">102</span></div><div class="chline"><span>BOS 15</span><span class="l">97</span></div></div>
<div class="chip"><div class="chiphead"><span>NFL</span><span>FINAL</span></div><div class="chline"><span>DAL</span><span class="w">27</span></div><div class="chline"><span>PHI</span><span class="l">21</span></div></div>
<div class="chip"><div class="chiphead"><span>MLB</span><span>7:05 ET</span></div><div class="chline"><span>NYY</span><span>–</span></div><div class="chline"><span>BOS</span><span>–</span></div></div>
<div class="chip"><div class="chiphead"><span>NHL</span><span class="live">LIVE</span></div><div class="chline"><span>EDM</span><span class="w">3</span></div><div class="chline"><span>COL</span><span class="l">2</span></div></div>
</div>
<div class="gamecard">
<div class="gchead"><span>NBA · WESTERN FINALS · GAME 5</span><div class="livepill"><span class="puls"></span>LIVE Q3</div></div>
<div class="teamrow">
<div class="tinfo"><div class="logo30" style="background:#552583"></div><div><div class="tname">Los Angeles Lakers</div><div class="trecord">48–34 · Home</div></div></div>
<div class="tscore">102</div>
</div>
<div class="teamrow">
<div class="tinfo"><div class="logo30" style="background:#007A33"></div><div><div class="tname">Boston Celtics</div><div class="trecord">52–30 · Away</div></div></div>
<div class="tscore dim">97</div>
</div>
<div class="gcfoot"><span>Q3 · 4:12</span><span class="watch">▶ Watch on ESPN+</span></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff367c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff367c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa9fbf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d0d12; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff367c; color: #0d0d12;
border: 1px solid #0d0d12; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff367c; color: #f5f5f5;
border: 1px solid #fd558f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa9fbf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d82f6b; color: #0d0d12;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0d0d12; color:rgba(255,255,255,0.87); box-sizing:border-box;
font-family:Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.wrap { position:relative; height:100%; }
.glow-a { position:absolute; width:360px; height:360px; border-radius:50%; top:-140px; left:-100px;
background:radial-gradient(circle, rgba(255,54,124,0.35), transparent 70%); filter:blur(10px); }
.glow-b { position:absolute; width:340px; height:340px; border-radius:50%; bottom:-160px; right:-80px;
background:radial-gradient(circle, rgba(110,134,255,0.32), transparent 70%); filter:blur(10px); }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { font-size:16px; font-weight:600; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:26px; font-size:12px; color:#fff; opacity:0.85; }
.cta { position:relative; z-index:2; height:36px; border-radius:999px; padding:0 20px; display:flex;
align-items:center; font-size:12px; color:#fff; font-weight:600;
background:linear-gradient(274deg, #6e86ff, #ff367c);
box-shadow: rgba(255,89,0,0.55) -10px 0px 18px -3px, rgb(255,56,132) -5px 0px 8px -5px; }
.hero { position:relative; z-index:2; padding:36px 40px 20px; text-align:center; }
.hero h1 { font-size:38px; font-weight:400; letter-spacing:-1.6px; line-height:1.15; margin:0 0 10px; }
.hero p { font-size:15px; color:#d0d0d0; margin:0 auto; max-width:520px; }
.cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
padding:24px 40px 0; }
.plan { border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.plan.free { background:#323648; }
.plan.pro { background:#1a1d31; border:1px solid transparent; position:relative;
box-shadow: rgba(255,128,176,0.28) 0px -4px 32px 0px, rgba(87,95,255,0.25) 0px 0px 32px 0px; }
.plan.pro::before { content:''; position:absolute; inset:0; border-radius:20px; padding:1px;
background:linear-gradient(150deg, #ff367c, #a963ff, #6e86ff); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.plan .name { font-size:16px; font-weight:400; }
.plan .price { font-size:26px; font-weight:400; margin:4px 0; }
.plan .feat { font-size:12px; color:#bba2e0; }
.plan.free .feat { color:#8897e3; }
.chart { position:relative; z-index:2; margin:20px 40px 0; padding:16px 18px; background:#1a1d31;
border-radius:20px; display:flex; align-items:flex-end; gap:10px; height:76px; }
.bar { flex:1; border-radius:6px 6px 0 0; }
.bar:nth-child(1){ height:40%; background:#f58327; }
.bar:nth-child(2){ height:65%; background:#f0c732; }
.bar:nth-child(3){ height:52%; background:#4dff64; }
.bar:nth-child(4){ height:80%; background:#8897e3; }
.bar:nth-child(5){ height:34%; background:#a963ff; }
.bar:nth-child(6){ height:70%; background:#ff367c; }
.bar:nth-child(7){ height:58%; background:#6e86ff; }
.bar:nth-child(8){ height:44%; background:#f58327; }
footer { position:relative; z-index:2; position:absolute; bottom:0; left:0; right:0; height:44px;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; color:#7b7c8c; }
</style></head>
<body>
<div class="wrap">
<div class="glow-a"></div><div class="glow-b"></div>
<nav>
<div class="brand">MOZE</div>
<div class="navlinks"><span>Pricing</span><span>Guide</span><span>FAQ</span><span>Contact</span></div>
<div class="cta">Download free</div>
</nav>
<section class="hero">
<h1>Simplify your financial journey, elegantly</h1>
<p>Bookkeeping is the first step of money management — refined charts, multi-currency, AI-assisted logging.</p>
</section>
<div class="cards">
<div class="plan free"><span class="name">Basic</span><span class="price">$0</span><span class="feat">Manual entry · Core charts</span></div>
<div class="plan pro"><span class="name">Pro + AI</span><span class="price">$4.99</span><span class="feat">AI logging · Multi-currency · Sync</span></div>
<div class="plan free"><span class="name">Family</span><span class="price">$7.99</span><span class="feat">Shared budgets · Apple Watch</span></div>
</div>
<div class="chart">
<div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
<div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
</div>
<footer>
<span>© MOZE</span>
<span>MOZE · Pricing · Guide · FAQ</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff2442; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff2442; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa97a4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e01f3d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff2442; color: #000000;
border: 1px solid #e01f3d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff2442; color: #f5f5f5;
border: 1px solid #fd455f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa97a4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fa2341; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; gap:18px; padding:0 24px; border-bottom:1px solid #eeeeee; }
.brand { font-size:18px; font-weight:700; color:#ff2442; margin:0; }
.search { flex:1; max-width:360px; background:#f5f5f5; border-radius:20px; height:36px; display:flex; align-items:center;
padding:0 16px; font-size:13px; color:#999999; }
.btn-post { margin-left:auto; background:#ff2442; color:#ffffff; border:none; border-radius:20px; height:34px;
padding:0 18px; font-size:13px; font-weight:500; }
.tabs { display:flex; gap:20px; padding:12px 24px 10px; font-size:13px; color:#999999; }
.tabs .active { color:#ff2442; font-weight:600; border-bottom:2px solid #ff2442; padding-bottom:8px; }
.feed { display:flex; gap:10px; padding:0 24px; }
.col { flex:1; display:flex; flex-direction:column; gap:10px; }
.note { background:#ffffff; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
.cover { position:relative; }
.note-body { padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
.note-title { font-size:14px; font-weight:500; color:#333333; line-height:1.3; }
.note-meta { display:flex; align-items:center; gap:6px; font-size:12px; color:#999999; }
.avatar { width:18px; height:18px; border-radius:50%; flex:none; }
.like { margin-left:auto; display:flex; align-items:center; gap:3px; color:#999999; }
.heart { color:#ff2442; }
.chiprow { display:flex; gap:6px; padding:10px 24px 0; flex-wrap:wrap; }
.chip { background:#f5f5f5; color:#333333; border-radius:16px; padding:4px 12px; font-size:11px; }
.chip.on { background:#ffecef; color:#ff2442; }
</style></head>
<body>
<nav>
<p class="brand">Xiaohongshu</p>
<div class="search">Search notes, places, ideas…</div>
<button class="btn-post">＋ Post</button>
</nav>
<div class="tabs">
<span class="active">Recommend</span><span>Fashion</span><span>Food</span><span>Travel</span><span>Beauty</span><span>Home</span>
</div>
<div class="chiprow">
<span class="chip on">#skincare</span><span class="chip">#brunch</span><span class="chip">#dailyfit</span><span class="chip">#weekendtrip</span>
</div>
<div class="feed">
<div class="col">
<div class="note">
<div class="cover" style="height:150px;background:linear-gradient(160deg,#ffd8dd,#ff8fa3);"></div>
<div class="note-body">
<div class="note-title">5-step routine that finally fixed my dry skin</div>
<div class="note-meta"><span class="avatar" style="background:#f6c453;"></span><span>Alex Kim</span><span class="like"><span class="heart">♥</span>1.2k</span></div>
</div>
</div>
<div class="note">
<div class="cover" style="height:110px;background:linear-gradient(160deg,#cdeadb,#8fd4b3);"></div>
<div class="note-body">
<div class="note-title">Weekend brunch spots worth the wait</div>
<div class="note-meta"><span class="avatar" style="background:#7cc7e8;"></span><span>Jordan Lee</span><span class="like"><span class="heart">♥</span>860</span></div>
</div>
</div>
</div>
<div class="col">
<div class="note">
<div class="cover" style="height:120px;background:linear-gradient(160deg,#d9d3f7,#a99df0);"></div>
<div class="note-body">
<div class="note-title">Packing list for a 3-day city trip</div>
<div class="note-meta"><span class="avatar" style="background:#e79ec6;"></span><span>Sam Park</span><span class="like"><span class="heart">♥</span>2.4k</span></div>
</div>
</div>
<div class="note">
<div class="cover" style="height:150px;background:linear-gradient(160deg,#ffe3c7,#ffb680);"></div>
<div class="note-body">
<div class="note-title">Outfit ideas for the office that don't feel boring</div>
<div class="note-meta"><span class="avatar" style="background:#f6a3a3;"></span><span>Casey Moon</span><span class="like"><span class="heart">♥</span>1.7k</span></div>
</div>
</div>
</div>
<div class="col">
<div class="note">
<div class="cover" style="height:130px;background:linear-gradient(160deg,#c8e8f5,#7fbfe0);"></div>
<div class="note-body">
<div class="note-title">Home café corner on a small budget</div>
<div class="note-meta"><span class="avatar" style="background:#c9b6f2;"></span><span>Taylor Ryu</span><span class="like"><span class="heart">♥</span>930</span></div>
</div>
</div>
<div class="note">
<div class="cover" style="height:100px;background:linear-gradient(160deg,#ffd6e8,#ff9dc0);"></div>
<div class="note-body">
<div class="note-title">Sunscreen dupes I actually repurchased</div>
<div class="note-meta"><span class="avatar" style="background:#8fd4b3;"></span><span>Morgan Choi</span><span class="like"><span class="heart">♥</span>3.1k</span></div>
</div>
</div>
</div>
<div class="col">
<div class="note">
<div class="cover" style="height:160px;background:linear-gradient(160deg,#fff0c2,#ffce6b);"></div>
<div class="note-body">
<div class="note-title">One-pan dinner I make every week</div>
<div class="note-meta"><span class="avatar" style="background:#f6c453;"></span><span>Riley Han</span><span class="like"><span class="heart">♥</span>1.5k</span></div>
</div>
</div>
<div class="note">
<div class="cover" style="height:90px;background:linear-gradient(160deg,#e0d9f5,#b3a3ea);"></div>
<div class="note-body">
<div class="note-title">Small apartment shelf styling tips</div>
<div class="note-meta"><span class="avatar" style="background:#7cc7e8;"></span><span>Devon Baek</span><span class="like"><span class="heart">♥</span>640</span></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff7200; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff7200; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3d09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff432b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff7200; color: #000000;
border: 1px solid #ff432b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff7200; color: #111111;
border: 1px solid #d96203; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3d09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff6a07; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#423e3c; box-sizing:border-box;
font-family:"Noto Serif TC", "Times New Roman", serif; letter-spacing:0.6px; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#ffffff; border-bottom:1px solid #eaeae9; }
.brand { font-weight:700; font-size:19px; color:#423e3c; }
.navlinks { display:flex; gap:26px; font-size:15px; }
.navlinks span:first-child { font-weight:700; font-size:16px; }
.login { background:#ff7200; color:#fff; border:none; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { display:flex; height:210px; }
.hero-left { width:640px; padding:26px 32px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.hero-left h1 { font-size:26px; font-weight:700; margin:0; line-height:1.35; }
.hero-left p { font-size:15px; color:#575451; margin:0; line-height:1.5; }
.hero-right { flex:1; background:linear-gradient(135deg,#ffd8b8,#ff7200); position:relative; }
.hero-right::after { content:'熱門'; position:absolute; bottom:14px; left:14px; background:#ff432b; color:#fff;
font-size:12px; font-weight:700; padding:4px 10px; border-radius:6px; }
.tags { display:flex; gap:10px; padding:14px 32px; border-bottom:1px solid #eaeae9; }
.tag { border:1px solid #eaeae9; border-radius:6px; padding:7px 12px; font-size:14px; font-weight:700; color:#423e3c; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:20px 32px; }
.card { border:1px solid #eaeae9; border-radius:6px; overflow:hidden; background:#fff; }
.cover { height:110px; }
.c1 .cover { background:linear-gradient(160deg,#f6cba0,#e69b5c); }
.c2 .cover { background:linear-gradient(160deg,#c9e0c7,#8fbd8b); }
.c3 .cover { background:linear-gradient(160deg,#d9c9e0,#a980b8); }
.ctitle { font-size:15px; font-weight:700; padding:12px 14px 4px; line-height:1.4; }
.cmeta { font-size:13px; color:#817f7d; padding:0 14px 14px; }
footer { position:absolute; bottom:0; left:0; right:0; height:64px; background:#f4f4f4; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; font-size:13px; color:#423e3c; }
</style></head>
<body>
<nav>
<div class="brand">PIXNET</div>
<div class="navlinks">
<span>gogo+ Travel</span><span style="font-weight:400;">Food</span><span style="font-weight:400;">Film & TV</span><span style="font-weight:400;">Parenting</span>
</div>
<button class="login">Log in</button>
</nav>
<div class="hero">
<div class="hero-left">
<h1>Discover the latest trending posts<br>and fill your life with inspiration</h1>
<p>Taiwan's lifestyle blogging platform — travel, food, film & TV, parenting — every post a real story.</p>
</div>
<div class="hero-right"></div>
</div>
<div class="tags">
<div class="tag">#EVAAir</div>
<div class="tag">#FamilyTravel</div>
<div class="tag">#JapanTrip</div>
<div class="tag">#FallOutfits</div>
</div>
<div class="grid">
<div class="card c1"><div class="cover"></div><div class="ctitle">Kyoto in autumn: three walking routes we recommend most</div><div class="cmeta">Travel · 8 min read</div></div>
<div class="card c2"><div class="cover"></div><div class="ctitle">Japanese-style rice cooker meals in three easy steps</div><div class="cmeta">Food · 5 min read</div></div>
<div class="card c3"><div class="cover"></div><div class="ctitle">Our kid's first camping trip: the packing checklist</div><div class="cmeta">Parenting · 10 min read</div></div>
</div>
<footer>
<span>© PIXNET</span>
<span>PIXNET · About Us · Privacy Policy · Terms of Service</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064ff; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064ff; color: #f5f5f5;
border: 1px solid #277bfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e64fd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f4f6; color:#191f28; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
.frame { display:flex; height:640px; }
.phone { width:340px; background:#ffffff; margin:24px; border-radius:28px; box-shadow:0 20px 40px rgba(0,0,0,0.12);
padding:24px 22px; display:flex; flex-direction:column; gap:16px; }
.phone h2 { font-size:24px; font-weight:600; margin:0; line-height:1.3; }
.field { background:#f2f4f6; border-radius:6px; height:38px; display:flex; align-items:center; padding:0 12px;
font-size:14px; color:#8b95a1; }
.agree { display:flex; align-items:center; gap:8px; font-size:14px; color:#4e5968; }
.agree .box { width:18px; height:18px; border-radius:4px; background:#3182f6; position:relative; }
.agree .box::after { content:''; position:absolute; left:5px; top:3px; width:6px; height:9px;
border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg); }
.btn { background:#3182f6; color:#ffffff; border:none; border-radius:16px; height:56px; font-size:17px;
font-weight:600; margin-top:auto; }
.btn.danger { background:#ffffff; color:#e42939; border:1px solid #e5e8eb; height:38px; border-radius:8px; font-size:14px; font-weight:600; }
.side { flex:1; padding:34px 40px; }
.badge { display:inline-block; background:#e8f3ff; color:#1b64da; border-radius:7px; padding:11px 16px;
font-size:15px; font-weight:600; margin-bottom:20px; }
h1 { font-size:36px; font-weight:700; line-height:1.4; margin:0 0 12px; }
.lead { font-size:16px; color:#4e5968; line-height:1.6; max-width:400px; margin:0 0 26px; }
.darkcta { background:rgba(0,12,30,0.85); color:#ffffff; border:none; border-radius:7px; height:46px;
padding:0 22px; font-size:17px; font-weight:600; }
.badges { display:flex; gap:8px; margin-top:26px; }
.tag { background:#f2f4f6; color:#4e5968; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:600; }
</style></head>
<body>
<div class="frame">
<div class="side">
<span class="badge">Toss · TDS Mobile</span>
<h1>Money, answered<br>as easily as it's asked</h1>
<p class="lead">One connected system for checking, comparing, paying, and recovering — built so every action feels the same.</p>
<button class="darkcta">Download the app</button>
<div class="badges">
<span class="tag">Value first</span>
<span class="tag">Easy to answer</span>
</div>
</div>
<div class="phone">
<h2>Agree to the terms and start</h2>
<div class="field">Full name</div>
<div class="field">Phone number</div>
<div class="agree"><span class="box"></span>I agree to all terms</div>
<button class="btn">Continue</button>
<button class="btn danger">Cancel</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0114a7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0114a7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8790d2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0114a7; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0114a7; color: #f5f5f5;
border: 1px solid #2838b3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8790d2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f21b3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",Arial,sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; }
.hdr { flex:0 0 60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eeeeee; }
.hdr .brand { font-size:18px; font-weight:700; }
.hdr .close { font-size:13px; color:#666666; }
.tabs { flex:0 0 52px; display:flex; padding:0 32px; border-bottom:1px solid #eeeeee; gap:28px; }
.tabitem { display:flex; align-items:center; font-size:16px; color:#8a8a8a; font-weight:400;
border-bottom:2px solid transparent; }
.tabitem.sel { color:#000000; font-weight:700; border-bottom-color:#4262ff; }
.hero { flex:0 0 190px; padding:22px 32px 0; }
.hero .kicker { font-size:13px; color:#666666; }
.hero .name { font-size:22px; font-weight:700; margin-top:4px; }
.hero .rate { font-size:44px; font-weight:700; letter-spacing:-0.22px; line-height:59.4px; margin-top:6px;
color:#0114a7; }
.hero .rate span { font-size:20px; font-weight:400; color:#000000; margin-left:6px; }
.hero .desc { font-size:16px; font-weight:400; line-height:normal; color:#333333; margin-top:6px; max-width:640px; }
.terms { flex:0 0 64px; display:flex; gap:10px; padding:14px 32px 0; }
.chip { height:32px; border:1px solid #dcdfe4; border-radius:6px; padding:0 12px; display:flex;
align-items:center; font-size:16px; color:#301e3f4d; color:#4a4a52; }
.chip.sel { background:#4262ff; border-color:#4262ff; color:#ffffff; font-weight:600; }
.actions { flex:0 0 74px; display:flex; align-items:center; gap:12px; padding:14px 32px 0; }
.btn-primary { height:48px; border-radius:10px; padding:0 28px; background:#0114a7; color:#ffffff;
font-size:16px; font-weight:400; display:flex; align-items:center; justify-content:center; border:none; }
.btn-compact { height:40px; border-radius:8px; padding:0 14px; background:#4262ff; color:#ffffff;
font-size:16px; font-weight:400; display:flex; align-items:center; justify-content:center; border:none; }
.fill { flex:1; }
.fullbtn { flex:0 0 60px; border-top:1px solid #eeeeee; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:18.72px; font-weight:700; color:#000000; }
.fullbtn .arrow { font-size:16px; color:#8a8a8a; }
</style></head>
<body>
<div class="app">
<div class="hdr"><div class="brand">K bank</div><div class="close">Deposit products</div></div>
<div class="tabs">
<div class="tabitem sel">Deposit</div>
<div class="tabitem">Savings</div>
<div class="tabitem">Card</div>
</div>
<div class="hero">
<div class="kicker">Free savings deposit</div>
<div class="name">Curious Saving</div>
<div class="rate">4.5<span>% annual interest, before tax</span></div>
<div class="desc">A flexible everyday savings account with no minimum balance. Interest accrues daily
and can be withdrawn anytime without penalty.</div>
</div>
<div class="terms">
<div class="chip">6 months</div>
<div class="chip sel">12 months</div>
<div class="chip">24 months</div>
</div>
<div class="actions">
<button class="btn-primary">Open account</button>
<button class="btn-compact">Calculate interest</button>
</div>
<div class="fill"></div>
<div class="fullbtn"><span>View all terms and conditions</span><span class="arrow">></span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1b2e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1b1b2e;
border: 1px solid #1b1b2e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbde; color: #1b1b2e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1B1B2E; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; width:960px; height:640px; position:relative; }
.rail { width:64px; flex:0 0 64px; background:#F7F7FB; border-right:1px solid #E7E7EF;
display:flex; flex-direction:column; align-items:center; padding-top:18px; gap:16px; }
.rail .sq { width:30px; height:30px; border-radius:9px; background:#7B68EE; }
.rail .sq2 { width:30px; height:30px; border-radius:9px; background:#F7F7FB; border:1.5px solid #DEDEE9; }
.rail .sq3 { width:30px; height:30px; border-radius:9px; background:#F7F7FB; border:1.5px solid #DEDEE9; }
.main { flex:1; display:flex; flex-direction:column; }
.header { padding:16px 26px 0; }
.crumb { font-size:11px; color:#9292A8; margin-bottom:6px; }
.titlerow { display:flex; align-items:center; gap:10px; }
.colorsq { width:20px; height:20px; border-radius:6px; background:linear-gradient(135deg,#7B68EE,#FD71AF); }
.listtitle { font-size:24px; font-weight:800; letter-spacing:-0.3pt; }
.viewtabs { display:flex; gap:18px; margin-top:12px; border-bottom:1px solid #E7E7EF; padding-bottom:0; }
.vtab { font-size:12px; font-weight:600; color:#5E5E7A; padding-bottom:9px; }
.vtab.active { color:#7B68EE; border-bottom:2.5px solid #7B68EE; }
.list { flex:1; padding:14px 26px 0; overflow:hidden; }
.statushead { display:flex; align-items:center; gap:8px; margin:14px 0 6px; }
.pill { font-size:9px; font-weight:800; letter-spacing:0.5pt; text-transform:uppercase; color:#fff;
padding:3px 8px; border-radius:5px; }
.pill.todo { background:#5B5B79; }
.pill.prog { background:#49CCF9; color:#0E2A33; }
.pill.done { background:#2ECC71; }
.cnt { font-size:11px; color:#9292A8; }
.row { display:flex; align-items:center; gap:10px; padding:9px 6px; border-bottom:1px solid #E7E7EF; }
.chk { width:16px; height:16px; border-radius:5px; border:2px solid #5B5B79; flex:0 0 16px; }
.chk.prog { border-color:#49CCF9; }
.chk.done { background:#2ECC71; border-color:#2ECC71; color:#fff; font-size:10px; display:flex;
align-items:center; justify-content:center; }
.name { flex:1; font-size:13px; font-weight:600; }
.name.strike { text-decoration:line-through; color:#9292A8; font-weight:400; }
.flag { width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
border-bottom:10px solid #F44E6E; }
.flag.hi { border-bottom-color:#FF9F1A; }
.flag.no { border-bottom-color:#49CCF9; }
.tag { font-size:9px; font-weight:700; padding:2px 7px; border-radius:999px; }
.tag.purple { background:#7B68EE38; color:#7B68EE; }
.tag.teal { background:#1ECBE138; color:#06363C; }
.due { font-size:11px; color:#5E5E7A; width:46px; text-align:right; }
.due.over { color:#F44E6E; }
.avatar { width:20px; height:20px; border-radius:50%; background:#7B68EE; color:#fff; font-size:8px;
font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 20px; }
.aibar { margin:14px 6px 0; display:flex; align-items:center; gap:8px; border-radius:10px;
border:1px solid #7B68EE; background:linear-gradient(90deg,rgba(123,104,238,0.14),rgba(253,113,175,0.14),rgba(73,204,249,0.14));
padding:9px 12px; }
.aibar .sparkle { color:#7B68EE; font-size:12px; }
.aibar .txt { font-size:11px; color:#5E5E7A; }
.aibar .txt b { color:#1B1B2E; }
.fab { position:absolute; right:24px; bottom:22px; width:56px; height:56px; border-radius:18px;
background:linear-gradient(135deg,#7B68EE,#FD71AF,#49CCF9); display:flex; align-items:center;
justify-content:center; color:#fff; font-size:24px; font-weight:300;
box-shadow:0 8px 22px rgba(123,104,238,0.5); }
</style></head>
<body>
<div class="shell">
<div class="rail"><div class="sq"></div><div class="sq2"></div><div class="sq3"></div></div>
<div class="main">
<div class="header">
<div class="crumb">Product ▸ Sprints ▸ ClickUp (iOS)</div>
<div class="titlerow"><div class="colorsq"></div><div class="listtitle">Everything</div></div>
<div class="viewtabs">
<div class="vtab active">List</div><div class="vtab">Board</div><div class="vtab">Calendar</div>
<div class="vtab">Gantt</div><div class="vtab">Doc</div><div class="vtab">Table</div>
</div>
</div>
<div class="list">
<div class="statushead"><span class="pill prog">In Progress</span><span class="cnt">3</span></div>
<div class="row"><div class="chk prog"></div><div class="name">Ship the AI compose field</div>
<div class="flag"></div><span class="tag purple">design</span><span class="due">Fri</span>
<div class="avatar">JK</div></div>
<div class="row"><div class="chk prog"></div><div class="name">Fix squircle FAB shadow on dark</div>
<div class="flag hi"></div><span class="tag teal">bug</span><span class="due over">Mon</span>
<div class="avatar">MT</div></div>
<div class="row"><div class="chk prog"></div><div class="name">Write status-pill copy for onboarding</div>
<div class="flag no"></div><span class="tag purple">copy</span><span class="due">Wed</span>
<div class="avatar">RS</div></div>
<div class="statushead"><span class="pill todo">To Do</span><span class="cnt">2</span></div>
<div class="row"><div class="chk"></div><div class="name">Audit tag tint contrast in dark mode</div>
<div class="flag hi"></div><span class="tag teal">a11y</span><span class="due">Next wk</span>
<div class="avatar">JK</div></div>
<div class="statushead"><span class="pill done">Complete</span><span class="cnt">1</span></div>
<div class="row"><div class="chk done">✓</div><div class="name strike">Migrate board columns to new schema</div>
<div class="flag no"></div><span class="tag purple">infra</span><span class="due">—</span>
<div class="avatar">MT</div></div>
<div class="aibar"><span class="sparkle">✦</span><span class="txt"><b>ClickUp (iOS) AI</b> · summarize this sprint</span></div>
</div>
</div>
<div class="fab">＋</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e66fd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171719; box-sizing:border-box;
font-family:"Pretendard Variable",-apple-system,sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e8e9ea; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#171719; }
.acct { background:transparent; color:#0066ff; border:1px solid rgba(112,115,124,0.16); border-radius:8px;
padding:7px 14px; font-size:14px; }
.toolbar { display:flex; gap:10px; padding:14px 32px 8px; }
.filter { background:transparent; color:#171719; border:1px solid rgba(112,115,124,0.16); border-radius:8px;
padding:7px 11px; font-size:14px; }
.search { flex:1; background:#f8f8f8; border-radius:8px; padding:7px 14px; font-size:14px; color:#858688; }
.list { padding:6px 32px 20px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.job { display:flex; gap:14px; padding:14px; border-radius:12px; }
.thumb { width:96px; height:72px; border-radius:12px; flex-shrink:0; }
.th1 { background:linear-gradient(135deg,#dbeafe,#0066ff); }
.th2 { background:linear-gradient(135deg,#fde68a,#f59e0b); }
.th3 { background:linear-gradient(135deg,#dcfce7,#16a34a); }
.th4 { background:linear-gradient(135deg,#fbcfe8,#db2777); }
.job .body h4 { font-size:16px; font-weight:600; margin:0 0 4px; }
.job .body .company { font-size:14px; color:#333333; margin:0 0 4px; }
.job .body .meta { font-size:12px; font-weight:500; color:#858688; }
</style></head>
<body>
<header>
<span class="brand">Wanted</span>
<div class="navlinks"><span>Jobs</span><span>Companies</span><span>Community</span><span>Resume</span></div>
<span class="acct">My account</span>
</header>
<div class="toolbar">
<span class="filter">All tags</span><span class="filter">Location</span><span class="filter">Career level</span>
<span class="search">Search role, company</span>
</div>
<div class="list">
<div class="job"><div class="thumb th1"></div><div class="body"><h4>Senior Frontend Engineer</h4><p class="company">Aurora Systems</p><span class="meta">Software · Seoul</span></div></div>
<div class="job"><div class="thumb th2"></div><div class="body"><h4>Product Designer</h4><p class="company">Northline Studio</p><span class="meta">Design · Seoul</span></div></div>
<div class="job"><div class="thumb th3"></div><div class="body"><h4>Backend Engineer, Payments</h4><p class="company">Kepler Labs</p><span class="meta">Software · Remote</span></div></div>
<div class="job"><div class="thumb th4"></div><div class="body"><h4>Growth Marketing Manager</h4><p class="company">Harborline</p><span class="meta">Marketing · Busan</span></div></div>
<div class="job"><div class="thumb th1"></div><div class="body"><h4>Data Analyst</h4><p class="company">Fieldstone</p><span class="meta">Data · Seoul</span></div></div>
<div class="job"><div class="thumb th3"></div><div class="body"><h4>DevOps Engineer</h4><p class="company">Meridian Cloud</p><span class="meta">Infra · Remote</span></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00512a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00512a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87ab9a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #26a862; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00512a; color: #26a862;
border: 1px solid #26a862; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00512a; color: #f5f5f5;
border: 1px solid #276b4a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87ab9a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #065f33; color: #26a862;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#333333; box-sizing:border-box;
font-family:'Roboto Flex','Noto Sans TC',"PingFang TC","Microsoft JhengHei",sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; background:#fff; }
.brand { font-size:19px; font-weight:700; color:#00512a; margin:0; }
.navlinks { display:flex; gap:26px; font-size:16px; color:#333333; }
.btn-primary { background:#00512a; color:#fff; border:1px solid #00512a; border-radius:5px; height:44px; padding:0 20px; font-size:16px; }
.hero { padding:30px 40px 20px; text-align:center; background:linear-gradient(180deg,#f3fff7,#fafafa); }
.hero h1 { font-size:36px; font-weight:700; line-height:1.4; margin:0 0 8px; color:#333333; }
.hero p { font-size:18px; color:#555555; margin:0; }
.tiles { display:flex; justify-content:center; gap:14px; padding:18px 40px; }
.tile { background:rgba(255,255,255,0.7); border:1px solid #eeeeee; border-radius:5px; padding:24px 18px;
text-align:center; width:150px; }
.tile .ic { width:36px; height:36px; border-radius:50%; background:#26a862; margin:0 auto 10px; }
.tile .t { font-size:14px; color:#333333; font-weight:400; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:8px 40px 26px; }
.card { background:#ffffff; border-radius:5px; padding:22px; box-shadow: rgba(0,0,0,0.12) 0px 4px 16px; }
.card .b { display:inline-block; background:#f3fff7; color:#26a862; font-size:12px; font-weight:700;
border-radius:5px; padding:3px 8px; margin-bottom:10px; }
.card h3 { font-size:17px; font-weight:700; margin:0 0 6px; color:#333333; }
.card p { font-size:13px; color:#555555; margin:0 0 14px; line-height:1.5; }
.card button { background:transparent; color:#00512a; border:1px solid #00512a; border-radius:5px;
height:36px; padding:0 16px; font-size:14px; }
.footer { background:#00283d; padding:14px 40px; display:flex; justify-content:space-between; align-items:center;
font-size:13px; color:#fff; }
</style></head>
<body>
<nav>
<p class="brand">Cathay</p>
<div class="navlinks"><span>Personal Banking</span><span>Corporate Banking</span><span>Wealth Management</span></div>
<button class="btn-primary">I'm Interested</button>
</nav>
<section class="hero">
<h1>A Better Experience, Every Time</h1>
<p>Seize the right moment — plan every financial step with confidence</p>
</section>
<section class="tiles">
<div class="tile"><div class="ic"></div><div class="t">Open Account</div></div>
<div class="tile"><div class="ic"></div><div class="t">Exchange Rates</div></div>
<div class="tile"><div class="ic"></div><div class="t">Transfer</div></div>
<div class="tile"><div class="ic"></div><div class="t">Video Support</div></div>
</section>
<section class="cards">
<div class="card"><span class="b">Popular</span><h3>CUBE Credit Card</h3><p>A rewards plan tailored just for you — spend smarter.</p><button>Learn More</button></div>
<div class="card"><span class="b">Recommended</span><h3>Foreign Currency Deposit</h3><p>Track exchange rate movements and grow your assets steadily.</p><button>Seize the Moment</button></div>
<div class="card"><span class="b">Secure</span><h3>Digital Insurance</h3><p>Prepare the best protection plan for your family.</p><button>Learn More</button></div>
</section>
<div class="footer"><span>© Cathay</span><span>Personal Banking · Corporate Banking · Privacy Policy</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb1000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb1000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f08e87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b63fb; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb1000; color: #000000;
border: 1px solid #3b63fb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb1000; color: #f5f5f5;
border: 1px solid #ed3527; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f08e87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf1d28; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:320px; position:relative; background:linear-gradient(135deg,#1a1a1a,#3a1010 60%, #eb1000 140%); overflow:hidden; }
.hero nav { display:flex; justify-content:space-between; align-items:center; padding:18px 32px; }
.logo { width:26px; height:26px; background:#eb1000; border-radius:6px; }
.navlinks { display:flex; gap:22px; color:#ffffff; font-size:14px; font-weight:700; }
.signin { border:1px solid #ffffff; color:#ffffff; background:transparent; border-radius:999px; padding:0 20px; height:32px; font-size:13px; font-weight:700; }
.heroinner { padding:20px 32px; }
.heroinner h1 { color:#ffffff; font-size:56px; font-weight:900; margin:0 0 6px; max-width:600px; line-height:1.05; }
.heroctas { display:flex; gap:12px; margin-top:16px; }
.pillwhite { background:#ffffff; color:#000000; border:none; border-radius:75px; padding:0 24px; height:40px; font-size:14px; font-weight:700; }
.pillghost { background:transparent; color:#ffffff; border:1px solid #ffffff; border-radius:75px; padding:0 24px; height:40px; font-size:14px; font-weight:700; }
.quicklinks { display:flex; gap:14px; padding:0 32px; margin-top:-56px; position:relative; z-index:2; }
.glass { flex:1; background:rgba(0,0,0,0.44); border-radius:8px; padding:12px 12px 16px; box-shadow:rgba(255,255,255,0.11) 0px 0px 0px 1px inset; color:#ffffff; font-size:13px; font-weight:700; }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:26px 32px 0; }
.tile { background:#f3f3f3; border-radius:16px; padding:20px; }
.tile h3 { font-size:24px; font-weight:900; margin:0 0 6px; }
.tile p { font-size:16px; color:#2c2c2c; margin:0; }
.tile .cta { margin-top:12px; background:#3b63fb; color:#fff; border:2px solid #3b63fb; border-radius:16px; height:30px; padding:3px 16px 4px; font-size:15px; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; border-top:1px solid #dadada; display:flex; justify-content:space-between; font-size:11px; color:#686868; }
</style></head>
<body>
<div class="hero">
<nav>
<div class="logo"></div>
<div class="navlinks"><span>Creativity</span><span>PDF</span><span>Marketing</span><span>Firefly</span></div>
<button class="signin">Sign in</button>
</nav>
<div class="heroinner">
<h1>Create at the highest level.</h1>
<div class="heroctas">
<button class="pillwhite">Free trial</button>
<button class="pillghost">See all products</button>
</div>
</div>
</div>
<div class="quicklinks">
<div class="glass">Creativity and design</div>
<div class="glass">Content creation</div>
<div class="glass">PDF and document essentials</div>
</div>
<div class="tiles">
<div class="tile"><h3>Firefly</h3><p>Create and enhance images, videos, and vectors with generative AI.</p><button class="cta">Buy now</button></div>
<div class="tile"><h3>Photoshop</h3><p>Everything you need to make anything, on any device.</p><button class="cta">Buy now</button></div>
<div class="tile"><h3>Acrobat</h3><p>Turn any document into a professional, secure PDF.</p><button class="cta">Buy now</button></div>
</div>
<footer>
<span>© Adobe</span>
<span>Empowering everyone to create.</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #356dff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #356dff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9fb8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00142d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #356dff; color: #00142d;
border: 1px solid #00142d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #356dff; color: #f5f5f5;
border: 1px solid #5483fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9fb8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d5fdd; color: #00142d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00142d; color:#ffffff; box-sizing:border-box;
font-family:"Noto Sans TC",-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; color:#00142d; }
.navlinks { display:flex; gap:20px; font-size:16px; color:#00142d; }
.navcta { background:#000000; color:#ffffff; border-radius:30px; height:38px; padding:0 24px; font-size:14px; font-weight:700; display:flex; align-items:center; }
.hero { padding:44px 40px; text-align:center; }
.hero h1 { font-size:48px; font-weight:700; line-height:1.33; margin:0 0 20px; }
.row { display:flex; gap:14px; justify-content:center; }
.pillblue { background:#356dff; color:#ffffff; border-radius:30px; height:45px; padding:0 24px; font-size:18px; font-weight:700; display:flex; align-items:center; }
.pillout { background:#ffffff; color:#356dff; border:1px solid #356dff; border-radius:30px; height:45px; padding:0 24px; font-size:18px; font-weight:700; display:flex; align-items:center; }
.wash { background:#edf4fd; color:#00142d; padding:26px 40px; margin-top:10px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border-radius:8px; padding:16px; box-shadow:0 8px 16px rgba(0,0,0,0.08); }
.card h3 { font-size:15px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">SHOPLINE</p>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Case Studies</span></div>
<span class="navcta">Free Trial</span>
</nav>
<section class="hero">
<h1>All-in-one retail integration expert</h1>
<div class="row"><span class="pillblue">14-Day Free Trial</span><span class="pillout">See All Plans</span></div>
</section>
<div class="wash">
<div class="cards">
<div class="card"><h3>Store Builder</h3><p>Complete store-opening features to keep your business growing.</p></div>
<div class="card"><h3>Payments</h3><p>Local and international payment methods, connected.</p></div>
<div class="card"><h3>Omni-Channel</h3><p>Online and offline inventory, synced in real time.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fdf8f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #fdf8f2;
border: 1px solid #fdf8f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3e3e3d; color: #fdf8f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FDF8F2; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#FDF8F2; padding:22px 18px; position:relative; }
.header { font-size:22px; font-weight:700; margin-bottom:14px; }
.photo { height:190px; border-radius:16px; margin-bottom:14px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#e7c9a8,#a6785a); }
.hearttap { position:absolute; bottom:12px; right:12px; width:44px; height:44px; border-radius:50%; background:#FAF6F0;
border:1px solid #1A1A1A; display:flex; align-items:center; justify-content:center; font-size:18px; }
.prompt { background:#FAF6F0; border:0.5px solid #E0D6C5; border-radius:16px; padding:24px; position:relative; }
.pq { font-size:16px; font-weight:500; color:#4A4239; margin-bottom:10px; font-style:italic; }
.pa { font-size:18px; font-weight:700; color:#1A1A1A; }
.prompt .hearttap { bottom:12px; right:12px; }
.vitals { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.vitals span { background:#F2EBE0; border-radius:999px; padding:7px 12px; font-size:12px; font-weight:500; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:#FDF8F2; border-top:0.5px solid #E0D6C5;
display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#7A7268; text-align:center; }
.tab.on { color:#1A1A1A; font-weight:600; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.brand span { color:#E8A04D; }
.tag { font-size:14px; color:#4A4239; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:16px; border:1px solid #E0D6C5; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#4A4239; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#4A4239; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#F2EBE0; border:1px solid #E0D6C5; color:#4A4239; }
.footer { margin-top:auto; border-top:1px solid #E0D6C5; padding-top:16px; font-size:11px; color:#7A7268; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="header">Sigrún, 28</div>
<div class="photo"><div class="hearttap">♥</div></div>
<div class="prompt">
<div class="pq">Two truths and a lie</div>
<div class="pa">I've summited three volcanoes, I once slept through an earthquake, and I hate coffee.</div>
<div class="hearttap">♥</div>
</div>
<div class="vitals"><span>5'9"</span><span>Product Designer</span><span>San Francisco</span></div>
<div class="tabbar"><div class="tab on">Discover</div><div class="tab">Likes You</div><div class="tab">Standouts</div><div class="tab">Matches</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Hinge (iOS)<span>.</span></h1>
<p class="tag">A profile printed on warm cream paper — a vertical scroll of prompts and photos, each answered with a tap, not a swipe.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#1A1A1A"></div><small>#1A1A1A</small></div>
<div class="sw"><div class="chip2" style="background:#FDF8F2"></div><small>#FDF8F2</small></div>
<div class="sw"><div class="chip2" style="background:#E8A04D"></div><small>#E8A04D</small></div>
<div class="sw"><div class="chip2" style="background:#F2EBE0"></div><small>#F2EBE0</small></div>
<div class="sw"><div class="chip2" style="background:#2D7A4B"></div><small>#2D7A4B</small></div>
</div>
<div class="typeblock">
<div class="t1">Two truths and a lie</div>
<div class="t2">Sailec + Inter · prompt answers set larger than the question, magazine pull-quote weight</div>
</div>
<div class="taglist">
<span>Vertical scroll profile</span><span>Heart-tap on every card</span><span>Rose Gold Standouts</span>
<span>Comment-on-photo</span><span>No swipe stack</span>
</div>
<div class="footer">Cream canvas #FDF8F2 · Rose Gold sacred to Standouts, Roses, premium only</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3b7de9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3b7de9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a1bff0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0054ac; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b7de9; color: #000000;
border: 1px solid #0054ac; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3b7de9; color: #f5f5f5;
border: 1px solid #5990eb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a1bff0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3276df; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; }
.side { flex:0 0 168px; background:#333333; color:#ffffff; display:flex; flex-direction:column; padding:16px 0; }
.side .logo { font-size:15px; font-weight:700; padding:0 16px 14px; border-bottom:1px solid rgba(255,255,255,0.15); margin-bottom:10px; }
.side .item { padding:9px 16px; font-size:13px; color:#cfd6e0; }
.side .item.active { background:#0054ac; color:#ffffff; font-weight:700; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { flex:0 0 52px; border-bottom:1px solid #d4d8dd; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.topbar h1 { font-size:20px; font-weight:700; color:#333333; margin:0; }
.btn { border-radius:4px; font-size:14px; font-weight:400; height:32px; padding:0 12px; border:1px solid; }
.btn-primary { background:linear-gradient(to bottom,#3b7de9,#0054ac); color:#ffffff; border-color:rgba(0,0,0,0.15); font-weight:700; }
.btn-default { background:linear-gradient(to bottom,#ffffff,#ecf2fd); color:#333333; border-color:#d4d8dd; }
.content { flex:1; padding:16px 24px; display:flex; flex-direction:column; gap:12px; min-height:0; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat { background:#ffffff; border:1px solid #d4d8dd; border-radius:4px; padding:10px 14px; }
.stat .lbl { font-size:12px; color:#999999; }
.stat .val { font-size:20px; font-weight:700; color:#333333; }
.stat .val.err { color:#d0021b; }
.stat .val.ok { color:#65ab51; }
.notice { background:#fcf8e3; color:#8a6d3b; border-radius:4px; padding:8px 14px; font-size:13px; }
.block { flex:1; background:#ffffff; border:1px solid #d4d8dd; border-radius:4px; display:flex; flex-direction:column; min-height:0; }
.block .bhead { padding:10px 16px; border-bottom:1px solid #d4d8dd; display:flex; justify-content:space-between; align-items:center; }
.block .bhead h2 { font-size:16px; font-weight:700; margin:0; color:#333333; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { text-align:left; background:#f7f7f7; color:#666666; font-weight:400; font-size:12px;
padding:7px 14px; border-bottom:1px solid #d4d8dd; }
tbody td { padding:7px 14px; border-bottom:1px solid #d4d8dd; color:#333333; }
tbody tr:nth-child(even) td { background:#f7f7f7; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
.tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; }
.tag-ok { background:#eef7ec; color:#65ab51; }
.tag-wait { background:#fcf8e3; color:#8a6d3b; }
.tag-err { background:#ffeeeb; color:#d0021b; }
</style></head>
<body>
<div class="side">
<div class="logo">Money Forward Cloud</div>
<div class="item active">Invoices</div>
<div class="item">Accounting</div>
<div class="item">Expenses</div>
<div class="item">Payroll</div>
<div class="item">Tax filing</div>
</div>
<div class="main">
<div class="topbar">
<h1>Invoices</h1>
<div style="display:flex;gap:8px;">
<button class="btn btn-default">Cancel</button>
<button class="btn btn-primary">Save</button>
</div>
</div>
<div class="content">
<div class="stats">
<div class="stat"><div class="lbl">Billed this month</div><div class="val">¥3,248,600</div></div>
<div class="stat"><div class="lbl">Paid</div><div class="val ok">¥2,910,000</div></div>
<div class="stat"><div class="lbl">Outstanding</div><div class="val err">¥338,600</div></div>
<div class="stat"><div class="lbl">Drafts</div><div class="val">4</div></div>
</div>
<div class="notice">2 invoices are past their due date. Please review the payment status.</div>
<div class="block">
<div class="bhead"><h2>Recent invoices</h2><button class="btn btn-default">New invoice</button></div>
<table>
<thead><tr><th>Invoice #</th><th>Client</th><th>Issued</th><th>Due date</th><th style="text-align:right;">Amount</th><th>Status</th></tr></thead>
<tbody>
<tr><td>INV-2026-0142</td><td>Sample Trading Co.</td><td>2026-08-01</td><td>2026-08-31</td><td class="num">¥528,000</td><td><span class="tag tag-ok">Paid</span></td></tr>
<tr><td>INV-2026-0143</td><td>Yamada Industries Inc.</td><td>2026-08-04</td><td>2026-09-04</td><td class="num">¥312,400</td><td><span class="tag tag-wait">Outstanding</span></td></tr>
<tr><td>INV-2026-0144</td><td>Aoi Design LLC</td><td>2026-08-09</td><td>2026-08-20</td><td class="num">¥96,800</td><td><span class="tag tag-err">Overdue</span></td></tr>
<tr><td>INV-2026-0145</td><td>Forward Logistics Inc.</td><td>2026-08-12</td><td>2026-09-12</td><td class="num">¥1,240,000</td><td><span class="tag tag-ok">Paid</span></td></tr>
<tr><td>INV-2026-0146</td><td>Tanaka Shoten</td><td>2026-08-15</td><td>2026-08-25</td><td class="num">¥241,800</td><td><span class="tag tag-err">Overdue</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1890ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1890ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92c8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1890ff; color: #f5f5f5;
border: 1px solid #f5f5f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1890ff; color: #f5f5f5;
border: 1px solid #3ba0fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92c8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3ba0fd; color: #f5f5f5;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F5F5F5; color:#000000; box-sizing:border-box;
font-family:-apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
* { box-sizing:border-box; }
.nav { height:52px; background:#ffffff; display:flex; align-items:center; padding:0 24px; gap:26px;
border-bottom:1px solid #eeeeee; }
.nav .logo { font-weight:700; font-size:16px; color:#1890FF; }
.nav a { font-size:14px; color:#333333; }
.nav a.cur { color:#1890FF; font-weight:500; }
.navspacer { flex:1; }
.search { width:220px; height:30px; border:1px solid #999999; border-radius:2px; font-size:14px; color:#999999;
display:flex; align-items:center; padding:4px 8px 4px 11px; }
.banner { margin:20px 24px 0; background:linear-gradient(90deg,#0f4ba0,#1890FF); border-radius:8px; height:150px;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; color:#fff; }
.banner h1 { font-size:26px; font-weight:600; margin:0 0 8px; }
.banner p { font-size:14px; margin:0; opacity:0.9; max-width:360px; line-height:1.5; }
.banner .cta { background:#1890FF; color:#fff; border:none; border-radius:2px; padding:0.01px 15px 4px; height:40px;
font-size:16px; font-weight:400; box-shadow:0 2px 0 rgba(0,0,0,0.043); }
.bannerart { width:170px; height:110px; border-radius:8px; background:
repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 10px, rgba(255,255,255,0.02) 10px 20px); }
.section { padding:22px 24px 0; }
.section h3 { font-size:15px; font-weight:600; margin:0 0 12px; color:#000000; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#FFFFFF; border-radius:8px; padding:22px 10px; text-align:center; }
.card .ic { width:40px; height:40px; border-radius:10px; margin:0 auto 12px; }
.ic1{background:#e6f4ff;} .ic2{background:#e9fbf1;} .ic3{background:#fff3e0;}
.ic1::after,.ic2::after,.ic3::after{content:'';display:block;width:20px;height:20px;margin:10px auto 0;border-radius:5px;}
.ic1::after{background:#1890FF;} .ic2::after{background:#00c853;} .ic3::after{background:#ff9800;}
.card h4 { font-size:14px; font-weight:600; margin:0 0 6px; }
.card p { font-size:12px; color:#666; margin:0; line-height:1.5; }
.codebox { margin:18px 24px 0; background:#1e1e1e; border-radius:8px; padding:14px 18px; color:#d4d4d4;
font-family:'Courier New', monospace; font-size:12px; line-height:1.7; }
.codebox .k { color:#569cd6; } .codebox .s { color:#ce9178; } .codebox .c { color:#6a9955; }
footer { display:flex; padding:14px 24px 0; gap:20px; font-size:12px; color:#000000; }
</style></head>
<body>
<nav class="nav">
<span class="logo">Alipay</span>
<a class="cur">Overview</a><a>Web / Mobile App</a><a>Payments</a><a>Marketing APIs</a><a>Tools</a>
<div class="navspacer"></div>
<div class="search">Search docs…</div>
</nav>
<div class="banner">
<div>
<h1>Build with the Alipay Open Platform</h1>
<p>Payments, marketing, and data capabilities for web and mobile apps — one API key to get started.</p>
<button class="cta">Get API Key</button>
</div>
<div class="bannerart"></div>
</div>
<div class="section">
<h3>Developer tools</h3>
<div class="cards">
<div class="card"><div class="ic ic1"></div><h4>Payment SDK</h4><p>Drop-in checkout for web and native apps.</p></div>
<div class="card"><div class="ic ic2"></div><h4>Merchant Console</h4><p>Manage orders, refunds, and settlement.</p></div>
<div class="card"><div class="ic ic3"></div><h4>Sandbox Keys</h4><p>Test transactions before going live.</p></div>
</div>
</div>
<div class="codebox">
<span class="c">// Create a payment session</span><br>
<span class="k">const</span> session = <span class="k">await</span> alipay.<span class="k">create</span>({<br>
amount: <span class="s">"128.00"</span>, currency: <span class="s">"CNY"</span>,<br>
notify_url: <span class="s">"https://example.com/webhook"</span><br>
});
</div>
<footer>
<span>© Alipay Open Platform</span>
<span>Docs</span><span>Status</span><span>Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0f14; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0b0f14;
border: 1px solid #0b0f14; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8d9d9; color: #0b0f14;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0B0F14; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; border-bottom:1px solid #E2E8F0; }
.brandwrap { display:flex; align-items:center; gap:8px; }
.fly { width:26px; height:26px; border-radius:50%; background:#1185FE; position:relative; }
.fly::after { content:''; position:absolute; inset:7px; border-radius:2px; background:#fff; transform:rotate(45deg); }
.brand { font-size:16px; font-weight:700; margin:0; }
.row { display:flex; gap:10px; align-items:center; }
.btn-ghost { background:transparent; color:#0B0F14; border:1px solid #E2E8F0; border-radius:999px; padding:8px 18px; font-weight:600; font-size:13px; }
.btn-blue { background:#1185FE; color:#fff; border:none; border-radius:999px; padding:8px 20px; font-weight:600; font-size:13px; }
.hero { padding:22px 36px 12px; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 4px; letter-spacing:-0.4px; }
.hero p { font-size:13px; color:#697787; margin:0; }
.feedtabs { display:flex; gap:26px; padding:14px 36px 0; border-bottom:1px solid #E2E8F0; }
.feedtabs span { font-size:14px; font-weight:600; color:#697787; padding-bottom:12px; }
.feedtabs span.on { color:#0B0F14; border-bottom:3px solid #1185FE; }
.body-wrap { display:flex; padding:0 36px; gap:28px; }
.feed { flex:1.35; padding-top:6px; }
.skeet { display:flex; gap:10px; padding:14px 0; border-bottom:1px solid #E2E8F0; }
.ava { width:38px; height:38px; border-radius:50%; flex-shrink:0; background:linear-gradient(140deg,#8ec5ff,#1185FE); }
.skcol { flex:1; }
.skhead { font-size:13px; }
.skhead b { font-weight:600; }
.skhead .handle { color:#697787; font-weight:400; }
.skbody { font-size:13px; line-height:1.4; margin:4px 0 8px; }
.skbody .link { color:#1185FE; }
.skactions { display:flex; gap:22px; }
.skactions span { font-size:11px; color:#697787; }
.skactions span.liked { color:#EC4899; font-weight:600; }
.skactions span.reposted { color:#2DBE85; font-weight:600; }
.sidecol { width:210px; padding-top:6px; }
.fabcard { }
.fab { width:52px; height:52px; border-radius:50%; background:#1185FE; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:20px; margin-left:auto; box-shadow:rgba(17,133,254,0.35) 0 6px 20px; }
.sidecard { background:#F1F3F5; border-radius:12px; padding:14px; margin-top:16px; }
.sidecard b { font-size:13px; font-weight:700; display:block; margin-bottom:6px; }
.sugrow { display:flex; align-items:center; gap:8px; margin-top:10px; }
.sugava { width:28px; height:28px; border-radius:50%; background:linear-gradient(140deg,#c9b8ff,#1185FE); }
.sugcol b { font-size:12px; font-weight:600; display:block; }
.sugcol small { font-size:10px; color:#697787; }
.followbtn { margin-left:auto; font-size:10px; font-weight:600; color:#0B0F14; border:1px solid #E2E8F0; border-radius:999px; padding:4px 10px; }
footer { position:absolute; bottom:0; left:0; right:0; height:40px; border-top:1px solid #E2E8F0;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; color:#697787; }
</style></head>
<body>
<nav>
<div class="brandwrap"><div class="fly"></div><p class="brand">Bluesky (iOS)</p></div>
<div class="row"><span style="font-size:13px;color:#697787;">Following · Discover</span></div>
<div class="row">
<button class="btn-ghost">Log in</button>
<button class="btn-blue">Create account</button>
</div>
</nav>
<div class="hero">
<h1>What's happening?</h1>
<p>An open, public conversation — pick your feed, pick your comfort.</p>
</div>
<div class="feedtabs">
<span class="on">Following</span>
<span>Discover</span>
<span>Science</span>
<span>Art</span>
</div>
<div class="body-wrap">
<div class="feed">
<div class="skeet">
<div class="ava"></div>
<div class="skcol">
<div class="skhead"><b>Paul</b> <span class="handle">@pfrazee.com · 2h</span></div>
<div class="skbody">Shipped custom feeds today — pin your own algorithm at the top of Home. <span class="link">#atproto</span></div>
<div class="skactions"><span>💬 12</span><span class="reposted">🔁 34</span><span class="liked">♥ 218</span><span>↗ Share</span></div>
</div>
</div>
<div class="skeet">
<div class="ava" style="background:linear-gradient(140deg,#ffd18e,#1185FE);"></div>
<div class="skcol">
<div class="skhead"><b>mei</b> <span class="handle">@mei.bsky.social · 4h</span></div>
<div class="skbody">the timeline should belong to the reader, not the algorithm. glad this exists.</div>
<div class="skactions"><span>💬 3</span><span>🔁 9</span><span>♥ 61</span><span>↗ Share</span></div>
</div>
</div>
<div class="skeet" style="border-bottom:none;">
<div class="ava" style="background:linear-gradient(140deg,#a1ffd1,#1185FE);"></div>
<div class="skcol">
<div class="skhead"><b>dev.log</b> <span class="handle">@devlog.bsky.social · 6h</span></div>
<div class="skbody">Reply-controls chip shipped — you can see exactly who's allowed to reply. Consent, visibly.</div>
<div class="skactions"><span>💬 7</span><span>🔁 5</span><span>♥ 40</span><span>↗ Share</span></div>
</div>
</div>
</div>
<div class="sidecol">
<div class="fab">✎</div>
<div class="sidecard">
<b>Who to follow</b>
<div class="sugrow"><div class="sugava"></div><div class="sugcol"><b>Ana Ruiz</b><small>@ana.bsky.social</small></div><span class="followbtn">Follow</span></div>
<div class="sugrow"><div class="sugava" style="background:linear-gradient(140deg,#ffb3d1,#1185FE);"></div><div class="sugcol"><b>Theo Park</b><small>@theo.bsky.social</small></div><span class="followbtn">Follow</span></div>
</div>
</div>
</div>
<footer>
<span>© Bluesky (iOS)</span>
<span>Bluesky (iOS) · Following · Discover · Feeds</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c362; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c362; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87deb3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ff91; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c362; color: #000000;
border: 1px solid #00ff91; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c362; color: #000000;
border: 1px solid #27cb7a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87deb3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00cd6a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Noto Sans KR', Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:56px; background:#ffffff; border-bottom:1px solid #e5e6e9; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.nav .logo { font-size:18px; font-weight:700; color:#323438; letter-spacing:-0.2px; }
.nav .links { display:flex; gap:24px; font-size:15px; font-weight:400; color:#4b4c50; }
.nav .links .active { color:#00c362; font-weight:700; }
.nav .auth { display:flex; gap:16px; font-size:13px; color:#686a6d; }
.grey { background:#f3f3f4; padding:20px 32px 22px; }
.search { height:48px; background:#ffffff; border-radius:8px; display:flex; align-items:center;
gap:10px; padding:0 16px; font-size:16px; color:#c5c7cc; margin-bottom:18px; }
.search .ico { width:16px; height:16px; border:2px solid #c5c7cc; border-radius:50%; position:relative; flex:0 0 auto; }
.search .ico::after { content:''; position:absolute; width:7px; height:2px; background:#c5c7cc; right:-6px; bottom:1px; transform:rotate(45deg); border-radius:2px; }
.head-row { display:flex; align-items:center; justify-content:space-between; }
.head-row h2 { font-size:24px; font-weight:700; color:#323438; margin:0; line-height:1.5; }
.badge-highlight { background:#00ff91; color:#333333; border-radius:4px; font-size:13px; font-weight:400;
padding:3px 8px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:20px 32px 0; }
.card { position:relative; background:#ffffff; border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:10px;
overflow:hidden; }
.card::before { content:''; position:absolute; left:0; top:0; right:0; height:3px; background:#00c274; }
.avatar { width:36px; height:36px; border-radius:8px; background:#003a1c; color:#ffffff; font-size:15px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.card h3 { font-size:16px; font-weight:700; margin:0; color:#333333; }
.card .sub { font-size:13px; color:#a4a6ad; margin:0; line-height:1.4; }
.chips { display:flex; gap:8px; }
.chip { flex:1; background:#f3f3f4; color:#333333; border-radius:8px; height:44px; display:flex; flex-direction:column;
align-items:flex-start; justify-content:center; padding:0 12px; font-size:14px; font-weight:700; line-height:1.3; }
.chip small { font-size:10px; font-weight:400; color:#686a6d; }
.cta { margin-top:auto; background:#00c362; color:#ffffff; border-radius:5px; height:40px; border:none;
font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.foot { position:absolute; left:0; right:0; bottom:0; height:40px; border-top:1px solid #e5e6e9; background:#ffffff;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:12px; color:#a4a6ad; }
.foot .page { color:#00c362; font-weight:700; display:flex; gap:10px; }
body { position:relative; }
</style></head>
<body>
<div class="nav">
<div class="logo">Jobplanet</div>
<div class="links">
<span class="active">Company Rankings</span>
<span>Community</span>
<span>Jobs</span>
<span>Content</span>
<span>Salary</span>
</div>
<div class="auth"><span>Log in</span><span>Sign up</span></div>
</div>
<div class="grey">
<div class="search"><span class="ico"></span>Search companies, jobs, content</div>
<div class="head-row">
<h2>Companies rated best by employees</h2>
<span class="badge-highlight">Top Rated</span>
</div>
</div>
<div class="cards">
<div class="card">
<div class="avatar">N</div>
<h3>Nexabyte Cloud</h3>
<p class="sub">Cloud infrastructure · Software</p>
<div class="chips">
<div class="chip">782<small>employee reviews</small></div>
<div class="chip">15<small>open positions</small></div>
</div>
<button class="cta">View company</button>
</div>
<div class="card">
<div class="avatar">H</div>
<h3>Harborline Retail</h3>
<p class="sub">E-commerce · Logistics</p>
<div class="chips">
<div class="chip">431<small>employee reviews</small></div>
<div class="chip">9<small>open positions</small></div>
</div>
<button class="cta">View company</button>
</div>
<div class="card">
<div class="avatar">S</div>
<h3>Silverfin Studio</h3>
<p class="sub">Game development</p>
<div class="chips">
<div class="chip">208<small>employee reviews</small></div>
<div class="chip">4<small>open positions</small></div>
</div>
<button class="cta">View company</button>
</div>
</div>
<div class="foot">
<span>© Jobplanet · Company Rankings · Community · Jobs · Content</span>
<span class="page">1 2 3 ›</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f5; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f5f5f5; color: #111111;
border: 1px solid #d1d1d1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f7f7f7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F5F5F5; color:#252423; box-sizing:border-box;
font-family:'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
/* 좌측: Teams → Channels 트리 (시그니처 내비게이션) */
.tree { width:256px; height:640px; background:#FFFFFF; border-right:1px solid #E1E1E1; padding:16px 0; overflow:hidden; }
.tree-head { padding:0 16px 14px; display:flex; align-items:center; gap:8px; }
.tree-head .avatar { width:28px; height:28px; border-radius:50%; background:#6264A7; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px; position:relative; }
.tree-head .avatar::after { content:''; position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%; background:#6BB700; border:2px solid #fff; }
.tree-head b { font-size:16px; font-weight:700; }
.team { padding:0 0 6px; }
.team-row { height:44px; display:flex; align-items:center; gap:10px; padding:0 16px; }
.team-row .tavatar { width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,#6264A7,#8B8CC7); flex-shrink:0; }
.team-row .tname { font-size:14px; font-weight:700; flex:1; }
.team-row .chev { font-size:10px; color:#8A8886; transform:rotate(90deg); }
.chan { height:36px; display:flex; align-items:center; gap:8px; padding:0 16px 0 42px; font-size:13px; color:#252423; position:relative; }
.chan .hash { color:#8A8886; font-size:13px; }
.chan.active { background:rgba(98,100,167,0.12); }
.chan.active::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px; background:#6264A7; border-radius:2px; }
.chan.active span { font-weight:700; color:#252423; }
.chan.unread span { font-weight:700; }
.chan .dot { width:7px; height:7px; border-radius:50%; background:#6264A7; margin-left:auto; }
.tabbar-mini { position:absolute; bottom:0; left:0; width:256px; height:0; }
/* 우측: 채널 대화 */
.main { flex:1; height:640px; display:flex; flex-direction:column; background:#F5F5F5; }
.topbar { height:52px; background:#FFFFFF; border-bottom:1px solid #E1E1E1; display:flex; align-items:center; padding:0 22px; gap:10px; }
.topbar .ttitle { font-size:16px; font-weight:700; }
.topbar .tsub { font-size:12px; color:#616161; }
.joinbar { margin:14px 22px 0; height:52px; border-radius:12px; background:#6264A7; display:flex; align-items:center; padding:0 18px; gap:12px; box-shadow:0 4px 16px rgba(98,100,167,0.35); }
.joinbar .jtxt { color:#fff; font-size:15px; font-weight:600; flex:1; }
.joinbar .jpill { background:#fff; color:#6264A7; font-size:13px; font-weight:700; padding:7px 18px; border-radius:999px; }
.feed { flex:1; padding:16px 22px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.msg { background:#FFFFFF; border-radius:8px; padding:12px; display:flex; gap:10px; }
.msg .av { width:32px; height:32px; border-radius:50%; background:#8B8CC7; flex-shrink:0; position:relative; }
.msg .av::after { content:''; position:absolute; right:-2px; bottom:-2px; width:10px; height:10px; border-radius:50%; border:2px solid #fff; }
.msg.a1 .av { background:#6BB700; } .msg.a1 .av::after { background:#6BB700; }
.msg.a2 .av { background:#C4314B; } .msg.a2 .av::after { background:#C4314B; }
.msg.a3 .av { background:#FFAA44; } .msg.a3 .av::after { background:#FFAA44; }
.msg .body { flex:1; }
.msg .row1 { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.msg .author { font-size:15px; font-weight:600; }
.msg .time { font-size:13px; color:#616161; }
.msg .txt { font-size:15px; line-height:1.45; color:#252423; }
.msg .mention { background:rgba(98,100,167,0.12); color:#6264A7; padding:1px 5px; border-radius:4px; font-weight:600; }
.msg .reactions { display:flex; gap:6px; margin-top:8px; }
.chip { background:#F0F0F0; border-radius:999px; padding:3px 9px; font-size:12px; font-weight:600; display:flex; gap:4px; align-items:center; }
.msg .thread { margin-top:6px; font-size:13px; color:#616161; }
.composer { margin:0 22px 16px; height:44px; background:#FFFFFF; border:1px solid #E1E1E1; border-radius:8px; display:flex; align-items:center; padding:0 14px; gap:12px; }
.composer .ph { color:#8A8886; font-size:15px; flex:1; }
.composer .icons { display:flex; gap:14px; color:#616161; font-size:15px; }
.composer .send { width:32px; height:32px; border-radius:50%; background:#6264A7; }
</style></head>
<body>
<div class="app">
<nav class="tree">
<div class="tree-head"><div class="avatar">KJ</div><b>Microsoft Teams (iOS)</b></div>
<div class="team">
<div class="team-row"><div class="tavatar"></div><span class="tname">Design Guild</span><span class="chev">›</span></div>
<div class="chan active"><span class="hash">#</span><span>general</span></div>
<div class="chan unread"><span class="hash">#</span><span>weekly-sync</span><span class="dot"></span></div>
<div class="chan"><span class="hash">#</span><span>random</span></div>
</div>
<div class="team">
<div class="team-row"><div class="tavatar" style="background:linear-gradient(135deg,#C4314B,#E37D8D)"></div><span class="tname">Platform Eng</span><span class="chev">›</span></div>
<div class="chan"><span class="hash">#</span><span>incidents</span></div>
<div class="chan unread"><span class="hash">#</span><span>releases</span><span class="dot"></span></div>
</div>
</nav>
<div class="main">
<div class="topbar"><div><div class="ttitle"># general</div><div class="tsub">Design Guild · 24 members</div></div></div>
<div class="joinbar"><span class="jtxt">📹 Weekly Sync · in progress</span><span class="jpill">Join</span></div>
<div class="feed">
<div class="msg a1">
<div class="av"></div>
<div class="body">
<div class="row1"><span class="author">Priya Anand</span><span class="time">10:42 AM</span></div>
<div class="txt">Pushed the build, can someone review? <span class="mention">@Design Guild</span></div>
<div class="reactions"><span class="chip">👍 3</span><span class="chip">🎉 1</span></div>
<div class="thread">💬 3 replies · Last reply 2h ago</div>
</div>
</div>
<div class="msg a2">
<div class="av"></div>
<div class="body">
<div class="row1"><span class="author">Marcus Webb</span><span class="time">11:05 AM</span></div>
<div class="txt">On it — reviewing the Fluent tokens now.</div>
</div>
</div>
</div>
<div class="composer"><span class="icons">📎 😊</span><span class="ph">Type a message</span><div class="send"></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffe300; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffe300; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe300; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffe300; color: #111111;
border: 1px solid #d9c103; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4cf27; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; }
* { box-sizing:border-box; }
.nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.nav .logo { font-size:16px; font-weight:800; letter-spacing:-.3px; color:#000000; display:flex; align-items:center; gap:6px; }
.nav .logo .dot { width:9px; height:9px; background:#ffe300; border-radius:2px; display:inline-block; }
.nav .links { display:flex; gap:24px; font-size:14px; font-weight:600; letter-spacing:-.14px; color:#000000; }
.black-action { background:#000000; color:#ffffff; border-radius:6px; height:42px; padding:9.5px 18px;
font-size:15px; font-weight:600; display:flex; align-items:center; }
.hero { padding:26px 32px 22px; }
.hero .yellow-tag { display:inline-flex; align-items:center; background:#ffe300; color:#000000; font-size:12px;
font-weight:700; border-radius:6px; padding:3px 9px; margin-bottom:12px; }
.hero h1 { font-size:52px; font-weight:800; line-height:1.16; letter-spacing:-1.4px; margin:0 0 12px; max-width:760px; }
.hero p { font-size:16px; line-height:1.5; color:#444444; margin:0; max-width:480px; }
.tabs { display:flex; gap:28px; padding:0 32px; border-bottom:1px solid #e6e6e6; }
.tab { height:62px; display:flex; align-items:center; padding:16px 0; font-size:16px; color:#000000;
border-bottom:1px solid transparent; margin-bottom:-1px; }
.tab.active { border-bottom:2px solid #000000; font-weight:700; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 32px 0; }
.card { background:#f7f7f7; border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.card .badge { align-self:flex-start; background:#ffe300; color:#000000; font-size:11px; font-weight:700;
border-radius:6px; padding:2px 8px; }
.card h3 { font-size:24px; font-weight:700; line-height:1.44; letter-spacing:-.48px; margin:0; color:#000000; }
.card p { font-size:16px; line-height:1.5; color:#444444; margin:0; }
.footer { position:absolute; left:0; right:0; bottom:0; height:74px; border-top:1px solid #e6e6e6; background:#ffffff;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.footer .rows { display:flex; gap:22px; font-size:14px; color:#888888; }
.resource-download { background:#000000; color:#ffffff; border-radius:6px; height:43px; padding:10px 16px 10px 20px;
font-size:16px; font-weight:400; display:flex; align-items:center; }
body { position:relative; }
</style></head>
<body>
<div class="nav">
<div class="logo"><span class="dot"></span>KakaoBank</div>
<div class="links"><span>Personal</span><span>Business</span><span>Youth</span><span>Invest</span><span>Company</span></div>
<div class="black-action">Get started</div>
</div>
<div class="hero">
<span class="yellow-tag">DIGITAL BANKING</span>
<h1>Banking that fits the shape of a real life.</h1>
<p>Accounts, savings, loans, and investing — organized around what you're trying to do, not how the bank is organized.</p>
</div>
<div class="tabs">
<span class="tab active">Deposit</span>
<span class="tab">Savings</span>
<span class="tab">Loan</span>
<span class="tab">Card</span>
<span class="tab">Invest</span>
</div>
<div class="cards">
<div class="card"><span class="badge">New</span><h3>Everyday account</h3><p>A simple account built for daily spending and transfers.</p></div>
<div class="card"><h3>Goal savings</h3><p>Set a target, automate the habit, watch it add up.</p></div>
<div class="card"><h3>Youth banking</h3><p>A guided first account for younger users and guardians.</p></div>
</div>
<div class="footer">
<div class="rows"><span>Terms</span><span>Privacy</span><span>Investor Relations</span><span>Help</span></div>
<span class="resource-download">Company info ›</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #001017; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #001017; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878e91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002a3a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001017; color: #ffffff;
border: 1px solid #002a3a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #001017; color: #f5f5f5;
border: 1px solid #27353b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878e91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00141d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#001017; color:#EAF6F9; box-sizing:border-box; font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'SF Pro Rounded','SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:22px 32px 0; }
.greeting { font-size:22px; font-weight:700; }
.heroCard { display:flex; align-items:center; gap:24px; background:#002A3A; border-radius:24px; padding:22px; margin-top:16px; }
.ring { width:116px; height:116px; position:relative; flex-shrink:0; }
.ringtext { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ringtext .n { font-size:26px; font-weight:700; }
.ringtext .l { font-size:11px; color:#8AAEB8; margin-top:2px; }
.heroright .h { font-size:15px; font-weight:700; }
.heroright .s { font-size:13px; color:#8AAEB8; margin-top:4px; }
.trendchip { display:inline-block; margin-top:10px; background:rgba(0,176,185,0.15); color:#21D9CE; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.tilesgrid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:16px; }
.tile { background:#002A3A; border-radius:20px; padding:16px; }
.tilehead { display:flex; align-items:center; gap:8px; }
.iconchip { width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#001017; font-size:13px; }
.tilelabel { font-size:12px; font-weight:600; color:#8AAEB8; }
.tileval { font-size:26px; font-weight:700; margin-top:8px; }
.tileunit { font-size:13px; font-weight:600; color:#8AAEB8; }
.tilesub { font-size:12px; color:#5C808B; margin-top:4px; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:11px;font-weight:700;letter-spacing:1pt;text-transform:uppercase;color:#00B0B9;margin-bottom:6px">Fitbit (iOS)</div>
<div class="greeting">Good morning, Maya</div>
<div class="heroCard">
<div class="ring">
<svg width="116" height="116" viewBox="0 0 116 116">
<circle cx="58" cy="58" r="52" fill="none" stroke="#0A475E" stroke-width="11"/>
<circle cx="58" cy="58" r="52" fill="none" stroke="#00B0B9" stroke-width="11" stroke-linecap="round" stroke-dasharray="326" stroke-dashoffset="98" transform="rotate(-90 58 58)"/>
</svg>
<div class="ringtext"><div class="n">7,842</div><div class="l">of 10,000 steps</div></div>
</div>
<div class="heroright">
<div class="h">You're close!</div>
<div class="s">2,158 steps to hit your daily goal.</div>
<div class="trendchip">▲ 12% vs last week</div>
</div>
</div>
<div class="tilesgrid">
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#FF6B81">♥</div><div class="tilelabel">Heart Rate</div></div><div class="tileval">68 <span class="tileunit">bpm</span></div><div class="tilesub">Resting · 52–148 today</div></div>
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#7C5CFF">☾</div><div class="tilelabel">Sleep</div></div><div class="tileval">7h <span class="tileunit">24m</span></div><div class="tilesub">Score 84 · Good</div></div>
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#B8E986">✓</div><div class="tilelabel">Readiness</div></div><div class="tileval">78</div><div class="tilesub">Good to go today</div></div>
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#FF8A3D">⚡</div><div class="tilelabel">Active Zone</div></div><div class="tileval">32 <span class="tileunit">min</span></div><div class="tilesub">of 30 min weekly avg</div></div>
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#FFC233">🔥</div><div class="tilelabel">Calories</div></div><div class="tileval">1,840</div><div class="tilesub">Burned today</div></div>
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#4FC3F7">%</div><div class="tilelabel">SpO2</div></div><div class="tileval">97 <span class="tileunit">%</span></div><div class="tilesub">Overnight average</div></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #584de4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #584de4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aea9ed; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4d55b2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #584de4; color: #ffffff;
border: 1px solid #4d55b2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #584de4; color: #f5f5f5;
border: 1px solid #7168e7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea9ed; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #564edc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f9f9; color:#333333; box-sizing:border-box;
font-family:"Pretendard","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.layout { display:flex; height:640px; }
.panel { width:360px; background:#ffffff; display:flex; flex-direction:column; }
.panel-head { padding:16px; }
.logo { font-size:18px; font-weight:700; color:#584de4; margin-bottom:10px; }
.search { border:1px solid #cecfdc; border-radius:6px; height:44px; display:flex; align-items:center;
padding:0 14px; font-size:14px; color:#b3b3b3; }
.chips { display:flex; gap:8px; padding:12px 16px; }
.chip { border:1px solid #f3f3f3; border-radius:8px; height:30px; padding:0 12px; font-size:13px;
display:flex; align-items:center; }
.chip.active { border:1px solid #584de4; color:#584de4; }
.list { flex:1; overflow:hidden; padding:0 16px; }
.row { padding:12px 0; border-bottom:1px solid #f2f2f2; }
.row .title { font-size:16px; font-weight:600; margin-bottom:4px; }
.row .price { color:#4337de; font-size:18px; font-weight:500; }
.row .up { color:#3dab6a; font-size:12px; margin-left:6px; }
.map { flex:1; background:linear-gradient(135deg,#eeedfc,#c9d3f5); position:relative; }
.bubble { position:absolute; background:#ffffff; border-radius:16px; padding:6px 12px; font-size:12px;
font-weight:700; color:#4337de; box-shadow:4px 2px 12px 0px rgba(0,0,0,0.24); }
.b1 { top:120px; left:180px; }
.b2 { top:220px; left:340px; }
.b3 { top:100px; left:420px; }
.fab { position:absolute; top:20px; right:20px; width:38px; height:38px; background:#ffffff;
border-radius:4px; box-shadow:4px 2px 12px 0px rgba(0,0,0,0.24); }
</style></head>
<body>
<div class="layout">
<div class="panel">
<div class="panel-head">
<div class="logo">Hogangnono</div>
<div class="search">Search by apartment or area</div>
</div>
<div class="chips">
<div class="chip active">For Sale</div>
<div class="chip">Lease</div>
<div class="chip">School District</div>
</div>
<div class="list">
<div class="row"><div class="title">Raemian Gangnam Park</div><div class="price">$1.42M<span class="up">▲2.1%</span></div></div>
<div class="row"><div class="title">Hillstate Pangyo</div><div class="price">$0.95M<span class="up">▲0.8%</span></div></div>
<div class="row"><div class="title">Xi Wirye</div><div class="price">$0.75M</div></div>
</div>
</div>
<div class="map">
<div class="fab"></div>
<div class="bubble b1">$1.42M</div>
<div class="bubble b2">$0.95M</div>
<div class="bubble b3">$0.75M</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0f0f; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0f0f; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.5px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #0007cd; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #222222; color: #ffffff;
border: 1px solid #0007cd; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #181818; color: #ffffff;
border: 1px solid #4b4b4b; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background: #222222; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0f0f0f; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:500; letter-spacing:-0.4px; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#a8a8a8; }
.btnp { background:#0007cd; color:#fff; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:500; }
.hero { position:relative; text-align:center; padding:10px 32px 4px; overflow:hidden; }
.hero::before { content:''; position:absolute; left:50%; top:20px; width:500px; height:280px; transform:translateX(-50%);
background:radial-gradient(circle, rgba(26,38,255,0.35), transparent 65%); z-index:0; }
.hero h1 { position:relative; z-index:1; font-size:32px; font-weight:500; letter-spacing:-1px; margin:0 0 8px; }
.hero p { position:relative; z-index:1; font-size:13px; color:#a8a8a8; margin:0 auto 16px; max-width:420px; }
.termgrid { position:relative; z-index:1; background:#000000; border-radius:16px; margin:0 32px; padding:22px;
display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pane { background:#181818; border-radius:12px; padding:14px; height:78px; }
.pane .lbl { font-size:10px; color:#888; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.pane pre { margin:0; font-size:11px; font-family:"Courier New", monospace; color:#ccc; line-height:1.5; }
.pane .kw { color:#00d4ff; } .pane .ok { color:#33d17a; }
.toolkits { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:20px 32px 0; }
.tk { background:#181818; border-radius:12px; padding:14px; text-align:center; }
.tk .ic { width:34px; height:34px; border-radius:8px; margin:0 auto 8px; }
.tk span { font-size:11px; color:#e6e6e6; }
.i1 { background:#4a154b; } .i2 { background:#181717; } .i3 { background:#635bff; } .i4 { background:#000000; } .i5 { background:#5e6ad2; }
</style></head>
<body>
<nav>
<div class="brand">Composio</div>
<div class="navlinks"><span>Product</span><span>Toolkits</span><span>Docs</span><span>Pricing</span></div>
<span class="btnp">Get started</span>
</nav>
<div class="hero">
<h1>Tool calling infrastructure<br>for AI agents</h1>
<p>Connect your AI agents to 250+ tools with one unified integration layer.</p>
<div class="termgrid">
<div class="pane"><div class="lbl">agent.py</div><pre><span class="kw">tool</span> = compose.get(<span class="kw">"github"</span>)
result = tool.run(action)</pre></div>
<div class="pane"><div class="lbl">output</div><pre><span class="ok">✓ 200 OK</span>
issue_id: 4821
status: created</pre></div>
<div class="pane"><div class="lbl">toolkit.yaml</div><pre>auth: oauth2
scopes: [repo, issues]</pre></div>
<div class="pane"><div class="lbl">trace</div><pre>call_id: 9f2a
latency: 184ms</pre></div>
</div>
</div>
<div class="toolkits">
<div class="tk"><div class="ic i1"></div><span>Slack</span></div>
<div class="tk"><div class="ic i2"></div><span>GitHub</span></div>
<div class="tk"><div class="ic i3"></div><span>Stripe</span></div>
<div class="tk"><div class="ic i4"></div><span>Notion</span></div>
<div class="tk"><div class="ic i5"></div><span>Linear</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c2431;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c2431;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1c2431; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #00b5c8; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #000000;
border: 1px solid #00b5c8; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c2431;
border: 1px solid #e5e7eb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f0fbfd; color: #008fa0;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c2431; box-sizing:border-box;
font-family:Inter,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'Courier New',Courier,monospace; }
nav { height:54px; background:#ffffff; border-bottom:1px solid #e5e7eb; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:16px; font-weight:700; color:#00b5c8; }
.searchbar { flex:1; max-width:360px; margin:0 20px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:8px 14px; font-size:12px; color:#6b7280; }
.acct { font-size:11px; color:#374151; }
.breadcrumb { height:22px; padding:5px 30px 0; font-size:10.5px; color:#6b7280; }
.wrap { display:flex; height:504px; padding:12px 30px; gap:24px; }
.photo-col { width:220px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; }
.photo { height:220px; background:linear-gradient(135deg,#e0f7fa,#f0fbfd); border-radius:8px; border:1px solid #e5e7eb; position:relative; }
.photo::before { content:''; position:absolute; inset:20px; border-radius:50%; background:radial-gradient(circle,#00b5c8 0%,transparent 70%); opacity:.5; }
.val-badge { background:#dcfce7; color:#16a34a; font-size:10px; font-weight:600; padding:4px 10px; border-radius:9999px; width:fit-content; }
.cite-note { font-size:10.5px; color:#6b7280; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.cat-id { font-size:11px; color:#6b7280; }
.info h1 { font-size:19px; font-weight:700; margin:0; line-height:1.3; }
.spec-table { display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; font-size:11px; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; padding:10px 0; }
.spec-table div { display:flex; justify-content:space-between; color:#374151; }
.spec-table div b { color:#1c2431; font-weight:600; }
.app-chips { display:flex; gap:6px; flex-wrap:wrap; }
.app-chip { background:#f9fafb; border:1px solid #e5e7eb; border-radius:9999px; padding:4px 12px; font-size:10.5px; }
.app-chip.on { background:#00b5c8; color:#fff; border-color:#00b5c8; }
.price-row { display:flex; align-items:baseline; gap:12px; margin-top:auto; }
.price { font-size:19px; font-weight:700; }
.btn-buy { background:#00b5c8; color:#fff; border:none; border-radius:8px; padding:11px 26px; font-size:12px; font-weight:700; }
.btn-quote { border:1px solid #e5e7eb; border-radius:8px; padding:11px 18px; font-size:12px; color:#374151; }
footer { height:60px; background:#1c2431; color:#00b5c8; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:10.5px; border-top:2px solid #00b5c8; }
footer span:last-child { color:#9ca3af; }
</style></head>
<body>
<nav>
<p class="brand">Abcam</p>
<div class="searchbar">Search by target, catalog #, or citation…</div>
<span class="acct">Sign In</span>
</nav>
<div class="breadcrumb">Antibodies / Primary Antibodies / Anti-GAPDH</div>
<div class="wrap">
<div class="photo-col">
<div class="photo"></div>
<span class="val-badge">✓ Validated · WB, IHC, ICC</span>
<span class="cite-note">Cited in 412 publications</span>
</div>
<div class="info">
<span class="cat-id mono">ab8245 · Anti-GAPDH [6C5]</span>
<h1>Anti-GAPDH Antibody [6C5] — Loading Control</h1>
<div class="spec-table">
<div>Reactivity <b>Human, Mouse, Rat</b></div>
<div>Host <b>Mouse</b></div>
<div>Conjugation <b>Unconjugated</b></div>
<div>Isotype <b>IgM</b></div>
</div>
<div class="app-chips">
<span class="app-chip on">Western Blot</span>
<span class="app-chip">IHC-P</span>
<span class="app-chip">ICC/IF</span>
<span class="app-chip">Flow Cyt</span>
</div>
<div class="price-row">
<span class="price">$225.00</span>
<button class="btn-buy">Add to Cart</button>
<button class="btn-quote">Request Quote</button>
</div>
</div>
</div>
<footer><span>© Abcam</span><span>Certificate of Analysis · Regulatory Docs · Distributors</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ccff00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ccff00;
border: 1px solid #ccff00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #212900; color: #ccff00;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Arial Narrow", "Helvetica Neue Condensed Bold", Arial, sans-serif; }
* { box-sizing:border-box; }
.cond { font-stretch:condensed; letter-spacing:0.3pt; }
.shell { display:flex; width:960px; height:640px; }
.track { flex:1; display:flex; flex-direction:column; align-items:center; padding:26px 20px 22px; position:relative; }
.statrow { display:flex; justify-content:space-between; width:100%; max-width:460px; margin-bottom:6px; }
.stat { text-align:center; }
.stat .l { font-size:12px; font-weight:700; letter-spacing:1pt; color:rgba(255,255,255,0.7); text-transform:uppercase; }
.stat .v { font-size:42px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:0.3pt; }
.ring-wrap { position:relative; width:230px; height:230px; margin:14px 0; }
.ring-track { position:absolute; inset:0; border-radius:50%; border:6px solid rgba(255,255,255,0.1); }
.ring-fill { position:absolute; inset:0; border-radius:50%;
background: conic-gradient(#CCFF00 0deg 260deg, transparent 260deg 360deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
transform: rotate(-90deg); }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-center .time { font-size:56px; font-weight:900; font-variant-numeric:tabular-nums; }
.ring-center .lbl { font-size:12px; font-weight:700; letter-spacing:1pt; color:rgba(255,255,255,0.7); text-transform:uppercase; margin-top:2px; }
.btnrow { display:flex; align-items:center; gap:16px; margin-top:10px; }
.pausebtn { width:64px; height:64px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; color:#000; }
.lockbtn { width:40px; height:40px; border-radius:50%; background:#1A1A1A; display:flex; align-items:center; justify-content:center; font-size:16px; }
.side { width:300px; height:640px; background:#0A0A0A; border-left:1px solid #333; padding:22px 20px; display:flex; flex-direction:column; gap:16px; }
.brandline { font-size:13px; font-weight:900; letter-spacing:1pt; color:#CCFF00; text-transform:uppercase; }
.headline { font-size:28px; font-weight:900; letter-spacing:0.3pt; text-transform:uppercase; line-height:0.98; }
.plancard { position:relative; height:150px; border-radius:16px; overflow:hidden;
background: linear-gradient(160deg,#3a2410,#120c04); }
.plancard::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent 60%); }
.plancard .c { position:absolute; left:14px; right:14px; bottom:12px; z-index:2; }
.plancard .eyebrow { font-size:10px; font-weight:600; letter-spacing:0.5pt; color:rgba(255,255,255,0.7); text-transform:uppercase; }
.plancard .title { font-size:20px; font-weight:900; text-transform:uppercase; margin-top:2px; }
.medal { display:flex; align-items:center; gap:14px; background:#1A1A1A; border-radius:16px; padding:14px; }
.hex { width:56px; height:56px; flex:none; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: linear-gradient(135deg,#CCFF00,#FA5400); display:flex; align-items:center; justify-content:center;
font-weight:900; font-size:18px; color:#000; }
.medal .mt { font-size:14px; font-weight:900; text-transform:uppercase; }
.medal .ms { font-size:11px; color:#8E8E8E; margin-top:2px; }
.ctabtn { margin-top:auto; height:52px; border-radius:26px; background:#fff; color:#000; display:flex; align-items:center; justify-content:center;
font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:0.4pt; }
</style></head>
<body>
<div class="shell">
<div class="track">
<div class="statrow">
<div class="stat"><div class="l">Distance</div><div class="v">1.4</div></div>
<div class="stat"><div class="l">Pace</div><div class="v">8:42</div></div>
<div class="stat"><div class="l">BPM</div><div class="v">152</div></div>
</div>
<div class="ring-wrap">
<div class="ring-track"></div>
<div class="ring-fill"></div>
<div class="ring-center">
<span class="time">12:34</span>
<span class="lbl">Elapsed</span>
</div>
</div>
<div class="btnrow">
<div class="pausebtn">❚❚</div>
<div class="lockbtn">🔒</div>
</div>
</div>
<div class="side">
<div class="brandline">Nike Run Club (iOS)</div>
<div class="headline">Let's Do This</div>
<div class="plancard">
<div class="c">
<div class="eyebrow">Coach Bennett · 30 min</div>
<div class="title">Recovery Mile</div>
</div>
</div>
<div class="medal">
<div class="hex">100</div>
<div>
<div class="mt">100 Miles</div>
<div class="ms">Lifetime distance</div>
</div>
</div>
<div class="ctabtn">Start Run</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfdfd; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfdfd; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #1863dc; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fdfdfd; color: #1863dc;
border: 1px solid #1863dc; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdfdfd; color: #1a1a1a;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.2px; background: #1863dc; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfdfd; color:#1a1a1a; box-sizing:border-box;
font-family:'Poppins',sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'Courier','Courier 10 Pitch',monospace; }
nav { height:56px; background:#003388; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#abb8c3; }
.navlinks span.on { color:#fac917; font-weight:600; }
.search { background:#ffffff; border-radius:4px; padding:7px 16px; font-size:11px; color:#6d6d6d; width:180px; }
.wrap { display:flex; height:524px; padding:16px 30px; gap:26px; }
.photo { width:280px; flex-shrink:0; background:#ebebeb; border-radius:4px; display:flex; align-items:center; justify-content:center; position:relative; }
.scope { width:70px; height:190px; position:relative; }
.scope::before { content:''; position:absolute; top:0; left:14px; width:42px; height:70px; border-radius:4px; background:linear-gradient(180deg,#1863dc,#003388); }
.scope::after { content:''; position:absolute; bottom:0; left:0; width:70px; height:60px; border-radius:4px; background:#02609b; }
.gold-badge { position:absolute; top:14px; left:14px; background:#fac917; color:#1a1a1a; font-size:10px; font-weight:600; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:10px; }
.model-code { font-size:12px; color:#6d6d6d; }
.info h1 { font-size:20px; font-weight:600; margin:0; line-height:1.3; }
.spec-row { display:flex; gap:20px; font-size:11px; border-top:1px solid #d5d5d5; border-bottom:1px solid #d5d5d5; padding:10px 0; }
.spec-row div b { display:block; font-size:13px; color:#1863dc; font-family:'Courier','Courier 10 Pitch',monospace; }
.desc { font-size:12.5px; color:#404040; line-height:1.6; max-width:460px; }
.accessory-chip-row { display:flex; gap:8px; }
.accessory-chip-row span { font-size:10.5px; border:1px solid #d5d5d5; border-radius:4px; padding:4px 10px; color:#404040; }
.price-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.price { font-size:20px; font-weight:600; }
.btn-buy { background:#1863dc; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:12px; font-weight:600; }
.btn-quote { border:1px solid #003388; color:#003388; border-radius:4px; padding:12px 18px; font-size:12px; font-weight:600; }
footer { height:60px; background:#003388; display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:10.5px; color:#abb8c3; }
</style></head>
<body>
<nav>
<p class="brand">Accu Scope</p>
<div class="navlinks"><span>Compound</span><span class="on">Stereo</span><span>Digital</span><span>Fluorescence</span></div>
<span class="search">Search model…</span>
</nav>
<div class="wrap">
<div class="photo"><span class="gold-badge">Sale Ends Friday</span><div class="scope"></div></div>
<div class="info">
<span class="model-code mono">MODEL: ASZ-2000-T</span>
<h1>Stereo Zoom Microscope, Trinocular, LED Ring Light</h1>
<div class="spec-row">
<div>Magnification<b>7x–45x</b></div>
<div>Objective<b>0.7x–4.5x</b></div>
<div>Illumination<b>LED Ring</b></div>
</div>
<p class="desc">Precision-milled optics calibrated to a tolerance measured in microns — built for inspection, assembly, and research benches that can't afford drift.</p>
<div class="accessory-chip-row"><span>Camera Compatible</span><span>2-Yr Warranty</span><span>US Calibrated</span></div>
<div class="price-row">
<span class="price">$1,890.00</span>
<button class="btn-buy">Add to Cart</button>
<button class="btn-quote">Request Quote</button>
</div>
</div>
</div>
<footer><span>© Accu Scope</span><span>Calibration Service · Warranty · Distributors</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.3px; background: #783df6; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.3px; background: #fefefe; color: #1e1e1e;
border: 1px solid #783df6; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #494949;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.18; letter-spacing: 0.5px; background: #783df6; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fefefe; color:#1e1e1e; box-sizing:border-box;
font-family:'Helvetica Neue','Helvetica',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#1e1e1e; color:#fefefe; }
.brand { font-size:18px; font-weight:500; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:500; letter-spacing:0.2px; opacity:0.85; }
.navlinks span.on { opacity:1; border-bottom:2px solid #783df6; padding-bottom:4px; }
.cart-ico { width:30px; height:30px; border-radius:9999px; background:#783df6; display:flex; align-items:center;
justify-content:center; font-size:12px; font-weight:700; }
.subnav { height:40px; display:flex; align-items:center; gap:22px; padding:0 32px; border-bottom:1px solid #e8e8e8;
font-size:13px; color:#494949; }
.subnav span.on { color:#1e1e1e; border-bottom:2px solid #783df6; padding-bottom:11px; font-weight:500; }
main { display:flex; height:536px; }
.gallery { width:400px; background:#f7f7f7; position:relative; display:flex; align-items:center; justify-content:center; }
.poster { width:230px; height:330px; border-radius:8px; background:
linear-gradient(160deg,#221155 0%,#003399 55%,#783df6 100%); position:relative; box-shadow:0 18px 40px rgba(0,0,0,0.18); }
.poster::after { content:'BFI'; position:absolute; bottom:16px; left:16px; color:#fff; font-size:12px; font-weight:700;
letter-spacing:2px; }
.badge-limited { position:absolute; top:14px; left:14px; background:#003399; color:#fff; font-size:11px; font-weight:500;
letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.thumbs { position:absolute; bottom:18px; display:flex; gap:8px; }
.thumb { width:36px; height:26px; border-radius:4px; background:#e8e8e8; border:1px solid #d8d8d8; }
.info { flex:1; padding:32px 36px; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; color:#6a6a6a; }
h1 { font-size:24px; font-weight:500; letter-spacing:-0.3px; margin:0; line-height:1.3; }
.badges { display:flex; gap:8px; }
.badge-member { background:#783df6; color:#fff; font-size:11px; font-weight:500; letter-spacing:0.5px;
text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.badge-soldout { background:#e6e6e6; color:#6a6a6a; font-size:11px; font-weight:500; letter-spacing:0.5px;
text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:500; }
.price-member { font-size:13px; color:#783df6; font-weight:500; }
.desc { font-size:14px; color:#494949; line-height:1.5; max-width:340px; }
.fmt-row { display:flex; gap:8px; }
.fmt { border:1px solid #e8e8e8; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:500; }
.fmt.on { border-color:#783df6; color:#783df6; background:#f7f4ff; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { background:#783df6; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-size:15px;
font-weight:500; letter-spacing:0.3px; }
.btn-blue { background:#003399; color:#fff; border:none; border-radius:8px; padding:12px 20px; font-size:13px; font-weight:500; }
.meta { font-size:12px; color:#929292; }
</style></head>
<body>
<nav>
<div class="brand">Bfi Shop</div>
<div class="navlinks"><span>Blu-ray</span><span>DVD</span><span class="on">Merchandise</span><span>Books</span></div>
<div class="cart-ico">2</div>
</nav>
<div class="subnav"><span class="on">All</span><span>New Releases</span><span>Criterion</span><span>Posters</span><span>Apparel</span></div>
<main>
<div class="gallery">
<span class="badge-limited">Limited Edition</span>
<div class="poster"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">4K Ultra HD Steelbook</span>
<h1>Archive Restoration Vol. 12</h1>
<div class="badges"><span class="badge-member">Member Price</span><span class="badge-soldout">Almost Gone</span></div>
<div class="price-row"><span class="price">£34.99</span><span class="price-member">£28.99 for members</span></div>
<p class="desc">Fully restored 4K transfer with new commentary tracks and a 40-page collector's booklet.</p>
<div class="fmt-row"><span class="fmt on">Steelbook</span><span class="fmt">Standard</span><span class="fmt">Digital</span></div>
<div class="btn-row">
<button class="btn-primary">Add to Bag</button>
<button class="btn-blue">Join & Save 20%</button>
</div>
<span class="meta">In stock · Ships within 2 working days</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 900; line-height: 1.25; letter-spacing: 0.5px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #565656; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 1.29; letter-spacing: 1px; background: #0099ff; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 1.29; letter-spacing: 1px; background: transparent; color: #0099ff;
border: 1px solid #0099ff; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1f1f1f; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #565656; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 900; line-height: 1.18; letter-spacing: 1px; background: #ff8c00; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:'Arial Black','DM Sans',Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #2a2a2a; }
.brand { font-size:16px; font-weight:900; text-transform:uppercase; letter-spacing:1px; margin:0; color:#0099ff; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:1px; color:#a2a2a2; }
.navlinks span.active { color:#0099ff; }
.cart { background:#0099ff; color:#fff; font-size:11px; font-weight:900; padding:8px 16px; border-radius:8px; text-transform:uppercase; }
.content { display:flex; padding:18px 32px; gap:20px; }
.preview { flex:1.1; background:#1f1f1f; border-radius:0; display:flex; align-items:center; justify-content:center; height:290px; position:relative; }
.preview::before { content:''; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,#0099ff 0%,#1f1f1f 70%); }
.preview .halo { position:absolute; top:12px; left:12px; font-size:10px; font-weight:900; letter-spacing:1px; background:#ff1493; padding:4px 10px; text-transform:uppercase; }
.config { flex:1; }
.config h1 { font-size:22px; font-weight:900; text-transform:uppercase; margin:0 0 4px; letter-spacing:-.5px; }
.config .sub { font-size:12px; color:#a2a2a2; margin:0 0 12px; }
.step-label { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:1px; color:#a2a2a2; margin-bottom:8px; }
.swrow { display:flex; gap:8px; margin-bottom:16px; }
.sw { width:30px; height:30px; border-radius:50%; }
.sw.sel { border:2px solid #fff; }
.pills { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.pill { border:1px solid #3a3a3a; border-radius:999px; padding:8px 16px; font-size:11px; font-weight:900; text-transform:uppercase; color:#a2a2a2; }
.pill.sel { background:#0099ff; color:#fff; border-color:#0099ff; }
.price { font-size:24px; font-weight:900; margin:10px 0; }
.btn-cta { display:block; text-align:center; background:#53ffba; color:#121212; font-weight:900; font-size:14px; padding:14px; border-radius:8px; text-transform:uppercase; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#1f1f1f; color:#a2a2a2;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
</style></head>
<body>
<nav>
<p class="brand">Battle Beaver Customs</p>
<div class="navlinks"><span class="active">Configurator</span><span>Pro Controllers</span><span>Parts</span></div>
<div class="cart">Cart (1)</div>
</nav>
<div class="content">
<div class="preview"><span class="halo">Limited</span></div>
<div class="config">
<h1>Custom Pro Controller</h1>
<p class="sub">Xbox Series X/S · Hall Effect Sticks</p>
<div class="step-label">Shell Color</div>
<div class="swrow">
<div class="sw sel" style="background:#0099ff"></div>
<div class="sw" style="background:#53ffba"></div>
<div class="sw" style="background:#ff1493"></div>
<div class="sw" style="background:#ff8c00"></div>
<div class="sw" style="background:#50e1ff"></div>
</div>
<div class="step-label">Trigger Stops</div>
<div class="pills">
<div class="pill sel">Mid</div>
<div class="pill">Short</div>
<div class="pill">Long</div>
</div>
<div class="price">$189.00</div>
<span class="btn-cta">Add to Build</span>
</div>
</div>
<footer>
<span>© Battle Beaver Customs</span>
<span>Pro · Custom · Limited</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #161616; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #161616; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #919191; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc6719; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #161616; color: #fc6719;
border: 1px solid #fc6719; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #161616; color: #f5f5f5;
border: 1px solid #3a3a3a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919191; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3b2316; color: #fc6719;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#161616; color:#ffffff; box-sizing:border-box;
font-family:"Barlow Semi Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.world { position:relative; width:960px; height:640px; overflow:hidden;
background:
linear-gradient(180deg, #ff9d4d 0%, #ff7a3d 18%, #6b3a6a 40%, #2a2f57 62%, #16182c 100%); }
.world::before { content:''; position:absolute; left:0; right:0; bottom:0; height:260px;
background:linear-gradient(180deg, rgba(20,60,50,0) 0%, #163d33 55%, #0d251f 100%); }
.world::after { content:''; position:absolute; left:0; right:0; bottom:0; height:170px;
background:
radial-gradient(80% 200% at 50% 0%, rgba(180,120,60,0.35), rgba(180,120,60,0) 60%);
clip-path: polygon(0 100%, 8% 40%, 20% 62%, 32% 30%, 48% 55%, 60% 20%, 74% 48%, 88% 24%, 100% 60%, 100% 100%);
background-color:#1f5c3f; opacity:0.9; }
.road { position:absolute; left:50%; bottom:0; width:220px; height:420px; transform:translateX(-50%) perspective(500px) rotateX(28deg);
background:linear-gradient(180deg,#3a3a3a,#232323);
clip-path:polygon(38% 0, 62% 0, 100% 100%, 0 100%); z-index:1; }
.roadline { position:absolute; left:50%; bottom:0; width:6px; height:420px; transform:translateX(-50%) perspective(500px) rotateX(28deg);
background:repeating-linear-gradient(180deg,#e8c547 0 26px, transparent 26px 52px); z-index:1; opacity:0.85; }
.rider { position:absolute; left:50%; bottom:150px; transform:translateX(-50%); width:26px; height:44px; z-index:2; }
.rider .body { width:26px; height:30px; background:#FC6719; border-radius:6px 6px 3px 3px; }
.rider .head { width:12px; height:12px; background:#222; border-radius:50%; margin:0 auto -4px; }
.banner { position:absolute; top:14px; left:14px; right:14px; z-index:5; border-radius:12px;
background:rgba(15,15,15,0.62); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.10);
padding:10px 16px; display:flex; align-items:center; gap:14px; }
.flag { width:30px; height:30px; border-radius:8px; background:#FC6719; display:flex; align-items:center;
justify-content:center; font-size:14px; flex:none; }
.btexts { flex:1; }
.btexts h1 { font-family:"Barlow Semi Condensed", sans-serif; font-size:16px; font-weight:700; margin:0; }
.btexts p { font-family:Inter, sans-serif; font-size:11px; color:#A8AAAD; margin:2px 0 0; }
.progress { margin-top:8px; height:4px; background:rgba(255,255,255,0.18); border-radius:2px; }
.progress .fill { width:64%; height:4px; background:#FC6719; border-radius:2px; }
.powerup { width:52px; height:52px; border-radius:10px; background:#FC6719; display:flex; align-items:center;
justify-content:center; font-size:22px; flex:none; box-shadow:0 0 0 3px rgba(252,103,25,0.25); }
.hud { position:absolute; left:0; right:0; bottom:100px; z-index:5; display:flex; justify-content:center; gap:12px; }
.tile { min-width:112px; background:rgba(12,12,12,0.60); backdrop-filter:blur(8px); border-radius:12px;
border:1px solid rgba(255,255,255,0.10); padding:10px 16px; text-align:center; }
.tile .val { font-size:32px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
.tile .unit { font-size:11px; font-weight:700; letter-spacing:0.6pt; text-transform:uppercase; color:#A8AAAD; margin-top:4px; }
.power .val { color:#FC6719; }
.cad .val { color:#E8C547; }
.hr .val { color:#F0413E; }
.wkg .val { color:#2BD4D9; }
.actionbar { position:absolute; left:0; right:0; bottom:0; height:78px; z-index:5;
background:rgba(18,18,18,0.92); backdrop-filter:blur(20px); border-top:1px solid #303030;
display:flex; align-items:center; justify-content:space-evenly; }
.ab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ab .ic { font-size:22px; color:#A8AAAD; }
.ab .lb { font-family:Inter,sans-serif; font-size:10px; font-weight:600; color:#A8AAAD; }
.ab.pu .ic { color:#FC6719; }
.ab.pu .lb { color:#FC6719; }
</style></head>
<body>
<div class="world">
<div class="roadline"></div>
<div class="road"></div>
<div class="rider"><div class="head"></div><div class="body"></div></div>
<div class="banner">
<div class="flag">🚩</div>
<div class="btexts">
<h1>WATOPIA · VOLCANO FLAT</h1>
<p>12.4 / 19.3 km · Lap 2 of 3</p>
<p>Zwift (iOS)</p>
<div class="progress"><div class="fill"></div></div>
</div>
<div class="powerup">🪶</div>
</div>
<div class="hud">
<div class="tile power"><div class="val">248</div><div class="unit">Watts</div></div>
<div class="tile cad"><div class="val">91</div><div class="unit">RPM</div></div>
<div class="tile hr"><div class="val">156</div><div class="unit">BPM</div></div>
<div class="tile wkg"><div class="val">3.4</div><div class="unit">W/KG</div></div>
</div>
<div class="actionbar">
<div class="ab"><span class="ic">👋</span><span class="lb">Action</span></div>
<div class="ab pu"><span class="ic">🪶</span><span class="lb">Power-Up</span></div>
<div class="ab"><span class="ic">📋</span><span class="lb">Workout</span></div>
<div class="ab"><span class="ic">🚴</span><span class="lb">Riders</span></div>
<div class="ab"><span class="ic">☰</span><span class="lb">Menu</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff00bf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff00bf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa87dd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #11111f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff00bf; color: #11111f;
border: 1px solid #11111f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff00bf; color: #f5f5f5;
border: 1px solid #fd27c8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa87dd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d903a5; color: #11111f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#11111F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.map { position:absolute; inset:0; background:
radial-gradient(circle at 30% 20%, #1c1c2b 0%, transparent 40%),
linear-gradient(135deg,#1C1C2B,#11111F); }
.road { position:absolute; background:#26263A; }
.r1 { top:160px; left:0; right:0; height:8px; transform:rotate(-3deg); }
.r2 { top:0; bottom:0; left:520px; width:8px; transform:rotate(5deg); }
.route { position:absolute; top:180px; left:220px; width:340px; height:5px; background:#FF00BF; border-radius:3px; transform:rotate(-6deg); box-shadow:0 0 12px rgba(255,0,191,0.5); }
.pin { position:absolute; width:16px; height:16px; border-radius:50%; background:#FF00BF; box-shadow:0 4px 10px rgba(255,0,191,0.5); }
.pin.pickup { top:170px; left:210px; }
.dpin { position:absolute; width:16px; height:16px; border-radius:50%; background:#11111F; border:2px solid #fff; top:172px; left:555px; }
.searchbar { position:absolute; top:20px; left:24px; right:24px; background:#1C1C2B; border-radius:14px; padding:14px 18px; font-size:20px; font-weight:600; box-shadow:0 10px 26px rgba(0,0,0,0.35); }
.sheet { position:absolute; left:0; right:0; bottom:0; background:#11111F; border-radius:28px 28px 0 0; padding:18px 22px 22px;
box-shadow:0 -10px 30px rgba(0,0,0,0.4); }
.handle { width:40px; height:4px; background:#2C2C40; border-radius:2px; margin:0 auto 14px; }
.sheettitle { font-size:22px; font-weight:700; margin-bottom:14px; }
.ridecard { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid #2C2C40; }
.ridecard.on { background:#33102B; border-radius:14px; padding:12px 14px; border-bottom:none; }
.rideicon { width:44px; height:30px; border-radius:8px; background:linear-gradient(135deg,#2C2C40,#1C1C2B); }
.ridename { font-size:17px; font-weight:700; }
.ridemeta { font-size:14px; color:#A0A0B4; margin-top:2px; }
.rideprice { margin-left:auto; font-size:17px; font-weight:700; }
.confirmbtn { margin-top:16px; background:#FF00BF; color:#fff; font-weight:800; font-size:16px; text-align:center; padding:14px; border-radius:14px; }
</style></head>
<body>
<div class="map">
<div class="road r1"></div><div class="road r2"></div>
<div class="route"></div><div class="pin pickup"></div><div class="dpin"></div>
</div>
<div class="searchbar">Lyft (iOS) → Mission District</div>
<div class="sheet">
<div class="handle"></div>
<div class="sheettitle">Choose a ride</div>
<div class="ridecard on"><div class="rideicon"></div><div><div class="ridename">Lyft</div><div class="ridemeta">4 seats · 3 min away</div></div><div class="rideprice">$14.20</div></div>
<div class="ridecard"><div class="rideicon"></div><div><div class="ridename">Wait & Save</div><div class="ridemeta">4 seats · 8 min away</div></div><div class="rideprice">$9.80</div></div>
<div class="ridecard"><div class="rideicon"></div><div><div class="ridename">Lux Black</div><div class="ridemeta">4 seats · 5 min away</div></div><div class="rideprice">$32.10</div></div>
<div class="confirmbtn">Confirm Lyft</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb1700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb1700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f09187; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191919; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb1700; color: #191919;
border: 1px solid #191919; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb1700; color: #f5f5f5;
border: 1px solid #ed3b27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f09187; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c91704; color: #191919;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:-apple-system,"system-ui","Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-weight:900; font-size:20px; letter-spacing:-1px; }
.navlinks { display:flex; gap:24px; font-size:15px; }
.pill-red { background:#eb1700; color:#fff; border-radius:9999px; padding:10px 20px; font-size:14px; font-weight:600; }
.banner { background:#eb1700; text-align:center; padding:10px; color:#fff; font-weight:900; font-size:20px;
letter-spacing:-0.3px; }
.hero { padding:36px 40px; text-align:center; }
.hero h1 { font-size:38px; font-weight:800; margin:0 0 20px; line-height:1; }
.addr-row { display:flex; gap:10px; max-width:480px; margin:0 auto; }
.addr { flex:1; border:1px solid #ccc; padding:12px 16px; font-size:16px; color:#191919; }
.find { background:#eb1700; color:#fff; border-radius:9999px; padding:0 24px; font-size:16px; height:44px;
display:flex; align-items:center; }
.sec { padding:24px 40px; }
.sec.tint { background:#f6f6f6; }
.sec h2 { font-size:24px; font-weight:800; margin:0 0 14px; }
.cols { display:flex; gap:20px; }
.col { flex:1; background:#fff; border-radius:8px; padding:16px; }
.col .icon { width:36px; height:36px; border-radius:8px; background:#eb1700; margin-bottom:10px; }
.col h4 { font-size:15px; margin:0 0 6px; }
.col p { font-size:12.5px; color:#767676; margin:0; }
.dasher { display:flex; align-items:center; justify-content:space-between; }
.dasher .txt { max-width:400px; }
.dasher .visual { width:240px; height:100px; border-radius:8px;
background:linear-gradient(135deg,#eb1700,#191919); }
</style></head>
<body>
<div class="banner">$0 DELIVERY FEE ON FIRST ORDER</div>
<nav>
<span class="brand">DoorDash</span>
<div class="navlinks"><span>Restaurants</span><span>Grocery</span><span>Convenience</span></div>
<div class="pill-red">Sign In</div>
</nav>
<section class="hero">
<h1>Everything you crave, delivered.</h1>
<div class="addr-row"><div class="addr">Enter delivery address</div><div class="find">Find restaurants</div></div>
</section>
<section class="sec tint">
<h2>Explore what's nearby</h2>
<div class="cols">
<div class="col"><div class="icon"></div><h4>Restaurants</h4><p>Local favorites, delivered fast.</p></div>
<div class="col"><div class="icon"></div><h4>Groceries</h4><p>Weekly shop, no lines.</p></div>
<div class="col"><div class="icon"></div><h4>DashPass</h4><p>Delivery for less.</p></div>
</div>
</section>
<section class="sec dasher">
<div class="txt">
<h2 style="margin-bottom:6px;">Become a Dasher</h2>
<p style="color:#767676; font-size:14px;">As a delivery driver, make money and work on your schedule.</p>
</div>
<div class="visual"></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7353ea; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7353ea; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #baacf0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7353ea; color: #212121;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7353ea; color: #f5f5f5;
border: 1px solid #886dec; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #baacf0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #664bca; color: #212121;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191f28; box-sizing:border-box;
font-family:"Pretendard Variable",-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-weight:700; font-size:17px; color:#7353ea; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; color:#191f28; }
.cta-dark { background:#212121; color:#fff; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:600; }
.hero { padding:34px 40px 20px; text-align:center; }
.hero h1 { font-family:"Elice DX Neolli",sans-serif; font-size:40px; font-weight:500; letter-spacing:-2.4%;
line-height:1.2; margin:0 0 12px; }
.hero p { color:#66717e; font-size:15px; margin:0; }
.stats { display:flex; gap:20px; justify-content:center; padding:20px 0; }
.stat { text-align:center; }
.stat .n { font-family:"Elice DX Neolli",sans-serif; font-size:32px; font-weight:500; color:#7353ea; }
.stat .l { font-size:12px; color:#66717e; margin-top:4px; }
.band { background:rgba(102,113,126,0.04); padding:26px 40px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border:1px solid #e9ebf0; border-radius:24px; padding:20px; }
.card .ic { width:36px; height:36px; border-radius:9999px; background:linear-gradient(135deg,#7353ea,#2f5efb); margin-bottom:10px; }
.card h4 { font-size:15px; margin:0 0 6px; }
.card p { font-size:12.5px; color:#66717e; margin:0; line-height:1.5; }
.footer-nav { padding:20px 40px; display:flex; gap:14px; }
.nav-tab { border-radius:4px; padding:8px 12px; font-size:14px; font-weight:500; color:#212121; }
.nav-tab.active { background:rgba(115,83,234,0.08); color:#7353ea; }
</style></head>
<body>
<nav>
<span class="brand">Elice</span>
<div class="navlinks"><span>Elice AX</span><span>Elice Cloud</span><span>Resources</span></div>
<div class="cta-dark">Try Free Trial</div>
</nav>
<section class="hero">
<h1>Learn, build, and execute<br>— AI happens at Elice</h1>
<p>AI-powered, reliable education operation.</p>
</section>
<section class="stats">
<div class="stat"><div class="n">13,000+</div><div class="l">Enterprise learners</div></div>
<div class="stat"><div class="n">2,810,000+</div><div class="l">Lessons completed</div></div>
</section>
<section class="band">
<div class="grid">
<div class="card"><div class="ic"></div><h4>Hands-on AI Training</h4><p>A curriculum you learn today and apply tomorrow.</p></div>
<div class="card"><div class="ic"></div><h4>Stable AI infrastructure</h4><p>GPU/cloud operation for training workloads.</p></div>
<div class="card"><div class="ic"></div><h4>Enterprise upskilling</h4><p>Elice AX for organization-wide AI literacy.</p></div>
</div>
</section>
<section class="footer-nav">
<div class="nav-tab active">Explore</div><div class="nav-tab">My Classes</div><div class="nav-tab">Dashboard</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a0df; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a0df; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cfeb; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0e27; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a0df; color: #0a0e27;
border: 1px solid #0a0e27; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a0df; color: #f5f5f5;
border: 1px solid #27aee3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cfeb; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0289c2; color: #0a0e27;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0E27; color:#E8EBF7; box-sizing:border-box;
font-family:"Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.hero { background: linear-gradient(165deg,#00A0DF 0%,#1B53C4 45%,#0A0E27 100%); padding:26px 40px 30px; }
.greet-row { display:flex; justify-content:space-between; align-items:center; }
.greet { font-size:18px; font-weight:700; color:#fff; }
.icons { display:flex; gap:16px; color:#fff; font-size:20px; }
.nw-label { font-size:13px; font-weight:600; color:rgba(255,255,255,.75); margin-top:16px; }
.nw-val { font-size:40px; font-weight:800; letter-spacing:-1.2px; margin-top:4px; }
.change-pill { display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:rgba(47,208,138,0.18); color:#6EF0B6;
font-size:13px; font-weight:700; padding:6px 14px; border-radius:999px; }
.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:20px 40px 0; }
.tile { background:#121736; border:1px solid #252C55; border-radius:18px; padding:16px; box-shadow: rgba(0,0,0,0.25) 0 2px 12px; }
.icon-chip { width:36px; height:36px; border-radius:11px; background:#0E2A44; display:flex; align-items:center; justify-content:center; font-size:16px; color:#29C2FF; }
.t-label { font-size:12px; font-weight:600; color:#9BA3C7; margin-top:10px; }
.t-val { font-size:18px; font-weight:800; letter-spacing:-.4px; margin-top:2px; }
.t-sub { font-size:11px; font-weight:600; margin-top:4px; }
.gain { color:#2FD08A; } .loss { color:#FF6B6B; } .gold { color:#F2C14E; }
.list { padding:16px 40px; }
.list-hdr { font-size:14px; font-weight:700; margin-bottom:8px; }
.row { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #252C55; }
.row:last-child { border-bottom:none; }
.rico { width:40px; height:40px; border-radius:13px; background:#0E2A44; display:flex; align-items:center; justify-content:center; font-size:16px; color:#29C2FF; }
.rname { font-size:15px; font-weight:700; }
.rmeta { font-size:12px; color:#9BA3C7; }
.ramt { margin-left:auto; font-size:15px; font-weight:800; }
</style></head>
<body>
<div style="position:absolute; top:14px; left:40px; font-size:10px; font-weight:800; letter-spacing:.5px; color:rgba(255,255,255,.75); z-index:2;">SoFi (iOS)</div>
<div class="hero">
<div class="greet-row"><div class="greet">Good morning, Alex</div><div class="icons">🔔 ⚙</div></div>
<div class="nw-label">Net worth</div>
<div class="nw-val">$84,210.55</div>
<div class="change-pill">▲ +$1,840.22 this month</div>
</div>
<div class="tiles">
<div class="tile"><div class="icon-chip">🏦</div><div class="t-label">Checking & Savings</div><div class="t-val">$12,340.10</div><div class="t-sub gain">3.80% APY</div></div>
<div class="tile"><div class="icon-chip">📈</div><div class="t-label">Invest</div><div class="t-val">$31,884.02</div><div class="t-sub gain">+2.4% today</div></div>
<div class="tile"><div class="icon-chip">🏠</div><div class="t-label">Loans</div><div class="t-val">$402.00</div><div class="t-sub loss">Due Jun 1</div></div>
<div class="tile"><div class="icon-chip">💳</div><div class="t-label">Credit Card</div><div class="t-val">$1,240 pts</div><div class="t-sub gold">2% cash back</div></div>
</div>
<div class="list">
<div class="list-hdr">Recent activity</div>
<div class="row"><div class="rico">📈</div><div><div class="rname">Auto-invest</div><div class="rmeta">Today · Auto-invest</div></div><div class="ramt gain">+$2,140.55</div></div>
<div class="row"><div class="rico">🛒</div><div><div class="rname">Whole Foods</div><div class="rmeta">Yesterday · Checking</div></div><div class="ramt">-$84.20</div></div>
<div class="row"><div class="rico">🎁</div><div><div class="rname">Rewards earned</div><div class="rmeta">Mon · SoFi Card</div></div><div class="ramt gold">+120 pts</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #f5cde0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.12em; background: #116600; color: #fafafa;
border: none; border-radius: 2px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.12em; background: transparent; color: #116600;
border: 1px solid #116600; border-radius: 2px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #fafafa; color: #222222;
border: 1px solid #d4d4d4; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f5cde0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 300; line-height: 1.4; letter-spacing: 0.05em; background: #e8e6de; color: #5c5c5c;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#222222; box-sizing:border-box;
font-family:'Barlow', sans-serif; }
* { box-sizing:border-box; }
.disp { font-family:'classicobold', 'Josefin Sans', sans-serif; }
.uc { font-family:'Josefin Sans', sans-serif; text-transform:uppercase; letter-spacing:0.1em; }
nav { height:64px; border-bottom:1px solid #d4d4d4; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-family:'classicoregular', 'Josefin Sans', sans-serif; font-size:20px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#343434; }
.navlinks span:first-child { color:#116600; border-bottom:2px solid #116600; padding-bottom:20px; }
.hero { background:#e8e6de; padding:30px 40px; }
.hero .lbl { color:#116600; font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:8px; display:block; }
.hero h1 { font-size:36px; font-weight:700; line-height:1.15; letter-spacing:0.01em; margin:0 0 10px; max-width:520px; }
.hero p { font-size:15px; color:#5c5c5c; margin:0 0 16px; max-width:460px; line-height:1.55; }
.btn-primary { background:#116600; color:#fafafa; border:none; border-radius:2px; padding:12px 26px;
font-family:'Josefin Sans'; font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; height:44px; }
.btn-secondary { background:transparent; color:#116600; border:1.5px solid #116600; border-radius:2px; padding:11px 25px;
font-family:'Josefin Sans'; font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; height:44px; margin-left:8px; }
.section { padding:22px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-family:'classicoregular', 'Josefin Sans', sans-serif; font-size:22px; font-weight:400; margin:0; color:#116600; }
.sec-head span { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#6e6e6e; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { border:1px solid #e2e2e2; padding:14px; }
.thumb { aspect-ratio:4/5; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(160deg,#e8e6de,#c7c2a8); }
.t2 { background:linear-gradient(160deg,#f5cde0,#eeaacc); }
.t3 { background:linear-gradient(160deg,#dfe3d8,#a9b89c); }
.period { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#116600; margin-bottom:4px; display:block; }
.card h3 { font-family:'classicobold', 'Josefin Sans', sans-serif; font-size:18px; font-weight:700; margin:0 0 4px; }
.meta { font-size:12px; color:#5c5c5c; margin:0 0 8px; }
.price { font-family:'classicoregular', serif; font-size:16px; color:#343434; margin:0; }
footer { background:#303030; color:#eeeeee; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#acacac; margin-left:16px; letter-spacing:0.08em; text-transform:uppercase; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bernd Goeckler</p>
<div class="navlinks"><span>Furniture</span><span>Porcelain</span><span>Bronze</span><span>Drawings</span></div>
</nav>
<section class="hero">
<span class="lbl">Est. Antiques & Fine Objects</span>
<h1 class="disp">Objects that speak without labels</h1>
<p>A curated collection of Empire furniture, Continental porcelain, and bronzes, each with documented provenance.</p>
<button class="btn-primary">Inquire</button>
<button class="btn-secondary">View Collection</button>
</section>
<section class="section">
<div class="sec-head"><h2>Recently Acquired</h2><span>Browse All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"></div>
<span class="period">Empire · Circa 1810</span>
<h3>Mahogany Secretary Desk</h3>
<p class="meta">France · Provenance available</p>
<p class="price">Inquire</p>
</div>
<div class="card">
<div class="thumb t2"></div>
<span class="period">Rococo · Circa 1760</span>
<h3>Meissen Porcelain Vase</h3>
<p class="meta">Germany · Exhibited 1998</p>
<p class="price">$12,500</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<span class="period">Neoclassical · Circa 1795</span>
<h3>Patinated Bronze Urn</h3>
<p class="meta">Italy · Single owner</p>
<p class="price">Inquire</p>
</div>
</div>
</section>
<footer>
<span>© Bernd Goeckler</span>
<div><a href="#">Provenance</a><a href="#">Visit Gallery</a><a href="#">Inquiries</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f63440; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #f63440;
border: 1px solid #f63440; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fedfe0; color: #f63440;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1B1B1B; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; padding:22px 16px; position:relative; }
.addrrow { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.addr .l1 { font-size:11px; font-weight:600; color:#707070; }
.addr .l2 { font-size:15px; font-weight:700; }
.bagbtn { width:34px; height:34px; border-radius:50%; background:#262626; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:14px; position:relative; }
.bagbtn .badge { position:absolute; top:-4px; right:-4px; background:#F63440; color:#fff; font-size:9px; font-weight:800;
border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; }
.search { height:44px; background:#F6F6F4; border-radius:12px; display:flex; align-items:center; padding:0 12px;
font-size:13px; color:#707070; margin-bottom:12px; }
.chiprow { display:flex; gap:8px; margin-bottom:14px; overflow:hidden; }
.chiprow span { background:#F63440; color:#fff; border-radius:999px; padding:7px 14px; font-size:12px; font-weight:500; white-space:nowrap; }
.chiprow span.i { background:#F6F6F4; color:#707070; }
.rcard { border-radius:14px; overflow:hidden; margin-bottom:16px; }
.photo { height:130px; border-radius:14px; position:relative; background:linear-gradient(135deg,#f4a742,#c9601f); }
.perks { position:absolute; top:8px; left:8px; background:#FFB81C; color:#1A1206; font-size:10px; font-weight:700;
text-transform:uppercase; padding:3px 8px; border-radius:6px; }
.heart { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
background:rgba(0,0,0,0.45); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
.r1 { display:flex; justify-content:space-between; margin-top:8px; }
.rname { font-size:16px; font-weight:700; }
.rating { font-size:13px; font-weight:600; color:#18A957; }
.rmeta { font-size:13px; color:#707070; margin-top:2px; }
.rdeal { font-size:12px; font-weight:700; color:#FF8000; margin-top:2px; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:52px; background:#fff; border-top:0.5px solid #E6E6E6;
display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#888; text-align:center; }
.tab.on { color:#F63440; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:900; letter-spacing:-0.3px; margin:0; }
.brand span { color:#F63440; }
.tag { font-size:14px; color:#707070; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:14px; border:1px solid #E6E6E6; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#707070; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:900; }
.typeblock .t2 { font-size:13px; color:#707070; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:700; padding:6px 12px; border-radius:999px;
background:#F6F6F4; border:1px solid #E6E6E6; color:#707070; }
.footer { margin-top:auto; border-top:1px solid #E6E6E6; padding-top:16px; font-size:11px; color:#A0A0A0; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="addrrow"><div class="addr"><div class="l1">DELIVER TO</div><div class="l2">123 Main St ⌄</div></div><div class="bagbtn">🛍<span class="badge">2</span></div></div>
<div class="search">🔍 Search Grubhub</div>
<div class="chiprow"><span>All</span><span class="i">Pizza</span><span class="i">Sushi</span><span class="i">Burgers</span></div>
<div class="rcard">
<div class="photo"><span class="perks">Grubhub+ Perks</span><span class="heart">♡</span></div>
<div class="r1"><span class="rname">Marzano's Kitchen</span><span class="rating">★ 4.6</span></div>
<div class="rmeta">Italian · 20–30 min · $0 delivery fee</div>
<div class="rdeal">Free delivery with Grubhub+</div>
</div>
<div class="tabbar"><div class="tab on">Delivery</div><div class="tab">Search</div><div class="tab">Orders</div><div class="tab">Saved</div><div class="tab">Account</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Grubhub (iOS)<span>.</span></h1>
<p class="tag">An appetite-first marketplace — wide restaurant photography leads, red drives action, orange carries the deal.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#F63440"></div><small>#F63440</small></div>
<div class="sw"><div class="chip2" style="background:#FF8000"></div><small>#FF8000</small></div>
<div class="sw"><div class="chip2" style="background:#FFB81C"></div><small>#FFB81C</small></div>
<div class="sw"><div class="chip2" style="background:#00A0DF"></div><small>#00A0DF</small></div>
<div class="sw"><div class="chip2" style="background:#18A957"></div><small>#18A957</small></div>
</div>
<div class="typeblock">
<div class="t1">Marzano's Kitchen</div>
<div class="t2">Inter (Graphik sub) · numbers always bold + tabular — economics lead</div>
</div>
<div class="taglist">
<span>16:9 restaurant photo</span><span>Green rating star</span><span>Grubhub+ gold badge</span>
<span>Live tracking blue</span><span>Pill CTAs everywhere</span>
</div>
<div class="footer">Pure white canvas · Track Blue reserved for order tracking only</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #8081ff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #8081ff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #43437c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0abbb5; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8081ff; color: #000000;
border: 1px solid #0abbb5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #8081ff; color: #111111;
border: 1px solid #6e6fd9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #43437c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6d8af3; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Noto Sans TC", "Open Sans", Arial, "Microsoft JhengHei", "Apple LiGothic Medium", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #eeeef5; }
.brand { font-size:19.2px; font-weight:700; color:#8081ff; }
.navlinks { display:flex; gap:22px; font-size:16px; font-weight:900; }
.navlinks span.active { color:#8081ff; }
.navcta { background:#8081ff; color:#ffffff; border-radius:8px; padding:10px 15px;
font-size:16px; font-weight:900; }
.hero { height:150px; background:linear-gradient(120deg,#cf7ffa,#8081ff);
display:flex; align-items:center; padding:0 32px; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:-40px; top:-60px; width:220px; height:220px;
border-radius:9999px; background:rgba(255,255,255,0.14); }
.hero::before { content:''; position:absolute; right:120px; bottom:-70px; width:140px; height:140px;
border-radius:9999px; background:rgba(255,255,255,0.12); }
.hero h1 { color:#ffffff; font-size:28.8px; font-weight:700; margin:0; position:relative; z-index:1; }
.hero p { color:#f5f2ff; font-size:16px; margin:6px 0 0; position:relative; z-index:1; }
.section { padding:22px 32px 0; }
.section h2 { font-size:22.4px; font-weight:700; margin:0 0 16px; }
.more { float:right; font-size:16px; font-weight:900; color:#000000; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#ffffff; box-shadow:2px 2px 5px 0px rgba(0,0,0,0.16); }
.card .img { height:96px; background:linear-gradient(135deg,#f5f2ff,#eeeef5); position:relative; }
.card .img::after { content:''; position:absolute; right:10px; bottom:10px; width:34px; height:34px;
border-radius:9999px; background:linear-gradient(135deg,#cf7ffa,#8081ff); }
.card .txt { background:#f3f3f3; padding:14px 16px; }
.card .date { color:#0abbb5; font-size:13px; font-weight:900; margin-bottom:4px; }
.card .title { font-size:15px; font-weight:900; color:#000000; line-height:1.3; }
.ptbar { margin:22px 32px 0; background:#f5f2ff; border-radius:8px; padding:14px 18px;
display:flex; align-items:center; justify-content:space-between; }
.ptbar .lbl { font-size:14px; color:#48484e; }
.ptbar .val { font-size:22.4px; font-weight:700; color:#8081ff; }
.ptbar .badge { background:linear-gradient(to right,#cf7ffa,#8081ff); color:#ffffff;
font-size:12px; font-weight:900; padding:5px 12px; border-radius:9999px; }
</style></head>
<body>
<nav>
<div class="brand">OPENPOINT</div>
<div class="navlinks"><span class="active">Promotions</span><span>Point Exchange</span><span>Travel Points Passport</span></div>
<div class="navcta">Member Login</div>
</nav>
<div class="hero">
<div>
<h1>OPENPOINT Promotions</h1>
<p>Promo period: 2026/01/01–06/30 · Earn points on every purchase</p>
</div>
</div>
<div class="ptbar">
<div><div class="lbl">My Points Balance</div><div class="val">2,480 pt</div></div>
<div class="badge">PRIMA Member Bonus</div>
</div>
<div class="section">
<h2>This Week's Top Deals <span class="more">See all deals ›</span></h2>
<div class="grid">
<div class="card"><div class="img"></div><div class="txt"><div class="date">Promo period: 01/05–01/20</div><div class="title">Coffee buy-one-get-one, double points</div></div></div>
<div class="card"><div class="img"></div><div class="txt"><div class="date">Promo period: 01/10–02/10</div><div class="title">Spend and win with icash Pay</div></div></div>
<div class="card"><div class="img"></div><div class="txt"><div class="date">Promo period: 01/15–02/28</div><div class="title">Bonus points on airline mile exchange</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a3bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a3bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bea1fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6429e6; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7a3bff; color: #ffffff;
border: 1px solid #6429e6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7a3bff; color: #f5f5f5;
border: 1px solid #8e59fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bea1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7638fb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0f172a; box-sizing:border-box; font-family:-apple-system,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #e2e8f0; }
.brand { font-weight:700; font-size:17px; }
.search { width:280px; height:36px; border-radius:8px; background:#f5f5f5; display:flex; align-items:center;
padding:0 14px; color:#77797b; font-size:13px; }
.btn { background:#7a3bff; color:#fff; border:none; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; }
.tabs { display:flex; gap:18px; padding:10px 30px; border-bottom:1px solid #e2e8f0; font-size:14px; font-weight:600; color:#575b5c; }
.tabs span.active { color:#7a3bff; border-bottom:2px solid #7a3bff; padding-bottom:8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 30px; }
.card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px; }
.cover { height:90px; border-radius:8px; margin-bottom:10px; }
.c1 .cover { background:linear-gradient(150deg,#d7c6ff,#7a3bff); }
.c2 .cover { background:linear-gradient(150deg,#c6e3ff,#4a90d9); }
.c3 .cover { background:linear-gradient(150deg,#c6ffe0,#38b57e); }
.best { display:inline-block; background:#7a3bff; color:#fff; font-size:10px; font-weight:700; border-radius:4px; padding:2px 6px; margin-bottom:6px; }
.ctitle { font-size:15px; font-weight:600; margin:0 0 6px; line-height:1.3; }
.cmeta { font-size:12px; color:#77797b; }
.membership { margin:6px 30px; background:#f1ebff; border-radius:12px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; }
.membership h4 { margin:0; font-size:16px; color:#0f172a; }
.membership p { margin:2px 0 0; font-size:12px; color:#575b5c; }
</style></head>
<body>
<nav>
<div class="brand">PUBLY</div>
<div class="search">What do you want to learn today?</div>
<button class="btn">Start Membership</button>
</nav>
<div class="tabs">
<span class="active">BEST</span><span>Series</span><span>Templates</span><span>Career</span>
</div>
<div class="grid">
<div class="card c1"><div class="cover"></div><span class="best">BEST</span><div class="ctitle">7 Data Metrics Every PM Should Know</div><div class="cmeta">Alex · 8 min</div></div>
<div class="card c2"><div class="cover"></div><span class="best">NEW</span><div class="ctitle">A Marketer's Guide to Salary Negotiation</div><div class="cmeta">Sarah · 6 min</div></div>
<div class="card c3"><div class="cover"></div><span class="best">Series</span><div class="ctitle">From Junior to Lead: A Career Transition</div><div class="cmeta">Jamie · 10 min</div></div>
</div>
<div class="membership">
<div><h4>Fresh career knowledge, delivered monthly</h4><p>PUBLY Membership for steady growth</p></div>
<button class="btn">3-Day Free Trial</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f1ea; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f1ea; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #777673; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #382110; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f1ea; color: #382110;
border: 1px solid #382110; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f4f1ea; color: #111111;
border: 1px solid #d0cdc7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777673; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d0c7; color: #382110;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F4F1EA; color:#382110; box-sizing:border-box;
font-family:Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
.sans { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#F4F1EA; padding:24px 18px; position:relative; border-right:1px solid #DDD6C7; }
.header { display:flex; gap:14px; margin-bottom:16px; }
.cover { width:88px; height:132px; border-radius:3px; flex-shrink:0; position:relative; overflow:hidden;
background:linear-gradient(160deg,#8a5a3a,#3c2415); box-shadow:rgba(0,0,0,0.18) 0 4px 10px; }
.cover::before { content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:rgba(0,0,0,0.35); }
.cover .t { position:absolute; top:16px; left:14px; right:10px; color:#f4f1ea; font-size:11px; font-weight:700; line-height:1.3; }
.hinfo .title { font-size:19px; font-weight:900; line-height:1.2; }
.hinfo .author { font-size:13px; font-weight:700; color:#00635D; font-family:sans-serif; margin-top:6px; }
.stars { color:#E9A100; font-size:14px; margin-top:8px; }
.ratingmeta { font-size:11px; color:#6B5E47; font-family:sans-serif; }
.ctablock { margin:16px 0; }
.wantbtn { background:#409D69; color:#fff; text-align:center; border-radius:4px; padding:12px; font-size:14px;
font-weight:900; font-family:sans-serif; }
.segrow { display:flex; border:1px solid #DDD6C7; border-radius:4px; margin-top:8px; overflow:hidden; font-family:sans-serif; }
.segrow span { flex:1; text-align:center; padding:8px; font-size:11px; font-weight:700; color:#6B5E47; border-right:1px solid #DDD6C7; }
.segrow span:last-child { border-right:none; }
.segrow span.act { color:#E9A100; }
.revcard { display:flex; gap:10px; margin-top:14px; }
.revav { width:32px; height:32px; border-radius:50%; background:linear-gradient(160deg,#58371F,#382110); flex-shrink:0; }
.revbody .rname { font-family:sans-serif; font-weight:700; font-size:12px; }
.revbody .rstars { color:#E9A100; font-size:11px; margin:2px 0; }
.revbody .rtext { font-size:12px; line-height:1.5; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:50px; background:#F4F1EA; border-top:0.5px solid #DDD6C7;
display:flex; align-items:center; justify-content:space-around; font-family:sans-serif; }
.tab { font-size:9px; color:#988B6F; text-align:center; }
.tab.on { color:#382110; font-weight:700; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; font-family:sans-serif; }
.brand { font-size:30px; font-weight:900; letter-spacing:-0.3px; margin:0; font-family:Georgia,serif; }
.brand span { color:#E9A100; }
.tag { font-size:14px; color:#6B5E47; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:4px; border:1px solid #DDD6C7; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6B5E47; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:900; font-family:Georgia,serif; }
.typeblock .t2 { font-size:13px; color:#6B5E47; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:700; padding:6px 12px; border-radius:999px;
background:#EBE6DA; border:1px solid #DDD6C7; color:#6B5E47; }
.footer { margin-top:auto; border-top:1px solid #DDD6C7; padding-top:16px; font-size:11px; color:#988B6F; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="header">
<div class="cover"><div class="t">The Warm<br>Season</div></div>
<div class="hinfo">
<div class="title">The Warm Season</div>
<div class="author">Elena Marsh</div>
<div class="stars">★★★★☆</div>
<div class="ratingmeta">4.01 · 3,284,991 ratings</div>
</div>
</div>
<div class="ctablock">
<div class="wantbtn">Want to Read</div>
<div class="segrow"><span>Rate</span><span class="act">Review</span><span>Shelve ▾</span></div>
</div>
<div class="revcard">
<div class="revav"></div>
<div class="revbody">
<div class="rname">J. Alvarez</div>
<div class="rstars">★★★★★</div>
<div class="rtext">A quiet, devastating book about the years we don't talk about. Couldn't put it down.</div>
</div>
</div>
<div class="tabbar"><div class="tab on">Home</div><div class="tab">My Books</div><div class="tab">Browse</div><div class="tab">Updates</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Goodreads (iOS)<span>.</span></h1>
<p class="tag">A warm paper library where the book cover is the hero, amber is reserved for stars, and the shelf model organizes everything.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#382110"></div><small>#382110</small></div>
<div class="sw"><div class="chip2" style="background:#E9A100"></div><small>#E9A100</small></div>
<div class="sw"><div class="chip2" style="background:#409D69"></div><small>#409D69</small></div>
<div class="sw"><div class="chip2" style="background:#00635D"></div><small>#00635D</small></div>
<div class="sw"><div class="chip2" style="background:#F4F1EA"></div><small>#F4F1EA</small></div>
</div>
<div class="typeblock">
<div class="t1">The Warm Season</div>
<div class="t2">Merriweather serif for reading, Lato sans for chrome — 1.6 line-height on reviews</div>
</div>
<div class="taglist">
<span>Full-color covers</span><span>Amber 5-star rating</span><span>Shelf model</span>
<span>Community reviews</span><span>Teal author links</span>
</div>
<div class="footer">Warm tan paper canvas #F4F1EA · covers never tinted, always the hero</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.25px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #55595c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ee7f00; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #ee7f00; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #55595c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #5cb85c; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#373a3c; box-sizing:border-box;
font-family:'Open Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#1a1a1a; }
.brand { font-size:15px; font-weight:700; color:#fff; margin:0; text-transform:lowercase; }
.navlinks { display:flex; gap:0; font-size:14px; font-weight:600; color:#fff; }
.navlinks span { padding:0 14px; height:56px; display:flex; align-items:center; border-bottom:3px solid transparent; }
.navlinks span.active { border-bottom-color:#ee7f00; }
.cart { color:#ee7f00; font-size:13px; font-weight:700; }
.content { display:flex; padding:20px 32px; gap:20px; }
.gallery { flex:1.1; }
.mainimg { height:210px; background:#eceeef; position:relative; }
.mainimg::after { content:''; position:absolute; left:50%; top:50%; width:120px; height:120px; border-radius:50%;
background:radial-gradient(circle,#373a3c 0%,#1a1a1a 70%); transform:translate(-50%,-50%); }
.mainimg::before { content:''; position:absolute; left:50%; top:50%; width:60px; height:60px; border-radius:50%;
border:6px solid #ee7f00; transform:translate(-50%,-50%); z-index:1; }
.details { flex:1; }
.details h1 { font-size:22px; font-weight:700; margin:0 0 6px; }
.details .sub { font-size:12px; color:#818a91; margin:0 0 12px; }
.price { font-size:24px; font-weight:700; color:#ee7f00; margin-bottom:12px; }
.badges { display:flex; gap:6px; margin-bottom:14px; }
.bad { font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 7px; color:#fff; border-radius:2px; }
.bad.ok { background:#5cb85c; }
.bad.info { background:#5bc0de; }
.btn { display:block; text-align:center; background:#ee7f00; color:#fff; font-weight:700; font-size:14px; text-transform:uppercase;
letter-spacing:.5px; padding:12px; border-radius:2px; margin-bottom:14px; }
.spec { border:1px solid #eeeeee; }
.row { display:flex; justify-content:space-between; padding:8px 12px; font-size:12px; border-bottom:1px solid #eeeeee; }
.row:nth-child(odd) { background:#f5f5f5; }
.row span:first-child { font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.3px; color:#55595c; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#222222; color:#929395;
border-top:3px solid #ee7f00; display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">BE Quiet</p>
<div class="navlinks"><span class="active">Cooling</span><span>Cases</span><span>Power Supplies</span><span>Fans</span></div>
<div class="cart">Cart (1)</div>
</nav>
<div class="content">
<div class="gallery"><div class="mainimg"></div></div>
<div class="details">
<h1>Dark Rock Pro 5 CPU Cooler</h1>
<p class="sub">Dual-tower · Twin 135mm Silent Wings</p>
<div class="price">$99.90</div>
<div class="badges"><span class="bad ok">AM5 Compatible</span><span class="bad info">Requires Mounting Kit</span></div>
<span class="btn">Add to Cart</span>
<div class="spec">
<div class="row"><span>TDP Rating</span><span>270W</span></div>
<div class="row"><span>Fan Speed</span><span>1200–1700 RPM</span></div>
<div class="row"><span>Noise Level</span><span>21.6–24.3 dB(A)</span></div>
<div class="row"><span>Height</span><span>162.8 mm</span></div>
</div>
</div>
</div>
<footer>
<span>© BE Quiet</span>
<span>PSU Calculator · Cooler Compatibility · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3282f0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3282f0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9dc1f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6741d9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3282f0; color: #000000;
border: 1px solid #6741d9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3282f0; color: #f5f5f5;
border: 1px solid #5194f1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9dc1f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3a78ec; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f1f3f5; color:#1d2024; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#ffffff; border-bottom:1px solid #dee3e8; }
.brand { font-size:16px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#9ca5ad; }
.navlinks span.on { color:#1d2024; font-weight:700; }
.cta { background:#3282f0; color:#ffffff; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:700; }
.stat { padding:20px 32px 6px; display:flex; align-items:baseline; justify-content:space-between; }
.stat-left .label { font-size:12px; color:#858d94; margin:0 0 4px; }
.stat-left .num { font-size:34px; font-weight:400; letter-spacing:-0.8px; color:#3c3c3c; margin:0; }
.pill-purple { background:rgba(103,65,217,0.1); color:#6741d9; border-radius:6px; padding:7px 14px; font-size:12px; font-weight:700; }
.section { padding:14px 32px 8px; }
.section h2 { font-size:19px; font-weight:700; letter-spacing:-0.4px; margin:0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 32px 18px; }
.prod { background:#ffffff; border:1px solid #dee3e8; border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.prod-top { display:flex; align-items:center; justify-content:space-between; }
.grade { color:#ffffff; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:400; }
.grade.b { background:#3770b2; }
.grade.a { background:#4a7656; }
.grade.c { background:#8884c9; }
.rate { font-size:12px; color:#3282f0; font-weight:700; }
.prod h3 { font-size:14px; font-weight:700; margin:0; line-height:1.35; }
.prod .meta { font-size:11px; color:#606060; }
.bar { height:5px; border-radius:9999px; background:#f1f3f5; overflow:hidden; }
.bar i { display:block; height:100%; background:#3282f0; }
.prod-bottom { display:flex; justify-content:space-between; font-size:11px; color:#858d94; }
.disclose { margin:0 32px; background:#ffffff; border:1px solid #dee3e8; border-radius:10px; padding:14px 18px;
display:flex; gap:22px; }
.disclose span { font-size:13px; color:#9ca5ad; }
.disclose span.on { color:#1d2024; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">8percent</p>
<div class="navlinks"><span class="on">Products</span><span>My Investments</span><span>Disclosures</span><span>Press</span></div>
<div class="cta">Invest Now</div>
</nav>
<section class="stat">
<div class="stat-left">
<p class="label">Cumulative Loan Volume</p>
<p class="num">₩1,395,528,150,000</p>
</div>
<span class="pill-purple">Press coverage →</span>
</section>
<section class="section"><h2>Products Now Funding</h2></section>
<div class="grid">
<div class="prod">
<div class="prod-top"><span class="grade b">B</span><span class="rate">9.8% APR</span></div>
<h3>Small Business Working Capital, 12mo Term</h3>
<div class="bar"><i style="width:68%"></i></div>
<div class="prod-bottom"><span>68% funded</span><span>3 days left</span></div>
</div>
<div class="prod">
<div class="prod-top"><span class="grade a">A</span><span class="rate">7.2% APR</span></div>
<h3>Real Estate Backed Note, 24mo Term</h3>
<div class="bar"><i style="width:91%"></i></div>
<div class="prod-bottom"><span>91% funded</span><span>1 day left</span></div>
</div>
<div class="prod">
<div class="prod-top"><span class="grade c">C</span><span class="rate">12.4% APR</span></div>
<h3>Consumer Refinance Bundle, 18mo Term</h3>
<div class="bar"><i style="width:44%"></i></div>
<div class="prod-bottom"><span>44% funded</span><span>6 days left</span></div>
</div>
</div>
<div class="disclose">
<span class="on">Management Status</span>
<span>Usage Info</span>
<span>Origination Records</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #298737; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #298737; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99c4a0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #237b31; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #298737; color: #000000;
border: 1px solid #237b31; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #298737; color: #f5f5f5;
border: 1px solid #4a9955; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99c4a0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #288536; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#08121a; box-sizing:border-box;
font-family:"Hiragino Sans", Meiryo, "Yu Gothic", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
border-bottom:1px solid rgba(8,18,26,0.08); }
.brand { font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:700; }
.navlinks .on { color:#237b31; }
.row { display:flex; gap:8px; }
.btn-o { background:#fff; color:#237b31; border:1px solid #237b31; border-radius:15px; padding:6px 16px; font-size:12px; font-weight:700; }
.btn-c { background:#298737; color:#fff; border-radius:15px; padding:7px 16px; font-size:12px; font-weight:700; }
.hero { text-align:center; padding:26px 30px 20px; background:#f5f6f6; }
.hero h1 { font-size:28px; font-weight:700; margin:0 0 10px; }
.hero p { font-size:14px; color:#08121a; margin:0 0 16px; }
.cta { display:inline-block; background:#298737; color:#fff; border-radius:48px; padding:12px 28px; font-size:15px; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:22px 30px 0; }
.card { background:#e7f5e9; border-radius:16px; padding:18px; }
.card h3 { font-size:16px; margin:0 0 6px; }
.card p { font-size:12.5px; color:#08121a; margin:0; line-height:1.5; }
.card2 { background:#ffffff; border:1px solid rgba(8,18,26,0.08); border-radius:16px; padding:18px; }
.principlerow { display:flex; gap:12px; padding:20px 30px 0; }
.pr { flex:1; text-align:center; }
.pr .ic { width:36px; height:36px; border-radius:50%; background:#298737; margin:0 auto 8px; }
.pr span { font-size:12px; font-weight:700; }
footer { position:absolute; bottom:0; width:960px; padding:12px 30px; border-top:1px solid rgba(8,18,26,0.08);
display:flex; justify-content:space-between; font-size:11.5px; color:#08121a; }
</style></head>
<body>
<nav>
<p class="brand">Spindle (CyberAgent Ameba)</p>
<div class="navlinks"><span class="on">Brand</span><span>Principles</span><span>Style</span><span>Components</span></div>
<div class="row"><span class="btn-o">Log In</span><span class="btn-c">Sign Up</span></div>
</nav>
<section class="hero">
<h1>Get started with Spindle (CyberAgent Ameba) — sign up free today</h1>
<p>Weaving living content, for a media platform anyone can use, anytime, without hesitation.</p>
<span class="cta">Sign Up</span>
</section>
<div class="grid">
<div class="card"><h3>Start blogging on Spindle (CyberAgent Ameba)</h3><p>Photos, words, however you like. Anyone can start sharing today.</p></div>
<div class="card2"><h3>What kind of service is Spindle (CyberAgent Ameba)?</h3><p>From blogs to fortune-telling to avatars, a wide range of services under one ID.</p></div>
</div>
<div class="principlerow">
<div class="pr"><div class="ic"></div><span>Respect</span></div>
<div class="pr"><div class="ic"></div><span>Lightness</span></div>
<div class="pr"><div class="ic"></div><span>Emotion</span></div>
<div class="pr"><div class="ic"></div><span>Welcome</span></div>
</div>
<footer>
<span>Embodying what makes Spindle (CyberAgent Ameba) unique</span>
<span>About Spindle · Updates</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5fe0ee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5fe0ee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #346e74; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1c1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5fe0ee; color: #1a1c1d;
border: 1px solid #1a1c1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5fe0ee; color: #111111;
border: 1px solid #53bfcb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #346e74; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #54c1cd; color: #1a1c1d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1c1d; color:#ffffff; box-sizing:border-box; font-family:"Noto Sans",sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:transparent; }
.brand { font-weight:700; font-size:20px; letter-spacing:1px; }
.navlinks { display:flex; gap:26px; font-size:20px; font-weight:400; }
.btn { background:#5fe0ee; color:#000; border:2px solid #fff; border-radius:3px; padding:0 16px; height:40px; font-size:16px; font-weight:700; display:flex; align-items:center; }
.hero { height:340px; display:flex; align-items:center; justify-content:center; position:relative;
background:radial-gradient(circle at 30% 40%, rgba(95,224,238,0.18), transparent 60%); }
.hero-inner { text-align:center; }
.hero-inner .tag { font-size:14px; letter-spacing:3px; color:#5fe0ee; margin-bottom:14px; }
.hero-inner h1 { font-size:40px; font-weight:700; margin:0 0 20px; }
.catalog { display:flex; gap:16px; padding:26px 34px; }
.tile { flex:1; height:110px; border-radius:3px; position:relative; display:flex; align-items:flex-end; padding:10px; }
.tile span { font-size:14px; font-weight:700; }
.t1 { background:linear-gradient(160deg,#2b3a3f,#0f4a52); }
.t2 { background:linear-gradient(160deg,#3a2b3f,#521f47); }
.t3 { background:linear-gradient(160deg,#2b3f2e,#1f5230); }
.t4 { background:linear-gradient(160deg,#3f2b2b,#521f1f); }
</style></head>
<body>
<nav>
<div class="brand">Rayark</div>
<div class="navlinks"><span>Games</span><span>About</span><span>Careers</span></div>
<button class="btn">Play Now</button>
</nav>
<div class="hero">
<div class="hero-inner">
<div class="tag">TAIPEI INDIE STUDIO</div>
<h1>Music. Rhythm. Play.</h1>
<button class="btn" style="margin:0 auto;">Play Now</button>
</div>
</div>
<div class="catalog">
<div class="tile t1"><span>Cytus</span></div>
<div class="tile t2"><span>Deemo</span></div>
<div class="tile t3"><span>VOEZ</span></div>
<div class="tile t4"><span>Sdorica</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f7fa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f5f7fa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#F5F7FA; color:#1A1F26; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:20px 32px 0; }
.segrow { display:flex; gap:8px; }
.seg { flex:1; text-align:center; padding:9px 0; border-radius:10px; font-size:14px; font-weight:600; background:#fff; border:0.5px solid #E3E7ED; color:#5A6573; }
.seg.on { background:#FFC94D; color:#00355F; border:none; }
.searchpill { margin-top:14px; background:#fff; border:0.5px solid #E3E7ED; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,0.08); padding:12px 18px; }
.searchpill .l1 { font-size:14px; font-weight:700; }
.searchpill .l2 { font-size:11px; color:#5A6573; margin-top:2px; }
.cards { display:flex; gap:16px; margin-top:18px; }
.rcard { width:290px; background:#fff; border-radius:16px; border:0.5px solid #E3E7ED; box-shadow:0 4px 12px rgba(0,0,0,0.08); overflow:hidden; }
.rphoto { height:170px; position:relative; }
.dealflag { position:absolute; top:12px; left:12px; background:#FFC94D; color:#00355F; font-size:12px; font-weight:800; padding:4px 9px; border-radius:6px; }
.saveheart { position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,0.4); color:#fff; display:flex; align-items:center; justify-content:center; }
.rbody { padding:12px 14px 14px; }
.rname { font-size:18px; font-weight:700; }
.rloc { font-size:15px; font-weight:600; color:#5A6573; margin-top:3px; }
.scorerow { display:flex; align-items:center; gap:6px; margin-top:8px; }
.scorebadge { background:#1A8B4B; color:#fff; font-size:15px; font-weight:800; padding:3px 7px; border-radius:6px; }
.scoretext { font-size:12px; color:#5A6573; }
.pricerow { margin-top:10px; }
.strike { text-decoration:line-through; color:#8A95A3; font-size:13px; margin-right:6px; }
.now { font-size:18px; font-weight:800; }
.perday { font-size:12px; color:#5A6573; }
.onekey { margin-top:7px; font-size:11px; font-weight:700; color:#F5C518; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:20px;font-weight:800;color:#00355F;margin-bottom:10px">Expedia (iOS)</div>
<div class="segrow"><div class="seg on">Stays</div><div class="seg">Flights</div><div class="seg">Cars</div><div class="seg">Bundle</div></div>
<div class="searchpill"><div class="l1">San Diego, CA</div><div class="l2">Oct 12 – 17 · 2 travelers · 1 room</div></div>
<div class="cards">
<div class="rcard">
<div class="rphoto" style="background:linear-gradient(135deg,#a8c8e0,#5888b8)"><div class="dealflag">−24% Bundle</div><div class="saveheart">♡</div></div>
<div class="rbody">
<div class="rname">Ocean Bluff Resort</div><div class="rloc">Mission Beach</div>
<div class="scorerow"><span class="scorebadge">9.2</span><span class="scoretext">Wonderful · 1,847 reviews</span></div>
<div class="pricerow"><span class="strike">$268</span><span class="now">$204</span> <span class="perday">/ night</span></div>
<div class="onekey">● Earn 2,040 One Key cash</div>
</div>
</div>
<div class="rcard">
<div class="rphoto" style="background:linear-gradient(135deg,#e0c8a8,#a87858)"><div class="saveheart" style="background:#1668E3">♥</div></div>
<div class="rbody">
<div class="rname">Gaslamp Boutique Hotel</div><div class="rloc">0.4 mi from center</div>
<div class="scorerow"><span class="scorebadge" style="background:#1668E3">8.4</span><span class="scoretext">Excellent · 962 reviews</span></div>
<div class="pricerow"><span class="now">$149</span> <span class="perday">/ night</span></div>
<div class="onekey">● Earn 1,490 One Key cash</div>
</div>
</div>
<div class="rcard">
<div class="rphoto" style="background:linear-gradient(135deg,#c8d8b8,#788858)"><div class="dealflag">Member price</div><div class="saveheart">♡</div></div>
<div class="rbody">
<div class="rname">Balboa Park Inn</div><div class="rloc">Balboa Park</div>
<div class="scorerow"><span class="scorebadge" style="background:#14416B">7.6</span><span class="scoretext">Good · 421 reviews</span></div>
<div class="pricerow"><span class="strike">$132</span><span class="now">$99</span> <span class="perday">/ night</span></div>
<div class="onekey">● Earn 990 One Key cash</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7234e0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7234e0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ba9eec; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8243f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7234e0; color: #ffffff;
border: 1px solid #8243f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7234e0; color: #f5f5f5;
border: 1px solid #8753e3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ba9eec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7536e3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0f1011; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; height:270px; background:
radial-gradient(600px 300px at 80% 0%, rgba(114,52,224,0.55), transparent 60%),
linear-gradient(120deg, #1b1024 0%, #241536 45%, #33204a 100%); overflow:hidden; }
.hero::before { content:''; position:absolute; right:-60px; top:-60px; width:340px; height:340px; border-radius:50%;
background:radial-gradient(circle, rgba(130,67,242,0.55), transparent 70%); }
.hero::after { content:''; position:absolute; left:40px; bottom:-90px; width:260px; height:260px; border-radius:24px;
background:rgba(255,255,255,0.05); transform:rotate(18deg); }
nav { position:relative; z-index:3; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { color:#fff; font-size:18px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; }
.navlinks span { color:rgba(255,255,255,0.65); font-size:14px; font-weight:500; }
.navlinks span.on { color:#fff; font-weight:700; }
.ctrl { width:36px; height:36px; border-radius:9999px; background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.25); }
.herotext { position:relative; z-index:3; padding:26px 32px 0; max-width:520px; }
.kicker { color:#c9a9ff; font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { color:#fff; font-size:40px; font-weight:700; line-height:1.15; margin:0 0 14px; letter-spacing:-0.5px; }
.cta-row { display:flex; gap:10px; }
.btn-purple { background:#7234e0; color:#fff; border-radius:6px; padding:0 18px; height:40px; font-size:14px; font-weight:500;
display:flex; align-items:center; }
.btn-ghost { background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.3); border-radius:6px;
padding:0 18px; height:40px; font-size:14px; font-weight:500; display:flex; align-items:center; }
.body { position:absolute; top:270px; left:0; right:0; bottom:0; background:#ffffff; padding:20px 32px; }
.section-title { font-size:20px; font-weight:700; margin:0 0 4px; color:#0f1011; }
.section-sub { font-size:13px; color:#62626a; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #f2f2f3; border-radius:16px; overflow:hidden; }
.art { height:96px; background:
linear-gradient(135deg, rgba(114,52,224,0.22), rgba(29,75,153,0.14));
position:relative; }
.art::after { content:''; position:absolute; right:10px; bottom:-14px; width:60px; height:60px; border-radius:14px;
background:rgba(114,52,224,0.35); transform:rotate(20deg); }
.cinfo { padding:10px 12px 12px; }
.ctitle { font-size:14px; font-weight:700; color:#0f1011; margin-bottom:4px; }
.cgenre { font-size:11px; color:#888890; }
.badge { display:inline-block; margin-top:6px; background:#f1415e; color:#fff; font-size:10px; font-weight:500;
border-radius:6px; padding:1px 7px; }
</style></head>
<body>
<div class="hero">
<nav>
<span class="brand">NCSOFT</span>
<div class="navlinks"><span class="on">Games</span><span>Play</span><span>News</span><span>Company</span></div>
<span class="ctrl"></span>
</nav>
<div class="herotext">
<div class="kicker">Now Pre-registering</div>
<h1>Connected through joy.</h1>
<div class="cta-row">
<span class="btn-purple">Pre-register</span>
<span class="btn-ghost">Watch trailer</span>
</div>
</div>
</div>
<div class="body">
<div class="section-title">MMORPG</div>
<div class="section-sub">Titles grouped by genre — updated this week</div>
<div class="grid">
<div class="card"><div class="art"></div><div class="cinfo"><div class="ctitle">Throne Beyond</div><div class="cgenre">MMORPG · PC / Console</div><span class="badge">60% off</span></div></div>
<div class="card"><div class="art"></div><div class="cinfo"><div class="ctitle">Blade Requiem</div><div class="cgenre">Action RPG · PC</div></div></div>
<div class="card"><div class="art"></div><div class="cinfo"><div class="ctitle">Sky Legion</div><div class="cgenre">MMORPG · Mobile</div></div></div>
<div class="card"><div class="art"></div><div class="cinfo"><div class="ctitle">Aion Origins</div><div class="cgenre">MMORPG · PC</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffefb; color: #201515;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffefb; color: #201515;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.6px; margin: 0; color: #201515; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: 1px; margin: 0; color: #c5c0b1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 27px; background: #ff4f00; color: #fffefb;
border: none; border-radius: 12px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 27px; background: #201515; color: #fffefb;
border: 1px solid #ff4f00; border-radius: 12px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 27px; background: #fffefb; color: #201515;
border: 1px solid #201515; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c5c0b1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 24px; background: #f8f4f0; color: #201515;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffefb; color:#201515; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:800; letter-spacing:-.3px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#605d52; font-weight:600; }
.pill { border-radius:999px; padding:9px 20px; font-size:13px; font-weight:700; }
.pill-o { background:#ff4f00; color:#fffefb; }
.hero { text-align:center; padding:22px 32px 8px; }
.hero h1 { font-size:46px; font-weight:800; letter-spacing:-1px; line-height:1.06; margin:0 auto 14px; max-width:600px; }
.hero p { font-size:14px; color:#605d52; margin:0 auto 24px; max-width:420px; }
.zap { display:flex; align-items:center; justify-content:center; gap:0; padding:8px 32px 24px; position:relative; }
.node { display:flex; flex-direction:column; align-items:center; gap:8px; width:150px; }
.nodecircle { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:20px; font-weight:800; color:#fffefb; }
.n1 { background:#ff4f00; } .n2 { background:#201515; } .n3 { background:#939084; }
.node .lbl { font-size:11px; font-weight:700; color:#201515; }
.node .sub { font-size:10px; color:#939084; }
.connector { flex:1; height:0; border-top:2px dashed #c5c0b1; margin-top:-24px; min-width:40px; }
.cards { display:flex; gap:16px; padding:6px 32px 30px; }
.card { flex:1; background:#f8f4f0; border-radius:14px; padding:18px; }
.card .tag { font-size:11px; font-weight:800; text-transform:uppercase; color:#ff4f00; }
.card h3 { font-size:16px; font-weight:800; margin:8px 0 6px; }
.card p { font-size:12px; color:#605d52; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<div class="brand">Zapier</div>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Resources</span><span>Pricing</span></div>
<div class="pill pill-o">Sign up</div>
</nav>
<div class="hero">
<h1>Automation for everyone, everywhere</h1>
<p>Connect your apps and automate workflows — no code required.</p>
</div>
<div class="zap">
<div class="node"><div class="nodecircle n1">⚡</div><div class="lbl">New Form Submitted</div><div class="sub">Trigger</div></div>
<div class="connector"></div>
<div class="node"><div class="nodecircle n2">✓</div><div class="lbl">Add Row to Sheet</div><div class="sub">Action</div></div>
<div class="connector"></div>
<div class="node"><div class="nodecircle n3">✉</div><div class="lbl">Send Slack Message</div><div class="sub">Action</div></div>
</div>
<div class="cards">
<div class="card"><div class="tag">Zaps</div><h3>7,000+ app integrations</h3><p>Connect the tools your team already uses in minutes.</p></div>
<div class="card"><div class="tag">Agents</div><h3>AI-powered automation</h3><p>Let AI agents handle repetitive work across your stack.</p></div>
<div class="card"><div class="tag">Tables</div><h3>Data that moves with you</h3><p>Store and sync data directly inside your workflows.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #000000; }
.brand { font-size:18px; font-weight:700; letter-spacing:0.08em; margin:0; text-transform:uppercase; }
.navlinks { display:flex; gap:0; height:64px; }
.navlinks span { display:flex; align-items:center; padding:0 16px; font-size:13px; font-weight:600; }
.hero { padding:44px 32px 30px; border-bottom:1px solid #000000; position:relative; overflow:hidden; }
.hero .mark1 { position:absolute; right:60px; top:20px; width:120px; height:14px; border-radius:7px;
background:#e5004d; transform:rotate(-3deg); opacity:0.9; }
.hero .mark2 { position:absolute; right:20px; top:44px; width:90px; height:14px; border-radius:7px;
background:#ff8a3d; transform:rotate(-3deg); opacity:0.9; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.3; margin:0 0 14px; max-width:640px; letter-spacing:0.01em; }
.hero p { font-size:15px; line-height:1.8; margin:0; max-width:560px; color:#000000; }
.news { padding:24px 32px 0; }
.news .head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.news .head h2 { font-size:16px; font-weight:700; letter-spacing:0.05em; margin:0; }
.news .head span { font-size:12px; color:#5c5c5c; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { border:1px solid #000000; }
.card .img { height:96px; background:#f2f2f2; position:relative; border-radius:5px 5px 0 0; overflow:hidden; }
.card .img::after { content:''; position:absolute; inset:0; background:linear-gradient(160deg,#e9e9e9,#f8f8f8); }
.card .body { padding:12px 14px; }
.cat { display:inline-block; border:1px solid #000000; border-radius:3px; padding:4px 9px 5px; font-size:11px;
font-weight:600; margin-bottom:8px; }
.cat.red { border-color:#e5004d; color:#e5004d; background:transparent; }
.card .title { font-size:13px; font-weight:600; line-height:1.5; margin:0; }
.card .date { font-size:11px; color:#5c5c5c; margin-top:6px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #000000; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#5c5c5c; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">MIXI</p>
<div class="navlinks"><span>About</span><span>Services</span><span>Sustainability</span><span>News</span><span>Recruit</span></div>
</nav>
<section class="hero">
<div class="mark1"></div>
<div class="mark2"></div>
<h1>Make a moment worth sharing.</h1>
<p>MIXI builds communication and entertainment services that turn everyday connection into something people genuinely enjoy — together.</p>
</section>
<section class="news">
<div class="head"><h2>NEWS</h2><span>View all</span></div>
<div class="grid">
<div class="card">
<div class="img"></div>
<div class="body">
<span class="cat red">Notice</span>
<p class="title">Full-year results briefing materials now available</p>
<div class="date">2026.09.01</div>
</div>
</div>
<div class="card">
<div class="img"></div>
<div class="body">
<span class="cat">IR</span>
<p class="title">New sports and live-entertainment partnership announced</p>
<div class="date">2026.08.24</div>
</div>
</div>
<div class="card">
<div class="img"></div>
<div class="body">
<span class="cat">Recruit</span>
<p class="title">New graduate recruiting applications now open</p>
<div class="date">2026.08.12</div>
</div>
</div>
</div>
</section>
<footer>
<span>© MIXI</span>
<span>MIXI · About · Sustainability · Recruit</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6d76; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #557b97; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #f6f6f6; color: #222222;
border: 1px solid #557b97; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fffefb; color: #414041;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6d76; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #aadddd; color: #222222;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#222222; box-sizing:border-box;
font-family:'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#fffefb; border-bottom:1px solid #cccccc; }
.brand { font-size:17px; font-weight:600; letter-spacing:0.02em; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#414041; }
.navlinks span.on { color:#557b97; font-weight:600; }
.cart { width:32px; height:32px; border-radius:9999px; background:#557b97; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:12px; font-weight:700; }
main { display:flex; height:576px; }
.gallery { width:420px; position:relative; background:
radial-gradient(circle at 30% 20%, #aadddd 0%, transparent 45%),
radial-gradient(circle at 75% 75%, #7a9e55 0%, transparent 40%),
linear-gradient(180deg, #ebe0d5 0%, #ccc3ba 100%);
display:flex; align-items:center; justify-content:center; }
.bottle { width:130px; height:280px; background:linear-gradient(180deg,#ffffff 0%,#f5f5f5 70%);
border-radius:20px; position:relative; box-shadow:0 24px 40px rgba(9,74,110,0.18); }
.bottle::before { content:''; position:absolute; top:-22px; left:50%; transform:translateX(-50%);
width:52px; height:34px; background:#094a6e; border-radius:10px 10px 4px 4px; }
.bottle::after { content:'ACT+ACRE'; position:absolute; top:130px; left:0; right:0; text-align:center;
font-size:9px; font-weight:700; letter-spacing:0.14em; color:#557b97; }
.badge-clean { position:absolute; top:24px; left:24px; background:#7a9e55; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:34px 40px; display:flex; flex-direction:column; gap:14px; background:#fffefb; }
.cat { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#3a79a9; }
h1 { font-size:25px; font-weight:600; margin:0; letter-spacing:-0.2px; line-height:1.28; }
.stars { font-size:12px; color:#094a6e; display:flex; align-items:center; gap:6px; }
.stars .n { color:#414041; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:600; }
.desc { font-size:13.5px; color:#414041; line-height:1.55; max-width:360px; }
.ing-row { display:flex; gap:8px; flex-wrap:wrap; }
.ing { border:1px solid #cccccc; border-radius:9999px; padding:5px 12px; font-size:11px; color:#414041;
background:#f5f5f5; }
.size-row { display:flex; gap:8px; }
.size { border:1px solid #cccccc; border-radius:8px; padding:8px 16px; font-size:12.5px; font-weight:600; }
.size.on { border-color:#557b97; color:#557b97; background:#eef4f7; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#557b97; color:#fff; border:none; border-radius:8px; padding:13px 18px;
font-size:14px; font-weight:600; }
.btn-sub { border:1.5px solid #557b97; color:#557b97; background:#fff; border-radius:8px; padding:13px 16px;
font-size:12.5px; font-weight:600; white-space:nowrap; }
.trust { font-size:11px; color:#7a9e55; font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">Act Acre</div>
<div class="navlinks"><span class="on">Scalp Care</span><span>Hair Care</span><span>Scalp Quiz</span><span>About</span></div>
<div class="cart">1</div>
</nav>
<main>
<div class="gallery">
<span class="badge-clean">Clean · Vegan</span>
<div class="bottle"></div>
</div>
<div class="info">
<span class="cat">Scalp Serum</span>
<h1>Stimulating Scalp Serum</h1>
<div class="stars">★★★★★ <span class="n">4.8 (3,214 reviews)</span></div>
<div class="price-row"><span class="price">$52.00</span></div>
<p class="desc">A lightweight, nature-rooted serum that supports a balanced, healthy scalp — the foundation for stronger, fuller-looking hair over time.</p>
<div class="ing-row"><span class="ing">Biotinoyl Tripeptide</span><span class="ing">Piroctone Olamine</span><span class="ing">Squalane</span></div>
<div class="size-row"><span class="size on">1.7 oz</span><span class="size">3.4 oz</span></div>
<div class="btn-row">
<button class="btn-primary">Add to Bag — $52</button>
<button class="btn-sub">Subscribe, Save 15%</button>
</div>
<span class="trust">Cruelty-free · Vegan · Silicone-free</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #368fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #368fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9fc7fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a85e8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #368fff; color: #000000;
border: 1px solid #1a85e8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #368fff; color: #f5f5f5;
border: 1px solid #559ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9fc7fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #328dfb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1b1d1f; box-sizing:border-box;
font-family:-apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:700; }
.tabs { display:flex; gap:22px; font-size:13px; color:#7e848a; }
.tabs span.on { color:#368fff; font-weight:600; }
.hero { text-align:center; padding:8px 32px 20px; }
h1 { font-size:26px; font-weight:700; margin:0 0 16px; line-height:1.3; }
.cta { display:inline-block; background:#368fff; color:#ffffff; border-radius:36px; padding:0 26px;
height:52px; line-height:52px; font-size:16px; font-weight:700; }
.body { display:flex; gap:20px; padding:6px 32px 24px; }
.col { flex:1; display:flex; flex-direction:column; gap:12px; }
.daycard { background:#ffffff; border:1px solid #e8eaec; border-radius:20px; padding:14px; display:flex; gap:12px; }
.daycard .thumb { width:64px; height:64px; border-radius:14px; background:linear-gradient(135deg,#dfeaff,#368fff); flex-shrink:0; }
.daycard .t { font-size:15px; font-weight:600; margin-bottom:2px; }
.daycard .m { font-size:12px; color:#7e848a; }
.chip { display:inline-block; background:#f5f6f7; color:#3a3e41; border-radius:999px; padding:5px 12px; font-size:11px; margin-top:6px; }
.tip { background:#f1f7ff; border-radius:20px; padding:18px; font-size:14px; color:#3a3e41; line-height:1.5; }
.tip .h { font-size:15px; font-weight:700; margin-bottom:6px; color:#1b1d1f; }
.map { flex:1; border-radius:20px; background:linear-gradient(160deg,#eef4ff,#dce9ff); position:relative; overflow:hidden; min-height:170px; }
.pin { position:absolute; width:14px; height:14px; border-radius:50%; background:#368fff; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
</style></head>
<body>
<nav>
<span class="brand">Triple</span>
<div class="tabs"><span class="on">Itinerary</span><span>Guide</span><span>Bookings</span><span>My Trips</span></div>
</nav>
<section class="hero">
<h1>The travel app that knows you — plan a trip that feels like you</h1>
<span class="cta">View itinerary</span>
</section>
<div class="body">
<div class="col">
<div class="daycard"><div class="thumb"></div><div><div class="t">Coastal viewpoint</div><div class="m">9:00 · 15 min walk from hotel</div><span class="chip">Sightseeing</span></div></div>
<div class="daycard"><div class="thumb"></div><div><div class="t">Local noodle house</div><div class="m">12:30 · Recommended by locals</div><span class="chip">Food</span></div></div>
<div class="daycard"><div class="thumb"></div><div><div class="t">Rooftop cafe</div><div class="m">15:00 · Great sunset spot</div><span class="chip">Cafe</span></div></div>
</div>
<div class="col">
<div class="map">
<div class="pin" style="left:40px;top:30px"></div>
<div class="pin" style="left:110px;top:80px"></div>
<div class="pin" style="left:70px;top:130px"></div>
</div>
<div class="tip">
<div class="h">The more friends join, the richer the trip</div>
Invite friends to co-edit this itinerary — everyone can add a place they want to visit.
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b5cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b5cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb0fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00053d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b5cff; color: #00053d;
border: 1px solid #00053d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b5cff; color: #f5f5f5;
border: 1px solid #3074fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb0fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #094ee0; color: #00053d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00053d; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:700; color:#0b5cff; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; color:#ffffff; opacity:0.9; }
.navr { display:flex; gap:10px; align-items:center; }
.btn-nav-ghost { background:#e6f0ff; color:#00053d; border-radius:12px; padding:0 20px; height:36px;
font-size:13px; font-weight:600; display:flex; align-items:center; }
.btn-nav-primary { background:#0b5cff; color:#ffffff; border-radius:12px; padding:0 20px; height:36px;
font-size:13px; font-weight:600; display:flex; align-items:center; }
.hero { padding:26px 32px 30px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.badge { background:#e6f0ff; color:#0b5cff; border-radius:9999px; padding:4px 14px; font-size:12px; font-weight:500; }
.hero h1 { font-size:38px; font-weight:500; line-height:1.12; margin:0; max-width:660px; letter-spacing:-0.5px; }
.hero p { font-size:15px; color:rgba(255,255,255,0.8); margin:0; max-width:480px; line-height:1.5; }
.hero-actions { display:flex; gap:10px; }
.btn-primary { background:#0b5cff; color:#fff; border:1px solid #0b5cff; border-radius:12px; padding:0 22px;
height:42px; font-size:14px; font-weight:500; display:flex; align-items:center; }
.btn-secondary { background:#e6f0ff; color:#00053d; border:1px solid #e6f0ff; border-radius:12px; padding:0 22px;
height:42px; font-size:14px; font-weight:500; display:flex; align-items:center; }
/* meeting grid panel — the product itself, floating below the hero on the navy canvas */
.panel { margin:0 32px; background:#ffffff; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,0.12);
overflow:hidden; color:#222325; }
.panel-bar { height:38px; background:#f3f8ff; border-bottom:1px solid #dfe3e8; display:flex; align-items:center;
justify-content:space-between; padding:0 16px; }
.dot-row { display:flex; gap:6px; }
.dot-row span { width:8px; height:8px; border-radius:50%; background:#d1dee2; }
.panel-bar .badgepill { background:#e6f0ff; color:#0b5cff; border-radius:9999px; padding:3px 10px; font-size:11px; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:16px; }
.tile { aspect-ratio:4/3; border-radius:8px; border:1px solid #dfe3e8; position:relative; display:flex;
align-items:flex-end; overflow:hidden; }
.tile .name { position:relative; font-size:11px; font-weight:500; color:#fff; background:rgba(0,5,61,0.55);
padding:3px 8px; border-radius:6px; margin:8px; }
.tile.a { background:linear-gradient(150deg,#0b5cff,#00053d); }
.tile.b { background:linear-gradient(150deg,#e6f0ff,#f3f8ff); }
.tile.b .name { color:#00053d; background:rgba(255,255,255,0.7); }
.tile.c { background:linear-gradient(150deg,#00053d,#0d6bde); }
.tile.d { background:linear-gradient(150deg,#f3f8ff,#d1dee2); }
.tile.d .name { color:#00053d; background:rgba(255,255,255,0.7); }
.toolbar { height:56px; background:#ffffff; border-top:1px solid #dfe3e8; display:flex; align-items:center;
justify-content:center; gap:14px; }
.tool { width:38px; height:38px; border-radius:8px; background:#f3f8ff; border:1px solid #dfe3e8;
display:flex; align-items:center; justify-content:center; font-size:14px; color:#00053d; }
.tool.end { background:#e6f0ff; color:#0b5cff; width:auto; padding:0 18px; font-size:12px; font-weight:600; border-radius:9999px; }
footer { position:absolute; bottom:0; left:0; right:0; height:26px; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:11px; color:rgba(255,255,255,0.55); }
</style></head>
<body>
<nav>
<p class="brand">Zoom</p>
<div class="navlinks"><span>Products</span><span>AI Companion</span><span>Solutions</span><span>Pricing</span></div>
<div class="navr">
<div class="btn-nav-ghost">Contact Sales</div>
<div class="btn-nav-primary">Sign Up Free</div>
</div>
</nav>
<section class="hero">
<span class="badge">AI Companion included</span>
<h1>Find out what's possible when work connects</h1>
<p>One platform for meetings, phone, chat, and AI — built to feel reliable, not complicated.</p>
<div class="hero-actions">
<div class="btn-primary">Sign Up Free</div>
<div class="btn-secondary">Watch a demo</div>
</div>
</section>
<section class="panel">
<div class="panel-bar">
<div class="dot-row"><span></span><span></span><span></span></div>
<span class="badgepill">Recording</span>
</div>
<div class="grid">
<div class="tile a"><span class="name">Jordan Lee</span></div>
<div class="tile b"><span class="name">Priya Patel</span></div>
<div class="tile c"><span class="name">Marcus Ito</span></div>
<div class="tile d"><span class="name">Alex Rivera</span></div>
</div>
<div class="toolbar">
<div class="tool">🎤</div>
<div class="tool">📷</div>
<div class="tool">💬</div>
<div class="tool">✨</div>
<div class="tool end">Leave</div>
</div>
</section>
<footer>
<span>Zoom Workplace</span>
<span>Trusted by millions. Built for you.</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #084fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #084fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8aaafa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3971ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #084fff; color: #ffffff;
border: 1px solid #3971ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #084fff; color: #f5f5f5;
border: 1px solid #2e6afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8aaafa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1054ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1d22; color:#ffffff; box-sizing:border-box;
font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:500; color:#c9ccd1; }
.cta { background:#084fff; color:#fff; border:none; border-radius:9999px; height:44px; padding:0 22px;
font-size:15px; font-weight:700; }
.hero { padding:36px 40px 30px; text-align:center; }
.hero h1 { font-size:42px; font-weight:700; line-height:1.25; margin:0 0 10px; letter-spacing:-.4px; }
.hero .accent { color:#bbf94f; }
.hero p { color:#c9ccd1; font-size:16px; margin:0 0 20px; }
.bigcta { background:#084fff; color:#fff; border:none; border-radius:9999px; height:52px; padding:0 32px;
font-size:17px; font-weight:700; }
.stores { background:#fff; padding:24px 40px 30px; }
.storetitle { color:#1c1c1c; font-size:22px; font-weight:700; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.store { background:#f9fafb; border-radius:20px; padding:16px; }
.swatch { width:100%; height:64px; border-radius:12px; margin-bottom:10px; }
.s1 { background:linear-gradient(135deg,#e6edff,#084fff33); }
.s2 { background:linear-gradient(135deg,#fff2e6,#f26d0033); }
.s3 { background:linear-gradient(135deg,#e9ffe6,#bbf94f55); }
.s4 { background:linear-gradient(135deg,#ffe6f2,#ff5c8a33); }
.store .t { font-size:13px; font-weight:700; color:#1c1c1c; }
.store .m { font-size:12px; color:#757575; margin-top:2px; }
.steps { display:flex; gap:20px; padding:0 40px 24px; justify-content:space-between; }
.step { display:flex; align-items:center; gap:10px; }
.num { background:#e6edff; color:#084fff; border-radius:8px; width:26px; height:26px; display:flex;
align-items:center; justify-content:center; font-weight:800; font-size:13px; }
.step span.t { color:#1c1c1c; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Cafe24</p>
<div class="navlinks"><span>Store</span><span>Marketing</span><span>Design</span><span>Partners</span></div>
<button class="cta">Start for Free</button>
</nav>
<section class="hero">
<h1>New here? No problem!<br><span class="accent">You can do it your first time.</span></h1>
<p>Anyone can build their own online store in just a few minutes.</p>
<button class="bigcta">Start for Free Now</button>
</section>
<section class="stores">
<p class="storetitle">Trending Stores</p>
<div class="grid">
<div class="store"><div class="swatch s1"></div><div class="t">Life Select Shop</div><div class="m">Fashion · Accessories</div></div>
<div class="store"><div class="swatch s2"></div><div class="t">Home Café Store</div><div class="m">Food · Coffee Beans</div></div>
<div class="store"><div class="swatch s3"></div><div class="t">Green Room Garden</div><div class="m">Living · Plants</div></div>
<div class="store"><div class="swatch s4"></div><div class="t">Beauty Lab</div><div class="m">Cosmetics</div></div>
</div>
<div class="steps" style="margin-top:20px;">
<div class="step"><span class="num">1</span><span class="t">Sign Up</span></div>
<div class="step"><span class="num">2</span><span class="t">Store Design</span></div>
<div class="step"><span class="num">3</span><span class="t">Add Products</span></div>
<div class="step"><span class="num">4</span><span class="t">Start Selling</span></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #181818; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #181818; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 500; line-height: 1.5; letter-spacing: 0.195px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.4px; background: #da291c; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.4px; background: transparent; color: #ffffff;
border: 1px solid #da291c; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #181818; color: #ffffff;
border: 1px solid #525252; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1.1px; background: #303030; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#181818; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.cinema { position:relative; height:420px; background:
linear-gradient(180deg, rgba(24,24,24,0) 0%, rgba(24,24,24,0.2) 55%, #181818 100%),
radial-gradient(ellipse 90% 70% at 30% 20%, #4a0000 0%, #181818 60%),
linear-gradient(120deg, #2a2a2a, #0d0d0d 60%, #1a0000);
display:flex; flex-direction:column; }
nav { display:flex; align-items:center; justify-content:space-between; padding:20px 40px; }
.brand { font-size:13px; font-weight:600; letter-spacing:0.65px; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; font-size:12px; font-weight:600; letter-spacing:0.65px; text-transform:uppercase; color:#fff; opacity:0.85; }
.heroin { flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:0 40px 26px; }
.heroin h1 { font-size:56px; font-weight:500; letter-spacing:-1.1px; line-height:1.02; margin:0 0 6px;
text-transform:uppercase; max-width:640px; }
.heroin p { font-size:13px; color:#969696; margin:0 0 16px; max-width:420px; }
.row { display:flex; gap:10px; }
.btn-red { background:#da291c; color:#fff; border:none; border-radius:0; padding:13px 26px; font-size:12px;
font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.btn-ghost { background:transparent; color:#fff; border:1px solid #fff; border-radius:0; padding:12px 26px;
font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.specrow { display:flex; justify-content:center; gap:56px; padding:22px 40px; border-bottom:1px solid #303030; }
.spec { text-align:center; }
.spec .num { font-size:40px; font-weight:700; letter-spacing:-0.8px; line-height:1; }
.spec .lbl { font-size:10px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:#969696; margin-top:6px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); flex:1; }
.tile { position:relative; border-right:1px solid #303030; padding:18px 20px; display:flex; flex-direction:column; justify-content:flex-end; }
.tile:last-child { border-right:none; }
.tile .ph { position:absolute; inset:0; opacity:0.9; }
.t1 .ph { background:linear-gradient(160deg,#3c0a0a,#181818 70%); }
.t2 .ph { background:linear-gradient(160deg,#2a2a2a,#181818 70%); }
.t3 .ph { background:linear-gradient(160deg,#4a1a00,#181818 70%); }
.tile .tag { position:relative; font-size:11px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:#da291c; }
.tile h3 { position:relative; font-size:16px; font-weight:700; margin:6px 0 0; text-transform:uppercase; letter-spacing:0.2px; }
footer { border-top:1px solid #303030; padding:12px 40px; display:flex; justify-content:space-between;
font-size:11px; color:#969696; }
</style></head>
<body>
<div class="cinema">
<nav>
<span class="brand">Ferrari</span>
<div class="navlinks"><span>Models</span><span>F1</span><span>Lifestyle</span><span>Owners</span></div>
<div class="navlinks"><span>Preowned</span></div>
</nav>
<div class="heroin">
<h1>Purosangue</h1>
<p>The Ferrari of a new kind. Four seats, four doors, no compromise.</p>
<div class="row"><button class="btn-red">Discover more</button><button class="btn-ghost">Configure</button></div>
</div>
</div>
<div class="specrow">
<div class="spec"><div class="num">725</div><div class="lbl">CV Max Power</div></div>
<div class="spec"><div class="num">3.3</div><div class="lbl">0–100 km/h (s)</div></div>
<div class="spec"><div class="num" style="color:#da291c">310</div><div class="lbl">Km/h Top Speed</div></div>
</div>
<div class="grid3">
<div class="tile t1"><div class="ph"></div><span class="tag">Racing</span><h3>Scuderia Ferrari</h3></div>
<div class="tile t2"><div class="ph"></div><span class="tag">Heritage</span><h3>Preowned Ferrari</h3></div>
<div class="tile t3"><div class="ph"></div><span class="tag">Lifestyle</span><h3>Hypersail</h3></div>
</div>
<footer>
<span>© Ferrari</span>
<span>Ferrari · Models · F1 · Owners · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #374151;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #374151;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #374151; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.25px; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #555555;
border: 1px solid #c8ccd0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #fbcd0a; color: #374151;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9fafb; color:#374151; box-sizing:border-box;
font-family:'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fff; border-bottom:1px solid #dedede; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:22px; font-weight:800; margin:0; color:#108474; }
.navlinks { display:flex; align-items:center; gap:20px; font-size:15px; font-weight:600; }
.navicons { display:flex; gap:14px; align-items:center; }
.icon { width:40px; height:40px; border-radius:9999px; background:#f2f2f2; }
.cart { position:relative; }
.cart::after { content:'2'; position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:999px;
background:#fbcd0a; color:#374151; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.hero { background:#c1e6e6; padding:26px 40px; display:flex; align-items:center; gap:30px; border-radius:0 0 24px 24px; }
.hero-copy { flex:1.1; }
.hero h1 { font-size:30px; font-weight:800; line-height:1.2; letter-spacing:-0.3px; margin:0 0 10px; color:#0d6b5d; }
.hero p { font-size:14px; color:#374151; margin:0 0 16px; max-width:380px; line-height:1.4; }
.btn-primary { background:#108474; color:#fff; border:none; border-radius:9999px; padding:14px 30px;
font-size:15px; font-weight:700; height:48px; }
.hero-visual { flex:1; height:160px; border-radius:16px; background:#fff; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:100px; height:100px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, #fff, #a89cc8); left:50px; top:22px; }
.hero-visual::after { content:''; position:absolute; width:60px; height:60px; border-radius:50%;
background:#fbcd0a; right:50px; bottom:16px; }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:20px; font-weight:800; margin:0; }
.sec-head span { font-size:13px; font-weight:700; color:#108474; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.thumb { aspect-ratio:1/1; position:relative; }
.t1 { background:linear-gradient(150deg,#fdf0c2,#fbcd0a44); background:linear-gradient(150deg,#fef4d0,#f7dd7e); }
.t2 { background:linear-gradient(150deg,#e3f5f2,#a3d5c9); }
.t3 { background:linear-gradient(150deg,#ece8f5,#c8bee0); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.badge.yellow { background:#fbcd0a; color:#374151; }
.badge.lav { background:#a89cc8; color:#fff; }
.cbody { padding:8px 14px 14px; }
.stars { color:#fbcd0a; font-size:12px; margin-bottom:2px; }
.card h3 { font-size:16px; font-weight:600; margin:2px 0 4px; }
.card .price { font-size:17px; font-weight:700; margin:0; }
footer { background:#374151; color:#e5e7eb; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#e5e7eb; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Bellzi</p>
<div class="navlinks"><span>Shop All</span></div>
<div class="navicons"><div class="icon"></div><div class="icon cart"></div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Meet your new best friend</h1>
<p>Squeezably soft, wonderfully weird plushies made for hugging, hoarding, and never growing up.</p>
<button class="btn-primary">Shop Now</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Fan Favorites</h2><span>Shop All →</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge yellow">Sale</span></div>
<div class="cbody"><div class="stars">★★★★★</div><h3>Blobby the Axolotl</h3><p class="price">$24.99</p></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<div class="cbody"><div class="stars">★★★★★</div><h3>Chonk the Capybara</h3><p class="price">$29.99</p></div>
</div>
<div class="card">
<div class="thumb t3"><span class="badge lav">Limited</span></div>
<div class="cbody"><div class="stars">★★★★☆</div><h3>Nimbus the Cloud Cat</h3><p class="price">$34.99</p></div>
</div>
</div>
</section>
<footer>
<span>© Bellzi</span>
<div><a href="#">Shop</a><a href="#">Help</a><a href="#">Connect</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #707072; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; background: #111111; color: #ffffff;
border: none; border-radius: 9999px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; background: #f5f5f5; color: #111111;
border: 1px solid #111111; border-radius: 9999px;
padding: 16px 32px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 24px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707072; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; background: #ffffff; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 사진 중심 캠페인: 어두운 그라디언트(사진 대역) 위에 타워링 업퍼케이스 디스플레이
타이포를 태워 넣는다 — Nike 의 유일한 채도는 sale-red 하나뿐. */
.campaign { position:relative; height:400px; overflow:hidden;
background:radial-gradient(ellipse at 30% 20%,#3a3a3c 0%,#111111 55%),
linear-gradient(160deg,#1a1a1a,#000000); }
.beam { position:absolute; width:520px; height:520px; border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,0.10),transparent 60%); top:-160px; right:-140px; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:15px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:12px; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:0.04em; }
.searchpill { background:rgba(255,255,255,0.12); color:#fff; border:none; border-radius:999px; padding:8px 16px; font-size:12px; }
.campcopy { position:relative; z-index:2; padding:40px 40px 0; }
.campcopy .eyebrow { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#d30005; }
.campcopy h1 { font-size:88px; font-weight:500; letter-spacing:0; text-transform:uppercase; line-height:0.88; margin:8px 0 0; color:#fff; }
.campcopy .sub { font-size:13px; color:rgba(255,255,255,0.7); margin-top:14px; max-width:360px; }
.shopnow { position:absolute; bottom:26px; left:40px; background:#fff; color:#111; border:none; border-radius:999px;
padding:10px 24px; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; z-index:2; }
/* 8px 그리드 제품 카드 — 채도는 세일 배지 하나뿐 */
.products { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:20px 40px 30px; }
.pcard { background:#f5f5f5; border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:6px; }
.pcard .swatch { height:70px; border-radius:6px; background:linear-gradient(160deg,#e5e5e5,#cacacb); position:relative; }
.pcard .tag { position:absolute; top:6px; left:6px; background:#d30005; color:#fff; font-size:9px; font-weight:700;
padding:2px 6px; border-radius:3px; text-transform:uppercase; }
.pcard h5 { font-size:12px; font-weight:500; margin:0; }
.pcard .price { font-size:12px; font-weight:700; color:#d30005; }
.pcard .price.n { color:#111; }
</style></head>
<body>
<div class="campaign">
<div class="beam"></div>
<nav>
<p class="brand">Nike</p>
<div class="navlinks"><span>New</span><span>Men</span><span>Women</span><span>Kids</span></div>
<button class="searchpill">Search</button>
</nav>
<div class="campcopy">
<span class="eyebrow">Just In</span>
<h1>Move<br>Faster</h1>
<p class="sub">Engineered for the runner who never stops chasing the split.</p>
</div>
<button class="shopnow">Shop the drop</button>
</div>
<div class="products">
<div class="pcard"><div class="swatch"><span class="tag">Sale</span></div><h5>Pegasus 41</h5><span class="price">$104.97</span></div>
<div class="pcard"><div class="swatch"></div><h5>Air Max 90</h5><span class="price n">$130</span></div>
<div class="pcard"><div class="swatch"><span class="tag">Sale</span></div><h5>Dri-FIT Tee</h5><span class="price">$28.97</span></div>
<div class="pcard"><div class="swatch"></div><h5>Metcon 9</h5><span class="price n">$140</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F2F2F2; color:#14171A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:rgba(255,255,255,0.96); border-bottom:0.5px solid #E5E5E5; }
.top h1 { font-size:24px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.top .icons { color:#14171A; font-size:17px; display:flex; gap:16px; }
.stage { display:flex; gap:24px; padding:22px 28px; }
/* DoubleTake 프로필 카드 */
.card { width:300px; background:#FFFFFF; border-radius:24px; box-shadow:0 8px 24px rgba(20,23,26,0.12); overflow:hidden; flex-shrink:0; }
.hero { height:270px; background:linear-gradient(150deg,#f6c6d6,#f0578a 60%,#c00244); position:relative; }
.hero .scrim { position:absolute; left:0; right:0; bottom:0; height:70px;
background:linear-gradient(to top, rgba(20,23,26,0.55), transparent); }
.hero .nm { position:absolute; left:16px; bottom:36px; color:#fff; font-size:24px; font-weight:700; letter-spacing:-0.3px; }
.badge { position:absolute; left:16px; bottom:8px; width:42px; height:42px; border-radius:50%; background:#FFFFFF;
border:3px solid #E2024F; display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:700; color:#E2024F; }
.card-body { padding:14px 16px; }
.card-body .bio { font-size:13px; line-height:1.5; color:#14171A; margin:0 0 10px; }
.prompt-mini { background:#F2F2F2; border-radius:12px; padding:8px 10px; font-size:12px; margin-bottom:6px; }
.prompt-mini b { font-weight:700; }
.actionbar { display:flex; align-items:center; justify-content:center; gap:22px; padding:0 0 16px; }
.circbtn { border-radius:50%; background:#FFFFFF; border:1px solid #E5E5E5; box-shadow:0 4px 14px rgba(20,23,26,0.16);
display:flex; align-items:center; justify-content:center; }
.circbtn.pass { width:48px; height:48px; color:#0500FF; font-size:20px; font-weight:700; }
.circbtn.like { width:58px; height:58px; color:#E2024F; font-size:24px; }
.circbtn.star { width:40px; height:40px; color:#9B9B9B; font-size:16px; }
/* 매치 질문 카드 */
.qwrap { flex:1; display:flex; flex-direction:column; gap:14px; }
.qcard { background:#FFFFFF; border-radius:20px; padding:20px; box-shadow:0 2px 8px rgba(20,23,26,0.06); }
.qcard .label { font-size:11px; font-weight:700; letter-spacing:0.06em; color:#9B9B9B; text-transform:uppercase; margin-bottom:8px; }
.qcard .prompt { font-size:19px; font-weight:600; margin:0 0 14px; }
.opt { display:block; width:100%; text-align:left; padding:12px 16px; border-radius:999px; border:1.5px solid #E5E5E5;
font-size:15px; font-weight:600; margin-bottom:10px; color:#14171A; }
.opt.sel { background:#E2024F; border-color:#E2024F; color:#fff; }
.imp { display:flex; gap:8px; margin-top:6px; }
.imp span { flex:1; text-align:center; padding:7px 0; border-radius:999px; background:#F2F2F2; color:#6B6B6B; font-size:12px; font-weight:600; }
.imp span.sel { background:#E2024F; color:#fff; }
.matchrow { display:flex; align-items:center; gap:12px; background:#FFFFFF; border-radius:16px; padding:12px 14px;
box-shadow:0 2px 8px rgba(20,23,26,0.06); }
.matchrow .av { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#f0578a,#0500FF); position:relative; flex-shrink:0; }
.matchrow .mini-badge { position:absolute; right:-4px; bottom:-4px; width:22px; height:22px; border-radius:50%;
background:#fff; border:2px solid #F0578A; font-size:9px; font-weight:700; color:#F0578A;
display:flex; align-items:center; justify-content:center; }
.matchrow .nm { font-size:16px; font-weight:600; }
.matchrow .meta { font-size:12.5px; color:#6B6B6B; }
</style></head>
<body>
<div class="top">
<h1>OkCupid (iOS)</h1>
<div class="icons">⚲ ⚙</div>
</div>
<div class="stage">
<div class="card">
<div class="hero">
<div class="badge">94%</div>
<div class="scrim"></div>
<div class="nm">Maya, 27</div>
</div>
<div class="card-body">
<p class="bio">substance over swipe — ask me about my terrible taste in podcasts.</p>
<div class="prompt-mini"><b>Together we could:</b> argue about board games for hours</div>
</div>
<div class="actionbar">
<div class="circbtn pass">✕</div>
<div class="circbtn like">♥</div>
<div class="circbtn star">★</div>
</div>
</div>
<div class="qwrap">
<div class="qcard">
<div class="label">Match Question</div>
<p class="prompt">Would you rather stay in on a Friday night or go out?</p>
<span class="opt sel">Stay in with good food</span>
<span class="opt">Out — I need the energy</span>
<span class="opt">Depends entirely on the week</span>
<div class="imp"><span>A little</span><span class="sel">Somewhat</span><span>Very</span></div>
</div>
<div class="matchrow"><div class="av"><span class="mini-badge">87%</span></div>
<div><div class="nm">Jordan</div><div class="meta">Active today</div></div></div>
<div class="matchrow"><div class="av"><span class="mini-badge">73%</span></div>
<div><div class="nm">Taylor</div><div class="meta">Last online yesterday</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #25282b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #25282b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 24px; margin: 0; color: #25282b; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 24px; margin: 0; color: #bebebe; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 28px; background: #e60000; color: #ffffff;
border: none; border-radius: 60px; padding: {spacing.md} {spacing.2xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 28px; background: #ffffff; color: #e60000;
border: 1px solid #e60000; border-radius: 60px;
padding: {spacing.md} {spacing.2xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #ffffff; color: #25282b;
border: 1px solid #25282b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bebebe; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 21px; background: #f2f2f2; color: #25282b;
border-radius: 32px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#25282b; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.heroband { background:#25282b; color:#ffffff; padding:0 32px; height:400px; position:relative; overflow:hidden; }
.heroband::before { content:''; position:absolute; inset:0;
background:radial-gradient(500px 300px at 85% 20%, rgba(230,0,0,.35), transparent 65%),
linear-gradient(200deg,#3a3f44,#25282b 60%); }
nav { position:relative; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between; }
.brandwrap { display:flex; align-items:center; gap:8px; }
.speech { width:26px; height:26px; border-radius:50%; background:#e60000; position:relative; }
.speech::after { content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:#ffffff; left:8.5px; top:8.5px; }
.brand { font-size:15px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:12px; font-weight:700; text-transform:uppercase; opacity:.85; }
.pillred { background:#e60000; color:#ffffff; border-radius:999px; padding:9px 20px; font-size:13px; font-weight:700; }
.heroband h1 { position:relative; z-index:2; font-size:64px; font-weight:800; text-transform:uppercase;
line-height:.98; letter-spacing:-.5px; margin:56px 0 14px; max-width:640px; }
.heroband p { position:relative; z-index:2; font-size:15px; opacity:.9; max-width:480px; margin:0 0 22px; }
.heroctas { position:relative; z-index:2; display:flex; gap:12px; }
.pillout { border:1.5px solid #ffffff; color:#ffffff; border-radius:999px; padding:9px 20px; font-size:13px; font-weight:700; }
.contentband { padding:26px 32px; }
.chips { display:flex; gap:16px; }
.chip { flex:1; background:#f2f2f2; border-radius:12px; padding:18px; }
.chip .tag { font-size:11px; font-weight:800; text-transform:uppercase; color:#e60000; }
.chip h3 { font-size:18px; font-weight:800; margin:8px 0 6px; }
.chip p { font-size:12px; color:#7e7e7e; margin:0; line-height:1.4; }
</style></head>
<body>
<div class="heroband">
<nav>
<div class="brandwrap"><div class="speech"></div><div class="brand">Vodafone</div></div>
<div class="navlinks"><span>Mobile</span><span>Broadband</span><span>Business</span><span>Discover</span></div>
<div class="pillred">Shop deals</div>
</nav>
<h1>Together We Can</h1>
<p>Unlimited data, calls and texts — plus the network built for what's next.</p>
<div class="heroctas"><button class="pillred">Shop now</button><button class="pillout">Explore plans</button></div>
</div>
<div class="contentband">
<div class="chips">
<div class="chip"><div class="tag">Mobile</div><h3>5G Ultra</h3><p>Our fastest network yet, in more places than ever.</p></div>
<div class="chip"><div class="tag">Broadband</div><h3>Full Fibre</h3><p>Reliable speed for every device in the house.</p></div>
<div class="chip"><div class="tag">Business</div><h3>V-Hub</h3><p>Free tools and advice to help your business grow.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Apple SD Gothic Neo", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.topbar { display:flex; justify-content:flex-end; gap:16px; padding:6px 32px; font-size:11px; color:#212b36;
border-bottom:1px solid #e5e7eb; }
nav { display:flex; align-items:center; gap:20px; padding:16px 32px; }
.brand { font-size:20px; font-weight:700; margin:0; }
.search { flex:1; max-width:520px; height:36px; border:2px solid #000; border-radius:2px; display:flex; align-items:center;
padding:0 12px; font-size:14px; color:#000; }
.search-btn { background:#000; color:#fff; font-size:13px; padding:8px 18px; }
.menu { display:flex; gap:2px; padding:0 32px; border-bottom:1px solid #e5e7eb; }
.menu li { list-style:none; padding:8px 5px; font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; padding:22px 32px; }
.item { display:flex; flex-direction:column; gap:6px; }
.item .photo { height:120px; background:#f5f5f5; border:1px solid #e5e7eb; }
.item .name { font-size:12px; color:#333333; line-height:1.4; }
.item .price { font-size:15px; font-weight:700; color:#000; }
.item .meta { font-size:11px; color:#555555; }
</style></head>
<body>
<div class="topbar"><span>Sign In</span><span>Order History</span><span>Help Center</span></div>
<nav>
<p class="brand">Coupang</p>
<div class="search">Search for laptops</div>
<button class="search-btn">Search</button>
</nav>
<ul class="menu">
<li>Home</li><li>Rocket Delivery</li><li>Fashion</li><li>Beauty</li><li>Electronics</li><li>Grocery</li><li>Household</li>
</ul>
<div class="grid">
<div class="item"><div class="photo"></div><div class="name">Cordless Stick Vacuum</div><div class="price">$142.00</div><div class="meta">Free Shipping</div></div>
<div class="item"><div class="photo"></div><div class="name">Insulated Tumbler 500ml</div><div class="price">$11.90</div><div class="meta">Rocket Delivery</div></div>
<div class="item"><div class="photo"></div><div class="name">Organic Coffee Beans 1kg</div><div class="price">$18.40</div><div class="meta">Free Shipping</div></div>
<div class="item"><div class="photo"></div><div class="name">Foldable Laundry Rack</div><div class="price">$24.00</div><div class="meta">Rocket Delivery</div></div>
<div class="item"><div class="photo"></div><div class="name">Bluetooth Earbuds</div><div class="price">$44.20</div><div class="meta">Free Shipping</div></div>
<div class="item"><div class="photo"></div><div class="name">Folding Camping Table</div><div class="price">$34.50</div><div class="meta">Rocket Delivery</div></div>
<div class="item"><div class="photo"></div><div class="name">Cotton Comforter Set, Queen</div><div class="price">$51.00</div><div class="meta">Free Shipping</div></div>
<div class="item"><div class="photo"></div><div class="name">Air Purifier with Filter</div><div class="price">$106.90</div><div class="meta">Rocket Delivery</div></div>
<div class="item"><div class="photo"></div><div class="name">Dog Food 3kg</div><div class="price">$21.70</div><div class="meta">Free Shipping</div></div>
<div class="item"><div class="photo"></div><div class="name">Electric Kettle 1.7L</div><div class="price">$15.80</div><div class="meta">Rocket Delivery</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcb400; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcb400; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b5a09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b61c9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcb400; color: #1b61c9;
border: 1px solid #1b61c9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fcb400; color: #111111;
border: 1px solid #d69a03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b5a09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8a720; color: #1b61c9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181d26; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
border-bottom:1px solid #e0e2e6; background:#ffffff; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; letter-spacing:-0.2px; }
.brand .sq { width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,#fcb400,#ffce33); }
.navcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:#5b6270; }
.navcrumb b { color:#181d26; }
.navcrumb .chev { opacity:0.5; }
.navactions { display:flex; align-items:center; gap:10px; }
.btn-primary { background:#1b61c9; color:#fff; border:none; border-radius:12px; padding:8px 16px;
font-size:13px; font-weight:500; box-shadow: rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px; }
.avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#254fad,#1b61c9); }
.workarea { display:flex; height:calc(640px - 56px); }
.sidebar { width:180px; border-right:1px solid #e0e2e6; padding:16px 12px; background:#f8fafc; }
.sidebar h4 { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:#8a92a3; margin:4px 8px 10px; font-weight:700; }
.viewitem { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; font-size:13px; color:#333d4b; margin-bottom:2px; }
.viewitem.active { background:#e8effc; color:#1b61c9; font-weight:600; }
.viewitem .dot { width:8px; height:8px; border-radius:3px; }
.g1 .dot{background:#1b61c9;} .g2 .dot{background:#00b8a3;} .g3 .dot{background:#8b6bf2;} .g4 .dot{background:#fcb400;}
.main { flex:1; display:flex; flex-direction:column; }
.toolbar { height:44px; display:flex; align-items:center; gap:10px; padding:0 18px; border-bottom:1px solid #e0e2e6; }
.pill { border:1px solid #e0e2e6; border-radius:8px; padding:5px 10px; font-size:12px; color:#5b6270; display:flex; align-items:center; gap:6px; }
.spacer { flex:1; }
.grid { flex:1; padding:0; overflow:hidden; }
table { border-collapse:collapse; width:100%; }
th { text-align:left; font-size:12px; font-weight:600; color:#5b6270; padding:10px 14px; border-bottom:1px solid #e0e2e6; border-right:1px solid #eceef1; background:#fbfcfd; }
th .fh { display:flex; align-items:center; gap:6px; }
th .fdot { width:7px; height:7px; border-radius:2px; }
td { padding:9px 14px; font-size:13px; border-bottom:1px solid #eceef1; border-right:1px solid #eceef1; color:#333d4b; }
tr:nth-child(even) td { background:#fbfcfd; }
.status { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:600; }
.s-live{background:#dff5e6;color:#0a7a3d;} .s-review{background:#fff2d6;color:#946200;} .s-plan{background:#e8effc;color:#1b61c9;}
.who { display:flex; align-items:center; gap:6px; }
.who .av{width:18px;height:18px;border-radius:50%;}
.addrow { padding:9px 14px; font-size:13px; color:#8a92a3; }
.addrow b { color:#1b61c9; font-weight:600; }
</style></head>
<body>
<nav class="topnav">
<div class="brand"><span class="sq"></span>Airtable</div>
<div class="navcrumb"><b>Marketing</b><span class="chev">›</span><span>Q3 Launch Plan</span><span class="chev">›</span><span>Grid view</span></div>
<div class="navactions"><button class="btn-primary">Share</button><div class="avatar"></div></div>
</nav>
<div class="workarea">
<aside class="sidebar">
<h4>Views</h4>
<div class="viewitem active g1"><span class="dot"></span>Grid view</div>
<div class="viewitem g2"><span class="dot"></span>Calendar</div>
<div class="viewitem g3"><span class="dot"></span>Kanban board</div>
<div class="viewitem g4"><span class="dot"></span>Timeline</div>
<h4 style="margin-top:22px;">Bases</h4>
<div class="viewitem"><span class="dot" style="background:#00b8a3;"></span>Content calendar</div>
<div class="viewitem"><span class="dot" style="background:#8b6bf2;"></span>Vendor tracker</div>
</aside>
<div class="main">
<div class="toolbar">
<div class="pill">Filter</div>
<div class="pill">Sort</div>
<div class="pill">Group</div>
<div class="spacer"></div>
<div class="pill">Row height</div>
</div>
<div class="grid">
<table>
<tr>
<th style="width:26%;"><div class="fh"><span class="fdot" style="background:#1b61c9;"></span>Task name</div></th>
<th style="width:16%;"><div class="fh"><span class="fdot" style="background:#fcb400;"></span>Status</div></th>
<th style="width:20%;"><div class="fh"><span class="fdot" style="background:#8b6bf2;"></span>Owner</div></th>
<th style="width:16%;"><div class="fh"><span class="fdot" style="background:#00b8a3;"></span>Due date</div></th>
<th style="width:22%;"><div class="fh"><span class="fdot" style="background:#e05fa1;"></span>Notes</div></th>
</tr>
<tr><td>Landing page copy</td><td><span class="status s-live">Live</span></td><td><div class="who"><div class="av" style="background:#f2b6c9;"></div>Jordan</div></td><td>Sep 12</td><td>Final pass approved</td></tr>
<tr><td>Partner asset review</td><td><span class="status s-review">In review</span></td><td><div class="who"><div class="av" style="background:#bfe0d0;"></div>Mina</div></td><td>Sep 14</td><td>Waiting on legal</td></tr>
<tr><td>Email sequence draft</td><td><span class="status s-plan">Planned</span></td><td><div class="who"><div class="av" style="background:#cdd6f2;"></div>Priya</div></td><td>Sep 18</td><td>3 of 5 drafted</td></tr>
<tr><td>Social teaser assets</td><td><span class="status s-live">Live</span></td><td><div class="who"><div class="av" style="background:#f2d9a6;"></div>Carlos</div></td><td>Sep 20</td><td>–</td></tr>
<tr><td>Press embargo list</td><td><span class="status s-review">In review</span></td><td><div class="who"><div class="av" style="background:#d9c8f2;"></div>Yuki</div></td><td>Sep 22</td><td>Confirming 6 outlets</td></tr>
<tr><td>Analytics dashboard</td><td><span class="status s-plan">Planned</span></td><td><div class="who"><div class="av" style="background:#bfe0d0;"></div>Mina</div></td><td>Sep 26</td><td>Blocked on API keys</td></tr>
</table>
<div class="addrow">+ <b>Add a record</b></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #334fb4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #146ff8; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f3f3f3; color: #121212;
border: 1px solid #146ff8; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #bbbbbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #334fb4; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #146ff8; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Assistant', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; border-bottom:1px solid #e8e8e8; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:20px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.navlinks span:first-child { color:#146ff8; }
.navicons { display:flex; gap:16px; align-items:center; }
.search { width:140px; height:32px; background:#fafafa; border-radius:9999px; font-size:12px; color:#6a7ab5;
display:flex; align-items:center; padding-left:14px; }
.cart { width:22px; height:22px; border:1.5px solid #121212; border-radius:5px; position:relative; }
.cart::after { content:'1'; position:absolute; top:-8px; right:-8px; width:15px; height:15px; border-radius:999px;
background:#146ff8; color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center; }
.hero { background:#f3f3f3; padding:30px 40px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.15; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.2; letter-spacing:-0.5px; margin:0 0 10px; }
.hero p { font-size:14px; color:#242833; margin:0 0 18px; max-width:380px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-primary { background:#146ff8; color:#fff; border:none; border-radius:9999px; padding:14px 30px;
font-size:14px; font-weight:600; letter-spacing:0.3px; height:48px; }
.btn-secondary { background:#fff; color:#121212; border:2px solid #dedede; border-radius:9999px;
padding:12px 28px; font-size:14px; font-weight:600; height:48px; }
.hero-visual { flex:1; height:170px; border-radius:20px; overflow:hidden; position:relative;
background:linear-gradient(150deg,#fdf0dc,#e9c99a); }
.hero-visual::before { content:''; position:absolute; width:60px; height:100px; border-radius:12px 12px 30px 30px;
background:#334fb4; opacity:0.85; left:60px; bottom:0; }
.hero-visual::after { content:''; position:absolute; width:56px; height:80px; border-radius:12px 12px 30px 30px;
background:#8ea1e0; right:70px; bottom:0; }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:22px; font-weight:600; margin:0; }
.sec-head span { font-size:12px; color:#146ff8; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { position:relative; }
.thumb { aspect-ratio:1/1; border-radius:12px; position:relative; margin-bottom:8px; }
.t1 { background:linear-gradient(160deg,#fef3d6,#e6b45c); }
.t2 { background:linear-gradient(160deg,#e3ede6,#a6c9ab); }
.t3 { background:linear-gradient(160deg,#f6e2e8,#e3a3b7); }
.t4 { background:linear-gradient(160deg,#dedede,#b8b8b8); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; padding:4px 10px; border-radius:9999px; color:#fff; }
.badge.new { background:#146ff8; }
.badge.sale { background:#121212; }
.card h3 { font-size:14px; font-weight:600; margin:0 0 2px; }
.card .price { font-size:14px; color:#242833; margin:0; }
footer { background:#f3f3f3; color:#242833; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#242833; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Being Frenshe</p>
<div class="navlinks"><span>Body</span><span>Home</span><span>Fragrance</span><span>Gift Sets</span></div>
<div class="navicons"><div class="search">Search…</div><div class="cart"></div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Your shelf, your ritual</h1>
<p>Clean body oils, whipped butters, and sculptural pumps designed to be seen, not hidden in a cabinet.</p>
<div class="row">
<button class="btn-primary">Shop Now</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Shelf Edit</h2><span>View All</span></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge new">New</span></div><h3>Amber Body Oil</h3><p class="price">$28.00</p></div>
<div class="card"><div class="thumb t2"></div><h3>Sage Cream Deodorant</h3><p class="price">$14.00</p></div>
<div class="card"><div class="thumb t3"><span class="badge sale">Sale</span></div><h3>Rose Whipped Butter</h3><p class="price">$22.00</p></div>
<div class="card"><div class="thumb t4"></div><h3>Charcoal Bar Set</h3><p class="price">$18.00</p></div>
</div>
</section>
<footer>
<span>© Being Frenshe</span>
<div><a href="#">Shop</a><a href="#">About</a><a href="#">Help</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #92fa72; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #92fa72; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #4b7a3d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #92fa72; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #92fa72; color: #111111;
border: 1px solid #7dd562; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4b7a3d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #89e286; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family: "Pretendard", -apple-system, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
.header { width:960px; height:56px; background:#212224; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.brand { color:#ffffff; font-size:18px; font-weight:700; }
.search-shell { width:360px; height:36px; background:#ffffff; border-radius:24px; display:flex;
align-items:center; padding:0 16px; color:#555969; font-size:13px; }
.header-action { background:#92fa72; color:#212224; font-size:13px; font-weight:500; border-radius:8px;
padding:8px 16px; }
.stage { width:960px; height:584px; display:flex; }
.main { flex:1; height:584px; padding:24px 28px; overflow:hidden; }
.crumbs { font-size:12px; color:#555969; margin-bottom:10px; }
.gig-title { font-size:22px; font-weight:700; color:#212224; line-height:1.3; margin-bottom:12px; max-width:520px; }
.seller-row { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.avatar { width:38px; height:38px; border-radius:9999px; background:linear-gradient(135deg,#9be89a,#3fae5e); }
.seller-name { font-size:14px; font-weight:700; color:#212224; }
.seller-meta { font-size:12px; color:#555969; }
.rating-inline { font-size:12px; color:#212224; margin-left:auto; }
.rating-inline b { color:#212224; }
.cover { width:100%; height:200px; border-radius:12px; margin-bottom:18px; position:relative; overflow:hidden;
background: linear-gradient(135deg, #d7ffce 0%, #92fa72 55%, #3fae5e 100%); }
.cover::after { content:""; position:absolute; inset:0;
background: radial-gradient(circle at 20% 80%, rgba(0,0,0,0.12), transparent 40%); }
.section-title { font-size:15px; font-weight:700; color:#212224; margin:0 0 8px; }
.desc { font-size:14px; font-weight:400; color:#333333; line-height:1.55; margin-bottom:16px; max-width:540px; }
.include-row { display:flex; gap:8px; font-size:13px; color:#333333; margin-bottom:6px; align-items:flex-start; }
.check { color:#3fae5e; font-weight:700; margin-top:1px; }
.side { width:300px; height:584px; border-left:1px solid #e4e5ed; padding:20px 20px; display:flex; flex-direction:column; }
.pkg-tabs { display:flex; border:1px solid #e4e5ed; border-radius:8px; overflow:hidden; margin-bottom:16px; }
.pkg-tab { flex:1; text-align:center; padding:9px 0; font-size:13px; font-weight:500; color:#555969;
background:#fafafc; }
.pkg-tab.active { background:#212224; color:#ffffff; font-weight:700; }
.pkg-title { font-size:16px; font-weight:700; color:#212224; margin-bottom:4px; }
.pkg-price { font-size:24px; font-weight:700; color:#212224; margin-bottom:12px; }
.pkg-desc { font-size:13px; color:#555969; margin-bottom:14px; line-height:1.5; }
.feature-row { display:flex; justify-content:space-between; font-size:13px; color:#333333; padding:7px 0;
border-bottom:1px solid #f2f3f7; }
.feature-row .fv { font-weight:700; color:#212224; }
.continue-btn { margin-top:auto; background:#92fa72; color:#212224; height:52px; border-radius:4px;
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:500; }
</style></head>
<body>
<div class="header">
<div class="brand">Kmong</div>
<div class="search-shell">Search for a service…</div>
<div class="header-action">Sign In</div>
</div>
<div class="stage">
<div class="main">
<div class="crumbs">Home / Design & Branding / Logo Design</div>
<div class="gig-title">I will design a modern minimalist logo for your brand</div>
<div class="seller-row">
<div class="avatar"></div>
<div>
<div class="seller-name">Jamie Park</div>
<div class="seller-meta">Level 2 Seller · Joined 2023</div>
</div>
<div class="rating-inline"><b>★ 4.9</b> (1,082 orders)</div>
</div>
<div class="cover"></div>
<div class="section-title">About This Service</div>
<div class="desc">A clean, distinctive logo package built for startups and small businesses — three initial
concepts, unlimited revisions on the chosen direction, and final files ready for print and web.</div>
<div class="section-title">What's Included</div>
<div class="include-row"><span class="check">✓</span><span>3 initial logo concepts</span></div>
<div class="include-row"><span class="check">✓</span><span>Source files (AI, EPS, SVG, PNG)</span></div>
<div class="include-row"><span class="check">✓</span><span>Brand color palette guide</span></div>
</div>
<div class="side">
<div class="pkg-tabs">
<div class="pkg-tab">Basic</div>
<div class="pkg-tab active">Standard</div>
<div class="pkg-tab">Premium</div>
</div>
<div class="pkg-title">Standard Package</div>
<div class="pkg-price">₩180,000</div>
<div class="pkg-desc">2 concepts, 3 revisions, full source files, and a one-page brand guide.</div>
<div class="feature-row"><span>Delivery Time</span><span class="fv">3 days</span></div>
<div class="feature-row"><span>Revisions</span><span class="fv">3</span></div>
<div class="feature-row"><span>Source Files</span><span class="fv">Included</span></div>
<div class="feature-row"><span>Brand Guide</span><span class="fv">Included</span></div>
<div class="continue-btn">Continue (₩180,000)</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4800; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4800; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcfcfa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4800; color: #fcfcfa;
border: 1px solid #fcfcfa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4800; color: #f5f5f5;
border: 1px solid #fd6427; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff6528; color: #fcfcfa;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfcfa; color:#1f1f1f; box-sizing:border-box;
font-family:"HubSpot Sans","Inter",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { font-size:19px; font-weight:700; color:#ff4800; }
.navlinks { display:flex; gap:20px; font-size:14px; }
.btn-primary { background:#ff4800; color:#ffffff; border-radius:8px; padding:10px 20px; font-size:14px;
font-weight:500; }
.hero { text-align:center; padding:30px 40px 24px; }
.hero h1 { font-family:"Georgia",serif; font-size:48px; font-weight:500; line-height:1.1; margin:0 0 14px; }
.hero p { font-size:16px; color:#60605f; margin:0 0 18px; max-width:480px; margin-left:auto; margin-right:auto; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-outlined { background:#ffffff; color:#ff4800; border:2px solid #ff4800; border-radius:8px;
padding:14px 30px; font-size:16px; font-weight:500; }
.btn-primary-lg { background:#ff4800; color:#ffffff; border-radius:8px; padding:14px 30px; font-size:16px;
font-weight:500; }
.tabs { display:flex; gap:8px; justify-content:center; padding:0 40px 20px; }
.tab { border-radius:16px; padding:8px 16px; font-size:14px; font-weight:500; background:#ffffff; }
.tab.active { background:#f8f5ee; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px 24px; }
.card { background:#ffffff; border:1px solid #1f1f1f; border-radius:16px; padding:18px; }
.card h3 { font-size:16px; font-weight:500; margin:0 0 6px; }
.card p { font-size:13px; color:#60605f; margin:0; }
.badge { display:inline-block; background:#fcded2; color:#ff4800; border-radius:4px; padding:4px 8px;
font-size:12px; font-weight:500; margin-top:8px; }
.dark { background:#042729; color:#f8f5ee; padding:22px 40px; text-align:center; }
.dark h2 { font-family:"Georgia",serif; font-size:28px; font-weight:500; margin:0 0 10px; }
.btn-dark-out { background:rgba(0,0,0,0.11); border:2px solid #f8f5ee; color:#f8f5ee; border-radius:8px;
padding:10px 22px; font-size:14px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="logo">HubSpot</span>
<div class="navlinks"><span>Marketing</span><span>Sales</span><span>Service</span></div>
<span class="btn-primary">Get a demo</span>
</nav>
<section class="hero">
<h1>The Customer Platform</h1>
<p>Grow better with software that's powerful, not complicated.</p>
<div class="row">
<button class="btn-primary-lg">Get a demo</button>
<button class="btn-outlined">Get started free</button>
</div>
</section>
<div class="tabs">
<span class="tab active">By Use Case</span>
<span class="tab">By Team Size</span>
<span class="tab">Why HubSpot?</span>
</div>
<div class="cards">
<div class="card"><h3>Marketing Hub</h3><p>Attract the right audience with content and SEO.</p><span class="badge">Popular</span></div>
<div class="card"><h3>Sales Hub</h3><p>Manage your pipeline without the busywork.</p></div>
<div class="card"><h3>Service Hub</h3><p>Delight customers with connected support.</p></div>
</div>
<div class="dark">
<h2>Grow better, together</h2>
<span class="btn-dark-out">Learn more about Revenue Hub</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #27c3f2; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #000000;
border: 1px solid #27c3f2; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #231f20;
border: 1px solid #c8c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #27c3f2; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231f20; box-sizing:border-box;
font-family:Roboto, 'Segoe UI', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 26px;
border-bottom:1px solid #dedede; }
.brand { font-size:19px; font-weight:700; margin:0; color:#0c97c1; }
.searchbox { flex:1; max-width:300px; border:1px solid #dedede; border-radius:4px; height:32px; margin:0 20px;
display:flex; align-items:center; padding:0 10px; font-size:12px; color:#8c8c8c; font-family:'Consolas',monospace; }
.cart { background:#27c3f2; color:#fff; font-size:12px; font-weight:600; border-radius:4px; padding:8px 14px; }
main { display:flex; height:584px; }
.stage { width:310px; background:#c6e8f9; display:flex; align-items:center; justify-content:center; }
.fridge { width:120px; height:190px; background:linear-gradient(180deg,#fff,#eef8fd); border:2px solid #27c3f2; border-radius:8px; position:relative; }
.fridge::before { content:''; position:absolute; top:60px; left:0; right:0; height:2px; background:#27c3f2; }
.handle { position:absolute; right:8px; top:14px; width:5px; height:36px; background:#231f20; border-radius:3px; }
.handle2 { position:absolute; right:8px; top:76px; width:5px; height:96px; background:#231f20; border-radius:3px; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:10px; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:4px; color:#fff; }
.b-energy { background:#008a00; } .b-promo { background:linear-gradient(90deg,#f58720,#e16f27); }
h1 { font-size:22px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#4a4a4a; margin:0; max-width:420px; line-height:1.5; }
.specs-grid { display:flex; gap:20px; font-size:11px; color:#8c8c8c; margin-top:2px; }
.specs-grid b { display:block; color:#231f20; font-size:14px; font-weight:700; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:24px; font-weight:700; color:#231f20; }
.actions { display:flex; gap:10px; }
.btn-primary { background:#27c3f2; color:#fff; border-radius:4px; height:44px; padding:0 24px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #dedede; color:#231f20; border-radius:4px; height:44px;
padding:0 18px; display:flex; align-items:center; font-size:12px; }
.rating { font-size:13px; color:#f48120; }
.rating span { color:#8c8c8c; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Avanti</p>
<div class="searchbox">Search model number…</div>
<span class="cart">Cart (0)</span>
</nav>
<main>
<div class="stage"><div class="fridge"><div class="handle"></div><div class="handle2"></div></div></div>
<div class="info">
<div class="badges"><span class="badge b-energy">Energy Star</span><span class="badge b-promo">Save $40</span></div>
<h1>Avanti 4.4 Cu. Ft. Compact Refrigerator</h1>
<p class="sub">Reversible door, adjustable glass shelves, and a separate freezer compartment — built for dorms, offices, and small spaces.</p>
<div class="specs-grid">
<div><b>4.4 ft³</b>Capacity</div>
<div><b>36 dB</b>Noise Level</div>
<div><b>2yr</b>Warranty</div>
</div>
<div class="rating">★★★★☆ <span>4.2 (866 reviews)</span></div>
<div class="price-row"><span class="price">$219.99</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">View Specs</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0055ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0055ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87adfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0055ff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0055ff; color: #f5f5f5;
border: 1px solid #276ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87adfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0047d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.display { font-family:"GT Walsheim Medium", "Inter", -apple-system, sans-serif; font-weight:600; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #1c1c1c; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#999999; }
.cta-accent { background:#0099ff; color:#ffffff; border-radius:8px; padding:0 10px; height:28px;
font-size:12px; font-weight:600; display:flex; align-items:center; white-space:nowrap; }
.hero { padding:38px 36px 30px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero .eyebrow { font-size:12px; color:#999999; letter-spacing:0.08em; text-transform:uppercase; }
.hero h1 { font-size:46px; font-weight:600; letter-spacing:-1.6px; line-height:1.04; margin:0; max-width:680px; }
.hero h1 em { color:#0099ff; font-style:normal; }
.hero p { font-size:14px; color:#999999; line-height:14px; margin:6px 0 0; max-width:460px; }
.hero-row { display:flex; gap:10px; margin-top:6px; }
.btn-outline { border:1px solid #333333; color:#ffffff; border-radius:8px; padding:0 18px; height:34px;
font-size:13px; font-weight:500; display:flex; align-items:center; }
.btn-accent { background:#0099ff; color:#ffffff; border-radius:8px; padding:0 18px; height:34px;
font-size:13px; font-weight:600; display:flex; align-items:center; }
.mkt { padding:22px 36px 30px; }
.mkt-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mkt-head .title { font-size:13px; font-weight:600; color:#ffffff; }
.mkt-head .sub { font-size:12px; color:#999999; }
.filters { display:flex; gap:8px; margin-bottom:14px; }
.filter { background:#242424; color:#ffffff; border-radius:8px; padding:0 10px; height:24px; font-size:12px;
font-weight:500; display:flex; align-items:center; }
.filter.tab-off { color:#666666; background:transparent; border:1px solid #242424; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.cat { background:#111111; border:1px solid #1c1c1c; border-radius:20px; padding:16px 14px; height:118px;
display:flex; flex-direction:column; justify-content:space-between; }
.cat .icon { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#242424,#0099ff33); }
.cat .name { font-size:13px; font-weight:600; }
.cat .count { font-size:12px; color:#999999; }
footer { border-top:1px solid #1c1c1c; padding:12px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#666666; }
</style></head>
<body>
<nav>
<p class="brand">Framer</p>
<div class="navlinks"><span>Product</span><span>Templates</span><span>Marketplace</span><span>Pricing</span></div>
<div class="cta-accent">Sign up</div>
</nav>
<section class="hero">
<span class="eyebrow">Sites, made simple</span>
<h1 class="display">Make the web<br><em>more creative</em></h1>
<p>Design, publish, and host incredible sites — with AI-assisted creation built in.</p>
<div class="hero-row">
<div class="btn-accent">Start building</div>
<div class="btn-outline">Explore templates</div>
</div>
</section>
<section class="mkt">
<div class="mkt-head">
<span class="title">Marketplace / Components</span>
<span class="sub">Community-built, ready to drop in</span>
</div>
<div class="filters">
<div class="filter">Filter ▾</div>
<div class="filter tab-off">Sort</div>
<div class="filter tab-off">Free</div>
<div class="filter tab-off">Pro</div>
</div>
<div class="grid">
<div class="cat"><div class="icon"></div><div><div class="name">Navigation</div><div class="count">128 components</div></div></div>
<div class="cat"><div class="icon"></div><div><div class="name">Sliders</div><div class="count">64 components</div></div></div>
<div class="cat"><div class="icon"></div><div><div class="name">Forms</div><div class="count">211 components</div></div></div>
<div class="cat"><div class="icon"></div><div><div class="name">Effects</div><div class="count">93 components</div></div></div>
</div>
</section>
<footer>
<span>© Framer</span>
<span>Framer · Product · Marketplace · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #02cab9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #02cab9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #0a645d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5f5f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #02cab9; color: #000000;
border: 1px solid #ff5f5f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #02cab9; color: #111111;
border: 1px solid #04ac9e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #0a645d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2ab9ab; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#484848; box-sizing:border-box;
font-family:Roboto, -apple-system, "Helvetica Neue", "PingFang", "Microsoft JhengHei", sans-serif; }
* { box-sizing:border-box; }
.nav { height:60px; display:flex; align-items:center; padding:0 32px; justify-content:space-between; }
.nav .brand { font-size:20px; font-weight:600; color:#02cab9; }
.nav .links { display:flex; gap:26px; font-size:14px; color:rgba(0,0,0,0.7); }
.nav .right { display:flex; gap:14px; align-items:center; font-size:14px; color:#484848; }
.signbtn { background:#02cab9; color:#fff; border-radius:5px; padding:8px 18px; font-size:14px; }
.hero { position:relative; height:300px; margin:0 32px; border-radius:8px; overflow:hidden;
background:linear-gradient(120deg,#0a2a2c 0%,#0e4a48 40%,#02b3a4 75%,#02cab9 100%); }
.hero::after{ content:''; position:absolute; inset:0;
background:radial-gradient(circle at 78% 30%, rgba(255,255,255,0.18), transparent 45%); }
.herotxt { position:relative; z-index:2; padding:44px 44px; max-width:520px; }
.herotxt h1 { color:#fff; font-size:38px; font-weight:600; line-height:1.25; margin:0 0 12px; }
.herotxt p { color:#eaf9f7; font-size:17px; margin:0 0 20px; }
.herobtn { background:#fff; color:#02b3a4; border-radius:5px; padding:12px 26px; font-size:16px; font-weight:500; display:inline-block; }
.section { padding:22px 32px 0; }
.section h2 { font-size:20px; font-weight:500; margin:0 0 14px; color:#363636; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border:1px solid #dcdfe6; border-radius:8px; overflow:hidden;
box-shadow: rgba(0,0,0,0.10) 0px 4px 16px; }
.thumb { height:78px; background:linear-gradient(135deg,#ffe5e5,#ffd0d0); position:relative; }
.thumb.b { background:linear-gradient(135deg,#e6fbf9,#c9f3ee); }
.thumb.c { background:linear-gradient(135deg,#eef1ff,#dbe1ff); }
.thumb .av { position:absolute; bottom:-18px; left:16px; width:44px; height:44px; border-radius:50%; border:3px solid #fff;
background:linear-gradient(135deg,#ff9a8b,#ff6f6f); }
.thumb.b .av{background:linear-gradient(135deg,#02cab9,#02b3a4);}
.thumb.c .av{background:linear-gradient(135deg,#8b9dff,#5a6fe0);}
.cardbody { padding:24px 14px 14px; }
.cardbody h3 { font-size:16px; font-weight:400; margin:0 0 4px; color:#363636; }
.cardbody .price { font-size:14px; font-weight:300; color:#484848; margin:0 0 8px; }
.badge { display:inline-block; background:#ffe5e5; color:#ff5f5f; font-size:11px; font-weight:500; border-radius:4px; padding:3px 8px; }
</style></head>
<body>
<nav class="nav">
<div class="brand">AmazingTalker</div>
<div class="links"><span>English Tutors</span><span>Japanese Tutors</span><span>Korean Tutors</span><span>Spanish Tutors</span></div>
<div class="right"><span>Sign In</span><button class="signbtn">Apply To Teach</button></div>
</nav>
<div class="hero">
<div class="herotxt">
<h1>Languages and learning made fun</h1>
<p>Match with a tutor in minutes and start your first lesson today.</p>
<span class="herobtn">Find tutors</span>
</div>
</div>
<div class="section">
<h2>Popular this week</h2>
<div class="cards">
<div class="card">
<div class="thumb"><div class="av"></div></div>
<div class="cardbody"><h3>Camila R. — English</h3><div class="price">$18.50/lesson</div><span class="badge">Popular</span></div>
</div>
<div class="card">
<div class="thumb b"><div class="av"></div></div>
<div class="cardbody"><h3>Jordan K. — Korean</h3><div class="price">$14,580₩/lesson</div><span class="badge">New</span></div>
</div>
<div class="card">
<div class="thumb c"><div class="av"></div></div>
<div class="cardbody"><h3>Sora M. — Japanese</h3><div class="price">$21.00/lesson</div><span class="badge">Popular</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5356ee; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5356ee; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #acadf2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5356ee; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5356ee; color: #f5f5f5;
border: 1px solid #6d6fef; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #acadf2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6f71f1; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Averta", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #eeeeee; }
.brand { font-size:17px; font-weight:600; margin:0; color:#222222; }
.navlinks { display:flex; gap:20px; margin-left:30px; }
.navlinks span { font-size:14px; color:#222222; }
.sell-btn { margin-left:auto; background:#ffffff; color:#222222; border:1.5px solid #5356ee; border-radius:4px;
height:32px; padding:0 16px; display:flex; align-items:center; font-size:14px; font-weight:600; }
.toolbar { display:flex; align-items:center; gap:12px; padding:14px 32px 4px; }
.searchbar { flex:1; height:36px; border:1px solid #dddddd; border-radius:4px; display:flex; align-items:center;
padding:0 14px; font-size:13px; color:#6b6b6b; max-width:320px; }
.sell-cta { margin-left:auto; background:#5356ee; color:#ffffff; border-radius:4px; height:32px; padding:0 16px;
display:flex; align-items:center; font-size:14px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:14px 32px 20px; }
.listing { display:flex; flex-direction:column; gap:6px; }
.thumb { width:100%; aspect-ratio:1/1; border-radius:8px; }
.thumb.a{background:linear-gradient(140deg,#dfe0fb,#5356ee);} .thumb.b{background:linear-gradient(140deg,#f0eee6,#c9c2a8);}
.thumb.c{background:linear-gradient(140deg,#e6f0ea,#8fbf9f);} .thumb.d{background:linear-gradient(140deg,#f5e3e6,#e6a0ad);}
.thumb.e{background:linear-gradient(140deg,#e8e8ea,#9a9aa0);}
.listing .t { font-size:13px; color:#222222; line-height:1.3; height:34px; overflow:hidden; }
.listing .p { font-size:14px; font-weight:600; color:#222222; }
.listing .like { font-size:11px; color:#6b6b6b; }
.footer-strip { display:flex; gap:16px; padding:10px 32px; border-top:1px solid #eeeeee; }
.footer-strip .item { font-size:12px; color:#6b6b6b; }
</style></head>
<body>
<nav>
<p class="brand">Mercari</p>
<div class="navlinks"><span>Home</span><span>Categories</span><span>Saved</span><span>Inbox</span></div>
<div class="sell-btn">Sign in</div>
</nav>
<div class="toolbar">
<div class="searchbar">Search for items</div>
<div class="sell-cta">Sell now</div>
</div>
<div class="grid">
<div class="listing"><div class="thumb a"></div><span class="t">Ceramic table lamp, cream shade</span><span class="p">$24</span><span class="like">♡ 12</span></div>
<div class="listing"><div class="thumb b"></div><span class="t">Vintage denim jacket, size M</span><span class="p">$38</span><span class="like">♡ 31</span></div>
<div class="listing"><div class="thumb c"></div><span class="t">Potted snake plant, 10in</span><span class="p">$16</span><span class="like">♡ 8</span></div>
<div class="listing"><div class="thumb d"></div><span class="t">Kids bicycle, 16in wheels</span><span class="p">$45</span><span class="like">♡ 19</span></div>
<div class="listing"><div class="thumb e"></div><span class="t">Cast-iron skillet, 10in</span><span class="p">$22</span><span class="like">♡ 5</span></div>
<div class="listing"><div class="thumb b"></div><span class="t">Board game bundle, family pack</span><span class="p">$18</span><span class="like">♡ 14</span></div>
<div class="listing"><div class="thumb a"></div><span class="t">Wool throw blanket, gray</span><span class="p">$27</span><span class="like">♡ 9</span></div>
<div class="listing"><div class="thumb c"></div><span class="t">Hardcover book set, mystery</span><span class="p">$14</span><span class="like">♡ 3</span></div>
<div class="listing"><div class="thumb d"></div><span class="t">Leather crossbody bag</span><span class="p">$32</span><span class="like">♡ 22</span></div>
<div class="listing"><div class="thumb e"></div><span class="t">Desk organizer set</span><span class="p">$12</span><span class="like">♡ 4</span></div>
</div>
<div class="footer-strip"><span class="item">Shipping calculated at checkout</span><span class="item">Buyer protection included</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faad87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faad87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc4d05; color: #222222;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box; font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { font-weight:700; font-size:18px; }
.navlinks { display:flex; gap:20px; font-size:15px; }
.navlinks span:first-child { color:#222222; }
.navlinks span:not(:first-child) { color:#999999; }
.btn { background:#3d3d3d; color:#f9f9f9; border:none; border-radius:8px; padding:9px 18px; font-size:15px; }
.center { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 0 26px; text-align:center; gap:14px; }
.center h1 { font-size:26px; font-weight:700; margin:0; max-width:640px; line-height:1.35; }
.convo { width:600px; height:56px; border-radius:24px; border:1px solid #f0f0f0; background:#fff; display:flex;
align-items:center; padding:0 16px; gap:10px; box-shadow:0 4px 16px rgba(0,0,0,0.08); }
.cam { width:44px; height:44px; border-radius:9999px; background:#f9f9f9; display:flex; align-items:center; justify-content:center; font-size:18px; }
.convo span { color:#999999; font-size:15px; }
.cards { display:flex; gap:14px; padding:0 28px; }
.card { flex:1; background:#fff; border:1px solid #f0f0f0; border-radius:24px; padding:20px; }
.num { width:28px; height:28px; border-radius:9999px; background:#ff5500; color:#fff; font-size:13px; font-weight:700;
display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.card h3 { font-size:16px; margin:0 0 4px; }
.card p { font-size:12.5px; color:#5d5d5d; margin:0; }
</style></head>
<body>
<nav>
<div class="brand">QANDA</div>
<div class="navlinks"><span>Home</span><span>Chat History</span><span>Study Content</span></div>
<button class="btn">Get Started</button>
</nav>
<div class="center">
<h1>Show us a problem you're stuck on and get a personalized solution</h1>
<div class="convo"><div class="cam">📷</div><span>Ask anything to study</span></div>
</div>
<div class="cards">
<div class="card"><div class="num">1</div><h3>Take a Photo</h3><p>Snap a photo of the problem you don't understand.</p></div>
<div class="card"><div class="num">2</div><h3>Check the Solution</h3><p>See a step-by-step solution instantly.</p></div>
<div class="card"><div class="num">3</div><h3>Teacher Q&A</h3><p>Still curious? Ask a teacher directly.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #256ef4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #256ef4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #97b8f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #256ef4; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #256ef4; color: #f5f5f5;
border: 1px solid #4684f4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #97b8f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d6df4; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e2124; box-sizing:border-box;
font-family:"Pretendard GOV","Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden; display:flex; flex-direction:column; }
header.gv-top { height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e6e8ea; }
.gv-brand { font-size:17px; font-weight:700; color:#1e2124; margin:0; }
.gv-a11y { display:flex; gap:8px; align-items:center; }
.gv-a11y span { font-size:13px; color:#464c53; }
.gv-zoom { display:flex; border:1px solid #b1b8be; border-radius:6px; overflow:hidden; }
.gv-zoom div { padding:4px 8px; font-size:12px; color:#464c53; border-right:1px solid #b1b8be; }
.gv-zoom div:last-child { border-right:none; }
.gv-zoom div.on { background:#256ef4; color:#ffffff; font-weight:700; }
.gv-crumb { padding:14px 28px 0; font-size:13px; color:#6d7882; }
.gv-crumb b { color:#0b50d0; font-weight:400; }
main.gv-body { flex:1; padding:14px 28px 0; overflow:hidden; display:flex; gap:24px; }
.gv-left { flex:1; display:flex; flex-direction:column; gap:14px; }
.gv-badges { display:flex; gap:8px; }
.badge { display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:4px; font-size:15px; font-weight:400; }
.badge-primary { background:#256ef4; color:#ffffff; border:1px solid #256ef4; }
.badge-success { background:#228738; color:#ffffff; }
.gv-h1 { font-size:32px; font-weight:700; line-height:1.3; margin:2px 0 0; letter-spacing:0.5px; }
.gv-sub { font-size:17px; line-height:1.5; color:#464c53; max-width:520px; margin:0; }
.gv-infobox { background:#f4f5f6; border-radius:8px; padding:16px 18px; display:flex; gap:28px; }
.gv-infobox div { font-size:15px; color:#6d7882; }
.gv-infobox strong { display:block; font-size:17px; color:#1e2124; font-weight:700; margin-top:4px; }
.gv-form { display:flex; flex-direction:column; gap:12px; margin-top:2px; }
.gv-field label { display:block; font-size:15px; font-weight:700; color:#1e2124; margin-bottom:6px; }
.gv-field label .req { color:#de3412; margin-left:2px; }
.gv-input { width:100%; height:48px; border:1px solid #58616a; border-radius:8px; padding:0 14px;
font-size:17px; color:#464c53; display:flex; align-items:center; background:#ffffff; }
.gv-select { width:100%; height:48px; border:1px solid #58616a; border-radius:6px; padding:0 14px;
font-size:17px; color:#1e2124; display:flex; align-items:center; justify-content:space-between; background:#ffffff; }
.gv-select .chev { font-size:12px; color:#58616a; }
.gv-right { flex:0 0 250px; display:flex; flex-direction:column; gap:14px; }
.gv-card { border:1px solid #b1b8be; border-radius:8px; padding:16px; }
.gv-card h3 { font-size:19px; font-weight:700; margin:0 0 10px; }
.gv-card ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.gv-card li { font-size:15px; color:#464c53; display:flex; justify-content:space-between; }
.gv-card li b { color:#1e2124; font-weight:700; }
.gv-tags { display:flex; gap:8px; flex-wrap:wrap; }
.tag-chip { border:1px solid #cdd1d5; border-radius:1000px; padding:8px 10px; font-size:15px; color:#1e2124; }
.tag-chip.active { background:#ecf2fe; color:#0b50d0; border-color:#256ef4; }
footer.gv-foot { flex:0 0 54px; border-top:1px solid #e6e8ea; padding:0 28px; display:flex; align-items:center;
justify-content:space-between; }
.gv-btn-row { display:flex; gap:10px; }
.btn { height:48px; padding:0 16px; border-radius:6px; font-size:17px; font-weight:400; display:flex; align-items:center; }
.btn-primary { background:#256ef4; color:#ffffff; border:1px solid #256ef4; }
.btn-tertiary { background:transparent; color:#1e2124; border:1px solid #58616a; }
.gv-cert { font-size:13px; color:#6d7882; display:flex; align-items:center; gap:6px; }
.gv-cert .dot { width:8px; height:8px; border-radius:50%; background:#228738; display:inline-block; }
</style></head>
<body>
<div class="stage">
<header class="gv-top">
<p class="gv-brand">KRDS</p>
<div class="gv-a11y">
<span>Text size</span>
<div class="gv-zoom"><div>90%</div><div class="on">100%</div><div>130%</div></div>
</div>
</header>
<div class="gv-crumb">Home › Civil Affairs › <b>Certificate Issuance</b></div>
<main class="gv-body">
<div class="gv-left">
<div class="gv-badges">
<span class="badge badge-primary">Online Application</span>
<span class="badge badge-success">No Visit Required</span>
</div>
<h1 class="gv-h1">Resident Registration<br>Certificate Application</h1>
<p class="gv-sub">Apply online to issue a resident registration certificate. Processed automatically and available for immediate download once approved.</p>
<div class="gv-infobox">
<div>Processing Time<strong>Immediate</strong></div>
<div>Fee<strong>Free of charge</strong></div>
<div>Validity<strong>90 days</strong></div>
</div>
<div class="gv-form">
<div class="gv-field">
<label>Applicant Name<span class="req">*</span></label>
<div class="gv-input">Morgan Lee</div>
</div>
<div class="gv-field">
<label>Purpose of Issuance<span class="req">*</span></label>
<div class="gv-select"><span>Employment submission</span><span class="chev">▾</span></div>
</div>
<div class="gv-field">
<label>Delivery Method</label>
<div class="gv-tags">
<span class="tag-chip active">Download PDF</span>
<span class="tag-chip">Postal mail</span>
<span class="tag-chip">Visit pickup</span>
</div>
</div>
</div>
</div>
<div class="gv-right">
<div class="gv-card">
<h3>Required Documents</h3>
<ul>
<li>Identity verification <b>Auto-checked</b></li>
<li>Address history <b>Auto-checked</b></li>
<li>Photo ID upload <b>Not needed</b></li>
</ul>
</div>
<div class="gv-card">
<h3>Need Help?</h3>
<ul>
<li>Contact center <b>110</b></li>
<li>Live chat <b>09:00–18:00</b></li>
</ul>
</div>
</div>
</main>
<footer class="gv-foot">
<div class="gv-cert"><span class="dot"></span> Web Accessibility Certified · KWCAG 2.1 AA</div>
<div class="gv-btn-row">
<button class="btn btn-tertiary">Save Draft</button>
<button class="btn btn-primary">Submit Application</button>
</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0f0f0f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0f0f0f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #0f0f0f; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676e72; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #4195b6; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #4195b6;
border: 1px solid #4195b6; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0f0f0f;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676e72; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #f1e5b8; color: #444444;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0f0f0f; box-sizing:border-box;
font-family:'Outfit',sans-serif; }
* { box-sizing:border-box; }
.display { font-family:'Tenor Sans',Georgia,serif; }
nav { height:60px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:19px; font-weight:600; color:#0f0f0f; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#676e72; }
.navlinks span.on { color:#4195b6; font-weight:600; }
.cart-btn { background:#4195b6; color:#fff; border-radius:9999px; padding:8px 18px; font-size:12px; font-weight:600; }
.hero-strip { height:8px; background:linear-gradient(90deg,#ffc0cb,#ff0000,#6a0dad,#964b00,#ffff00,#4195b6,#f47d32); }
.wrap { display:flex; height:512px; padding:22px 30px; gap:28px; }
.swatchpanel { width:280px; flex-shrink:0; background:#f1e5b8; border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.swatchpanel .label { font-size:11px; color:#444444; text-transform:uppercase; letter-spacing:.05em; }
.swatch-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.swatch { width:100%; aspect-ratio:1; border-radius:9999px; border:2px solid #ffffff; box-shadow:0 0 0 1px #dedede; }
.swatch.on { box-shadow:0 0 0 2px #4195b6; }
.s1{background:#ffc0cb}.s2{background:#ff0000}.s3{background:#6a0dad}.s4{background:#964b00}
.s5{background:#ffff00}.s6{background:#4195b6}.s7{background:#e2a764}.s8{background:#f47d32}
.s9{background:#d9bb92}.s10{background:#6a0dad}.s11{background:#28a99e}.s12{background:#111827}
.count-note { font-size:11px; color:#444; }
.info { flex:1; display:flex; flex-direction:column; gap:12px; }
.info h1 { font-family:'Tenor Sans',Georgia,serif; font-size:26px; font-weight:400; margin:0; }
.sub { font-size:13px; color:#676e72; }
.price { font-size:22px; font-weight:600; color:#0f0f0f; }
.opt-row { display:flex; gap:8px; }
.opt { border:1px solid #dedede; border-radius:12px; padding:8px 16px; font-size:12px; color:#323232; }
.opt.on { background:#4195b6; color:#fff; border-color:#4195b6; }
.desc { font-size:13px; color:#323232; line-height:1.6; max-width:500px; }
.amber-note { background:#e2a764; color:#fff; font-size:11px; padding:6px 12px; border-radius:9999px; display:inline-block; width:fit-content; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#4195b6; color:#fff; border:none; border-radius:9999px; padding:14px; font-size:14px; font-weight:600; }
.btn-wish { border:1.5px solid #0f0f0f; border-radius:9999px; padding:14px 20px; font-size:14px; }
footer { height:60px; background:#f7f7f7; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:11px; color:#676e72; }
</style></head>
<body>
<nav>
<p class="brand">12x12 Cardstock Shop</p>
<div class="navlinks"><span>By Color</span><span class="on">Multipacks</span><span>By Weight</span><span>Finishes</span></div>
<span class="cart-btn">Cart · 3</span>
</nav>
<div class="hero-strip"></div>
<div class="wrap">
<div class="swatchpanel">
<span class="label">Select Colors</span>
<div class="swatch-grid">
<div class="swatch s1"></div><div class="swatch s2 on"></div><div class="swatch s3"></div><div class="swatch s4"></div><div class="swatch s5"></div><div class="swatch s6"></div>
<div class="swatch s7"></div><div class="swatch s8"></div><div class="swatch s9"></div><div class="swatch s10"></div><div class="swatch s11"></div><div class="swatch s12"></div>
</div>
<span class="count-note">48 colors · flip through the chip book</span>
</div>
<div class="info">
<h1 class="display">Rainbow Multipack — 12x12 Cardstock</h1>
<span class="sub">Smooth Finish · 65lb Cover Weight · 48 Sheets</span>
<span class="price">$18.50</span>
<div class="opt-row">
<span class="opt on">Smooth</span>
<span class="opt">Linen</span>
<span class="opt">Glitter</span>
</div>
<p class="desc">A full-spectrum ream for card makers and scrapbookers — every hue from candy pink to royal purple, cut true to size and acid-free for archival projects.</p>
<span class="amber-note">Ships in kraft paper wrap</span>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© 12x12 Cardstock Shop</span><span>Color Guide · Bulk Orders · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0086ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0086ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c3fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0086ff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0086ff; color: #f5f5f5;
border: 1px solid #2798fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c3fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0071d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f2f2; color:#000000d9; box-sizing:border-box;
font-family:Roboto,"Helvetica Neue",Helvetica,Arial,"PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif; }
* { box-sizing:border-box; }
header { height:52px; background:#00324e; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; }
.logo { color:#fff; font-weight:700; font-size:16px; }
.search { width:280px; height:32px; display:flex; }
.search input { flex:1; border:none; border-radius:4px 0 0 4px; padding:0 12px; font-size:13px; }
.search .go { width:40px; background:#006aa6; border-radius:0 4px 4px 0; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:13px; }
.hactions { display:flex; gap:10px; align-items:center; }
.hactions span { color:#ffffffb3; font-size:13px; }
.dl { background:#3397cf; color:#fff; border-radius:8px; padding:7px 16px; font-size:13px; font-weight:500; }
.layout { display:flex; gap:12px; padding:14px 20px; }
.sider { width:150px; }
.sider .cat { font-size:12px; font-weight:500; color:#00000080; padding:6px 4px; }
.sider .item { font-size:14px; padding:8px 8px; border-radius:8px; color:#00000080; }
.sider .item.active { background:#e7f3f9; color:#000000d9; font-weight:500; }
.main { flex:1; display:flex; flex-direction:column; gap:10px; }
.tabs { display:flex; gap:20px; border-bottom:1px solid #0000001a; padding-bottom:8px; }
.tabs .t { font-size:14px; font-weight:500; color:#00000080; padding-bottom:8px; }
.tabs .t.active { color:#000000d9; border-bottom:2px solid #3397cf; }
.post { background:#fff; border-radius:4px; padding:16px 20px; display:flex; gap:14px; }
.post .avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#bf8ff0,#3397cf); flex-shrink:0; }
.post .body { flex:1; }
.post .meta { font-size:12px; font-weight:500; color:#00000080; margin-bottom:4px; }
.post .meta b { color:#cb3a6b; }
.post h4 { font-size:18px; font-weight:500; margin:0 0 6px; color:#000000d9; }
.post p { font-size:13px; color:#00000080; margin:0 0 10px; line-height:1.4; }
.post .foot { display:flex; gap:14px; font-size:13px; color:#00000080; }
.post .foot span.hot { color:#cb3a6b; }
.chip { display:inline-block; background:#bf8ff0; color:#fff; font-size:11px; font-weight:500; border-radius:4px;
padding:3px 7px; margin-right:6px; }
.aside { width:200px; display:flex; flex-direction:column; gap:10px; }
.aside .card { background:#fff; border-radius:4px; padding:14px; }
.aside .card h5 { font-size:13px; font-weight:600; margin:0 0 8px; color:#000000d9; }
.aside .card .row { display:flex; justify-content:space-between; font-size:12px; color:#00000080; padding:4px 0; }
</style></head>
<body>
<header>
<span class="logo">Dcard</span>
<div class="search"><input placeholder="Search Dcard"><div class="go">🔍</div></div>
<div class="hactions"><span>Sign in</span><span>Sign up</span><div class="dl">Download App</div></div>
</header>
<div class="layout">
<div class="sider">
<div class="cat">FORUMS</div>
<div class="item active">Girls</div>
<div class="item">Boys</div>
<div class="item">Relationships</div>
<div class="item">Mood</div>
<div class="item">Work</div>
<div class="item">Study Tips</div>
</div>
<div class="main">
<div class="tabs"><div class="t active">All</div><div class="t">Following</div></div>
<div class="post">
<div class="avatar"></div>
<div class="body">
<div class="meta">National Taiwan University · 3 hours ago <b>●</b></div>
<span class="chip">#study tips</span>
<h4>How do you actually stay focused during finals week?</h4>
<p>Tried every app, every playlist. Curious what's worked for people who don't have a study group.</p>
<div class="foot"><span class="hot">♥ 584</span><span>💬 179</span><span>💾 Save</span></div>
</div>
</div>
<div class="post">
<div class="avatar"></div>
<div class="body">
<div class="meta">NCCU · 5 hours ago</div>
<span class="chip">#dating advice</span>
<h4>Is it normal to feel nothing after a breakup?</h4>
<p>It's been two weeks and I mostly just feel relieved. Is that bad?</p>
<div class="foot"><span class="hot">♥ 213</span><span>💬 88</span><span>💾 Save</span></div>
</div>
</div>
</div>
<div class="aside">
<div class="card"><h5>Trending forums</h5>
<div class="row"><span>Work</span><span>+12%</span></div>
<div class="row"><span>Mood</span><span>+8%</span></div>
<div class="row"><span>Tech Industry</span><span>+5%</span></div>
</div>
<div class="card"><h5>Sponsored</h5>
<div class="row"><span>New semester gear</span><span>→</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FAFAF7; color: #1A1917;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FAFAF7; color: #1A1917;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #1A1917; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7A736E; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.04em; background: #BF7B5E; color: #FFFFFF;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.04em; background: #FAFAF7; color: #1A1917;
border: 1px solid #BF7B5E; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FAFAF7; color: #1A1917;
border: 1px solid #c2c2bf; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A736E; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 0.12em; background: #F0E6DC; color: #A66548;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FAFAF7; color:#1A1917; box-sizing:border-box;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#FAFAF7; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #EDE8E3; }
.brand { font-size:18px; font-weight:500; margin:0; letter-spacing:0.01em; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:13px; font-weight:500; letter-spacing:0.02em; color:#1A1917; }
.cart { background:transparent; border:1px solid #DDD8D3; border-radius:999px; padding:8px 18px; font-size:13px; font-weight:500; }
main { display:flex; height:576px; }
.stage { width:340px; background:#F0E6DC; display:flex; align-items:center; justify-content:center; }
.bottle { width:120px; height:230px; position:relative; }
.bottle-cap { width:60px; height:26px; background:#BF7B5E; border-radius:8px 8px 4px 4px; margin:0 auto; }
.bottle-body { width:120px; height:200px; margin-top:-4px; border-radius:14px; background:linear-gradient(180deg,#fff 0%,#f6ede6 100%);
border:1px solid #E3C2B4; display:flex; align-items:center; justify-content:center; box-shadow:0 20px 40px rgba(191,123,94,0.18); }
.bottle-label { width:80px; height:100px; border:1px solid #A66548; border-radius:4px; display:flex; align-items:center;
justify-content:center; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#A66548; text-align:center; padding:6px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:12px; }
.label-caps { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#7A736E; margin:0; }
h1 { font-size:30px; font-weight:300; margin:0; letter-spacing:-0.02em; line-height:1.15; }
.sub { font-size:14px; color:#3C3835; margin:0; line-height:1.5; max-width:460px; }
.shade-row { display:flex; gap:10px; align-items:center; margin-top:4px; }
.shade-row .lbl { font-size:11px; color:#7A736E; margin-right:6px; }
.sw { width:34px; height:34px; border-radius:999px; border:2px solid transparent; }
.sw.on { border-color:#1A1917; }
.sw1{background:#3b241a;} .sw2{background:#6b3d24;} .sw3{background:#a9714a;} .sw4{background:#c99a6a;} .sw5{background:#e6c99b;}
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:22px; font-weight:400; }
.badge { display:inline-flex; background:#F0E6DC; color:#A66548; font-size:11px; font-weight:600; letter-spacing:0.12em;
text-transform:uppercase; border-radius:4px; padding:4px 8px; width:fit-content; }
.actions { display:flex; gap:12px; margin-top:8px; }
.btn-primary { background:#BF7B5E; color:#fff; border-radius:999px; padding:14px 28px; height:48px;
display:flex; align-items:center; font-size:14px; font-weight:500; letter-spacing:0.04em; }
.btn-secondary { background:#FAFAF7; color:#1A1917; border:1px solid #DDD8D3; border-radius:999px; padding:13px 27px;
height:48px; display:flex; align-items:center; font-size:14px; font-weight:500; }
.quiz-note { margin-top:auto; border-top:1px solid #EDE8E3; padding-top:12px; display:flex; align-items:center; gap:10px; }
.quiz-note .bar { flex:1; height:3px; background:#DDD8D3; border-radius:999px; position:relative; }
.quiz-note .bar::after { content:''; position:absolute; left:0; top:0; height:100%; width:72%; background:#BF7B5E; border-radius:999px; }
.quiz-note span { font-size:11px; color:#7A736E; white-space:nowrap; }
</style></head>
<body>
<nav>
<p class="brand">Aura Hair Care</p>
<div class="navlinks"><span>Quiz</span><span>Shop</span><span>How It Works</span><span>Reviews</span></div>
<div class="cart">Bag (1)</div>
</nav>
<main>
<div class="stage">
<div class="bottle">
<div class="bottle-cap"></div>
<div class="bottle-body"><div class="bottle-label">AURA<br>Color<br>No. 6.3</div></div>
</div>
</div>
<div class="info">
<p class="label-caps">Your Formula</p>
<h1>Custom Color, Golden Brown 6.3</h1>
<p class="sub">Mixed to your exact quiz results — ammonia-free permanent color with a 20-volume developer, matched to your natural warmth.</p>
<div class="shade-row"><span class="lbl">Shade family</span>
<div class="sw sw1"></div><div class="sw sw2"></div><div class="sw sw3 on"></div><div class="sw sw4"></div><div class="sw sw5"></div>
</div>
<span class="badge">Recommended For You</span>
<div class="price-row"><span class="price">$38.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Formula</div>
<div class="btn-secondary">Retake Quiz</div>
</div>
<div class="quiz-note"><div class="bar"></div><span>Step 5 of 7 — Developer Volume</span></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: 0.01em; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: 0.06em; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: 0.06em; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; background: transparent; color: #767676;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e0e0e0; }
.logo { font-size:15px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; font-size:12px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase;
color:#767676; }
.navlinks b { color:#313131; border-bottom:1px solid #313131; padding-bottom:3px; }
.cart { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#313131; }
main { display:flex; height:calc(640px - 64px - 26px); }
.stage { width:460px; background:#0d0d10; position:relative; overflow:hidden; }
.sky { position:absolute; inset:0; background:linear-gradient(180deg,#1a2a52 0%,#2c4a7a 38%,#7a8fb8 62%,#e8c9a0 82%,#f2d9ad 100%); }
.tower { position:absolute; bottom:0; background:linear-gradient(180deg,#0e1220,#181c2c); }
.t1 { left:40px; width:38px; height:280px; } .t2 { left:86px; width:26px; height:340px; }
.t3 { left:120px; width:48px; height:230px; } .t4 { left:176px; width:30px; height:390px; }
.t5 { left:214px; width:56px; height:260px; } .t6 { left:278px; width:34px; height:320px; }
.t7 { left:320px; width:44px; height:200px; } .t8 { left:372px; width:28px; height:270px; }
.streak { position:absolute; bottom:0; height:2px; background:linear-gradient(90deg,transparent,#ffb35c,#ff8a3d,transparent);
opacity:0.85; }
.s1 { left:20px; width:340px; bottom:120px; } .s2 { left:60px; width:280px; bottom:180px; }
.win { position:absolute; width:2px; height:2px; background:#ffdca0; opacity:0.9; }
.edition { position:absolute; bottom:20px; left:24px; color:#e8e8e8; font-size:10px; letter-spacing:0.1em;
text-transform:uppercase; font-weight:600; }
.info { flex:1; padding:32px 40px; display:flex; flex-direction:column; }
.crumb { font-size:12px; letter-spacing:0.04em; color:#767676; margin-bottom:10px; }
.crumb b { color:#313131; }
h1 { font-size:32px; font-weight:300; letter-spacing:0.02em; margin:0 0 6px; line-height:1.2; }
.subtitle { font-size:13px; color:#767676; margin-bottom:18px; letter-spacing:0.02em; }
.price { font-size:18px; font-weight:400; margin-bottom:20px; }
p.desc { font-size:15px; line-height:1.65; color:#4a4a4a; margin:0 0 22px; max-width:400px; }
.opt-label { font-size:13px; font-weight:500; margin-bottom:10px; }
.sizes { display:flex; gap:10px; margin-bottom:24px; }
.size { border:1px solid #e0e0e0; font-size:13px; padding:8px 14px; color:#313131; }
.size.active { border-color:#313131; background:#f8f8f8; }
.cta-row { display:flex; gap:12px; margin-top:auto; margin-bottom:20px; }
.btn-primary { background:#313131; color:#fff; border:none; padding:14px 30px; font-size:13px; font-weight:500;
letter-spacing:0.06em; text-transform:uppercase; }
.btn-secondary { background:#fff; color:#313131; border:1px solid #313131; padding:13px 26px; font-size:13px;
font-weight:500; letter-spacing:0.06em; text-transform:uppercase; }
.meta { display:flex; gap:24px; font-size:12px; color:#767676; border-top:1px solid #f0f0f0; padding-top:16px; }
.meta b { display:block; color:#313131; font-size:13px; font-weight:400; margin-top:2px; }
</style></head>
<body>
<nav>
<span class="logo">Andrew Prokos</span>
<div class="navlinks"><span>New York</span><span>Europe</span><b>Skylines</b><span>About</span></div>
<span class="cart">Cart (0)</span>
</nav>
<main>
<div class="stage">
<div class="sky"></div>
<div class="tower t1"></div><div class="tower t2"></div><div class="tower t3"></div>
<div class="tower t4"></div><div class="tower t5"></div><div class="tower t6"></div>
<div class="tower t7"></div><div class="tower t8"></div>
<div class="streak s1"></div><div class="streak s2"></div>
<div class="win" style="left:96px;bottom:220px;"></div>
<div class="win" style="left:184px;bottom:260px;"></div>
<div class="win" style="left:224px;bottom:200px;"></div>
<div class="win" style="left:330px;bottom:150px;"></div>
<div class="edition">Edition of 50</div>
</div>
<div class="info">
<div class="crumb">Prints / New York / <b>Blue Hour Skyline</b></div>
<h1>Blue Hour, Midtown Skyline</h1>
<div class="subtitle">Archival pigment print · Fine art paper</div>
<div class="price">$340.00</div>
<p class="desc">A long-exposure study of Midtown at blue hour — traffic trails carve light through glass towers as the sky shifts from indigo to amber. Signed and numbered.</p>
<div class="opt-label">Print Size</div>
<div class="sizes">
<span class="size">20×30 cm</span><span class="size active">40×60 cm</span><span class="size">60×90 cm</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
<div class="meta">
<div>Paper<b>Hahnemühle Photo Rag</b></div>
<div>Framing<b>Unframed</b></div>
<div>Ships<b>Rolled Tube</b></div>
</div>
</div>
</main>
<footer style="height:26px; border-top:1px solid #e0e0e0; display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; letter-spacing:0.04em; color:#767676;">
<span>© Andrew Prokos</span><span>Fine art architectural photography</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20b8cd; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #20b8cd;
border: 1px solid #20b8cd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e2629; color: #20b8cd;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0A; color:#FAFAFA; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.sidebar { width:220px; height:640px; border-right:0.5px solid #2A2A2A; padding:16px; display:flex;
flex-direction:column; gap:10px; }
.brandrow { display:flex; align-items:center; gap:8px; padding:0 4px 12px; }
.mark { width:20px; height:20px; position:relative; }
.mark span { position:absolute; width:10px; height:10px; border-radius:50%; background:#20B8CD; opacity:0.85; }
.mark span:nth-child(1){ left:0; top:6px; }
.mark span:nth-child(2){ left:6px; top:0; }
.mark span:nth-child(3){ left:10px; top:8px; }
.wordmark { font-size:15px; font-weight:700; letter-spacing:-0.2px; }
.new-thread { background:#171717; border:1px solid #2A2A2A; border-radius:10px; padding:10px 12px;
font-size:13px; font-weight:600; color:#FAFAFA; margin-bottom:4px; }
.group-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#6E6E6E; margin:8px 0 4px; }
.thread-row { padding:8px 4px; }
.thread-title { font-size:13px; color:#FAFAFA; }
.thread-time { font-size:10px; color:#6E6E6E; margin-top:2px; }
.main { flex:1; height:640px; display:flex; flex-direction:column; }
.topbar { height:52px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
padding:0 20px; }
.conv-title { font-size:14px; font-weight:500; color:#FAFAFA; }
.overflow { color:#6E6E6E; font-size:14px; }
.content { flex:1; overflow:hidden; padding:0 20px 12px; display:flex; flex-direction:column; }
.question { font-size:20px; font-weight:600; letter-spacing:-0.3px; margin-bottom:14px; }
.src-row { display:flex; gap:10px; overflow:hidden; margin-bottom:16px; }
.src-card { width:150px; height:70px; flex-shrink:0; background:#171717; border:1px solid #2A2A2A;
border-radius:12px; padding:10px; position:relative; }
.src-top { display:flex; align-items:center; gap:6px; }
.favicon { width:12px; height:12px; border-radius:3px; background:#20B8CD; opacity:0.7; }
.domain { font-size:10px; color:#A1A1A1; }
.src-title { font-size:11px; color:#FAFAFA; margin-top:6px; line-height:1.3; font-weight:500; }
.num-badge { position:absolute; top:8px; right:8px; background:#1F1F1F; color:#A1A1A1; font-size:9px;
font-weight:700; padding:1px 5px; border-radius:4px; font-family:monospace; }
.answer-label { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:#A1A1A1; margin-bottom:8px; }
.answer-mark { width:14px; height:14px; border-radius:50%; background:#20B8CD; }
.answer-body { font-size:15px; line-height:1.5; color:#FAFAFA; }
.cite { display:inline-block; background:#1F1F1F; border:1px solid #2A2A2A; color:#20B8CD; font-size:10px;
font-weight:500; padding:0 5px; border-radius:4px; font-family:monospace; margin:0 1px; }
.action-row { display:flex; gap:8px; margin-top:16px; }
.apill { background:#1F1F1F; border:1px solid #2A2A2A; color:#FAFAFA; font-size:12px; font-weight:500;
padding:7px 14px; border-radius:8px; }
.search-wrap { padding:0 20px 18px; flex-shrink:0; }
.search-input { background:#171717; border:1.5px solid #20B8CD; border-radius:24px; min-height:52px;
display:flex; align-items:center; padding:0 60px 0 18px; position:relative;
box-shadow:rgba(32,184,205,0.25) 0 0 0 4px; }
.search-ph { font-size:15px; color:#FAFAFA; }
.send-circle { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px;
border-radius:50%; background:#20B8CD; display:flex; align-items:center; justify-content:center;
color:#0A0A0A; font-weight:700; font-size:14px; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="brandrow"><div class="mark"><span></span><span></span><span></span></div><div class="wordmark">Perplexity (iOS)</div></div>
<div class="new-thread">+ New thread</div>
<div class="group-label">Today</div>
<div class="thread-row"><div class="thread-title">Why is the sky blue at noon?</div><div class="thread-time">2h ago</div></div>
<div class="thread-row"><div class="thread-title">Bayesian inference history</div><div class="thread-time">5h ago</div></div>
<div class="group-label">Yesterday</div>
<div class="thread-row"><div class="thread-title">Compare M3 vs M4 chips</div><div class="thread-time">1d ago</div></div>
</div>
<div class="main">
<div class="topbar"><span class="conv-title">Bayesian inference history</span><span class="overflow">⋯</span></div>
<div class="content">
<div class="question">What is the history of Bayesian inference?</div>
<div class="src-row">
<div class="src-card"><div class="src-top"><div class="favicon"></div><span class="domain">wikipedia.org</span></div>
<div class="src-title">Bayes' theorem — Wikipedia</div><span class="num-badge">1</span></div>
<div class="src-card"><div class="src-top"><div class="favicon"></div><span class="domain">stanford.edu</span></div>
<div class="src-title">History of probability & inference</div><span class="num-badge">2</span></div>
<div class="src-card"><div class="src-top"><div class="favicon"></div><span class="domain">arxiv.org</span></div>
<div class="src-title">Modern Bayesian methods review</div><span class="num-badge">3</span></div>
</div>
<div class="answer-label"><div class="answer-mark"></div>Answer</div>
<div class="answer-body">
Bayesian inference traces back to Thomas Bayes' posthumously published essay in 1763<span class="cite">1</span>,
which introduced a rule for updating probabilities given new evidence. Pierre-Simon Laplace
independently generalized the approach decades later<span class="cite">2</span>, and it remained
a minority statistical framework until computational advances in the late 20th century made
Markov chain Monte Carlo methods practical<span class="cite">3</span>.
</div>
<div class="action-row">
<div class="apill">Copy</div>
<div class="apill">Share</div>
<div class="apill">Save to Library</div>
</div>
</div>
<div class="search-wrap">
<div class="search-input"><span class="search-ph">Ask anything…</span><div class="send-circle">↑</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262626; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #262626; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #060606; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:8px; align-items:center; }
.navlinks span:not(.cta) { font-size:18px; color:#000; padding:6px 14px; }
.cta { background:#262626; color:#ffffff; border-radius:9999px; padding:6px 16px; font-size:18px; }
.hero { padding:30px 32px 0; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero h1 { font-size:36px; font-weight:500; margin:0 0 8px; letter-spacing:-0.3px; }
.hero p { font-size:16px; color:#737373; margin:0 0 18px; }
.term { width:520px; background:#ffffff; border:1px solid #e5e7eb; border-radius:9999px; padding:10px 12px;
font-family:"Courier New", monospace; font-size:14px; color:#000; text-align:left; display:flex; align-items:center; gap:8px; }
.term .dollar { color:#737373; }
.heroCta { margin-top:18px; background:#262626; color:#ffffff; border-radius:9999px; padding:12px 32px;
font-size:18px; font-weight:500; }
.body { padding:26px 32px 0; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.card { border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
.card .modelname { font-family:"Courier New", monospace; font-size:14px; color:#000; margin-bottom:6px; }
.card .desc { font-size:14px; color:#737373; line-height:1.4; }
.pricingrow { display:flex; justify-content:center; gap:10px; margin-top:22px; }
.pill-outline { border:1px solid #d4d4d4; border-radius:9999px; padding:8px 24px; font-size:14px; font-weight:500; }
.pill-white { background:#ffffff; border-radius:9999px; padding:8px 24px; font-size:14px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="brand">Ollama</span>
<div class="navlinks"><span>Models</span><span>Docs</span><span>Pricing</span><span class="cta">Download</span></div>
</nav>
<div class="hero">
<h1>The easiest way to build with open models</h1>
<p>Start local. Scale with cloud.</p>
<div class="term"><span class="dollar">$</span>ollama run llama3</div>
<div class="heroCta">Get started</div>
</div>
<div class="body">
<div class="grid">
<div class="card"><div class="modelname">llama3.2</div><div class="desc">A general purpose model, tuned for chat and reasoning.</div></div>
<div class="card"><div class="modelname">codeqwen</div><div class="desc">Optimized for code generation and completion tasks.</div></div>
<div class="card"><div class="modelname">gemma2</div><div class="desc">A lightweight, fast model for local inference.</div></div>
</div>
<div class="pricingrow">
<span class="pill-outline">Free</span>
<span class="pill-white">Pro</span>
<span class="pill-white">Max</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; margin: 0; color: #f0f0fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-size: 12px; font-weight:700; background: #000000; color: #ffffff;
border: none; border-radius: 32px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13.008px; font-weight: 700; line-height: 0.94; letter-spacing: 1.17px; background: #000000; color: #ffffff;
border: 1px solid #000000; border-radius: 32px;
padding: 18px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.32px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f0f0fa; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #000000; color: #ffffff;
border-radius: 32px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:Arial Narrow, Arial, Verdana, -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { position:absolute; top:0; left:0; right:0; z-index:5; height:auto; display:flex; align-items:center;
justify-content:space-between; padding:24px 32px; }
.brand { font-size:15px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; font-size:11px; font-weight:400; letter-spacing:.96px; text-transform:uppercase; color:rgba(255,255,255,.85); }
.hero { position:relative; height:400px; overflow:hidden;
background:
radial-gradient(circle 260px at 78% 65%, rgba(255,150,60,.55), rgba(255,90,20,.25) 40%, transparent 70%),
linear-gradient(200deg, #050505 0%, #0a0a10 45%, #000 100%); }
.hero::before { content:''; position:absolute; left:76%; top:20%; width:6px; height:180px; border-radius:3px;
background:linear-gradient(180deg,#e8e8e8,#999 60%,#555); transform:rotate(14deg); }
.hero::after { content:''; position:absolute; left:74%; top:150px; width:60px; height:120px;
background:radial-gradient(ellipse at top, rgba(255,200,120,.9), rgba(255,120,30,.5) 50%, transparent 75%);
transform:rotate(14deg); filter:blur(2px); }
.herotext { position:absolute; left:32px; bottom:26px; z-index:2; max-width:440px; }
.herotext h1 { font-size:66px; font-weight:700; line-height:.95; letter-spacing:1.6px; text-transform:uppercase; margin:0 0 16px; }
.ghostbtn { background:transparent; border:1px solid #fff; color:#fff; border-radius:32px; padding:18px 24px;
font-size:12px; font-weight:700; letter-spacing:1.17px; text-transform:uppercase; }
.band { padding:26px 32px; text-align:center; }
.band h2 { font-size:40px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; line-height:1.2; margin:0 0 14px; }
.shopgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 32px 20px; background:#000; }
.shopcard { background:#fff; color:#000; border-radius:8px; padding:12px; }
.shopcard .thumb { height:60px; border-radius:6px; margin-bottom:8px; background:linear-gradient(135deg,#e0e0e8,#c9ccd1); }
.shopcard .name { font-size:12px; font-weight:400; }
.shopcard .price { font-size:12px; font-weight:700; margin-top:2px; }
footer { padding:14px 32px; display:flex; justify-content:space-between; font-size:11px; color:#fff; }
</style></head>
<body>
<div style="position:relative;">
<nav>
<div class="brand">SpaceX</div>
<div class="navlinks"><span>FALCON</span><span>DRAGON</span><span>STARSHIP</span><span>HUMAN SPACEFLIGHT</span></div>
</nav>
<div class="hero">
<div class="herotext">
<h1>STARSHIP</h1>
<button class="ghostbtn">WATCH LAUNCH</button>
</div>
</div>
</div>
<div class="band">
<h2>MAKING LIFE<br>MULTIPLANETARY</h2>
</div>
<div class="shopgrid">
<div class="shopcard"><div class="thumb"></div><div class="name">Starship Cap</div><div class="price">$35</div></div>
<div class="shopcard"><div class="thumb"></div><div class="name">Falcon Model</div><div class="price">$60</div></div>
<div class="shopcard"><div class="thumb"></div><div class="name">Mission Patch</div><div class="price">$15</div></div>
</div>
<footer>
<span>© SpaceX</span>
<span>SpaceX · SHOP · CAREERS · MISSION</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f75cb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f75cb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95bbe2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc6d26; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f75cb; color: #ffffff;
border: 1px solid #fc6d26; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f75cb; color: #f5f5f5;
border: 1px solid #4189d2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95bbe2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4274b1; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171321; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #dcdcde; background:#ffffff; }
.brand { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:660; letter-spacing:-0.3px; }
.brand .dot { width:10px; height:10px; border-radius:3px; background:#fc6d26; transform:rotate(20deg); }
.navlinks { display:flex; gap:24px; font-size:14px; color:#74717a; }
.navlinks span.on { color:#171321; font-weight:660; }
.navbtns { display:flex; gap:10px; }
.btn-white { background:#ffffff; color:#171321; border:1px solid #bfbfc3; border-radius:4px;
padding:9px 14px; font-size:13px; font-weight:660; }
.btn-ink { background:#171321; color:#ffffff; border:none; border-radius:4px;
padding:9px 14px; font-size:13px; font-weight:660; }
.hero { padding:26px 32px 18px; }
.hero h1 { font-size:42px; font-weight:660; letter-spacing:-1.4px; line-height:1.05; margin:0 0 8px; max-width:560px; }
.hero h1 span { color:#7759c2; }
.hero p { font-size:15px; color:#4c4b51; margin:0 0 16px; max-width:480px; line-height:1.5; }
.hero .row { display:flex; gap:10px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 32px 20px; }
.stat { background:#1f1c2e; border-radius:16px; padding:16px 18px; color:#ffffff; }
.stat .num { font-size:26px; font-weight:660; letter-spacing:-0.6px; }
.stat .cap { font-size:12px; color:#bcbac2; margin-top:4px; line-height:1.4; }
.stat.orange .num { color:#fc6d26; }
.stat.purple .num { color:#a793e6; }
.panel { margin:0 32px; border:1px solid #dcdcde; border-radius:16px; overflow:hidden; }
.panel-head { display:flex; justify-content:space-between; align-items:center;
padding:12px 18px; background:#f4f4f4; border-bottom:1px solid #dcdcde; }
.panel-head b { font-size:14px; font-weight:660; }
.panel-head span { font-size:12px; color:#74717a; }
.row-item { display:flex; align-items:center; justify-content:space-between;
padding:11px 18px; border-bottom:1px solid #f2f1f5; font-size:13px; }
.row-item:last-child { border-bottom:none; }
.ri-left { display:flex; align-items:center; gap:10px; }
.ri-left .icon { width:16px; height:16px; border-radius:4px; background:#f2f1f5; flex:0 0 auto; }
.ri-title { font-weight:500; color:#28272d; }
.ri-meta { color:#74717a; font-size:12px; }
.pill { border-radius:160px; padding:2px 8px; font-size:11px; font-weight:500; white-space:nowrap; }
.pill.success { background:#c3e6cd; color:#306440; }
.pill.danger { background:#fdd4cd; color:#a32c12; }
.pill.tier { background:#e1d8f9; color:#5c47a6; }
.pill.duo { background:#f6f3fe; color:#7759c2; border:1px solid #e1d8f9; }
</style></head>
<body>
<nav>
<div class="brand"><span class="dot"></span>GitLab</div>
<div class="navlinks"><span class="on">Platform</span><span>Product</span><span>Why GitLab</span><span>Pricing</span></div>
<div class="navbtns"><button class="btn-white">Request a demo</button><button class="btn-ink">Get free trial</button></div>
</nav>
<section class="hero">
<h1>Ship faster.<br>With <span>trust</span>.</h1>
<p>One DevSecOps platform for the entire software lifecycle — plan, build, secure, and deploy from a single application.</p>
<div class="row"><button class="btn-ink">Get free trial</button><button class="btn-white">Try for free</button></div>
</section>
<div class="stats">
<div class="stat"><div class="num">4 hrs</div><div class="cap">saved per engineer, per week</div></div>
<div class="stat orange"><div class="num">82%</div><div class="cap">decrease in cycle time</div></div>
<div class="stat purple"><div class="num">3.1x</div><div class="cap">faster reviews with GitLab Duo</div></div>
</div>
<div class="panel">
<div class="panel-head"><b>Merge requests</b><span>4 open</span></div>
<div class="row-item">
<div class="ri-left"><span class="icon"></span><div><div class="ri-title">Refactor auth token cache</div><div class="ri-meta">!482 · main ← feature/auth-cache</div></div></div>
<span class="pill success">Passed</span>
</div>
<div class="row-item">
<div class="ri-left"><span class="icon"></span><div><div class="ri-title">Add rate limiting to public API</div><div class="ri-meta">!481 · main ← feature/rate-limit</div></div></div>
<span class="pill duo">Duo reviewed</span>
</div>
<div class="row-item">
<div class="ri-left"><span class="icon"></span><div><div class="ri-title">Bump vendored dependencies</div><div class="ri-meta">!479 · main ← chore/deps</div></div></div>
<span class="pill danger">Failed</span>
</div>
<div class="row-item">
<div class="ri-left"><span class="icon"></span><div><div class="ri-title">Enable Ultimate security scanning</div><div class="ri-meta">!477 · main ← chore/security</div></div></div>
<span class="pill tier">Ultimate</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #009ddc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #009ddc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cdea; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003b5c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #009ddc; color: #003b5c;
border: 1px solid #003b5c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #009ddc; color: #f5f5f5;
border: 1px solid #27abe0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cdea; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #008dc8; color: #003b5c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#10222E; box-sizing:border-box;
font-family:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric:tabular-nums; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #DBE3E8; background:#FFFFFF; }
.brand { font-size:17px; font-weight:800; letter-spacing:-0.3px; color:#003B5C; margin:0; }
.bell { width:30px; height:30px; border-radius:50%; border:1.5px solid #DBE3E8; display:flex;
align-items:center; justify-content:center; font-size:13px; color:#5A707C; }
.wrap { display:flex; height:588px; }
/* LEFT: accounts rail */
.rail { width:360px; border-right:1px solid #DBE3E8; overflow:hidden; }
.hero { background:linear-gradient(160deg,#003B5C,#002A42); padding:20px 22px 22px; color:#fff; }
.hero .lbl { font-size:11px; font-weight:600; letter-spacing:0.5px; color:#9DC4D8; text-transform:uppercase; margin:0 0 6px; }
.hero .val { font-size:32px; font-weight:800; letter-spacing:-0.8px; margin:0; }
.hero .chg { font-size:12px; font-weight:700; color:#5FE3B0; margin-top:6px; }
.hero .chg span { color:#9DC4D8; font-weight:400; margin-left:4px; }
.acct-list { padding:6px 0; }
.acct { display:flex; align-items:center; gap:12px; padding:11px 20px; border-bottom:1px solid #DBE3E8; }
.acct.sel { background:#F2F6F8; }
.aicon { width:34px; height:34px; border-radius:9px; background:#18303F; display:flex; align-items:center;
justify-content:center; color:#46BEEC; font-size:14px; font-weight:800; flex-shrink:0; }
.aname { font-size:14px; font-weight:700; margin:0; }
.amask { font-size:11px; color:#5A707C; margin:2px 0 0; }
.abal { margin-left:auto; text-align:right; }
.abal .b { font-size:14px; font-weight:800; }
.abal .p { font-size:11px; font-weight:700; margin-top:2px; }
.gain { color:#16895F; } .loss { color:#C8443D; }
/* RIGHT: trade ticket */
.ticket-pane { flex:1; padding:22px 30px; overflow:hidden; }
.quote { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.quote .sym { font-size:22px; font-weight:800; }
.quote .px { font-size:22px; font-weight:800; margin-left:auto; }
.quote .chg { font-size:13px; font-weight:700; }
.card { background:#F2F6F8; border-radius:12px; padding:16px; }
.seg { display:flex; background:#FFFFFF; border-radius:8px; padding:3px; margin-bottom:16px; width:220px; }
.seg div { flex:1; text-align:center; padding:8px 0; font-size:13px; font-weight:700; border-radius:6px; color:#5A707C; }
.seg .buy { background:#009DDC; color:#002233; }
.frow { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid #DBE3E8; }
.frow:last-child { border-bottom:none; }
.frow .lab { font-size:13px; font-weight:600; color:#5A707C; }
.frow .v { font-size:16px; font-weight:800; }
.est { display:flex; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid #DBE3E8; }
.est .lab { font-size:13px; font-weight:600; color:#5A707C; }
.est .v { font-size:18px; font-weight:800; color:#003B5C; }
.review { margin-top:18px; width:100%; background:#009DDC; color:#002233; border:none; border-radius:8px;
padding:14px; font-size:16px; font-weight:800; text-align:center; }
.balances { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.btile { background:#18303F; color:#fff; border-radius:12px; padding:12px 14px; }
.btile .l { font-size:11px; font-weight:600; color:#9DB2BF; }
.btile .v { font-size:17px; font-weight:800; margin-top:3px; }
</style></head>
<body>
<nav>
<p class="brand">Charles Schwab (iOS)</p>
<div class="bell">🔔</div>
</nav>
<div class="wrap">
<div class="rail">
<div class="hero">
<p class="lbl">Total Value</p>
<p class="val tnum">$612,408.55</p>
<p class="chg tnum">▲ +$5,204.18 <span>(+0.86%) today</span></p>
</div>
<div class="acct-list">
<div class="acct sel">
<div class="aicon">B</div>
<div><p class="aname">Individual Brokerage</p><p class="amask">••4471</p></div>
<div class="abal"><div class="b tnum">$402,118.30</div><div class="p gain tnum">+1.12%</div></div>
</div>
<div class="acct">
<div class="aicon">R</div>
<div><p class="aname">Roth IRA</p><p class="amask">••7790</p></div>
<div class="abal"><div class="b tnum">$168,902.00</div><div class="p loss tnum">-0.34%</div></div>
</div>
<div class="acct">
<div class="aicon">C</div>
<div><p class="aname">Schwab Bank Checking</p><p class="amask">••1024</p></div>
<div class="abal"><div class="b tnum">$41,388.25</div><div class="p tnum" style="color:#5A707C">0.00%</div></div>
</div>
</div>
</div>
<div class="ticket-pane">
<div class="quote">
<span class="sym">SCHW</span>
<span class="chg gain tnum">+1.8%</span>
<span class="px tnum">$74.62</span>
</div>
<div class="card">
<div class="seg"><div class="buy">Buy</div><div>Sell</div></div>
<div class="frow"><span class="lab">Symbol</span><span class="v">SCHW</span></div>
<div class="frow"><span class="lab">Quantity</span><span class="v tnum">50</span></div>
<div class="frow"><span class="lab">Order type</span><span class="v">Limit</span></div>
<div class="frow"><span class="lab">Limit price</span><span class="v tnum">$74.60</span></div>
<div class="est"><span class="lab">Estimated cost</span><span class="v tnum">$3,730.00</span></div>
</div>
<div class="review">Review order</div>
<div class="balances">
<div class="btile"><div class="l">CASH AVAILABLE</div><div class="v tnum">$18,204</div></div>
<div class="btile"><div class="l">BUYING POWER</div><div class="v tnum">$36,408</div></div>
<div class="btile"><div class="l">MARKET VALUE</div><div class="v tnum">$594,204</div></div>
<div class="btile"><div class="l">DAY CHANGE</div><div class="v gain tnum">+$5,204</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5840ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5840ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aea4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1938; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5840ff; color: #1b1938;
border: 1px solid #1b1938; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5840ff; color: #f5f5f5;
border: 1px solid #715dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e3adf; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292827; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:300px; position:relative; background:linear-gradient(160deg,#1b1938 0%,#2a2450 55%,#3a2f66 100%);
padding:24px 40px; color:#fff; }
nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.brand { font-size:16px; font-weight:600; color:#fff; }
.navlinks { display:flex; gap:22px; font-size:13px; color:rgba(255,255,255,0.8); }
.btn-cream-mini { background:#e9e5dd; color:#292827; border-radius:8px; padding:8px 16px; font-size:12px; font-weight:600; }
.hero-copy { text-align:center; margin-top:20px; }
.hero-copy h1 { font-size:44px; font-weight:540; line-height:0.96; margin:0 0 12px; letter-spacing:0; }
.hero-copy p { font-size:16px; color:rgba(255,255,255,0.8); margin:0 0 16px; }
.hero-cta { display:inline-flex; background:#e9e5dd; color:#292827; border-radius:8px; padding:14px 24px;
font-size:16px; font-weight:600; }
.glow { position:absolute; width:120px; height:120px; border-radius:50%; background:rgba(203,183,251,0.35);
filter:blur(2px); }
.glow.g1 { top:20px; right:60px; } .glow.g2 { bottom:-30px; left:80px; width:90px; height:90px; }
.content { padding:20px 40px 0; }
.content h2 { text-align:center; font-size:26px; font-weight:460; letter-spacing:-0.6px; margin:0 0 16px; }
.row { display:flex; gap:16px; }
.card { flex:1; background:#fff; border:1px solid #dcd7d3; border-radius:16px; padding:18px; }
.card h3 { font-size:18px; font-weight:540; margin:0 0 6px; }
.card p { font-size:13px; color:#292827; line-height:1.5; margin:0; }
.card .accent { color:#714cb6; font-size:12px; text-decoration:underline; margin-top:8px; display:inline-block; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #dcd7d3; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#714cb6; }
</style></head>
<body>
<div class="hero">
<div class="glow g1"></div><div class="glow g2"></div>
<nav>
<div class="brand">Superhuman</div>
<div class="navlinks"><span>Mail</span><span>Docs</span><span>AI</span><span>Pricing</span></div>
<div class="btn-cream-mini">Sign up</div>
</nav>
<div class="hero-copy">
<h1>Mail that works everywhere</h1>
<p>Save four hours a week. Time is the luxury.</p>
<div class="hero-cta">Get Superhuman</div>
</div>
</div>
<div class="content">
<h2>Your Superhuman suite</h2>
<div class="row">
<div class="card"><h3>Superhuman speed</h3><p>Keyboard-first email, tuned for inbox velocity.</p><span class="accent">See how it works</span></div>
<div class="card"><h3>AI everywhere</h3><p>Summaries and drafts across mail, docs, and calendar.</p><span class="accent">See how it works</span></div>
<div class="card"><h3>One suite</h3><p>Mail, Docs, and AI — a single premium workspace.</p><span class="accent">See how it works</span></div>
</div>
</div>
<footer><span>© Superhuman</span><span>Superhuman · Pricing · Company · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #da3238; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #da3238; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e99da0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fb5957; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da3238; color: #ffffff;
border: 1px solid #fb5957; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #da3238; color: #f5f5f5;
border: 1px solid #de5156; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e99da0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #df383d; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", AppleSDGothicNeo-Regular, "Malgun Gothic", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #d7d7d7; }
.brand { font-size:17px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:16px; font-weight:600; color:#5f6b7c; }
.navlinks span.on { color:#18202a; }
.btn-login { background:#fb5957; color:#fff; border:1px solid #fb5957; border-radius:4px; height:36px;
padding:0 16px; font-size:13px; font-weight:600; display:flex; align-items:center; }
.hero { padding:14px 40px 10px; }
.search { background:#fff; border:2px solid #222222; border-radius:30px; height:52px; padding:0 20px;
display:flex; align-items:center; font-size:16px; color:#94969b; max-width:520px; }
.section { padding:12px 40px 0; }
.section h2 { font-size:16px; font-weight:600; margin:0 0 8px; }
.row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid #d7d7d7; }
.rank { width:20px; height:16px; background:#e6e8ef; color:#939dac; font-size:9px; font-weight:600;
border-radius:4px; display:flex; align-items:center; justify-content:center; }
.row .title { font-size:14px; font-weight:600; flex:1; }
.row .cat { font-size:11px; color:#94969b; }
.cols { display:flex; gap:20px; padding:10px 40px 0; }
.col { flex:1; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #d7d7d7; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#94969b; }
</style></head>
<body>
<nav>
<div class="brand">Blind</div>
<div class="navlinks"><span class="on">Home</span><span>Channels</span><span>Company Reviews</span></div>
<div class="btn-login">Log in</div>
</nav>
<div class="hero">
<div class="search">Search for something you're curious about</div>
</div>
<div class="cols">
<div class="col">
<div class="section"><h2>Top Topics</h2>
<div class="row"><span class="rank">1</span><span class="title">Anyone else negotiate a return offer this week?</span></div>
<div class="row"><span class="rank">2</span><span class="title">Comp thread: senior engineer, Seoul</span></div>
<div class="row"><span class="rank">3</span><span class="title">Honest review of my team's new manager</span></div>
<div class="row"><span class="rank">4</span><span class="title">Anyone moved from finance to product?</span></div>
</div>
</div>
<div class="col">
<div class="section"><h2>Company Reviews</h2>
<div class="row"><span class="title">Sample Tech Co.</span><span class="cat">Reviews 1,204</span></div>
<div class="row"><span class="title">Bluebird Labs</span><span class="cat">Reviews 842</span></div>
<div class="row"><span class="title">Northfield Group</span><span class="cat">Reviews 610</span></div>
</div>
</div>
</div>
<footer><span>© Blind</span><span>Blind · Careers · Report Guide</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #58cc02; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #58cc02; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4f7d7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#4B4B4B; box-sizing:border-box; font-family:'SF Pro Rounded',-apple-system,BlinkMacSystemFont,'Nunito',sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; }
.path { width:420px; padding:26px; position:relative; }
.hud { display:flex; gap:14px; margin-bottom:20px; }
.hchip { display:flex; align-items:center; gap:6px; font-weight:700; font-size:18px; }
.hchip.fire { color:#FF9600; } .hchip.gem { color:#1CB0F6; } .hchip.heart { color:#FF4B4B; }
.node-col { display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:10px; }
.noderow { display:flex; align-items:center; width:100%; }
.node { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff; box-shadow:0 4px 0 #58A700; position:relative; }
.node.locked { background:#E5E5E5; box-shadow:none; color:#AFAFAF; }
.node.current { background:#58CC02; }
.node.gold { background:#FFC800; box-shadow:0 4px 0 #E29F03; }
.crown { position:absolute; top:-14px; font-size:16px; }
.left-off { margin-right:80px; } .right-off { margin-left:80px; }
.right { flex:1; background:#F7F7F7; padding:0; display:flex; align-items:center; justify-content:center; }
.qcard { width:460px; padding:30px; }
.qtitle { font-size:22px; font-weight:700; text-align:center; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }
.tile { border:2px solid #E5E5E5; box-shadow:0 2px 0 #E5E5E5; border-radius:12px; padding:14px 18px; font-size:17px; font-weight:700; text-align:center; background:#fff; }
.tile.correct { background:#D7FFB8; border-color:#58CC02; color:#58A700; }
.tile.wrong { background:#FFDFE0; border-color:#FF4B4B; color:#EA2B2B; }
.bigbtn { margin-top:30px; background:#58CC02; box-shadow:0 4px 0 #58A700; border-radius:16px; color:#fff; text-align:center; padding:16px; font-weight:800; font-size:17px; letter-spacing:0.4pt; text-transform:uppercase; }
</style>
</head>
<body>
<div class="stage">
<div class="path">
<div style="font-size:15px;font-weight:800;color:#58CC02;margin-bottom:8px">Duolingo (iOS)</div>
<div class="hud"><div class="hchip fire">🔥 12</div><div class="hchip gem">♦ 245</div><div class="hchip heart">♥ 5</div></div>
<div class="node-col">
<div class="noderow"><div class="node right-off">★</div></div>
<div class="noderow"><div class="node current"><span class="crown">👑</span>★</div></div>
<div class="noderow"><div class="node right-off">★</div></div>
<div class="noderow"><div class="node locked">🔒</div></div>
<div class="noderow"><div class="node gold right-off">★</div></div>
</div>
</div>
<div class="right">
<div class="qcard">
<div class="qtitle">Translate this sentence</div>
<div style="text-align:center;margin-top:14px;font-size:16px;color:#4B4B4B">"El gato duerme en la ventana."</div>
<div class="tiles">
<div class="tile correct">The cat</div>
<div class="tile">is running</div>
<div class="tile correct">sleeps</div>
<div class="tile wrong">on the door</div>
<div class="tile correct">on the window</div>
<div class="tile">in the garden</div>
</div>
<div class="bigbtn">Check</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #6c5ce7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #6c5ce7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b7b0ef; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a06cff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6c5ce7; color: #ffffff;
border: 1px solid #a06cff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #6c5ce7; color: #f5f5f5;
border: 1px solid #8274e9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b7b0ef; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #745feb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#6C5CE7; color:#1A1530; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#6C5CE7,#A06CFF); padding:24px 18px; }
.toprow { display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:11px; font-weight:800; margin-bottom:18px; }
.flamepill { background:rgba(255,255,255,0.22); border-radius:999px; padding:5px 12px; font-weight:900; }
.pollcard { background:#fff; border-radius:28px; padding:22px 18px 18px; box-shadow:0 24px 50px -20px rgba(40,20,90,0.55); }
.emoji { font-size:38px; text-align:center; display:block; }
.question { font-size:19px; font-weight:900; text-align:center; margin:10px 0 4px; }
.pollcard .tagline { text-align:center; font-size:10px; font-weight:800; color:#7B4DFF; letter-spacing:0.4px; margin-bottom:14px; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice { border-radius:20px; padding:16px 8px; text-align:center; font-weight:800; font-size:14px; color:#fff; }
.c1 { background:linear-gradient(135deg,#6C5CE7,#8B6CFF); }
.c2 { background:linear-gradient(135deg,#FF6CC8,#FF9CDB); }
.c3 { background:linear-gradient(135deg,#FFC93C,#FFB13C); color:#4A3300; }
.c4 { background:linear-gradient(135deg,#2BC48A,#4FD9A6); }
.shuffle { text-align:center; font-size:12px; font-weight:800; color:#7B4DFF; margin-top:14px; }
.dots { display:flex; justify-content:center; gap:6px; margin-top:16px; }
.dots span { width:22px; height:5px; border-radius:3px; background:rgba(255,255,255,0.35); }
.dots span.active { background:#fff; width:30px; }
.tabbar { position:absolute; bottom:16px; left:18px; right:18px; height:56px; border-radius:20px;
background:rgba(255,255,255,0.16); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:rgba(255,255,255,0.6); text-align:center; }
.tab.mid { width:44px; height:44px; border-radius:50%; background:#fff; color:#6C5CE7; font-size:20px; font-weight:900;
display:flex; align-items:center; justify-content:center; margin-top:-16px; box-shadow:0 8px 20px rgba(40,20,90,0.5); }
.tab.on { color:#fff; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; background:#fff; color:#1A1530; }
.brand { font-size:30px; font-weight:900; letter-spacing:-0.3px; margin:0; }
.brand span { color:#7B4DFF; }
.tag { font-size:14px; color:#6B6588; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:14px; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6B6588; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:900; letter-spacing:-0.2px; }
.typeblock .t2 { font-size:13px; color:#6B6588; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:800; padding:6px 12px; border-radius:999px;
background:#F4F2FF; border:1px solid #ECE9FB; color:#6B6588; }
.footer { margin-top:auto; border-top:1px solid #ECE9FB; padding-top:16px; font-size:11px; color:#A29DB8; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="toprow"><span>Central High</span><span class="flamepill">🔥 128</span></div>
<div class="pollcard">
<span class="emoji">😄</span>
<div class="question">Who has the best smile?</div>
<div class="tagline">ANONYMOUS · BE NICE</div>
<div class="choices">
<div class="choice c1">Maya</div><div class="choice c2">Sofia</div>
<div class="choice c3">Jordan</div><div class="choice c4">Alex</div>
</div>
<div class="shuffle">🔄 Shuffle names</div>
</div>
<div class="dots"><span class="active"></span><span></span><span></span><span></span><span></span></div>
<div class="tabbar">
<div class="tab on">Polls</div><div class="tab">Inbox</div>
<div class="tab mid">+</div><div class="tab">School</div><div class="tab">You</div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Gas (iOS)<span>.</span></h1>
<p class="tag">A candy-bright indigo world with one white card at a time — an anonymous compliment poll, answered one tap at a time.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#6C5CE7"></div><small>#6C5CE7</small></div>
<div class="sw"><div class="chip2" style="background:#FF6CC8"></div><small>#FF6CC8</small></div>
<div class="sw"><div class="chip2" style="background:#FFC93C"></div><small>#FFC93C</small></div>
<div class="sw"><div class="chip2" style="background:#2BC48A"></div><small>#2BC48A</small></div>
<div class="sw"><div class="chip2" style="background:#FF7A45"></div><small>#FF7A45</small></div>
</div>
<div class="typeblock">
<div class="t1">Who has the best smile? 😄</div>
<div class="t2">Nunito · 900 weight · a 50pt emoji headline crowns every card</div>
</div>
<div class="taglist">
<span>2×2 name grid</span><span>Flame currency</span><span>Shuffle names</span>
<span>No feed, no scroll</span><span>Purple-tinted shadows</span>
</div>
<div class="footer">Light-UI by design · one white poll card floats centered · finite, positive, safe</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #139cb7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #139cb7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fcdd9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #139cb7; color: #333333;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #139cb7; color: #f5f5f5;
border: 1px solid #37aac1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fcdd9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #188ba2; color: #333333;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231200; box-sizing:border-box;
font-family:Roboto, "Noto Sans JP", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e6e6e6; }
.brand { font-size:18px; font-weight:700; color:#231200; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#333; }
.cta { background:#333333; color:#fff; border-radius:8px; padding:10px 20px 10px 22px; font-size:14px; }
.hero { padding:26px 36px 18px; }
.badge { display:inline-block; background:#ffbf00; color:#231200; border-radius:8px; padding:5px 10px; font-size:12px; font-weight:700; margin-bottom:12px; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.25; letter-spacing:1.5px; margin:0 0 8px; max-width:640px; }
.hero p { font-size:15px; color:#3e4149; max-width:480px; margin:0 0 16px; }
.row { display:flex; gap:10px; }
.cta2 { background:#ffffff; border:1px solid #d6d5d5; color:#231200; border-radius:8px; padding:9px 20px; font-size:14px; }
.band { background:#fff5e1; padding:22px 36px; display:flex; gap:16px; }
.card { flex:1; background:#fff; border:1px solid #d6d5d5; border-radius:10px; padding:16px; }
.card h3 { font-size:16px; margin:0 0 6px; color:#231200; }
.card p { font-size:12px; color:#3e4149; margin:0; }
.decor { position:absolute; width:40px; height:40px; border-radius:50%; background:#ffdb4f; top:24px; right:100px; }
</style></head>
<body>
<nav>
<p class="brand">Cybozu</p>
<div class="navlinks"><span>Products</span><span>Pricing</span><span>Case Studies</span><span>Support</span></div>
<button class="cta">Try free for 30 days</button>
</nav>
<section class="hero">
<span class="badge">Give it a try!</span>
<h1>Anyone can build it.</h1>
<p>Cybozu's no-code, low-code tool for building business apps.</p>
<div class="row">
<button class="cta">Try free for 30 days</button>
<button class="cta2">Watch the video</button>
</div>
</section>
<div class="band">
<div class="card"><h3>Customer & deal management</h3><p>Bring your sales data together and share it in a single app.</p></div>
<div class="card"><h3>Ditch the spreadsheets</h3><p>Move on from spreadsheets — faster, with fewer mistakes.</p></div>
<div class="card"><h3>Workflow</h3><p>Turn your approval process into an app, as-is.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc000; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc000; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6009; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #917300; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc000; color: #917300;
border: 1px solid #917300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc000; color: #111111;
border: 1px solid #d9a403; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #edb400; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"LamboType",Roboto,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#000000; }
.brand { font-size:18px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; }
.navlinks { display:flex; gap:30px; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:#c4c4c4; }
.navlinks .on { color:#ffffff; border-bottom:2px solid #ffc000; padding-bottom:18px; }
.hero { position:relative; height:330px; background:
linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.75) 70%, #000 100%),
linear-gradient(115deg, #1a1a1a 0%, #303030 38%, #0d0d0d 60%, #000000 100%);
display:flex; align-items:flex-end; overflow:hidden; }
.hero::before { content:''; position:absolute; left:8%; right:8%; bottom:60px; height:2px;
background:linear-gradient(90deg, transparent, rgba(255,192,0,0.55), transparent); }
.hero .wedge { position:absolute; right:-40px; top:20px; width:520px; height:220px;
background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.06) 35%, transparent 55%);
transform:skewX(-18deg); }
.hero-content { position:relative; padding:28px 32px 24px; }
.hero .kicker { font-size:11px; letter-spacing:0.22em; color:#ffc000; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { font-size:52px; font-weight:400; letter-spacing:0.01em; line-height:0.98; margin:0 0 16px; text-transform:uppercase; }
.hero .row { display:flex; gap:0; }
.btn-accent { background:#ffc000; color:#000000; padding:16px 28px; font-size:14px; letter-spacing:0.08em;
text-transform:uppercase; font-weight:400; }
.btn-outline { color:#ffffff; border:1px solid #ffffff; padding:16px 28px; font-size:14px; letter-spacing:0.08em;
text-transform:uppercase; font-weight:400; }
.strip { display:grid; grid-template-columns:repeat(3,1fr); background:#000000; }
.model { position:relative; height:250px; border-right:1px solid #202020; overflow:hidden; }
.model:last-child { border-right:none; }
.model .plate { position:absolute; inset:0; }
.m1 .plate { background:linear-gradient(145deg,#2b2b2b,#0a0a0a 70%); }
.m2 .plate { background:linear-gradient(145deg,#3a2f00,#0a0a0a 70%); }
.m3 .plate { background:linear-gradient(145deg,#242424,#000000 70%); }
.model .stripe { position:absolute; left:0; right:0; bottom:78px; height:1px; background:rgba(255,192,0,0.4); }
.model .info { position:absolute; left:20px; bottom:20px; }
.model .info .cat { font-size:10px; letter-spacing:0.18em; color:#969696; text-transform:uppercase; margin-bottom:6px; }
.model .info .name { font-size:22px; font-weight:400; letter-spacing:0.02em; text-transform:uppercase; }
</style></head>
<body>
<nav>
<div class="brand">Lamborghini</div>
<div class="navlinks"><span class="on">Models</span><span>Ownership</span><span>Racing</span><span>News</span></div>
</nav>
<section class="hero">
<div class="wedge"></div>
<div class="hero-content">
<div class="kicker">Driving Humans Beyond</div>
<h1>Brave. Unexpected.<br>Authentic.</h1>
<div class="row"><span class="btn-accent">Discover the Range</span><span class="btn-outline">Configure</span></div>
</div>
</section>
<div class="strip">
<div class="model m1"><div class="plate"></div><div class="stripe"></div><div class="info"><div class="cat">V12 · Coupe</div><div class="name">Revuelto</div></div></div>
<div class="model m2"><div class="plate"></div><div class="stripe"></div><div class="info"><div class="cat">V8 · Hybrid</div><div class="name">Temerario</div></div></div>
<div class="model m3"><div class="plate"></div><div class="stripe"></div><div class="info"><div class="cat">V12 · SUV</div><div class="name">Urus</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fb355e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fb355e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f89fb1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbfaf9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fb355e; color: #fbfaf9;
border: 1px solid #fbfaf9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fb355e; color: #f5f5f5;
border: 1px solid #fa5476; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f89fb1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb5577; color: #fbfaf9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body {
display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfaf9; color:#0d131c; box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.4px; margin:0; }
.navlinks { display:flex; gap:6px; }
.navlinks span { font-size:13px; font-weight:500; padding:8px 14px; border-radius:10px; color:#0d131c; }
.cta-pink { background:#fb355e; color:#fafafa; border:none; border-radius:16px; padding:0 20px; height:34px; font-size:13px; font-weight:500; }
main { flex:1 1 auto; display:flex; gap:24px; padding:6px 32px 12px; overflow:hidden; }
.left { flex:0 0 380px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.pill { display:inline-flex; align-items:center; background:rgba(255,230,231,.8); border:1px solid #ffe6e7; border-radius:16px; padding:6px 14px; font-size:12px; color:#0d131c; width:fit-content; }
.left h1 { font-size:34px; font-weight:700; letter-spacing:-1px; line-height:1.04; margin:0; }
.left p { font-size:14px; color:#4f5661; line-height:1.5; margin:0; max-width:340px; }
.cta-row { display:flex; gap:10px; margin-top:4px; }
.cta-big { background:#fb355e; color:#fafafa; border:none; border-radius:16px; padding:0 26px; height:40px; font-size:14px; font-weight:500; }
.distrow { display:flex; gap:8px; margin-top:10px; }
.dchip { width:30px; height:30px; border-radius:9px; }
.right { flex:1 1 auto; background:#ffffff; border:1px solid #e0e3e8; border-radius:16px; padding:20px; display:flex; gap:18px; overflow:hidden; }
.cover { flex:0 0 130px; height:130px; border-radius:12px; background:linear-gradient(135deg,#ffe6e7,#edf0f6); position:relative; }
.cover::after{ content:''; position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:50%; background:#fb355e; }
.player { flex:1 1 auto; display:flex; flex-direction:column; gap:10px; min-width:0; }
.ptitle { font-size:16px; font-weight:600; margin:0; }
.psub { font-size:12px; color:#4f5661; margin:0; }
.wave { display:flex; align-items:flex-end; gap:3px; height:34px; margin-top:4px; }
.wave i { width:4px; background:#fb355e; border-radius:2px; opacity:.85; }
.eplist { margin-top:6px; display:flex; flex-direction:column; gap:8px; }
.eprow { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:#edf0f6; border-radius:10px; font-size:12px; }
.eprow b { font-weight:600; font-size:12px; }
.eprow span { color:#4f5661; }
.badge-save { background:#ffe6e7; color:#962339; border-radius:9999px; padding:2px 8px; font-size:10px; font-weight:600; }
.stats { flex:0 0 96px; display:flex; gap:16px; padding:0 32px 20px; }
.stat { flex:1; background:#ffffff; border:1px solid #e0e3e8; border-radius:16px; padding:14px 18px; }
.stat h3 { font-size:20px; font-weight:700; margin:0 0 2px; }
.stat span { font-size:11px; color:#4f5661; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.stat .grow { color:#00c950; font-size:11px; font-weight:600; text-transform:none; }
</style></head>
<body>
<nav>
<p class="brand">Firstory</p>
<div class="navlinks"><span>Features</span><span>Monetize</span><span>Pricing</span><span>Blog</span></div>
<button class="cta-pink">Get started</button>
</nav>
<main>
<div class="left">
<span class="pill">First Wave in Asia-Pacific</span>
<h1>Start your media business with podcasting</h1>
<p>Host, distribute, and monetize your show everywhere listeners are — from one dashboard.</p>
<div class="cta-row"><button class="cta-big">Get started today</button></div>
<div class="distrow">
<span class="dchip" style="background:#edf0f6"></span>
<span class="dchip" style="background:#ffe6e7"></span>
<span class="dchip" style="background:#f6efe5"></span>
<span class="dchip" style="background:#edf0f6"></span>
</div>
</div>
<div class="right">
<div class="cover"></div>
<div class="player">
<div>
<p class="ptitle">Episode 42 — Building in Public</p>
<p class="psub">The Creator Lab · 38 min</p>
</div>
<div class="wave">
<i style="height:10px"></i><i style="height:22px"></i><i style="height:14px"></i><i style="height:30px"></i>
<i style="height:18px"></i><i style="height:26px"></i><i style="height:12px"></i><i style="height:20px"></i>
<i style="height:28px"></i><i style="height:16px"></i><i style="height:24px"></i><i style="height:12px"></i>
<i style="height:20px"></i><i style="height:30px"></i><i style="height:14px"></i><i style="height:22px"></i>
</div>
<div class="eplist">
<div class="eprow"><b>Ep. 41 — Pricing Your Show</b><span>34 min</span></div>
<div class="eprow"><b>Ep. 40 — Sponsor Outreach 101</b><span>29 min <span class="badge-save">NEW</span></span></div>
</div>
</div>
</div>
</main>
<div class="stats">
<div class="stat"><h3>128K</h3><span>Downloads</span></div>
<div class="stat"><h3>42</h3><span>Episodes <span class="grow">▲ 8 this month</span></span></div>
<div class="stat"><h3>$1,240</h3><span>Listener revenue</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffeb00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffeb00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7309; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffeb00; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffeb00; color: #111111;
border: 1px solid #d9c803; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7309; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6c500; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>KakaoPay detail mock</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:'KakaoSmall', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
* { box-sizing:border-box; }
.wrap { width:960px; height:640px; display:grid; grid-template-rows:64px 176px 108px 32px 1fr; padding:0 32px; gap:14px; }
.header { display:flex; align-items:center; justify-content:space-between; padding-top:14px; }
.header .brand { font-family:'KakaoBig','Pretendard',sans-serif; font-size:20px; font-weight:700; color:#000000; }
.bell { width:32px; height:32px; border-radius:999px; background:#f3f3f3; position:relative; }
.bell::after { content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:#ffeb00; top:6px; right:6px; }
.balance { border-radius:16px; background:linear-gradient(135deg,#141414,#000000); color:#ffffff; padding:22px 26px;
display:flex; flex-direction:column; justify-content:center; gap:8px; position:relative; overflow:hidden; }
.balance .glow { position:absolute; width:220px; height:220px; border-radius:50%; right:-60px; top:-80px;
background:radial-gradient(circle, rgba(255,235,0,0.28), rgba(255,235,0,0) 70%); }
.balance .label { font-size:13px; font-weight:400; color:#cccccc; position:relative; z-index:1; }
.balance .amount { font-size:34px; font-weight:700; letter-spacing:-0.6px; position:relative; z-index:1; }
.balance .sub { font-size:12px; color:#999999; position:relative; z-index:1; }
.actions { display:flex; gap:14px; }
.actions .a { flex:1; background:#f3f3f3; border-radius:24px; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:8px; font-size:12px; font-weight:400; color:#333333; }
.actions .icon { width:36px; height:36px; border-radius:999px; background:#ffeb00; display:flex; align-items:center; justify-content:center; }
.actions .icon.dark { background:#000000; }
.actions .glyph-send { width:12px; height:12px; border-left:2px solid #000000; border-bottom:2px solid #000000; transform:rotate(135deg); }
.actions .glyph-qr { width:16px; height:16px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:1px; }
.actions .glyph-qr span { background:#000000; }
.actions .glyph-qr span:nth-child(5) { background:transparent; }
.actions .glyph-plus { position:relative; width:14px; height:14px; }
.actions .glyph-plus::before,.actions .glyph-plus::after { content:''; position:absolute; background:#ffffff; }
.actions .glyph-plus::before { left:6px; top:0; width:2px; height:14px; }
.actions .glyph-plus::after { left:0; top:6px; width:14px; height:2px; }
.actions .glyph-more { display:flex; gap:3px; }
.actions .glyph-more span { width:4px; height:4px; border-radius:50%; background:#000000; }
.sectiontitle { font-size:14px; font-weight:700; color:#333333; align-self:end; }
.history { border-radius:16px; background:#eeeeee; padding:6px 18px; overflow:hidden; }
.row { display:flex; align-items:center; gap:14px; height:64px; border-bottom:1px solid #e2e2e2; }
.row:last-child { border-bottom:none; }
.row .dot { width:36px; height:36px; border-radius:999px; background:#ffffff; flex:0 0 36px; }
.row .mid { flex:1; }
.row .mid .t { font-size:14px; font-weight:400; color:#333333; }
.row .mid .d { margin-top:2px; font-size:12px; font-weight:400; color:#888888; }
.row .amt { font-size:14px; font-weight:700; color:#000000; }
</style></head>
<body>
<div class="wrap">
<div class="header">
<div class="brand">KakaoPay</div>
<div class="bell"></div>
</div>
<div class="balance">
<div class="glow"></div>
<div class="label">Available balance</div>
<div class="amount">$1,284.50</div>
<div class="sub">Linked to Everyday Checking</div>
</div>
<div class="actions">
<div class="a"><div class="icon"><div class="glyph-send"></div></div>Send</div>
<div class="a"><div class="icon dark"><span class="glyph-qr"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></div>Scan to Pay</div>
<div class="a"><div class="icon dark"><div class="glyph-plus"></div></div>Top up</div>
<div class="a"><div class="icon"><div class="glyph-more"><span></span><span></span><span></span></div></div>More</div>
</div>
<div class="sectiontitle">Recent activity</div>
<div class="history">
<div class="row"><div class="dot"></div><div class="mid"><div class="t">Corner Grocery</div><div class="d">Today, 9:41 AM</div></div><div class="amt">-$12.40</div></div>
<div class="row"><div class="dot"></div><div class="mid"><div class="t">Received from Alex</div><div class="d">Today, 8:02 AM</div></div><div class="amt">+$50.00</div></div>
<div class="row"><div class="dot"></div><div class="mid"><div class="t">Riverside Coffee</div><div class="d">Yesterday, 6:15 PM</div></div><div class="amt">-$4.20</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ab6e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ab6e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d4b8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008c5e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ab6e; color: #000000;
border: 1px solid #008c5e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ab6e; color: #f5f5f5;
border: 1px solid #27b784; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d4b8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00a66b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292f33; box-sizing:border-box;
font-family:"Spoqa Han Sans Neo", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:24px; font-size:15px; color:#434b4f; }
.navlinks .on { color:#008c5e; font-weight:700; }
.hero { padding:14px 30px 10px; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.29; margin:0 0 14px; max-width:640px; }
.cta { display:inline-block; background:#00ab6e; color:#fff; border-radius:10px; padding:16px 26px; font-size:16px; font-weight:700; }
.stats { display:flex; gap:50px; padding:20px 30px 0; }
.stat h2 { font-size:40px; font-weight:700; color:#00ab6e; margin:0; }
.stat span { font-size:13px; color:#717d85; }
.band { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:22px 30px 0; }
.card { background:#f5f8fa; border-radius:16px; padding:22px; }
.card h3 { font-size:18px; margin:0 0 8px; }
.card p { font-size:13px; color:#434b4f; margin:0; line-height:1.5; }
.card2 { background:#ffffff; border:1px solid #e4e9ed; border-radius:16px; padding:22px; }
.timeline { display:flex; gap:16px; padding:20px 30px 0; }
.tl { flex:1; text-align:center; }
.tl .y { font-size:14px; color:#5c6469; font-weight:300; }
.tl h4 { font-size:13px; margin:4px 0 0; }
footer { position:absolute; bottom:0; width:960px; padding:12px 30px; display:flex; justify-content:space-between;
font-size:11.5px; color:#434b4f; }
</style></head>
<body>
<nav>
<p class="brand">Spoqa</p>
<div class="navlinks"><span>About</span><span>Careers</span><span class="on">Growth</span><span>Tech Blog</span></div>
</nav>
<section class="hero">
<h1>We build convenient services that take the worry out of ordering ingredients</h1>
<span class="cta">Go to KitchenBoard</span>
</section>
<div class="stats">
<div class="stat"><h2>486,384 +</h2><span>Total orders</span></div>
<div class="stat"><h2>48,081 +</h2><span>Registered stores</span></div>
</div>
<div class="band">
<div class="card"><h3>AI order generation</h3><p>Automatically organize the ingredients you need with a single sentence.</p></div>
<div class="card2"><h3>Unpaid & payment management</h3><p>Check transactions with multiple suppliers on one screen.</p></div>
</div>
<div class="timeline">
<div class="tl"><div class="y">2011</div><h4>Dodo Point founded</h4></div>
<div class="tl"><div class="y">2015</div><h4>Spoqa Han Sans released</h4></div>
<div class="tl"><div class="y">2022</div><h4>KitchenBoard rebrand</h4></div>
<div class="tl"><div class="y">2024</div><h4>Surpassed 24,000 monthly orders</h4></div>
</div>
<footer>
<span>Spoqa is writing a new history together with small business owners</span>
<span>Spoqa · See job openings</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #16264a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #16264a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9198a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #16264a; color: #ffffff;
border: 1px solid #1c1c1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #16264a; color: #f5f5f5;
border: 1px solid #3a4765; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9198a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #172443; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.col { flex:1; overflow:hidden; }
.hero { height:220px; background:linear-gradient(160deg,#2c3f63,#16264A); position:relative; }
.eyebrow { position:absolute; top:18px; left:24px; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#D2A23E; }
.hotelname { position:absolute; bottom:18px; left:24px; font-size:26px; font-weight:700; color:#fff; }
.location { position:absolute; bottom:18px; right:24px; font-size:12px; color:rgba(255,255,255,0.75); }
.memberpanel { margin:18px 24px; background:#16264A; border-radius:14px; padding:16px 20px; display:flex; align-items:center; }
.tier { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#D2A23E; }
.points { font-size:26px; font-weight:800; color:#fff; margin-top:4px; }
.progwrap { margin-left:auto; width:220px; }
.progtext { font-size:11px; color:rgba(255,255,255,0.7); margin-bottom:6px; }
.progtrack { height:6px; background:#243A66; border-radius:3px; overflow:hidden; }
.progtrack i { display:block; height:6px; background:#B3852A; }
.sectitle { margin:18px 24px 10px; font-size:13px; font-weight:700; color:#5C5C63; }
.ratecard { margin:0 24px 10px; border:1.5px solid #E3E1DA; border-radius:12px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; }
.ratecard.sel { border-color:#B3852A; background:#F6F4EF; }
.ratename { font-size:14px; font-weight:700; }
.ratesub { font-size:11px; color:#5C5C63; margin-top:2px; }
.rateprice { font-size:15px; font-weight:700; }
.col2 { width:280px; flex:0 0 auto; padding:18px 20px; }
.keycard { background:#16264A; border-radius:16px; padding:18px; color:#fff; }
.keyeyebrow { font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#D2A23E; }
.keyglyph { font-size:32px; margin:12px 0; }
.keytext { font-size:13px; }
.tierbadges { display:flex; gap:6px; margin-top:16px; flex-wrap:wrap; }
.tb { font-size:10px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:4px 8px; border-radius:999px; border:1px solid #E3E1DA; color:#5C5C63; }
.tb.on { border-color:#B3852A; color:#B3852A; }
.bookingbar { position:absolute; left:0; right:0; bottom:0; background:#fff; border-top:1px solid #E3E1DA; padding:14px 24px;
display:flex; align-items:center; justify-content:space-between; }
.bprice { font-size:18px; font-weight:700; }
.bpoints { font-size:11px; color:#5C5C63; }
.bookbtn { background:#B3852A; color:#fff; font-weight:700; font-size:14px; padding:10px 24px; border-radius:8px; }
</style></head>
<body>
<div class="wrap">
<div class="col">
<div class="hero"><span class="eyebrow">The Ritz-Carlton</span><span class="hotelname">Marriott Bonvoy (iOS)</span><span class="location">Kyoto, Japan · ★★★★★</span></div>
<div class="memberpanel">
<div><div class="tier">Titanium Elite</div><div class="points">124,500 pts</div></div>
<div class="progwrap"><div class="progtext">32,000 pts to next free night</div><div class="progtrack"><i style="width:74%"></i></div></div>
</div>
<div class="sectitle">Select a rate</div>
<div class="ratecard sel"><div><div class="ratename">Member Rate</div><div class="ratesub">Earn 2,480 points</div></div><div class="rateprice">$412/night</div></div>
<div class="ratecard"><div><div class="ratename">Points Redemption</div><div class="ratesub">No cash due</div></div><div class="rateprice">45,000 pts</div></div>
<div class="ratecard"><div><div class="ratename">Flexible</div><div class="ratesub">Free cancellation</div></div><div class="rateprice">$452/night</div></div>
</div>
<div class="col2">
<div class="keycard">
<div class="keyeyebrow">Mobile Key</div>
<div class="keyglyph">🔑</div>
<div class="keytext">Skip the front desk<br/>Tap to unlock · Room 1408</div>
</div>
<div class="tierbadges">
<span class="tb">Silver</span><span class="tb">Gold</span><span class="tb">Platinum</span><span class="tb on">Titanium</span><span class="tb">Ambassador</span>
</div>
</div>
</div>
<div class="bookingbar"><div><div class="bprice">$412 / night</div><div class="bpoints">Earn 2,480 points</div></div><div class="bookbtn">Book</div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c471; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c471; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87dfba; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c471; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c471; color: #000000;
border: 1px solid #27cc86; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87dfba; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29cd88; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav.gnb { height:64px; flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #dee2e6; background:#ffffff; }
.logo { font-size:20px; font-weight:800; letter-spacing:-0.4px; color:#212529; margin:0; display:flex; align-items:center; gap:4px; }
.logo .dot { width:8px; height:8px; border-radius:999px; background:#00c471; display:inline-block; }
.searchbar { flex:1; max-width:360px; margin:0 24px; height:40px; display:flex; align-items:center;
background:#ffffff; border:1px solid #dee2e6; border-radius:999px; padding-left:16px; }
.searchbar span { font-size:13px; color:#adb5bd; flex:1; }
.searchbar button { width:32px; height:32px; margin:4px; border:none; border-radius:999px;
background:#00c471; position:relative; flex:0 0 32px; }
.searchbar button::before { content:''; position:absolute; width:9px; height:9px; border:1.5px solid #fff;
border-radius:50%; top:8px; left:8px; }
.searchbar button::after { content:''; position:absolute; width:5px; height:1.5px; background:#fff;
top:18px; left:16px; transform:rotate(45deg); }
.navactions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.nav-action { background:#f8f9fa; color:#495057; border:none; border-radius:32px; height:36px;
padding:0 22px; font-size:14px; font-weight:600; white-space:nowrap; }
.nav-cta { background:#00c471; color:#ffffff; border:none; border-radius:999px; height:36px;
padding:0 20px; font-size:14px; font-weight:600; white-space:nowrap; }
.subnav { flex:0 0 52px; height:52px; display:flex; align-items:center; gap:8px; padding:0 32px;
border-bottom:1px solid #f1f3f5; }
.tab { border-radius:9999px; padding:10px 16px; font-size:14px; font-weight:700; white-space:nowrap; }
.tab.selected { background:#25262b; color:#ffffff; }
.tab.plain { background:transparent; color:#495057; font-weight:400; }
.hero { flex:0 0 84px; height:84px; padding:12px 32px; display:flex; flex-direction:column;
justify-content:center; gap:4px; }
.hero h1 { margin:0; font-size:22px; font-weight:800; color:#212529; letter-spacing:-0.3px; }
.hero p { margin:0; font-size:14px; color:#495057; }
.courses { flex:1; padding:14px 32px 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { border:1px solid #dee2e6; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; background:#ffffff; }
.thumb { height:132px; position:relative; }
.thumb.c1 { background:linear-gradient(135deg,#00c471 0%,#e3fafc 100%); }
.thumb.c2 { background:linear-gradient(135deg,#1098ad 0%,#e7f5ff 100%); }
.thumb.c3 { background:linear-gradient(135deg,#25262b 0%,#00a760 100%); }
.cardbody { padding:12px 14px 14px; display:flex; flex-direction:column; gap:7px; }
.badges { display:flex; gap:6px; }
.badge { border-radius:4px; padding:2px 8px; font-size:11px; font-weight:700; line-height:1.64;
text-transform:uppercase; letter-spacing:0.02em; }
.badge.info { background:#e7f5ff; color:#228be6; }
.badge.cyan { background:#e3fafc; color:#1098ad; }
.card h3 { margin:0; font-size:15px; font-weight:700; color:#212529; line-height:1.3; }
.card .instr { margin:0; font-size:13px; color:#495057; }
.meta { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.rating { font-size:12px; color:#adb5bd; }
.price { font-size:15px; font-weight:700; color:#212529; }
footer { flex:0 0 40px; height:40px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-top:1px solid #dee2e6; font-size:12px; color:#495057; }
</style></head>
<body>
<nav class="gnb">
<p class="logo"><span class="dot"></span>Inflearn</p>
<div class="searchbar"><span>Search for courses, mentors, roadmaps</span><button aria-hidden="true"></button></div>
<div class="navactions">
<button class="nav-action">Roadmaps</button>
<button class="nav-action">Community</button>
<button class="nav-cta">Sign up</button>
</div>
</nav>
<div class="subnav">
<span class="tab selected">All</span>
<span class="tab plain">Backend</span>
<span class="tab plain">Frontend</span>
<span class="tab plain">DevOps</span>
<span class="tab plain">Data Science</span>
</div>
<section class="hero">
<h1>Grow your career, one course at a time.</h1>
<p>Real instructors. Practical curriculum. Learn on your own schedule.</p>
</section>
<section class="courses">
<div class="card">
<div class="thumb c1"></div>
<div class="cardbody">
<div class="badges"><span class="badge info">New</span><span class="badge cyan">Hands-on</span></div>
<h3>Backend Fundamentals with Spring</h3>
<p class="instr">by Jamie Lee</p>
<div class="meta"><span class="rating">★ 4.9 (1,204)</span><span class="price">$49.00</span></div>
</div>
</div>
<div class="card">
<div class="thumb c2"></div>
<div class="cardbody">
<div class="badges"><span class="badge cyan">Roadmap</span></div>
<h3>Frontend Career Roadmap 2026</h3>
<p class="instr">by Alex Kim</p>
<div class="meta"><span class="rating">★ 4.8 (860)</span><span class="price">$39.00</span></div>
</div>
</div>
<div class="card">
<div class="thumb c3"></div>
<div class="cardbody">
<div class="badges"><span class="badge info">Bestseller</span></div>
<h3>Cloud Infrastructure & DevOps</h3>
<p class="instr">by Morgan Park</p>
<div class="meta"><span class="rating">★ 4.9 (2,013)</span><span class="price">$59.00</span></div>
</div>
</div>
</section>
<footer>
<span>© Inflearn · Learn without limits</span>
<span>Courses · Roadmaps · Community</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #2C2C2C;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #2C2C2C;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #2C2C2C; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; background: #28A99E; color: #FFFFFF;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; background: #FFFFFF; color: #28A99E;
border: 1px solid #28A99E; border-radius: 9999px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #2C2C2C;
border: 1px solid #cacaca; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.46; background: #F9F7F4; color: #4CAF7D;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#2C2C2C; box-sizing:border-box;
font-family:'Nunito','Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:19px; font-weight:800; color:#28A99E; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#767676; font-weight:600; }
.navlinks span.on { color:#28A99E; }
.cart { background:#28A99E; color:#fff; border-radius:9999px; padding:8px 18px; font-size:12px; font-weight:700; }
.wrap { display:flex; height:518px; padding:0 36px; gap:32px; align-items:center; }
.photo { width:300px; height:88%; border-radius:28px; position:relative; overflow:hidden;
background:conic-gradient(from 45deg, #F07A5B 0deg 90deg, #F5C844 90deg 180deg, #B8A8D4 180deg 270deg, #7EC8E3 270deg 360deg); }
.photo::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.5) 0, transparent 40%),
radial-gradient(circle at 70% 70%, rgba(255,255,255,.4) 0, transparent 35%); }
.badge-new { position:absolute; top:16px; left:16px; background:#FFFFFF; color:#28A99E; font-size:11px; font-weight:700; padding:5px 12px; border-radius:9999px; }
.info { flex:1; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; color:#767676; font-weight:600; }
.info h1 { font-size:26px; font-weight:700; margin:0; }
.print-row { display:flex; gap:8px; }
.print { width:28px; height:28px; border-radius:9999px; }
.p1{background:#F07A5B}.p2{background:#F5C844}.p3{background:#B8A8D4}.p4{background:#7EC8E3}.p5{background:#28A99E}
.eco-strip { display:flex; gap:14px; font-size:11px; color:#4A4A4A; font-weight:600; }
.desc { font-size:13px; color:#4A4A4A; line-height:1.65; max-width:420px; }
.ships-note { font-size:12px; color:#28A99E; font-weight:700; }
.buy-row { display:flex; gap:12px; margin-top:auto; }
.btn-buy { flex:1; background:#28A99E; color:#fff; border:none; border-radius:9999px; padding:15px; font-size:13px; font-weight:700; }
.btn-wish { border:1.5px solid #E5E5E5; border-radius:9999px; padding:15px 20px; font-size:13px; background:#FDF6EE; }
footer { height:62px; background:#F9F7F4; display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; color:#767676; }
</style></head>
<body>
<nav>
<p class="brand">Abby And Finn</p>
<div class="navlinks"><span>Diapers</span><span class="on">Prints</span><span>Wipes</span><span>How It Works</span></div>
<span class="cart">Box (0)</span>
</nav>
<div class="wrap">
<div class="photo"><span class="badge-new">New Print</span></div>
<div class="info">
<span class="cat">Diaper Subscription · Size 3</span>
<h1>Sunbeam Meadow Print</h1>
<div class="print-row"><div class="print p1"></div><div class="print p2"></div><div class="print p3"></div><div class="print p4"></div><div class="print p5"></div></div>
<div class="eco-strip"><span>✓ Plant-Based Core</span><span>✓ FSC Certified</span><span>✓ Fragrance-Free</span></div>
<p class="desc">Pick your print, we handle the rest — sized right, timed right, delivered every four weeks so nothing ever runs out at 2am.</p>
<span class="ships-note">Ships every 4 weeks · pause or skip anytime</span>
<div class="buy-row">
<button class="btn-buy">Add to Box</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© Abby And Finn</span><span>Sizing Guide · FAQ · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #03c75a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #03c75a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #88e0af; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #03c75a; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #03c75a; color: #000000;
border: 1px solid #2ace73; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #88e0af; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #11b772; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.searchBar { padding:18px 40px 0; }
.logoRow { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.logoMark { width:26px; height:26px; border-radius:7px; background:#03c75a; }
.brand { font-size:16px; font-weight:700; color:#2e2e2e; margin:0; }
.searchAssembly { height:58px; border-bottom:2px solid #03c75a; display:flex; align-items:center; padding:0 4px; }
.queryText { flex:1; font-size:21px; font-weight:700; color:#000000; letter-spacing:-0.4px; }
.submitIcon { width:36px; height:36px; border-radius:9999px; background:#f2f2f2; display:flex; align-items:center;
justify-content:center; color:#2e2e2e; font-size:12px; }
.tabs { display:flex; gap:4px; padding:10px 36px 0; border-bottom:1px solid #e5e5e5; }
.tab { padding:6px 12px 14px; font-size:16px; font-weight:600; color:#8c8c8c; }
.tab.active { color:#1c1c1c; border-bottom:2px solid #03c75a; }
main { display:flex; gap:28px; padding:18px 36px 0; height:400px; }
.colLeft { flex:1; }
.chipsRow { display:flex; gap:8px; margin-bottom:14px; }
.chip { background:#ffffff; color:#0c43b7; border:1px solid #e5e5e5; border-radius:18px; padding:4px 12px 4px 10px;
font-size:13px; }
.card { background:#ffffff; border-radius:12px; padding:14px 0; border-bottom:1px solid #e5e5e5; }
.card:last-child { border-bottom:none; }
.cardUrl { font-size:12px; color:#03c75a; margin-bottom:3px; }
.cardTitle { font-size:18px; font-weight:600; color:#1c1c1c; line-height:1.33; margin:0 0 4px; letter-spacing:-0.16px; }
.cardSnippet { font-size:13px; color:#8c8c8c; line-height:1.5; max-width:520px; }
.colRight { width:230px; flex:0 0 auto; }
.panel { background:#ffffff; border:1px solid #e5e5e5; border-radius:12px; padding:16px; }
.panelTitle { font-size:13px; font-weight:600; color:#1c1c1c; margin:0 0 10px; }
.relatedChips { display:flex; flex-wrap:wrap; gap:8px; }
.relatedChip { background:#ffffff; color:#0c43b7; border:1px solid #e5e5e5; border-radius:18px; padding:4px 12px;
font-size:12px; }
.pagingRow { display:flex; gap:8px; padding:14px 36px 0; align-items:center; }
.pageBtn { background:#ffffff; color:#2e2e2e; border:1px solid rgba(0,0,0,.15); border-radius:9999px; height:32px;
padding:0 14px; display:flex; align-items:center; font-size:13px; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.pageBtn.current { background:#03c75a; color:#ffffff; border-color:#03c75a; }
footer { height:34px; border-top:1px solid #e5e5e5; padding:0 36px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#8c8c8c; background:#ffffff; margin-top:auto; }
</style></head>
<body>
<div class="searchBar">
<div class="logoRow">
<div class="logoMark"></div>
<p class="brand">Naver</p>
</div>
<div class="searchAssembly">
<span class="queryText">interior design ideas for small apartments</span>
<div class="submitIcon">Go</div>
</div>
</div>
<div class="tabs">
<div class="tab active">All</div>
<div class="tab">Images</div>
<div class="tab">VIEW</div>
<div class="tab">News</div>
<div class="tab">Shopping</div>
<div class="tab">Map</div>
</div>
<main>
<div class="colLeft">
<div class="chipsRow">
<div class="chip">Related Images</div>
<div class="chip">Recent Posts</div>
<div class="chip">Top Rated</div>
</div>
<div class="card">
<div class="cardUrl">home.example · design</div>
<p class="cardTitle">12 Small Apartment Layouts That Feel Twice as Big</p>
<p class="cardSnippet">A room-by-room breakdown of furniture placement, light color palettes, and multipurpose storage for compact living spaces.</p>
</div>
<div class="card">
<div class="cardUrl">studio.example · guide</div>
<p class="cardTitle">Studio Apartment Zoning: Sleep, Work, and Dine in One Room</p>
<p class="cardSnippet">How to use rugs, lighting, and low shelving to create visual boundaries without walls.</p>
</div>
<div class="card">
<div class="cardUrl">renters.example · tips</div>
<p class="cardTitle">Rental-Friendly Upgrades: No Drilling, Full Impact</p>
<p class="cardSnippet">Peel-and-stick finishes, tension rods, and modular shelving picked for easy move-out.</p>
</div>
</div>
<div class="colRight">
<div class="panel">
<p class="panelTitle">Related Keywords</p>
<div class="relatedChips">
<div class="relatedChip">Small Kitchen</div>
<div class="relatedChip">Studio Storage</div>
<div class="relatedChip">Compact Desk</div>
<div class="relatedChip">Loft Bed</div>
</div>
</div>
</div>
</main>
<div class="pagingRow">
<div class="pageBtn">Prev</div>
<div class="pageBtn current">1</div>
<div class="pageBtn">2</div>
<div class="pageBtn">3</div>
<div class="pageBtn">Next</div>
</div>
<footer>
<span>© Naver</span>
<span>Naver · Search · Shopping · Map</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #5b5b5b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #5b5b5b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #5b5b5b; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #c1e9ff; color: #5b5b5b;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #5b5b5b;
border: 1px solid #c1e9ff; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #5b5b5b;
border: 1px solid #d6d6d6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #eceafb; color: #5b5b5b;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#5b5b5b; box-sizing:border-box;
font-family:'Shopify Sans Medium','Shopify Sans Regular',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:18px; font-weight:600; color:#3d3d3d; }
.navlinks { display:flex; gap:24px; font-size:12px; color:#8a8a8a; }
.navlinks span.on { color:#3d3d3d; font-weight:600; }
.cart { background:#c1e9ff; color:#3d3d3d; border-radius:9999px; padding:8px 18px; font-size:12px; font-weight:600; }
.wrap { display:flex; height:518px; padding:0 36px; gap:36px; align-items:center; }
.photo { width:320px; height:88%; background:linear-gradient(180deg,#ecf7fc,#e1fcff); border-radius:20px; display:flex; align-items:center; justify-content:center; position:relative; }
.pan { width:200px; height:120px; border-radius:50%/40%; background:linear-gradient(160deg,#5b5b5b,#2f2f2f); position:relative; }
.pan::after { content:''; position:absolute; right:-56px; top:44px; width:64px; height:16px; border-radius:9999px; background:#3d3d3d; }
.new-badge { position:absolute; top:18px; left:18px; background:#eceafb; color:#5b5b5b; font-size:11px; font-weight:600; padding:5px 12px; border-radius:9999px; }
.info { flex:1; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; color:#8a8a8a; }
.info h1 { font-size:27px; font-weight:600; margin:0; color:#3d3d3d; }
.stars { font-size:12px; color:#5b5b5b; }
.price { font-size:20px; font-weight:600; color:#3d3d3d; }
.size-row { display:flex; gap:8px; }
.size-opt { border:1px solid #d4e8f0; border-radius:12px; padding:8px 16px; font-size:12px; background:#ecf7fc; }
.size-opt.on { background:#c1e9ff; border-color:#c1e9ff; font-weight:600; }
.desc { font-size:13px; color:#5b5b5b; line-height:1.65; max-width:420px; }
.buy-row { display:flex; gap:12px; margin-top:auto; }
.btn-buy { flex:1; background:#c1e9ff; color:#3d3d3d; border:none; border-radius:9999px; padding:14px; font-size:13px; font-weight:600; }
.btn-wish { border:1px solid #d4e8f0; border-radius:9999px; padding:14px 20px; font-size:13px; background:#ffffff; }
footer { height:62px; background:#f4f5f6; display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; color:#8a8a8a; }
</style></head>
<body>
<nav>
<p class="brand">Abbio</p>
<div class="navlinks"><span>Cookware</span><span class="on">Sauté Pan</span><span>Bakeware</span><span>Recipes</span></div>
<span class="cart">Cart · 1</span>
</nav>
<div class="wrap">
<div class="photo"><span class="new-badge">New</span><div class="pan"></div></div>
<div class="info">
<span class="cat">Cookware · Ceramic Nonstick</span>
<h1>The Everyday Sauté Pan</h1>
<span class="stars">★★★★★ 4.9 (1,204 reviews)</span>
<span class="price">$115.00</span>
<div class="size-row">
<span class="size-opt on">3.5 qt</span>
<span class="size-opt">5 qt</span>
</div>
<p class="desc">Ceramic nonstick that doesn't ask you to change how you cook — oven-safe, dishwasher-safe, and calm enough to hand down. A quiet morning in a well-loved kitchen.</p>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© Abbio</span><span>Care Guide · Shipping · Recipes</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ef7014; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ef7014; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f2b990; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4b50; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ef7014; color: #000000;
border: 1px solid #ff4b50; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ef7014; color: #f5f5f5;
border: 1px solid #f08538; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f2b990; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f26a1e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing: border-box; }
.utility { height:28px; display:flex; justify-content:flex-end; align-items:center; gap:16px;
padding:0 24px; font-size:12px; font-weight:400; color:#666666; border-bottom:1px solid #d9d9d9; }
header { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:1px solid #d9d9d9; }
.brand { font-size:20px; font-weight:700; color:#333333; }
.brand span { color:#ef7014; }
.search-shell { flex:0 0 380px; height:36px; border:1px solid #d9d9d9; border-radius:2px;
display:flex; align-items:center; padding:0 15px; }
.search-shell .txt { font-size:14px; font-weight:400; color:#999999; }
.icons { display:flex; gap:20px; }
.icon-item { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px;
font-weight:400; color:#666666; }
.icon-item .dot { width:18px; height:18px; border-radius:50%; border:1.5px solid #666666; }
nav.tabs { height:36px; display:flex; align-items:center; gap:22px; padding:0 24px;
border-bottom:1px solid #d9d9d9; }
.tab { font-size:16px; font-weight:400; color:#666666; padding-bottom:2px; }
.tab.active { color:#333333; border-bottom:2px solid #ef7014; }
.grid-wrap { padding:16px 24px; }
.pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.pcard { background:#ffffff; border-radius:12px; overflow:hidden; }
.photo { height:96px; position:relative; }
.g1 { background:linear-gradient(135deg,#f7c59f,#ef7014); }
.g2 { background:linear-gradient(135deg,#e8d5c4,#c99a6c); }
.g3 { background:linear-gradient(135deg,#f3d9ce,#d98a6b); }
.g4 { background:linear-gradient(135deg,#e0e6d9,#a3b18a); }
.rank { position:absolute; top:0; left:10px; background:#ef7014; color:#ffffff; font-size:16px;
font-weight:700; border-radius:0 0 6px 6px; padding:2px 10px; }
.pill { position:absolute; bottom:8px; left:8px; right:8px; background:#ef7014; color:#ffffff;
border-radius:100px; height:24px; font-size:11px; font-weight:700; display:flex; align-items:center;
justify-content:center; }
.pbody { padding:10px; }
.pbody .maker { font-size:11px; font-weight:400; color:#999999; margin:0 0 2px; }
.pbody .name { font-size:14px; font-weight:400; color:#333333; margin:0 0 6px; line-height:1.3; }
.price-row { display:flex; align-items:baseline; gap:6px; }
.sale { font-size:14px; font-weight:700; color:#ff4b50; }
.orig { font-size:11px; font-weight:400; color:#999999; text-decoration:line-through; }
.rating { font-size:11px; font-weight:400; color:#ffaf00; margin-top:4px; }
.outline-btn { margin-top:8px; display:inline-flex; align-items:center; justify-content:center;
height:26px; padding:0 10px; font-size:12px; font-weight:700; color:#ef7014;
border:1px solid #ef7014; border-radius:2px; }
</style></head>
<body>
<div class="utility"><span>Log in</span><span>Sign up</span><span>Help</span></div>
<header>
<span class="brand">idus (Backpackr)<span>.</span></span>
<div class="search-shell"><span class="txt">Looking for a maker or a work?</span></div>
<div class="icons">
<div class="icon-item"><div class="dot"></div>Wishlist</div>
<div class="icon-item"><div class="dot"></div>My Page</div>
<div class="icon-item"><div class="dot"></div>Cart</div>
</div>
</header>
<nav class="tabs">
<span class="tab active">Best</span>
<span class="tab">Gift Guide</span>
<span class="tab">Sale</span>
<span class="tab">Discover</span>
<span class="tab">Live</span>
<span class="tab">New Works</span>
<span class="tab">Community</span>
</nav>
<div class="grid-wrap">
<div class="pgrid">
<div class="pcard">
<div class="photo g1"><span class="rank">1</span><span class="pill">128 purchased recently</span></div>
<div class="pbody">
<p class="maker">Studio Haneul</p>
<p class="name">Hand-thrown ceramic mug</p>
<div class="price-row"><span class="orig">$32</span><span class="sale">$24</span></div>
<div class="rating">★★★★★ 4.9</div>
</div>
</div>
<div class="pcard">
<div class="photo g2"><span class="rank">2</span></div>
<div class="pbody">
<p class="maker">Maru Leather</p>
<p class="name">Full-grain card wallet</p>
<div class="price-row"><span class="sale">$41</span></div>
<div class="rating">★★★★★ 4.8</div>
</div>
</div>
<div class="pcard">
<div class="photo g3"><span class="rank">3</span></div>
<div class="pbody">
<p class="maker">Soft Ember Candles</p>
<p class="name">Soy wax candle, cedar</p>
<div class="price-row"><span class="orig">$19</span><span class="sale">$15</span></div>
<div class="rating">★★★★☆ 4.6</div>
</div>
</div>
<div class="pcard">
<div class="photo g4"></div>
<div class="pbody">
<p class="maker">Jieum Studio</p>
<p class="name">Linen table runner, natural</p>
<div class="price-row"><span class="sale">$28</span></div>
<span class="outline-btn">Follow</span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #141414; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #141414; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #909090; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e50914; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141414; color: #e50914;
border: 1px solid #e50914; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #141414; color: #f5f5f5;
border: 1px solid #383838; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #909090; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #351214; color: #e50914;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141414; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; width:960px; height:340px;
background: linear-gradient(120deg, #3a1010 0%, #1e1e1e 60%, #141414 100%); overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0;
background: radial-gradient(ellipse at 30% 30%, rgba(229,9,20,0.25), transparent 55%); }
.hero-grad { position:absolute; left:0; right:0; bottom:0; height:60%;
background: linear-gradient(180deg, rgba(20,20,20,0) 0%, #141414 100%); }
.wordmark { position:absolute; top:20px; left:32px; font-weight:800; font-size:22px; letter-spacing:-0.5pt;
color:#E50914; font-family:Arial, sans-serif; }
.heroinfo { position:absolute; left:32px; bottom:26px; width:520px; }
.genres { font-size:13px; font-weight:500; color:#fff; opacity:0.9; margin-bottom:10px; }
.titlelogo { font-size:40px; font-weight:800; letter-spacing:-1pt; line-height:1.02; margin-bottom:14px; color:#fff; }
.btnrow { display:flex; gap:10px; }
.btn-primary { background:#E50914; color:#fff; border-radius:4px; padding:12px 26px; font-size:15px; font-weight:700;
display:flex; align-items:center; gap:8px; }
.btn-secondary { background:rgba(255,255,255,0.15); color:#fff; border-radius:4px; padding:11px 20px; font-size:14px; font-weight:600; }
.rows { padding:14px 0 0; }
.row-head { font-size:16px; font-weight:700; padding:0 32px 8px; }
.row-strip { display:flex; gap:8px; padding:0 32px 16px; overflow:hidden; }
.tile { flex:none; width:118px; height:170px; border-radius:4px; background-size:cover; background-position:center; position:relative; }
.t1 { background: linear-gradient(160deg,#4a1620,#1a1a2e); }
.t2 { background: linear-gradient(160deg,#123024,#0e1a1a); }
.t3 { background: linear-gradient(160deg,#3a2a10,#1a140a); }
.t4 { background: linear-gradient(160deg,#241a3a,#12101c); }
.t5 { background: linear-gradient(160deg,#2a1a3a,#160a1c); }
.t6 { background: linear-gradient(160deg,#1a2a3a,#0a121c); }
.top10 { display:flex; gap:14px; padding:0 32px 16px; align-items:flex-end; }
.num10 { font-size:150px; font-weight:900; line-height:0.7; color:#141414;
-webkit-text-stroke: 2px rgba(255,255,255,0.35); margin-right:-38px; z-index:1; font-family:Arial, sans-serif; }
.top10 .tile { z-index:2; }
.cw-tile { position:relative; }
.cw-bar-track { position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,0.3); }
.cw-bar-fill { position:absolute; left:0; bottom:0; height:2px; width:60%; background:#E50914; }
</style></head>
<body>
<div class="hero">
<div class="wordmark">NETFLIX</div>
<div class="hero-grad"></div>
<div class="heroinfo">
<div class="genres">Gripping • Dramas • Thrillers</div>
<div class="titlelogo">Netflix (iOS)</div>
<div class="btnrow">
<div class="btn-secondary">＋ My List</div>
<div class="btn-primary">▶ Play</div>
<div class="btn-secondary">ⓘ Info</div>
</div>
</div>
</div>
<div class="rows">
<div class="row-head">Continue Watching</div>
<div class="row-strip">
<div class="tile t1 cw-tile"><div class="cw-bar-track"></div><div class="cw-bar-fill"></div></div>
<div class="tile t2 cw-tile"><div class="cw-bar-track"></div><div class="cw-bar-fill" style="width:30%"></div></div>
<div class="tile t3 cw-tile"><div class="cw-bar-track"></div><div class="cw-bar-fill" style="width:85%"></div></div>
<div class="tile t4 cw-tile"><div class="cw-bar-track"></div><div class="cw-bar-fill" style="width:12%"></div></div>
<div class="tile t5 cw-tile"><div class="cw-bar-track"></div><div class="cw-bar-fill" style="width:50%"></div></div>
</div>
<div class="row-head">Top 10 in Your Country Today</div>
<div class="top10">
<div><span class="num10">1</span></div><div class="tile t2"></div>
<div><span class="num10">2</span></div><div class="tile t3"></div>
<div><span class="num10">3</span></div><div class="tile t4"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dc64; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dc64; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096c36; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dc64; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dc64; color: #111111;
border: 1px solid #03bc57; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096c36; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29e27d; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:100%; }
/* left rail: search + creator entry, black on white */
nav.top { position:absolute; top:0; left:0; right:0; height:56px; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; border-bottom:1px solid #ececec; z-index:5; background:#fff; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.3px; }
.search { flex:1; max-width:340px; margin:0 24px; height:35px; border:1px solid #ececec; border-radius:0;
display:flex; align-items:center; padding:0 65px 0 10px; font-size:14px; color:#000; background:#fff; }
.creator { background:#00dc64; color:#000; border-radius:4px; padding:11px 22px; font-size:12px; font-weight:700; white-space:nowrap; }
.body { position:absolute; top:56px; left:0; right:0; bottom:0; padding:20px 200px 0 28px; overflow:hidden; }
.tabs { display:flex; gap:26px; border-bottom:1px solid #ececec; padding-bottom:10px; margin-bottom:16px; }
.tab { font-size:15px; font-weight:500; color:#666666; line-height:1.4; }
.tab.on { color:#00dc64; font-weight:700; }
.weekday-head { background:#00dc64; color:#fff; font-size:20px; font-weight:600; border-radius:4px;
padding:9px 16px; display:inline-block; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px 12px; }
.card { display:flex; flex-direction:column; gap:6px; }
.thumb { width:100%; aspect-ratio:3/4; border-radius:6px;
background-image:
linear-gradient(145deg, rgba(0,220,100,0.16), rgba(0,0,0,0.02)),
repeating-linear-gradient(120deg, rgba(0,0,0,0.05) 0 10px, transparent 10px 22px);
background-color:#f6f6f6; position:relative; overflow:hidden; }
.thumb::after { content:''; position:absolute; left:10px; right:10px; bottom:12px; height:6px; border-radius:3px;
background:rgba(0,0,0,0.08); }
.thumb::before { content:''; position:absolute; left:10px; top:12px; width:38px; height:10px; border-radius:3px;
background:#00dc64; opacity:0.85; }
.ctitle { font-size:13px; font-weight:700; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cauthor { font-size:11px; color:#666666; }
.tags { display:flex; gap:4px; flex-wrap:wrap; }
.tag { background:#f6f6f6; color:#666666; font-size:11px; font-weight:500; border-radius:4px; padding:1px 8px; }
.side-rank { position:absolute; right:28px; top:88px; width:150px; background:#fff; border:1px solid #ececec;
border-radius:6px; padding:14px 14px 6px; }
.side-rank h4 { font-size:13px; font-weight:700; margin:0 0 10px; }
.rank-item { display:flex; align-items:center; gap:8px; font-size:12px; padding:6px 0; border-top:1px solid #f6f6f6; }
.rank-item:first-child { border-top:none; }
.rank-num { font-size:13px; font-weight:700; color:#00dc64; width:16px; }
.rank-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#000; }
.page { position:absolute; bottom:16px; left:28px; display:flex; gap:14px; font-size:14px; font-weight:500; color:#000; }
.page .active { color:#00dc64; }
</style></head>
<body>
<nav class="top">
<span class="brand">Naver Webtoon</span>
<div class="search">Search comics, creators, tags</div>
<span class="creator">Become a Creator</span>
</nav>
<div class="body">
<div class="tabs">
<span class="tab on">Home</span>
<span class="tab">Webtoon</span>
<span class="tab">Best Challenge</span>
<span class="tab">Originals</span>
<span class="tab">Genre</span>
</div>
<span class="weekday-head">Monday New Episodes</span>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">Midnight Delivery</div><div class="cauthor">John Carter</div><div class="tags"><span class="tag">Fantasy</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Iron Orchard</div><div class="cauthor">Sarah Lee</div><div class="tags"><span class="tag">Drama</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Second Life Guild</div><div class="cauthor">Daniel Moore</div><div class="tags"><span class="tag">Action</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Paper Moon Diner</div><div class="cauthor">Amy Clark</div><div class="tags"><span class="tag">Slice of Life</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Ghost Semester</div><div class="cauthor">Ryan Park</div><div class="tags"><span class="tag">Horror</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Quiet Reactor</div><div class="cauthor">Emily Kim</div><div class="tags"><span class="tag">SF</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">The Last Bloom</div><div class="cauthor">Nathan Reed</div><div class="tags"><span class="tag">Romance</span></div></div>
</div>
<div class="page">
<span class="active">1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
</div>
<div class="side-rank">
<h4>Best Challenge Rank</h4>
<div class="rank-item"><span class="rank-num">1</span><span class="rank-name">Rooftop Garden Club</span></div>
<div class="rank-item"><span class="rank-num">2</span><span class="rank-name">Neon Alley Diaries</span></div>
<div class="rank-item"><span class="rank-num">3</span><span class="rank-name">Wandering Merchant</span></div>
<div class="rank-item"><span class="rank-num">4</span><span class="rank-name">Small Town Ace</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f62fe; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f62fe; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8eb3f9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f62fe; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f62fe; color: #f5f5f5;
border: 1px solid #347afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8eb3f9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #357bfe; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#161616; box-sizing:border-box;
font-family:"IBM Plex Sans","IBM Plex Sans KR",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing: border-box; }
.shell { height:48px; background:#161616; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.shell-left { display:flex; align-items:center; gap:10px; }
.shell-mark { width:16px; height:16px; background:#0f62fe; }
.shell-name { font-size:14px; font-weight:600; letter-spacing:0.02em; }
.shell-nav { display:flex; gap:22px; font-size:13px; opacity:0.72; }
.shell-right { display:flex; align-items:center; gap:14px; font-size:12px; opacity:0.72; }
.shell-dot { width:22px; height:22px; border-radius:0; background:#353535; display:flex;
align-items:center; justify-content:center; font-size:11px; }
.content { padding:28px 40px 0; }
.crumb { font-size:12px; font-weight:400; letter-spacing:0.32px; text-transform:uppercase;
color:#525252; margin:0 0 14px; }
h1 { font-size:38px; font-weight:300; line-height:1.14; letter-spacing:-0.2px; margin:0 0 12px;
max-width:560px; color:#161616; }
.lede { font-size:16px; font-weight:400; line-height:24px; color:#525252; margin:0 0 20px; max-width:480px; }
.cta-row { display:flex; align-items:center; gap:24px; margin-bottom:26px; }
.cta-primary { background:#0f62fe; color:#ffffff; border:1px solid transparent; border-radius:4px;
padding:14px 63px 14px 15px; height:48px; font-size:14px; font-weight:400; letter-spacing:0.16px;
line-height:18px; white-space:nowrap; }
.cta-link { color:#0062fe; font-size:14px; font-weight:400; text-decoration:underline; }
.tabs { display:flex; background:#f4f4f4; border:1px solid #c6c6c6; border-radius:4px; overflow:hidden;
width:fit-content; margin-bottom:24px; }
.tab { height:48px; padding:0 16px; display:flex; align-items:center; font-size:16px; font-weight:400;
color:#161616; border-right:1px solid #c6c6c6; }
.tab:last-child { border-right:none; }
.tab.selected { background:#ffffff; color:#0f62fe; box-shadow:inset 0 -2px 0 #0f62fe; }
.panes { display:flex; gap:24px; }
.accordion { flex:1 1 auto; border-top:1px solid #e0e0e0; }
.acc-item { height:40px; display:flex; align-items:center; justify-content:space-between;
padding:0 16px 0 0; border-bottom:1px solid #e0e0e0; font-size:16px; font-weight:400; color:#161616; }
.acc-item span.chev { color:#525252; font-size:14px; }
.side { width:264px; border:1px solid #c6c6c6; border-radius:4px; padding:20px; background:#ffffff; }
.side-label { font-size:12px; font-weight:400; letter-spacing:0.32px; text-transform:uppercase;
color:#525252; margin:0 0 8px; }
.side-case { font-size:16px; font-weight:600; color:#161616; margin:0 0 6px; }
.side-status { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:#0f62fe; }
.side-dot { width:8px; height:8px; background:#0f62fe; }
.side-meta { margin-top:16px; font-size:14px; color:#525252; line-height:20px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #c6c6c6; padding:14px 40px;
display:flex; justify-content:space-between; font-size:12px; color:#525252; background:#ffffff; }
</style></head>
<body>
<div class="shell">
<div class="shell-left">
<div class="shell-mark"></div>
<span class="shell-name">IBM</span>
</div>
<div class="shell-nav"><span>Cloud</span><span>Data & AI</span><span>Automation</span><span>Support</span></div>
<div class="shell-right"><span>EN</span><div class="shell-dot">JD</div></div>
</div>
<div class="content">
<p class="crumb">Products / Cloud Support</p>
<h1>Support built around your infrastructure</h1>
<p class="lede">One interface for cases, entitlements, and product health across your Cloud estate.</p>
<div class="cta-row">
<button class="cta-primary">Open a case</button>
<span class="cta-link">View documentation →</span>
</div>
<div class="tabs">
<div class="tab selected">Overview</div>
<div class="tab">Entitlements</div>
<div class="tab">Health</div>
</div>
<div class="panes">
<div class="accordion">
<div class="acc-item"><span>Case status and history</span><span class="chev">›</span></div>
<div class="acc-item"><span>Entitlement and coverage detail</span><span class="chev">›</span></div>
<div class="acc-item"><span>Known issues for this product</span><span class="chev">›</span></div>
</div>
<div class="side">
<p class="side-label">Open case</p>
<p class="side-case">Case #48213</p>
<span class="side-status"><span class="side-dot"></span>In progress</span>
<p class="side-meta">Assigned to Cloud Support · Updated 2 hours ago</p>
</div>
</div>
</div>
<footer>
<span>© IBM</span>
<span>IBM · Support · Documentation · Status</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4f40; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4f40; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faaaa4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #091723; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4f40; color: #091723;
border: 1px solid #091723; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4f40; color: #f5f5f5;
border: 1px solid #fd6a5d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faaaa4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8463b; color: #091723;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#091723; box-sizing:border-box;
font-family:"MonzoSansText", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#ffffff; border-bottom:1px solid #c2c8d0; }
.brand { font-family:"MonzoSansDisplay", -apple-system, sans-serif; font-weight:800; font-size:19px;
letter-spacing:-0.4px; margin:0; color:#091723; }
.navlinks { display:flex; gap:26px; font-size:15px; color:rgba(9,23,35,0.6); }
.navlinks span.active { color:#091723; }
.pill-dark { background:#091723; color:#ffffff; border-radius:500px; padding:10px 22px;
font-size:14px; font-weight:600; white-space:nowrap; }
.hero { display:flex; height:334px; }
.cardstage { width:400px; background:#f2f8f3; display:flex; align-items:center; justify-content:center;
position:relative; }
.bankcard { width:230px; height:145px; border-radius:20px; background:#091723; position:relative;
box-shadow:none; transform:rotate(-6deg); }
.bankcard::before { content:''; position:absolute; top:18px; left:20px; width:34px; height:26px;
border-radius:6px; background:#ff4f40; }
.bankcard .cardnum { position:absolute; bottom:38px; left:20px; color:#ffffff; font-size:14px;
letter-spacing:2px; opacity:0.85; }
.bankcard .cardname { position:absolute; bottom:16px; left:20px; color:#ffffff; font-size:11px; opacity:0.7; }
.bankcard .cardlogo { position:absolute; top:18px; right:20px; color:#ff4f40; font-weight:800; font-size:13px;
font-family:"MonzoSansDisplay", sans-serif; }
.badge-coral { position:absolute; top:32px; right:210px; background:#ff4f40; color:#ffffff; border-radius:4px;
padding:4px 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.heroinfo { flex:1; padding:34px 40px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.heroinfo .eyebrow { font-size:13px; font-weight:600; color:#6b747b; text-transform:uppercase; letter-spacing:0.06em; }
.heroinfo h1 { font-family:"MonzoSansDisplay", sans-serif; font-weight:800; font-size:34px; letter-spacing:-1px;
margin:0; line-height:1.05; color:#091723; }
.heroinfo .price { font-family:"MonzoSansDisplay", sans-serif; font-weight:800; font-size:20px; color:#016b83; }
.heroinfo p { font-size:15px; color:#3a4650; margin:0; max-width:440px; line-height:1.45; }
.ctarow { display:flex; gap:12px; margin-top:6px; }
.btn-teal { background:#016b83; color:#ffffff; border-radius:500px; padding:12px 24px; font-size:15px;
font-weight:600; white-space:nowrap; }
.btn-outline { background:#ffffff; color:#091723; border:1.5px solid #091723; border-radius:500px;
padding:11px 24px; font-size:15px; font-weight:600; white-space:nowrap; }
.features { display:flex; gap:20px; padding:20px 40px; background:#f2f8f3; height:180px; align-items:stretch; }
.fcard { flex:1; background:#ffffff; border-radius:32px; padding:20px; display:flex; flex-direction:column;
gap:8px; }
.fcard .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#016b83; }
.fcard h3 { font-family:"MonzoSansDisplay", sans-serif; font-weight:800; font-size:16px; margin:0; color:#091723; }
.fcard p { font-size:13px; color:#6b747b; margin:0; line-height:1.4; }
footer { height:66px; background:#091723; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
footer span { color:rgba(255,255,255,0.7); font-size:12px; }
footer .fbrand { font-family:"MonzoSansDisplay", sans-serif; font-weight:800; color:#ffffff; font-size:14px; }
</style></head>
<body>
<nav>
<p class="brand">Monzo</p>
<div class="navlinks"><span class="active">Personal</span><span>Business</span><span>Help</span><span>Community</span></div>
<button class="pill-dark">Sign up</button>
</nav>
<section class="hero">
<div class="cardstage">
<span class="badge-coral">Hot Coral</span>
<div class="bankcard">
<span class="cardlogo">Monzo</span>
<span class="cardnum">•••• •••• •••• 4471</span>
<span class="cardname">A. MORGAN</span>
</div>
</div>
<div class="heroinfo">
<span class="eyebrow">Personal account · Plus</span>
<h1>Current accounts that keep up</h1>
<span class="price">£5 / month</span>
<p>Real-time spending notifications, instant balance updates, and a Hot Coral card that never hides a fee.</p>
<div class="ctarow">
<button class="btn-teal">Open a personal account</button>
<button class="btn-outline">See plans</button>
</div>
</div>
</section>
<section class="features">
<div class="fcard">
<span class="tag">Pots</span>
<h3>Split money on the spot</h3>
<p>Move cash into rent, groceries, and savings pots the moment it lands.</p>
</div>
<div class="fcard">
<span class="tag">Notifications</span>
<h3>Know the second you spend</h3>
<p>Instant push alerts for every payment — no surprises at the end of the month.</p>
</div>
<div class="fcard">
<span class="tag">Overseas</span>
<h3>Zero foreign transaction fees</h3>
<p>Spend abroad at the real exchange rate, every time, everywhere.</p>
</div>
</section>
<footer>
<span class="fbrand">Monzo</span>
<span>© Monzo · Personal · Business · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e7e9ea; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #e7e9ea;
border: 1px solid #e7e9ea; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #252525; color: #e7e9ea;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#E7E9EA; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-feature-settings:"zero" 1; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#000; padding:22px 16px; position:relative; border-right:1px solid #2F3336; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modepill { background:#16181C; border:1px solid #2F3336; border-radius:18px; padding:6px 4px; display:flex; font-size:12px; }
.modepill span { padding:6px 14px; border-radius:14px; font-weight:600; }
.modepill span.act { background:#fff; color:#000; }
.userbub { background:#16181C; border-radius:20px 20px 6px 20px; padding:12px 16px; font-size:14px;
max-width:78%; margin-left:auto; margin-bottom:16px; }
.assist { font-size:14px; line-height:1.55; margin-bottom:14px; }
.assist .sp { color:#E7E9EA; }
.citecard { background:#1E2126; border:1px solid #2F3336; border-radius:16px; padding:12px; margin-bottom:16px; }
.cite-head { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.cav { width:24px; height:24px; border-radius:50%; background:#3B4754; }
.cname { font-size:13px; font-weight:700; }
.chandle { font-size:12px; color:#71767B; }
.citebody { font-size:12px; color:#E7E9EA; }
.promptbar { position:absolute; left:16px; right:16px; bottom:20px; height:48px; border-radius:24px; background:#16181C;
border:1px solid #2F3336; display:flex; align-items:center; padding:0 14px; gap:10px; }
.promptbar .ph { font-size:14px; color:#71767B; flex:1; }
.sendbtn { width:32px; height:32px; border-radius:50%; background:#fff; color:#000; display:flex;
align-items:center; justify-content:center; font-size:14px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0; }
.brand span { color:#1D9BF0; }
.tag { font-size:14px; color:#71767B; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:14px; border:1px solid #2F3336; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#71767B; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#71767B; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:14px;
background:#16181C; border:1px solid #2F3336; color:#71767B; }
.footer { margin-top:auto; border-top:1px solid #2F3336; padding-top:16px; font-size:11px; color:#4D5156; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="topbar"><span>☰</span><div class="modepill"><span class="act">Regular</span><span>Fun</span></div><span>✎</span></div>
<div class="userbub">What's the latest on the satellite launch?</div>
<div class="assist">Live coverage confirms the launch window opened on schedule; telemetry shows nominal orbit insertion.<span class="sp">▍</span></div>
<div class="citecard">
<div class="cite-head"><span class="cav"></span><span class="cname">Space Desk</span><span style="color:#1D9BF0">✓</span><span class="chandle">@spacedesk · 2h</span></div>
<div class="citebody">Confirmed: stage separation nominal, second burn in T-4 minutes. 🚀</div>
</div>
<div class="promptbar"><span class="ph">Ask Grok anything</span><div class="sendbtn">↑</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Grok (iOS)<span>.</span></h1>
<p class="tag">A true-black terminal for a conversation — monochrome by design, with X's link blue reserved for live post citations.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#000000"></div><small>#000000</small></div>
<div class="sw"><div class="chip2" style="background:#1D9BF0"></div><small>#1D9BF0</small></div>
<div class="sw"><div class="chip2" style="background:#16181C"></div><small>#16181C</small></div>
<div class="sw"><div class="chip2" style="background:#1E2126"></div><small>#1E2126</small></div>
<div class="sw"><div class="chip2" style="background:#00BA7C"></div><small>#00BA7C</small></div>
</div>
<div class="typeblock">
<div class="t1">Ask Grok anything</div>
<div class="t2">Inter · slashed-zero on · streaming tokens with a blinking block cursor ▍</div>
</div>
<div class="taglist">
<span>X post citation card</span><span>No bubble on replies</span><span>Regular / Fun toggle</span>
<span>History slide-over</span><span>No bottom tab bar</span>
</div>
<div class="footer">True black #000000 inherited from X · monochrome + one link blue, nothing else</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fee500; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fee500; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fee500; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fee500; color: #111111;
border: 1px solid #d8c303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e3d127; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eeeeee; }
.nav .brand { display:flex; align-items:center; gap:8px; }
.bubble { width:26px; height:22px; background:#fae100; border-radius:11px 11px 11px 4px; position:relative; }
.bubble::after { content:''; position:absolute; left:6px; bottom:-6px; width:8px; height:8px; background:#fae100;
clip-path:polygon(0 0, 100% 0, 0 100%); }
.bubble-dot { position:absolute; width:3px; height:3px; background:#000; border-radius:50%; }
.nav .brand span { font-size:18px; font-weight:700; color:#333333; }
.pillnav { display:flex; gap:8px; }
.pill { background:#ffffff; color:#000000; border-radius:999px; padding:4px 16px 6px; height:37px;
font-size:17px; font-weight:400; display:flex; align-items:center; }
.search-control { width:36px; height:36px; border-radius:18px; display:flex; align-items:center; justify-content:center; }
.search-control span { width:12px; height:12px; border:2px solid #333333; border-radius:50%; position:relative; }
.search-control span::after { content:''; position:absolute; width:6px; height:2px; background:#333333;
right:-5px; bottom:0px; transform:rotate(45deg); }
.hero { padding:34px 32px 24px; display:flex; flex-direction:column; gap:14px; }
.hero .eyebrow { font-size:13px; font-weight:700; letter-spacing:.08em; color:#888888; margin:0; text-transform:uppercase; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.2; letter-spacing:-1px; margin:0; max-width:640px; color:#333333; }
.hero p { font-size:14px; line-height:24.9px; letter-spacing:-.2px; color:#888888; margin:0; max-width:520px; }
.hero .ctas { display:flex; gap:12px; align-items:center; margin-top:6px; }
.tag-dark { background:#111111; color:#ffffff; border:2px solid #ffffff; outline:1px solid #111111; border-radius:16px;
padding:7px 8px 8px; height:32px; font-size:13px; font-weight:700; display:flex; align-items:center; }
.login-btn { background:#fee500; border-radius:12px; height:40px; padding:0 16px; display:flex; align-items:center;
gap:8px; color:rgba(0,0,0,.85); font-size:14px; font-weight:600; }
.login-symbol { width:16px; height:13px; background:#000000; border-radius:8px 8px 8px 2px; position:relative; }
.login-symbol::after { content:''; position:absolute; left:3px; bottom:-4px; width:5px; height:5px; background:#000;
clip-path:polygon(0 0, 100% 0, 0 100%); }
.filters { display:flex; gap:8px; padding:0 32px 18px; }
.mfilter { background:#eeeeee; color:#000000; border-radius:30px; padding:8px 20px 12px; height:44px;
font-size:16px; font-weight:700; display:flex; align-items:center; }
.mfilter.selected { background:#111111; color:#ffffff; border:2px solid #ffffff; outline:1px solid #111; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 32px; }
.card { background:#ffffff; border:1px solid #dbdbdb; border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:6px; }
.card h3 { font-size:20px; font-weight:700; margin:0; color:#333333; }
.card p { font-size:13px; color:#888888; margin:0; line-height:1.4; }
.footer { position:absolute; left:0; right:0; bottom:0; height:64px; border-top:1px solid #eeeeee; background:#ffffff;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.fpills { display:flex; gap:8px; }
.fpill { background:#eeeeee; color:#000000; border-radius:24px; padding:10px 20px 12px; height:40px; font-size:12px;
font-weight:400; display:flex; align-items:center; }
.footer .copy { font-size:12px; color:#888888; }
body { position:relative; }
</style></head>
<body>
<div class="nav">
<div class="brand"><span class="bubble"></span><span>Kakao</span></div>
<div class="pillnav">
<span class="pill">About</span>
<span class="pill">Services</span>
<span class="pill">Newsroom</span>
<span class="pill">Careers</span>
</div>
<span class="search-control"><span></span></span>
</div>
<div class="hero">
<p class="eyebrow">Mobile life platform</p>
<h1>Everyday connection, powered by technology that understands people.</h1>
<p>Messaging, commerce, mobility, and content — woven into one platform that quietly threads through daily life.</p>
<div class="ctas">
<span class="tag-dark">Discover Kakao ›</span>
<span class="login-btn"><span class="login-symbol"></span>Login with Kakao</span>
</div>
</div>
<div class="filters">
<span class="mfilter selected">All areas</span>
<span class="mfilter">Messaging</span>
<span class="mfilter">Commerce</span>
<span class="mfilter">Mobility</span>
<span class="mfilter">Content</span>
</div>
<div class="cards">
<div class="card"><h3>Messaging</h3><p>Everyday conversation as the entry point to channels, brands, and services.</p></div>
<div class="card"><h3>Commerce</h3><p>Gifting, shopping, and payments folded into the same familiar chat surface.</p></div>
<div class="card"><h3>Mobility</h3><p>Getting where you're going, connected back to the same ecosystem.</p></div>
</div>
<div class="footer">
<div class="fpills">
<span class="fpill">Investor Relations</span>
<span class="fpill">ESG</span>
<span class="fpill">Brand</span>
<span class="fpill">Newsroom</span>
</div>
<span class="copy">© Kakao Corp. All rights reserved.</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #a88ef5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #a88ef5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #554978; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c9b5f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a88ef5; color: #000000;
border: 1px solid #c9b5f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #a88ef5; color: #111111;
border: 1px solid #907ad1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #554978; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ad94f5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:Pretendard, -apple-system, sans-serif; }
* { box-sizing: border-box; }
.dark { height:340px; padding:32px 40px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.navrow { display:flex; gap:24px; font-size:22px; font-weight:700; margin-bottom:6px; }
.navrow span { color:#aaaaaa; }
.navrow span.on { color:#ffffff; }
h1 { font-size:34px; font-weight:400; line-height:1.3; margin:0; max-width:600px; }
.mark { background:#cedc00; color:#000000; padding:2px 6px; font-weight:400; }
.pilllink { display:inline-flex; align-items:center; background:#000000; border-radius:100px; padding:6px 18px;
font-size:12px; color:#ffffff; box-shadow:0px 0px 10px #cedc00; width:fit-content; margin-top:8px; }
.light { height:300px; background:#f9f8fc; display:flex; align-items:center; justify-content:center; padding:20px; }
.notice { background:#ffffff; border:2px solid #c9b5f4; border-radius:16px; padding:36px 30px;
box-shadow:0px 4px 10px rgba(0,0,0,0.03); width:460px; text-align:center; }
.notice h2 { font-size:22px; font-weight:700; color:#1a1a1a; margin:0 0 10px; }
.notice p { font-size:14px; color:#6b6b6b; margin:0 0 18px; line-height:1.5; }
.violetbtn { background:#a88ef5; color:#ffffff; border-radius:8px; padding:12px 24px; font-size:14px; font-weight:600; }
</style></head>
<body>
<div class="dark">
<div class="navrow"><span class="on">HOME</span><span>ABOUT</span><span>PRODUCT</span><span>NEWSROOM</span></div>
<h1>Making <span class="mark">enterprise work</span><br>easier and more efficient through software</h1>
<span class="pilllink">Visit our latest product →</span>
</div>
<div class="light">
<div class="notice">
<h2>We're saying goodbye</h2>
<p>Typed (Business Canvas) has been discontinued. Export your workspace to Google Drive before the migration window closes.</p>
<span class="violetbtn">Migration Guide</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c805; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c805; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e189; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b004; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c805; color: #000000;
border: 1px solid #00b004; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c805; color: #000000;
border: 1px solid #27cf2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e189; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c405; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E0E; color:#FFFFFF; box-sizing:border-box;
font-family:"Inter", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:700; display:flex; align-items:center; gap:8px; }
.brand .feather { width:16px; height:16px; background:#00C805; clip-path:polygon(50% 0%, 100% 100%, 0% 100%); }
.navlinks { display:flex; gap:22px; font-size:14px; color:#A8A8A8; }
.btn { border-radius:9999px; padding:10px 20px; font-size:14px; font-weight:600; }
.btn.primary { background:#00C805; color:#0E0E0E; }
.hero { padding:20px 32px 22px; display:flex; align-items:center; gap:30px; }
.hero-txt { flex:1; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.07; letter-spacing:-0.6px; margin:0 0 14px; }
.hero p { color:#A8A8A8; font-size:15px; margin:0 0 20px; }
.portfolio { width:280px; background:#1B1B1B; border-radius:16px; padding:20px; }
.portfolio .val { font-size:32px; font-weight:700; margin:0 0 4px; }
.portfolio .chg { color:#00C805; font-size:13px; font-weight:600; font-family:monospace; margin:0 0 14px; }
.chart { height:60px; position:relative; margin-bottom:14px; }
.chart svg { width:100%; height:100%; }
.tabs { display:flex; gap:6px; background:#EFEFEF10; border-radius:9999px; padding:4px; }
.tab { flex:1; text-align:center; font-size:11px; color:#8C8C8C; padding:5px 0; border-radius:9999px; }
.tab.active { background:#FFFFFF; color:#1B1B1B; }
.rows { padding:0 32px; }
.row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid #2C2C2C; }
.row .sym { display:flex; align-items:center; gap:10px; }
.row .ic { width:32px; height:32px; border-radius:9999px; flex-shrink:0; }
.ic1 { background:linear-gradient(135deg,#00C805,#006b02); }
.ic2 { background:linear-gradient(135deg,#2E6FF2,#0a2f8e); }
.ic3 { background:linear-gradient(135deg,#FFB000,#8a5e00); }
.row .name h5 { font-size:14px; font-weight:600; margin:0; }
.row .name p { font-size:12px; color:#8C8C8C; margin:0; }
.row .price { text-align:right; }
.row .price .p { font-size:14px; font-weight:600; margin:0; }
.row .price .c { font-size:12px; font-family:monospace; margin:0; }
.c.gain { color:#00C805; } .c.loss { color:#FF5000; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #2C2C2C; padding:10px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#6B6B6B; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand"><span class="feather"></span>Robinhood</span>
<div class="navlinks"><span>Investing</span><span>Retirement</span><span>Gold</span><span>Crypto</span></div>
<span class="btn primary">Sign up</span>
</nav>
<section class="hero">
<div class="hero-txt">
<h1>Investing,<br>for everyone.</h1>
<p>Commission-free trading, retirement accounts, and more — all in one app.</p>
</div>
<div class="portfolio">
<p class="val">$24,381.92</p>
<p class="chg">▲ $482.10 (2.02%) Today</p>
<div class="chart">
<svg viewBox="0 0 260 60" preserveAspectRatio="none"><polyline points="0,45 30,40 60,42 90,30 120,34 150,20 180,25 210,12 240,18 260,8" fill="none" stroke="#00C805" stroke-width="2"/></svg>
</div>
<div class="tabs"><span class="tab">1D</span><span class="tab active">1W</span><span class="tab">1M</span><span class="tab">1Y</span><span class="tab">ALL</span></div>
</div>
</section>
<div class="rows">
<div class="row"><div class="sym"><span class="ic ic1"></span><div class="name"><h5>AAPL</h5><p>Apple Inc.</p></div></div><div class="price"><p class="p">$228.40</p><p class="c gain">+1.24%</p></div></div>
<div class="row"><div class="sym"><span class="ic ic2"></span><div class="name"><h5>TSLA</h5><p>Tesla Inc.</p></div></div><div class="price"><p class="p">$241.10</p><p class="c loss">-0.86%</p></div></div>
<div class="row"><div class="sym"><span class="ic ic3"></span><div class="name"><h5>BTC</h5><p>Bitcoin</p></div></div><div class="price"><p class="p">$64,820</p><p class="c gain">+3.41%</p></div></div>
</div>
<footer>
<span>© Robinhood Markets, Inc.</span>
<span>Investing · Retirement · Gold · Crypto</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c896; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c896; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e1ca; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17a27e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c896; color: #000000;
border: 1px solid #17a27e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c896; color: #000000;
border: 1px solid #27cfa5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e1ca; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #04c292; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FAFAFB; color:#424242; box-sizing:border-box;
font-family:"Noto Sans KR", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#fff; }
.nav .brand { font-weight:700; font-size:19px; color:#00C896; }
.nav .links { display:flex; gap:22px; font-size:14px; color:#424242; }
.navbtn { background:#00C896; color:#fff; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:500; }
.hero { margin:20px 32px 0; border-radius:24px; padding:34px 40px; position:relative; overflow:hidden;
background:linear-gradient(120deg,#EFFFFA,#FAF5FF); }
.hero h1 { font-size:38px; font-weight:700; line-height:1.25; margin:0 0 10px;
background:linear-gradient(90deg,#00C896,#9F7AEA); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { font-size:15px; color:#424242; margin:0 0 16px; max-width:460px; }
.herobtn { background:#00C896; color:#fff; border-radius:8px; padding:10px 22px; font-size:14px; font-weight:600; display:inline-block; }
.segrow { display:flex; gap:14px; padding:20px 32px 0; }
.segcard { flex:1; background:#fff; border-radius:16px; padding:18px; box-shadow: rgba(0,0,0,0.08) 0px 0px 12px; }
.segcard .dot { width:34px; height:34px; border-radius:10px; margin-bottom:10px; }
.d1{background:#EFFFFA;} .d2{background:#FAF5FF;} .d3{background:#FFF3E8;}
.d1::after,.d2::after,.d3::after{content:'';display:block;width:16px;height:16px;border-radius:5px;margin:9px auto 0;}
.d1::after{background:#00C896;} .d2::after{background:#9F7AEA;} .d3::after{background:#ED8936;}
.segcard h4 { font-size:14px; font-weight:700; margin:0 0 4px; }
.segcard p { font-size:12px; color:#757575; margin:0; }
.banner { margin:20px 32px 0; background:#00C896; border-radius:24px; padding:26px 40px; color:#fff;
display:flex; align-items:center; justify-content:space-between; }
.banner h3 { font-size:20px; margin:0 0 6px; }
.banner p { font-size:13px; margin:0; opacity:0.9; }
.bannerbtn { background:#000; color:#fff; border-radius:8px; padding:10px 20px; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Classting</div>
<div class="links"><span>For Schools</span><span>For Teachers</span><span>For Parents</span></div>
<button class="navbtn">Get started</button>
</nav>
<div class="hero">
<h1>Personalized learning<br>for every classroom</h1>
<p>AI-powered diagnostics connect teachers, students, and parents in one place.</p>
<span class="herobtn">Book a demo</span>
</div>
<div class="segrow">
<div class="segcard"><div class="dot d1"></div><h4>For Teachers</h4><p>Class feed, assignments, and instant grading.</p></div>
<div class="segcard"><div class="dot d2"></div><h4>For Students</h4><p>Adaptive practice that meets you where you are.</p></div>
<div class="segcard"><div class="dot d3"></div><h4>For Parents</h4><p>Real-time updates on progress and attendance.</p></div>
</div>
<div class="banner">
<div><h3>Talk to our education team</h3><p>Trusted by teachers across 99% of Korean K–12 schools.</p></div>
<div class="bannerbtn">Contact us</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #151515; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #ffffff;
border: 1px solid #151515; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0c0c0c; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0A; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; display:flex; align-items:center; }
.hero { position:relative; z-index:2; width:460px; padding:0 56px; display:flex; flex-direction:column; gap:16px; }
.kicker { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#6E6E6E; }
.word { font-size:44px; font-weight:700; letter-spacing:-1.4pt; line-height:1.02; margin:0; }
.tag { font-size:15px; color:#A1A1A1; line-height:1.5; max-width:340px; margin:0; }
.row { display:flex; gap:12px; align-items:center; margin-top:8px; }
.cta { background:#FFFFFF; color:#000000; border-radius:28px; padding:13px 26px; font-weight:600; font-size:15px; }
.cta2 { background:transparent; color:#FFFFFF; border:1pt solid #2A2A2A; border-radius:24px; padding:12px 22px; font-weight:600; font-size:14px; }
.stats { display:flex; gap:28px; margin-top:22px; }
.stat b { display:block; font-size:26px; font-weight:700; letter-spacing:-0.6pt; }
.stat span { font-size:11px; color:#6E6E6E; text-transform:uppercase; letter-spacing:0.06em; }
/* AI accent line watermark */
.aiwash { position:absolute; left:56px; bottom:64px; width:340px; height:3px; border-radius:3px;
background:linear-gradient(90deg,#4DA8FF,#8B8DF5,#FF6E87); opacity:0.85; }
.phonewrap { position:relative; z-index:2; width:500px; height:640px; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:296px; height:604px; background:#0A0A0A; border:1pt solid #252525; border-radius:46px;
box-shadow:0 30px 80px rgba(0,0,0,0.6); padding:14px 14px 0; overflow:hidden; }
.notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#000; border-radius:12px; z-index:5; }
.pnav { display:flex; align-items:center; justify-content:space-between; padding:18px 4px 10px; }
.pnav .ptitle { font-size:22px; font-weight:700; letter-spacing:-0.4pt; }
.avatar { width:30px; height:30px; border-radius:50%; background:#1E1E1E; border:1pt solid #2A2A2A; }
.herocard { background:#151515; border-radius:22px; padding:18px; margin:8px 4px 14px; }
.hlabel { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#A1A1A1; }
.hnum { font-size:52px; font-weight:700; letter-spacing:-1.4pt; line-height:1; margin:6px 0 2px; }
.hsub { font-size:12px; color:#A1A1A1; margin-bottom:12px; }
.pbar { height:6px; border-radius:6px; background:#2A2A2A; overflow:hidden; margin-bottom:16px; }
.pbar i { display:block; height:100%; width:45%; background:#FFFFFF; border-radius:6px; }
.rings { display:flex; justify-content:space-between; }
.ring { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; }
.ring::before { content:''; position:absolute; inset:0; border-radius:50%; background:#2A2A2A; }
.ring b { position:relative; font-size:14px; font-weight:700; }
.ring span { position:relative; font-size:8px; color:#A1A1A1; text-transform:uppercase; letter-spacing:0.06em; }
.rp { background:conic-gradient(#4DA8FF 0deg 260deg, #2A2A2A 260deg 360deg); }
.rc { background:conic-gradient(#FFB54C 0deg 190deg, #2A2A2A 190deg 360deg); }
.rf { background:conic-gradient(#FF6E87 0deg 110deg, #2A2A2A 110deg 360deg); }
.ringin { position:absolute; inset:7px; border-radius:50%; background:#151515; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.mealcard { background:#151515; border-radius:20px; margin:0 4px 14px; overflow:hidden; }
.mealphoto { height:92px; background:linear-gradient(135deg,#3a2a1a,#6b4a2a 45%,#c9863f); }
.mealbody { padding:14px; }
.mealname { font-size:16px; font-weight:600; }
.mealmeta { font-size:11px; color:#A1A1A1; margin:2px 0 10px; }
.mealrow { display:flex; justify-content:space-between; align-items:center; }
.chips { display:flex; gap:6px; }
.chip { font-size:10px; font-weight:700; padding:4px 8px; border-radius:10px; }
.chip.p { background:rgba(77,168,255,0.16); color:#4DA8FF; }
.chip.c { background:rgba(255,181,76,0.16); color:#FFB54C; }
.chip.f { background:rgba(255,110,135,0.16); color:#FF6E87; }
.kcal { font-size:26px; font-weight:700; letter-spacing:-0.6pt; }
.ptabbar { position:absolute; left:0; right:0; bottom:0; height:70px; background:rgba(10,10,10,0.92); border-top:0.5pt solid #252525;
display:flex; align-items:center; justify-content:space-around; }
.tdot { width:6px; height:6px; border-radius:50%; background:#6E6E6E; }
.fab { width:52px; height:52px; border-radius:50%; background:#FFFFFF; box-shadow:0 0 26px rgba(255,255,255,0.18); margin-top:-24px;
display:flex; align-items:center; justify-content:center; }
.fab i { width:16px; height:16px; border-radius:4px; border:2pt solid #0A0A0A; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<span class="kicker">AI Calorie Tracking</span>
<h1 class="word">Cal AI (iOS)</h1>
<p class="tag">Snap a photo. The AI reads the plate — dish, ingredients, macros, calories — in about four seconds. Every number stays editable.</p>
<div class="row">
<div class="cta">Scan a meal</div>
<div class="cta2">See plans</div>
</div>
<div class="stats">
<div class="stat"><b>1,247</b><span>kcal today</span></div>
<div class="stat"><b>14</b><span>day streak</span></div>
<div class="stat"><b>4s</b><span>avg scan</span></div>
</div>
<div class="aiwash"></div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="notch"></div>
<div class="pnav"><span class="ptitle">Today</span><span class="avatar"></span></div>
<div class="herocard">
<span class="hlabel">Today</span>
<div class="hnum">1,247</div>
<div class="hsub">kcal remaining of 2,200</div>
<div class="pbar"><i></i></div>
<div class="rings">
<span class="ring rp"><span class="ringin"><b>42</b><span>protein</span></span></span>
<span class="ring rc"><span class="ringin"><b>58</b><span>carbs</span></span></span>
<span class="ring rf"><span class="ringin"><b>14</b><span>fat</span></span></span>
</div>
</div>
<div class="mealcard">
<div class="mealphoto"></div>
<div class="mealbody">
<div class="mealname">Grilled Chicken Bowl</div>
<div class="mealmeta">12:30 PM · 1 serving</div>
<div class="mealrow">
<div class="chips"><span class="chip p">P 42g</span><span class="chip c">C 48g</span><span class="chip f">F 14g</span></div>
<div class="kcal">487</div>
</div>
</div>
</div>
<div class="ptabbar">
<span class="tdot"></span><span class="tdot"></span>
<span class="fab"><i></i></span>
<span class="tdot"></span><span class="tdot"></span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbf9; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbf9; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f3ae5f; color: #000000;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fcfbf9; color: #212121;
border: 1px solid #f3ae5f; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbf9; color: #212121;
border: 1px solid #c5c4c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f3ae5f; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#fcfbf9; color:#393b3a; box-sizing:border-box; font-family:'Nunito Sans','Poppins',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; border-bottom:1px solid #e4e4e4; display:flex; align-items:center; justify-content:center; position:relative; padding:0 32px; }
.brand { font-family:'Petrona',serif; font-size:22px; font-weight:600; margin:0; color:#212121; }
.navlinks { position:absolute; left:32px; display:flex; gap:20px; font-family:'Poppins',sans-serif; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; color:#212121; }
.cart-ico { position:absolute; right:32px; width:40px; height:40px; border-radius:999px; background:#f7f4ef; display:flex; align-items:center; justify-content:center; font-size:15px; }
.main { display:flex; gap:20px; padding:16px 32px; height:400px; }
.gallery { width:400px; background:#f7f4ef; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.block-stack { display:flex; align-items:flex-end; gap:8px; }
.block { width:44px; border-radius:8px; }
.block.b1 { height:60px; background:#f3ae5f; }
.block.b2 { height:90px; background:#108474; }
.block.b3 { height:70px; background:#93c8be; }
.block.b4 { height:50px; background:#ab8c52; }
.badge-wood { position:absolute; top:16px; left:16px; background:#ab8c52; color:#fff; font-family:'Poppins',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-family:'Petrona',serif; font-size:24px; font-weight:600; margin:0; }
.stars { color:#ab8c52; font-size:13px; }
.price { font-family:'Poppins',sans-serif; font-weight:600; color:#108474; font-size:20px; }
.desc { font-size:14px; line-height:1.55; color:#393b3a; max-width:420px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#f3ae5f; color:#fff; border:none; border-radius:999px; font-family:'Poppins',sans-serif; font-weight:600; font-size:15px; }
.btn-secondary { flex:1; height:48px; background:#fcfbf9; color:#212121; border:2px solid #d9d9d9; border-radius:999px; font-family:'Poppins',sans-serif; font-weight:600; font-size:15px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#282c2e; color:#f5f2ec; padding:14px 32px; display:flex; justify-content:space-between; font-size:12px; }
</style></head>
<body>
<nav>
<div class="navlinks"><span>Wooden Toys</span><span>Montessori</span><span>Bath Time</span></div>
<p class="brand">Bannor Toys</p>
<div class="cart-ico">🛍</div>
</nav>
<div class="main">
<div class="gallery">
<span class="badge-wood">Solid Wood</span>
<div class="block-stack">
<div class="block b1"></div>
<div class="block b2"></div>
<div class="block b3"></div>
<div class="block b4"></div>
</div>
</div>
<div class="info">
<h1>Rainbow Stacking Blocks</h1>
<div class="stars">★★★★★ 4.9 (410 reviews)</div>
<span class="price">$38.00</span>
<p class="desc">Hand-sanded beechwood blocks in warm, natural finishes — safe for little hands, built for stacking, sorting, and open-ended imaginative play from age one and up.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Shop Baby Toys</button>
</div>
</div>
</div>
<footer>
<span>© Bannor Toys</span>
<span>Bannor Toys · Shop · Support · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: 0px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #d20000; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #212121;
border: 1px solid #d20000; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #fafafa; color: #212121;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d20000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#212121; box-sizing:border-box;
font-family:'Helvetica Now Display','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#212121; }
.brand { font-size:17px; font-weight:700; color:#fff; letter-spacing:0.04em; text-transform:uppercase; }
.navlinks { display:flex; gap:24px; font-size:12.5px; color:#959595; font-weight:500; }
.search-orb { width:170px; height:28px; border-radius:9999px; background:#404040; position:relative; }
.search-orb::after { content:''; position:absolute; right:6px; top:6px; width:16px; height:16px;
border-radius:50%; background:#1199ff; }
main { display:flex; height:580px; }
.gallery { width:420px; background:#f2f2f2; position:relative; display:flex; align-items:center; justify-content:center; }
.pack { width:190px; height:260px; background:linear-gradient(160deg,#404040 0%,#212121 100%);
border-radius:16px 16px 30px 30px; position:relative; box-shadow:0 20px 40px rgba(0,0,0,0.22); }
.pack::before { content:''; position:absolute; top:-16px; left:50%; transform:translateX(-50%);
width:70px; height:26px; border:4px solid #575757; border-bottom:none; border-radius:16px 16px 0 0; }
.pack::after { content:''; position:absolute; top:40px; left:14px; right:14px; height:2px; background:#707070; }
.zip { position:absolute; top:60px; left:24px; right:24px; height:150px; border:1.5px dashed #575757; border-radius:8px; }
.badge-sale { position:absolute; top:20px; left:20px; background:#d20000; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:5px 10px; border-radius:2px; }
.thumbs { position:absolute; bottom:22px; display:flex; gap:8px; }
.thumb { width:34px; height:34px; background:#e3e3e3; border:1px solid #d9d9d9; }
.info { flex:1; padding:32px 38px; display:flex; flex-direction:column; gap:12px; background:#fff; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#707070; }
h1 { font-size:23px; font-weight:700; margin:0; letter-spacing:-0.2px; line-height:1.3; }
.stars { font-size:12px; color:#212121; }
.stars .n { color:#707070; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:700; }
.price-old { font-size:14px; color:#959595; text-decoration:line-through; }
.desc { font-size:13.5px; color:#404040; line-height:1.55; max-width:340px; }
.color-row { display:flex; gap:8px; }
.swatch { width:26px; height:26px; border-radius:9999px; border:2px solid #fff; box-shadow:0 0 0 1px #d9d9d9; }
.swatch.on { box-shadow:0 0 0 2px #212121; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#000000; color:#fff; border:none; border-radius:2px; padding:14px 18px;
font-size:14px; font-weight:700; letter-spacing:0.02em; }
.btn-outline { border:1.5px solid #212121; color:#212121; background:#fff; border-radius:2px; padding:12.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#959595; }
</style></head>
<body>
<nav>
<div class="brand">Aer</div>
<div class="navlinks"><span>Bags</span><span>Travel</span><span>Tech</span><span>Sale</span></div>
<div class="search-orb"></div>
</nav>
<main>
<div class="gallery">
<span class="badge-sale">Sale</span>
<div class="pack"><div class="zip"></div></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Travel Pack · 28L</span>
<h1>Aer Travel Pack 3 X-Pac</h1>
<div class="stars">★★★★★ <span class="n">4.7 · 2,930 reviews</span></div>
<div class="price-row"><span class="price">$249.00</span><span class="price-old">$289.00</span></div>
<p class="desc">A structured, weatherproof carry-on built from ripstop X-Pac — clamshell access, dedicated laptop compartment, zero wasted space.</p>
<div class="color-row">
<div class="swatch on" style="background:#212121"></div>
<div class="swatch" style="background:#707070"></div>
<div class="swatch" style="background:#d20000"></div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Notify Restock</button>
</div>
<span class="meta">Only 4 left · Free shipping over $75</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffd700; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffd700; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6a09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007aff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd700; color: #007aff;
border: 1px solid #007aff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffd700; color: #111111;
border: 1px solid #d9b703; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6a09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6c829; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
background:#ffffff; border-bottom:2px solid #212121; }
.logo { font-size:20px; font-weight:700; }
.pill-nav { background:#007aff; color:#ffffff; border:2px solid #212121; border-radius:9999px;
padding:8px 18px; font-size:13px; font-weight:700; }
.hero { padding:26px 30px 18px; text-align:center; background:#fff8d6; }
.badge { display:inline-block; background:#212121; color:#ffd700; border-radius:99px; width:44px; height:44px;
line-height:44px; font-size:10px; font-weight:700; margin-bottom:10px; }
h1 { font-size:26px; font-weight:700; margin:0 0 8px; }
.sub { font-size:13px; color:#212121; margin:0 0 16px; }
.ctarow { display:flex; justify-content:center; }
.cta { background:#ffd700; color:#212121; border:2px solid #212121; border-radius:9999px;
padding:14px 26px; font-size:17px; font-weight:700; box-shadow:0px 6px 0px 0px #212121; }
.filters { display:flex; gap:8px; justify-content:center; padding:16px 20px 6px; flex-wrap:wrap; }
.chip { background:#eaeaea; color:#212121; border:1px solid #212121; border-radius:999px;
padding:7px 16px; font-size:13px; font-weight:700; }
.chip.active { background:#212121; color:#ffffff; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 30px 24px; }
.card { background:#ffffff; border:2px solid #212121; border-radius:16px; padding:16px;
box-shadow:0px 6px 0px 0px #212121; display:flex; flex-direction:column; gap:6px; }
.card .thumb { height:56px; border-radius:8px; background:linear-gradient(135deg,#ffe985,#ffd700); }
.card .t { font-size:14px; font-weight:700; }
.card .wage { font-size:15px; font-weight:700; color:#ff3b30; }
.card .meta { font-size:11px; color:#666666; }
</style></head>
<body>
<nav>
<div class="logo">Timee</div>
<div class="pill-nav">For businesses</div>
</nav>
<section class="hero">
<div class="badge">NEW!!</div>
<h1>Work today, get paid today</h1>
<p class="sub">No resume. No interview. Pick a shift that fits your free time.</p>
<div class="ctarow"><button class="cta">Find shifts near you</button></div>
</section>
<div class="filters">
<span class="chip active">18+</span>
<span class="chip">20s</span>
<span class="chip">30s</span>
<span class="chip">40s</span>
<span class="chip">50+</span>
</div>
<div class="cards">
<div class="card"><div class="thumb"></div><span class="t">Warehouse sorting</span><span class="wage">$14 / hr</span><span class="meta">Beginners welcome</span></div>
<div class="card"><div class="thumb"></div><span class="t">Cafe counter</span><span class="wage">$13 / hr</span><span class="meta">Same-day pay</span></div>
<div class="card"><div class="thumb"></div><span class="t">Event staffing</span><span class="wage">$16 / hr</span><span class="meta">Weekend only</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c5fdb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c5fdb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb2e9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1274e7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c5fdb; color: #ffffff;
border: 1px solid #1274e7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c5fdb; color: #f5f5f5;
border: 1px solid #3177df; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb2e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d62dd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f9fa; color:#495057; box-sizing:border-box;
font-family:"Inter","Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; color:#212529; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; color:#212529; }
.cta { background:#0c5fdb; color:#ffffff; border:none; border-radius:4px; padding:9px 18px; font-size:14px; font-weight:600; }
.hero { padding:44px 40px 24px; text-align:center; }
.hero h1 { font-size:44px; font-weight:300; letter-spacing:-0.8px; margin:0 0 12px; color:#495057; }
.hero .sub { font-size:20px; font-weight:600; margin:0 0 20px; color:#212529; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:8px 40px 0; }
.card { background:#ffffff; border-radius:10px; padding:20px; box-shadow:0 3px 8px rgba(0,0,0,0.15); }
.card h3 { font-size:16px; font-weight:600; margin:0 0 6px; letter-spacing:-0.3px; color:#212529; }
.card p { font-size:13px; color:#6c757d; margin:0; line-height:1.5; }
.darkband { background:#00001a; color:#ffffff; margin-top:24px; padding:26px 40px; display:flex; justify-content:space-between; align-items:center; }
.darkband h2 { font-size:22px; font-weight:600; margin:0; letter-spacing:-0.4px; }
.pill { background:#ffffff; color:#333333; border-radius:50px; padding:10px 24px; font-size:14px; box-shadow:0 8px 19.2px rgba(0,0,0,0.1); }
</style></head>
<body>
<nav>
<p class="brand">Selectstar</p>
<div class="navlinks"><span>Data Collection</span><span>Dataset Store</span><span>Datumo Eval</span><span>AI Red Team</span></div>
<button class="cta">Contact Us</button>
</nav>
<section class="hero">
<h1>Solution for Trustworthy AI</h1>
<div class="sub">Accelerate your AI development</div>
</section>
<div class="cards">
<div class="card"><h3>Data Collection</h3><p>High-quality training data, collected and labeled by crowds.</p></div>
<div class="card"><h3>Datumo Eval</h3><p>A verification solution that scores LLM response quality.</p></div>
<div class="card"><h3>AI Red Team</h3><p>Find your model's weak spots before you ship.</p></div>
</div>
<div class="darkband">
<h2>Published at the world's top AI conferences</h2>
<span class="pill">Contact Us</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #cc3b3b; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #fafafa; color: #111111;
border: 1px solid #cc3b3b; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #111111;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #bd0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#111111; box-sizing:border-box;
font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stencil { font-family:'Allerta Stencil','Arial Narrow',Impact,sans-serif; text-transform:uppercase; letter-spacing:0.5px; }
nav { height:56px; background:#222222; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { color:#ffffff; font-size:18px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#ffffff; font-size:12px; opacity:.75; }
.navlinks span.on { color:#cc3b3b; opacity:1; }
.search { background:#fafafa; border-radius:9999px; padding:7px 18px; font-size:12px; color:#111; width:180px; }
.stage { display:flex; height:552px; }
.art { width:400px; background:#111111; position:relative; display:flex; align-items:center; justify-content:center; }
.disc { width:280px; height:280px; border-radius:50%;
background:repeating-radial-gradient(circle, #2a2a2a 0px, #2a2a2a 2px, #1a1a1a 3px, #1a1a1a 7px);
box-shadow:0 0 0 6px #050505 inset; position:relative; }
.disc::after { content:''; position:absolute; inset:0; margin:auto; width:96px; height:96px; border-radius:50%; background:#cc3b3b; }
.disc::before { content:''; position:absolute; inset:0; margin:auto; width:14px; height:14px; border-radius:50%; background:#111; z-index:2; }
.sale-tag { position:absolute; top:20px; left:20px; background:#bd0000; color:#fff; font-size:11px; padding:4px 8px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:14px; }
.tag-line { font-size:11px; color:#aaaaaa; }
.info h1 { font-size:26px; margin:0; line-height:1.15; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:22px; font-weight:600; }
.price-old { font-size:14px; color:#aaaaaa; text-decoration:line-through; }
.meta { display:flex; gap:8px; flex-wrap:wrap; }
.pill { border:1px solid #e1e1e1; padding:5px 12px; font-size:11px; color:#222; }
.desc { font-size:13px; color:#222222; line-height:1.55; }
.btnrow { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#cc3b3b; color:#fff; border:none; padding:12px; font-size:13px; letter-spacing:.5px; }
.btn-secondary { background:#fafafa; border:1.5px solid #111; color:#111; padding:12px 18px; font-size:13px; }
.tracklist { border-top:1px solid #e1e1e1; margin-top:2px; padding-top:10px; font-size:12px; color:#222; }
.tracklist .row { display:flex; justify-content:space-between; padding:3px 0; }
.tracklist .num { color:#aaaaaa; width:20px; }
footer { background:#040404; color:#aaaaaa; font-size:11px; height:32px;
padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
</style></head>
<body>
<nav>
<p class="brand stencil">1 2 3 4 GO Records</p>
<div class="navlinks"><span>Vinyl</span><span class="on">Merch</span><span>New Arrivals</span><span>About</span></div>
<div class="search">Search stock…</div>
</nav>
<div class="stage">
<div class="art">
<span class="sale-tag stencil">Sale</span>
<div class="disc"></div>
</div>
<div class="info">
<span class="tag-line stencil">Vinyl · LP · Garage Rock</span>
<h1 class="stencil">Static Voltage — Self Titled</h1>
<div class="price-row">
<span class="price">$24.00</span>
<span class="price-old">$29.00</span>
</div>
<div class="meta">
<span class="pill">180g Pressing</span>
<span class="pill">Gatefold</span>
<span class="pill">Limited 500</span>
</div>
<p class="desc">Raw, three-chord fury cut straight to wax. Recorded live to tape in one take — no overdubs, no polish, just voltage against the needle.</p>
<div class="tracklist">
<div class="row"><span><span class="num">01</span>No Return Policy</span><span>2:41</span></div>
<div class="row"><span><span class="num">02</span>Marshall Stack Blues</span><span>3:08</span></div>
<div class="row"><span><span class="num">03</span>Zine Paper Heart</span><span>2:57</span></div>
</div>
<div class="btnrow">
<button class="btn-primary stencil">Add to Cart</button>
<button class="btn-secondary stencil">Wishlist</button>
</div>
</div>
</div>
<footer><span>© 1 2 3 4 GO Records</span><span>Shipping · Returns · Store Hours</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a29fa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a29fa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #be99f7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4373d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7a29fa; color: #ffffff;
border: 1px solid #f4373d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7a29fa; color: #f5f5f5;
border: 1px solid #8e4af9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #be99f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #8e2bdc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family: SUIT, "UI Frip", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
nav { height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:1px solid #e6e6e6; }
.logo { font-size:18px; font-weight:700; color:#000000; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:400; color:#000000; }
.navlinks .active { color:#7a29fa; font-weight:700; }
.navsearch { border:1px solid #dddddd; border-radius:20px; padding:6px 14px; font-size:12px; color:#999999; }
.main { flex:1 1 auto; overflow:hidden; padding:16px 24px 8px; display:flex; flex-direction:column; gap:14px; }
.shelf-title { display:flex; align-items:center; justify-content:space-between; }
.shelf-title h2 { font-size:18px; font-weight:700; margin:0; color:#000000; }
.shelf-title span { font-size:12px; color:#999999; }
.row1 { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #e6e6e6; border-radius:5px; overflow:hidden; }
.thumb { height:118px; position:relative; }
.t1 { background:linear-gradient(135deg,#ffd9a0,#ff9776); }
.t2 { background:linear-gradient(135deg,#a0d8ff,#7a29fa); }
.t3 { background:linear-gradient(135deg,#c9f2c0,#4caf7d); }
.t4 { background:linear-gradient(135deg,#ffd0e6,#f4373d); }
.badge { position:absolute; top:8px; left:8px; border-radius:5px; padding:4px 6px; font-size:9px; font-weight:500; color:#ffffff; }
.b-excl { background:#f4373d; }
.b-super { background:#7a29fa; }
.cinfo { padding:8px 10px 10px; }
.ctitle { font-size:12px; font-weight:400; color:#333333; line-height:1.3; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cprice { display:flex; align-items:baseline; gap:5px; }
.disc { font-size:12px; font-weight:700; color:#ff3f33; }
.price { font-size:12px; font-weight:700; color:#333333; }
.pinkband { background:#fff4f7; border-radius:8px; padding:14px 16px; flex:1 1 auto; display:flex; flex-direction:column; gap:10px; min-height:0; }
.row2 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.card2 { background:#ffffff; border:1px solid #e6e6e6; border-radius:5px; display:flex; overflow:hidden; }
.thumb2 { width:78px; flex:0 0 auto; }
.t5 { background:linear-gradient(135deg,#e0c3fc,#7a29fa); }
.t6 { background:linear-gradient(135deg,#ffe29f,#ffa751); }
.t7 { background:linear-gradient(135deg,#a1c4fd,#c2e9fb); }
.cinfo2 { padding:8px 10px; flex:1; min-width:0; }
.ctitle2 { font-size:11px; color:#333333; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.point { font-size:9px; font-weight:500; color:#e21d47; }
.appbar { flex:0 0 auto; height:45px; background:#333333; color:#ffffff; display:flex; align-items:center;
justify-content:center; font-size:12px; font-weight:700; letter-spacing:0.2px; }
</style></head>
<body>
<div class="wrap">
<nav>
<div class="logo">Frip</div>
<div class="navlinks">
<span class="active">Categories</span><span>Feed</span><span>Messages</span><span>Wishlist</span><span>My</span>
</div>
<div class="navsearch">Search experiences</div>
</nav>
<div class="main">
<div>
<div class="shelf-title"><h2>Weekly Top Picks 🏆</h2><span>See all →</span></div>
<div class="row1" style="margin-top:10px;">
<div class="card">
<div class="thumb t1"><span class="badge b-excl">Exclusive</span></div>
<div class="cinfo"><div class="ctitle">Sunset Pottery Studio Class</div>
<div class="cprice"><span class="disc">48%</span><span class="price">₩19,800</span></div></div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge b-super">Superhost</span></div>
<div class="cinfo"><div class="ctitle">Han River Night Kayaking</div>
<div class="cprice"><span class="disc">30%</span><span class="price">₩38,000</span></div></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="cinfo"><div class="ctitle">Weekend Baking Workshop</div>
<div class="cprice"><span class="disc">20%</span><span class="price">₩25,000</span></div></div>
</div>
<div class="card">
<div class="thumb t4"><span class="badge b-excl">Exclusive</span></div>
<div class="cinfo"><div class="ctitle">Solo Hiking Day Trip</div>
<div class="cprice"><span class="disc">89%</span><span class="price">₩9,900</span></div></div>
</div>
</div>
</div>
<div class="pinkband">
<div class="shelf-title"><h2 style="font-size:15px;">Curated For Crew</h2><span>New Frip Energy x2</span></div>
<div class="row2">
<div class="card2">
<div class="thumb2 t5"></div>
<div class="cinfo2"><div class="ctitle2">Late-night Craft Beer Tasting</div><span class="point">Crew reward +2</span></div>
</div>
<div class="card2">
<div class="thumb2 t6"></div>
<div class="cinfo2"><div class="ctitle2">Small-group Camping Trip</div><span class="point">Crew reward +2</span></div>
</div>
<div class="card2">
<div class="thumb2 t7"></div>
<div class="cinfo2"><div class="ctitle2">Beginner Surf Lesson</div><span class="point">Crew reward +2</span></div>
</div>
</div>
</div>
</div>
<div class="appbar">Download the App · Frip</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0050ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0050ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87abfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1482ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0050ff; color: #ffffff;
border: 1px solid #1482ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0050ff; color: #f5f5f5;
border: 1px solid #276afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87abfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0358ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#1b1e21; box-sizing:border-box; font-family: Pretendard, "Noto Sans KR", Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.nav{ height:60px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eef1f5; }
.brandmark{ display:flex; align-items:center; gap:8px; font-family:Poppins,sans-serif; font-weight:700; font-size:19px; color:#0050ff; letter-spacing:-0.2px; }
.brandmark .paw{ width:9px;height:9px;border-radius:50%;background:#ff9300; }
.navlinks{ display:flex; gap:24px; font-family:Poppins,sans-serif; font-size:13px; font-weight:700; color:#1b1e21; }
.navlinks .on{ color:#1482ff; }
.navcart{ width:36px;height:36px;border-radius:999px;background:#f4f7fa;display:flex;align-items:center;justify-content:center;font-size:11px;color:#42494f;font-weight:700; }
.searchrow{ display:flex; gap:12px; padding:20px 32px 0; }
.searchbox{ flex:1; height:50px; background:#f4f7fa; border-radius:10px; display:flex; align-items:center; padding:0 20px; font-size:16px; color:#a7aeb5; }
.btn-primary{ height:48px; padding:0 26px; background:#0050ff; color:#fff; border-radius:28px; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; white-space:nowrap; }
.chiprow{ display:flex; gap:8px; padding:14px 32px 0; }
.chip{ height:32px; padding:0 16px; border-radius:999px; border:1px solid #c2c8cf; display:flex; align-items:center; font-size:12px; color:#42494f; }
.chip.on{ background:#0050ff; border-color:#0050ff; color:#fff; font-weight:700; }
.promo{ margin:18px 32px 0; background:#edf4ff; border-radius:10px; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#42494f; }
.promo b{ color:#0035a8; }
.promo .arrow{ color:#0050ff; font-weight:700; font-size:15px; }
.sectiontitle{ margin:24px 32px 14px; font-size:24px; font-weight:700; color:#1b1e21; display:flex; align-items:center; gap:10px; }
.sectiontitle .tag{ font-size:11px; background:#ff5967; color:#fff; padding:3px 9px; border-radius:5px; font-weight:700; }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 32px; }
.card{ background:#fff; border:1px solid #eef1f5; border-radius:10px; overflow:hidden; }
.thumb{ height:122px; position:relative; }
.thumb.a{ background:linear-gradient(135deg,#dce8ff,#a9c4ff); }
.thumb.b{ background:linear-gradient(135deg,#ffe3c2,#ffc98a); }
.thumb.c{ background:linear-gradient(135deg,#fff0c2,#ffe083); }
.thumb.d{ background:linear-gradient(135deg,#d8f3ea,#a6e6cf); }
.badge{ position:absolute; top:8px; left:8px; background:#ff5967; color:#fff; font-size:11px; font-weight:700; padding:3px 7px; border-radius:5px; }
.cbody{ padding:12px 14px 14px; }
.ctitle{ font-size:14px; color:#42494f; line-height:1.35; height:38px; overflow:hidden; }
.cmeta{ display:flex; align-items:center; gap:4px; font-size:11px; color:#8c949c; margin-top:8px; }
.cmeta .star{ color:#ffd633; letter-spacing:-1px; }
.crow{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.cprice{ font-size:15px; font-weight:700; color:#1b1e21; }
.cbtn{ font-size:11px; font-weight:700; color:#0050ff; background:#edf4ff; padding:6px 11px; border-radius:999px; }
.foot{ margin:22px 32px 0; text-align:center; font-size:11px; color:#a7aeb5; }
</style></head>
<body>
<div class="nav">
<div class="brandmark"><span class="paw"></span>Fitpet</div>
<div class="navlinks"><span>About Us</span><span>Team Culture</span><span class="on">Careers</span><span>Support</span></div>
<div class="navcart">Cart</div>
</div>
<div class="searchrow">
<div class="searchbox">Search for food, treats, supplies…</div>
<div class="btn-primary">Recommended</div>
</div>
<div class="chiprow">
<div class="chip on">All</div>
<div class="chip">Food</div>
<div class="chip">Treats</div>
<div class="chip">Health Kit</div>
<div class="chip">Rookie Picks</div>
</div>
<div class="promo">
<div><b>First purchase deal</b> — up to 55% off hand-picked best sellers</div>
<div class="arrow">→</div>
</div>
<div class="sectiontitle">Today's Hot Deals <span class="tag">-55%</span></div>
<div class="grid">
<div class="card">
<div class="thumb a"><span class="badge">-55%</span></div>
<div class="cbody">
<div class="ctitle">Grain-Free Weekly Kibble Box 2kg</div>
<div class="cmeta"><span class="star">★★★★★</span><span>4.9 (2,310)</span></div>
<div class="crow"><span class="cprice">₩24,900</span><span class="cbtn">Recommend</span></div>
</div>
</div>
<div class="card">
<div class="thumb b"><span class="badge">-32%</span></div>
<div class="cbody">
<div class="ctitle">At-Home Health Check Kit, 1-Minute</div>
<div class="cmeta"><span class="star">★★★★★</span><span>4.8 (1,882)</span></div>
<div class="crow"><span class="cprice">₩19,800</span><span class="cbtn">Recommend</span></div>
</div>
</div>
<div class="card">
<div class="thumb c"><span class="badge">-20%</span></div>
<div class="cbody">
<div class="ctitle">Freeze-Dried Salmon Treats, 120g</div>
<div class="cmeta"><span class="star">★★★★★</span><span>4.9 (960)</span></div>
<div class="crow"><span class="cprice">₩12,400</span><span class="cbtn">Recommend</span></div>
</div>
</div>
<div class="card">
<div class="thumb d"><span class="badge">-45%</span></div>
<div class="cbody">
<div class="ctitle">Orthopedic Bed, Small Breed</div>
<div class="cmeta"><span class="star">★★★★★</span><span>4.7 (703)</span></div>
<div class="crow"><span class="cprice">₩38,000</span><span class="cbtn">Recommend</span></div>
</div>
</div>
</div>
<div class="foot">Fitpet — a healthy companion life starts here</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #21bddb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #21bddb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #185e6c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006f8e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21bddb; color: #006f8e;
border: 1px solid #006f8e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #21bddb; color: #111111;
border: 1px solid #1ea1bb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #185e6c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1cb1cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#24282a; box-sizing:border-box;
font-family:Poppins,Lato,"Helvetica Neue",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:17px; color:#21bddb; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#006f8e; }
.pill { background:#21bddb; color:#ffffff; border-radius:28px; height:40px; padding:0 20px; font-size:14px;
font-weight:600; display:flex; align-items:center; }
.hero { position:relative; height:280px; background:linear-gradient(135deg,#0a2f3a,#12525f 60%,#21bddb);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:#ffffff;
text-align:center; margin:0 32px; border-radius:16px; overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.06), transparent 40%); }
.hero h1 { font-size:34px; font-weight:700; margin:0; line-height:1.3; z-index:1; max-width:560px; }
.row { display:flex; gap:10px; z-index:1; }
.white-pill { background:#ffffff; color:rgba(0,0,0,0.56); border-radius:48px; height:52px; padding:0 20px;
font-size:15px; font-weight:600; display:flex; align-items:center; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.field { background:rgba(255,255,255,0.9); color:rgba(0,0,0,0.6); border-radius:4px; height:40px; padding:0 12px;
font-size:14px; display:flex; align-items:center; }
.panels { display:flex; gap:16px; padding:22px 32px; }
.panel { flex:1; background:rgba(0,0,0,0.06); border-radius:16px; padding:18px 20px; }
.panel h3 { font-size:15px; font-weight:700; margin:0 0 8px; }
.panel p { font-size:12px; color:rgba(0,0,0,0.56); margin:0; line-height:1.5; }
.bandwide { margin:6px 32px 0; background:#eeeeee; border-radius:24px; padding:20px 32px; display:flex; justify-content:space-between; align-items:center; }
.bandwide h3 { font-size:18px; margin:0; }
</style></head>
<body>
<nav>
<span class="brand">Wantedly</span>
<div class="navlinks"><span>Article</span><span>Team</span><span>Philosophy</span></div>
<span class="pill">Create profile</span>
</nav>
<section class="hero">
<h1>Where is the work that makes me serious?</h1>
<div class="row"><span class="field">[email protected]</span><span class="white-pill">Search jobs now</span></div>
</section>
<section class="panels">
<div class="panel"><h3>Casually visit a company</h3><p>Read the story first, meet the team before deciding anything.</p></div>
<div class="panel"><h3>Build your profile</h3><p>Make your work interesting with this one page.</p></div>
</section>
<div class="bandwide"><h3>For recruiters</h3><span style="font-size:13px;color:rgba(0,0,0,0.56);">Post your team's story, not just a job listing.</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcfd; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcfd; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcfcfd; color: #1a1a1e;
border: 1px solid #1a1a1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fcfcfd; color: #111111;
border: 1px solid #d6d6d7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8d8d9; color: #1a1a1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FCFCFD; color:#1C1C22; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { position:relative; width:960px; height:640px; display:flex; }
.side { width:220px; height:640px; background:#F4F4F6; border-right:1px solid #E6E6EA;
padding:20px 16px; display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.side-title { font-size:12px; font-weight:600; color:#9B9BA6; text-transform:uppercase; letter-spacing:0.04em; margin:10px 0 4px; }
.side-row { height:36px; border-radius:8px; display:flex; align-items:center; gap:10px; padding:0 8px; font-size:13px; color:#1C1C22; }
.side-row.active { background:#ECECEF; }
.side-emoji { width:18px; text-align:center; font-size:14px; }
.side-daily { margin-top:auto; background:linear-gradient(135deg,#2F5BEA14,#6E56CF14); border:1px solid #E6E6EA;
border-radius:12px; padding:12px; font-size:12px; color:#6A6A78; }
.side-daily b { display:block; font-size:13px; color:#1C1C22; margin-bottom:2px; }
.doc { flex:1; height:640px; overflow:hidden; position:relative; }
.cover { height:88px; background:linear-gradient(120deg,#2F5BEA,#6E56CF); }
.doc-body { padding:0 46px; }
.icon-emoji { width:56px; height:56px; border-radius:16px; background:#FFFFFF; border:1px solid #E6E6EA;
box-shadow:0 6px 18px -10px rgba(0,0,0,0.10); margin-top:-28px; display:flex; align-items:center;
justify-content:center; font-size:30px; }
.doc-title { font-size:28px; font-weight:800; letter-spacing:-0.5px; margin:14px 0 4px; }
.doc-meta { font-size:13px; color:#6A6A78; margin-bottom:20px; }
.block-p { font-size:16px; line-height:1.55; margin-bottom:14px; color:#1C1C22; }
.block-h2 { font-size:20px; font-weight:700; letter-spacing:-0.2px; margin:18px 0 8px; }
.todo { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:16px; }
.todo-box { width:18px; height:18px; border-radius:6px; border:1.8px solid #9B9BA6; flex-shrink:0; }
.todo-box.done { background:#2F5BEA; border-color:#2F5BEA; }
.todo.done span { color:#9B9BA6; text-decoration:line-through; }
.callout { background:#2F5BEA14; border-radius:12px; padding:14px; display:flex; gap:10px; align-items:flex-start;
font-size:15px; margin-bottom:14px; }
.callout .em { font-size:18px; }
.card-row { display:flex; gap:14px; margin-bottom:14px; }
.block-card { flex:1; border:1px solid #E6E6EA; border-radius:12px; padding:14px; background:#FFFFFF;
box-shadow:0 6px 18px -10px rgba(0,0,0,0.10); display:flex; align-items:center; gap:12px; }
.chip-icon { width:36px; height:36px; border-radius:9px; background:#6E56CF14; display:flex; align-items:center;
justify-content:center; font-size:18px; flex-shrink:0; }
.card-text b { display:block; font-size:15px; font-weight:600; }
.card-text span { font-size:12px; color:#6A6A78; }
.fab { position:absolute; right:26px; bottom:26px; width:46px; height:46px; border-radius:14px;
background:linear-gradient(135deg,#2F5BEA,#6E56CF); box-shadow:0 8px 20px -6px rgba(47,91,234,0.6);
display:flex; align-items:center; justify-content:center; }
.fab::before { content:'+'; color:#fff; font-size:22px; font-weight:400; line-height:1; }
</style></head>
<body>
<div class="shell">
<div class="side">
<div class="side-title">Spaces</div>
<div class="side-row active"><span class="side-emoji">📁</span>Product Notes</div>
<div class="side-row"><span class="side-emoji">🎯</span>2026 Goals</div>
<div class="side-title">Daily Notes</div>
<div class="side-row"><span class="side-emoji">📅</span>September 5</div>
<div class="side-row"><span class="side-emoji">📅</span>September 4</div>
<div class="side-daily"><b>📅 Daily Note — Sep 5</b>Auto-created · 3 blocks</div>
</div>
<div class="doc">
<div class="cover"></div>
<div class="doc-body">
<div class="icon-emoji">🚀</div>
<div class="doc-title">Craft (iOS) Launch Plan</div>
<div class="doc-meta">Edited 2m ago · Shared with 4</div>
<div class="block-p">Kickoff notes for the fall release. Use <b>/</b> to insert blocks — pages, to-dos,
images, or tables all live in this flow.</div>
<div class="block-h2">Milestones</div>
<div class="todo done"><span class="todo-box done"></span><span>Finalize onboarding copy</span></div>
<div class="todo"><span class="todo-box"></span><span>Ship the new pricing page</span></div>
<div class="todo"><span class="todo-box"></span><span>Record the launch walkthrough</span></div>
<div class="callout"><span class="em">💡</span><span>Daily Note captures standups automatically —
check the sidebar for today's entry.</span></div>
<div class="block-h2">Linked pages</div>
<div class="card-row">
<div class="block-card"><span class="chip-icon">📄</span><div class="card-text"><b>Design Review</b><span>Edited yesterday</span></div></div>
<div class="block-card"><span class="chip-icon">🔗</span><div class="card-text"><b>Marketing Brief</b><span>craft.do/marketing</span></div></div>
</div>
</div>
<div class="fab"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid rgba(255,255,255,0.1); }
.brand { font-size:15px; font-weight:500; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:12px; color:rgba(255,255,255,0.6); }
.navbtn { background:#000000; color:#ffffff; border:1px solid rgba(255,255,255,0.3); border-radius:4px;
padding:8px 16px; font-size:13px; font-family:inherit; }
.hero { padding:34px 36px 20px; }
h1 { font-size:44px; font-weight:500; line-height:1.1; letter-spacing:-1.3px; margin:0 0 14px; max-width:640px; }
.cta-row { display:flex; gap:10px; }
.cta-black { background:#ffffff; color:#000000; border:none; border-radius:4px; padding:8px 16px;
height:40px; font-size:16px; font-weight:500; font-family:inherit; }
.cta-ghost { background:rgba(255,255,255,0.08); color:#ffffff; border:none; border-radius:4px;
padding:16px; font-size:16px; font-weight:500; font-family:inherit; }
.tabs { display:flex; gap:6px; padding:22px 36px 0; }
.tab { border-radius:4px; padding:4px 16px; height:60px; display:flex; align-items:center;
font-size:14px; color:rgba(255,255,255,0.55); }
.tab.cyan { background:#c8f6f9; color:#000000; font-weight:500; }
.panel { margin:0 36px; background:#ffffff; color:#000000; border-radius:8px; padding:16px 16px 16px 32px;
display:flex; gap:18px; align-items:center; height:120px; }
.panel .col { flex:1; }
.panel .t { font-size:16px; font-weight:500; margin-bottom:6px; }
.panel .d { font-size:13px; color:#555555; line-height:1.4; }
.panel .chip { width:150px; height:80px; border-radius:4px; background:linear-gradient(135deg,#c8f6f9,#e2e1fe); }
.research { display:flex; gap:14px; padding:22px 36px 0; }
.rcard { flex:1; background:rgba(255,255,255,0.08); border-radius:4px; padding:20px 24px; }
.rcard .label { font-size:11px; font-weight:500; letter-spacing:0.05em; color:rgba(255,255,255,0.5); text-transform:uppercase; margin-bottom:6px; }
.rcard .val { font-size:22px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="brand">Together AI</span>
<div class="navlinks"><span>Platform</span><span>Pricing</span><span>Docs</span><span>Research</span></div>
<button class="navbtn">Sign in</button>
</nav>
<section class="hero">
<h1>Build what's next<br>on the AI Native Cloud</h1>
<div class="cta-row">
<button class="cta-black">Start for free</button>
<button class="cta-ghost">Talk to sales</button>
</div>
</section>
<div class="tabs">
<div class="tab cyan">Inference</div>
<div class="tab">Fine-tuning</div>
<div class="tab">Clusters</div>
</div>
<div class="panel">
<div class="col">
<div class="t">Run, train, and serve open models</div>
<div class="d">One platform for production AI, powered by systems research.</div>
</div>
<div class="chip"></div>
</div>
<div class="research">
<div class="rcard"><div class="label">Throughput</div><div class="val">4.2x faster</div></div>
<div class="rcard"><div class="label">Models supported</div><div class="val">200+</div></div>
<div class="rcard"><div class="label">GPU clusters</div><div class="val">Global</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfcfa; color: #2b2b2b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfcfa; color: #2b2b2b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #2b2b2b; overflow: hidden; max-height: 2.6em; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #b79b54; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #fdfcfa; color: #b79b54;
border: 1px solid #b79b54; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #fdfcfa; color: #2b2b2b;
border: 1px solid #d9d9d9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #890000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfcfa; color:#2b2b2b; box-sizing:border-box;
font-family:Lora, 'Addington CF', Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:58px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #d9d9d9; background:#fdfcfa; }
.brand { font-family:'Addington CF', Lora, Georgia, serif; font-size:20px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; color:#2b2b2b; }
.navicons { display:flex; gap:16px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; color:#747474; }
.hero { flex:0 0 auto; padding:22px 40px 14px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.hero-copy { max-width:420px; }
.hero-copy h1 { font-family:'Addington CF', Lora, Georgia, serif; font-size:30px; font-weight:700; line-height:1.14;
letter-spacing:-0.4px; margin:0 0 8px; }
.hero-copy p { font-size:14px; color:#444444; margin:0 0 14px; line-height:1.5; }
.hero-copy button { background:#b79b54; color:#fff; border:none; border-radius:4px; padding:12px 24px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; font-weight:500; letter-spacing:0.5px; }
.hero-visual { width:190px; height:120px; background:linear-gradient(150deg,#d9d1c2,#b79b54); flex:0 0 auto; }
.filters { flex:0 0 auto; display:flex; gap:10px; padding:6px 40px 10px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
.pill { border-radius:999px; padding:6px 14px; font-size:12px; background:#f2f2f2; color:#2b2b2b; }
.pill.active { border:1px solid #b79b54; color:#b79b54; background:#fdfcfa; }
.products { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 40px 8px; min-height:0; }
.card { display:flex; flex-direction:column; gap:6px; }
.imgwrap { position:relative; flex:1; min-height:0; }
.status { position:absolute; top:8px; left:8px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; padding:3px 8px; color:#fff; z-index:2; }
.status.sold { background:#890000; }
.status.available { background:#005f16; }
.a1 .imgwrap { background:linear-gradient(150deg,#b5dced,#2b2b2b); }
.a2 .imgwrap { background:linear-gradient(150deg,#ddcee2,#8d7840); }
.a3 .imgwrap { background:linear-gradient(150deg,#efe7a5,#444444); }
.a4 .imgwrap { background:linear-gradient(150deg,#f3d6b9,#2b2b2b); }
.tags { display:flex; gap:4px; margin:2px 0 0; }
.tag { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:10px; font-weight:600; text-transform:uppercase;
letter-spacing:0.3px; border-radius:999px; padding:2px 8px; color:#2b2b2b; }
.tag.blue { background:#b5dced; }
.tag.lavender { background:#ddcee2; }
.tag.yellow { background:#efe7a5; }
.tag.peach { background:#f3d6b9; }
.cardmeta .title { font-family:'Addington CF', Lora, Georgia, serif; font-size:14px; font-weight:500; margin:2px 0 1px; }
.cardmeta .artist { font-size:12px; color:#747474; margin:0 0 3px; }
.cardmeta .price { font-family:'Addington CF', Lora, Georgia, serif; font-size:14px; font-weight:600; margin:0; }
footer { flex:0 0 auto; background:#2b2b2b; color:#ffffff; padding:11px 40px; display:flex;
justify-content:space-between; align-items:center; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:11px; }
footer .flinks span { margin-left:16px; color:#acacac; }
</style></head>
<body>
<nav>
<p class="brand">Artling</p>
<div class="navlinks"><span>Discover</span><span>Artists</span><span>Photography</span><span>Sculpture</span></div>
<div class="navicons"><span>Sell With Us</span><span>Account</span><span>Cart</span></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Original art, delivered with confidence</h1>
<p>Discover contemporary works from over 700 galleries and independent artists worldwide.</p>
<button>Explore Collections</button>
</div>
<div class="hero-visual"></div>
</section>
<div class="filters">
<span class="pill active">All Works</span>
<span class="pill">Photography</span>
<span class="pill">Sculpture</span>
<span class="pill">Prints</span>
<span class="pill">Under $1,000</span>
</div>
<section class="products">
<div class="card a1">
<div class="imgwrap"><span class="status available">Available</span></div>
<div class="cardmeta">
<div class="tags"><span class="tag blue">Photography</span></div>
<p class="title">Coastal Fog Study</p>
<p class="artist">Alex M.</p>
<p class="price">$1,200</p>
</div>
</div>
<div class="card a2">
<div class="imgwrap"><span class="status sold">Sold</span></div>
<div class="cardmeta">
<div class="tags"><span class="tag lavender">Prints</span></div>
<p class="title">Fragmented Light II</p>
<p class="artist">Jordan T.</p>
<p class="price">$860</p>
</div>
</div>
<div class="card a3">
<div class="imgwrap"><span class="status available">Available</span></div>
<div class="cardmeta">
<div class="tags"><span class="tag yellow">Works on Paper</span></div>
<p class="title">Quiet Interior No. 3</p>
<p class="artist">Sam K.</p>
<p class="price">$540</p>
</div>
</div>
<div class="card a4">
<div class="imgwrap"><span class="status available">Available</span></div>
<div class="cardmeta">
<div class="tags"><span class="tag peach">Ceramics</span></div>
<p class="title">Vessel Series, Form 6</p>
<p class="artist">Riley P.</p>
<p class="price">$980</p>
</div>
</div>
</section>
<footer>
<span>© Artling</span>
<span class="flinks"><span>About</span><span>Discover</span><span>Support</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60023; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60023; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee8796; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60023; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60023; color: #f5f5f5;
border: 1px solid #e82745; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee8796; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf1044; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#211922; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#ffffff; border-bottom:1px solid #f0f0ea; }
.brand { display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; color:#211922; }
.brand .dot { width:26px; height:26px; border-radius:50%; background:#e60023; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:800; font-style:italic; }
.search { flex:1; max-width:420px; margin:0 24px; height:36px; border-radius:16px; background:#e5e5e0;
display:flex; align-items:center; padding:0 14px; color:#62625b; font-size:13px; }
.navactions { display:flex; align-items:center; gap:10px; }
.btn-red { background:#e60023; color:#fff; border:none; border-radius:16px; padding:8px 18px; font-size:13px; font-weight:600; }
.btn-ghost { background:#e5e5e0; color:#211922; border:none; border-radius:16px; padding:8px 18px; font-size:13px; font-weight:600; }
.body { display:flex; height:calc(640px - 60px); }
.rail { width:64px; background:#ffffff; border-right:1px solid #f0f0ea; display:flex; flex-direction:column;
align-items:center; gap:18px; padding-top:22px; }
.rail .ic { width:34px; height:34px; border-radius:12px; background:#f6f6f2; display:flex; align-items:center; justify-content:center; color:#62625b; font-size:15px; }
.rail .ic.active { background:#211922; color:#fff; }
.grid { flex:1; overflow:hidden; padding:18px 22px; display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
.pin { border-radius:16px; overflow:hidden; position:relative; background:#f2f2ee; display:flex; flex-direction:column; }
.pin .art { width:100%; border-radius:16px 16px 0 0; }
.pin .cap { padding:9px 10px 11px; font-size:11.5px; color:#211922; font-weight:600; line-height:1.3; }
.pin .meta { padding:0 10px 10px; font-size:10.5px; color:#62625b; display:flex; align-items:center; gap:5px; }
.pin .meta .av { width:16px; height:16px; border-radius:50%; }
.save { position:absolute; top:8px; right:8px; background:#e60023; color:#fff; font-size:10px; font-weight:700;
border-radius:14px; padding:5px 10px; }
.p1 .art { height:150px; background:linear-gradient(160deg,#f7c9b0,#efb08f); }
.p2 .art { height:210px; background:linear-gradient(160deg,#c9dcae,#9fbf7e); }
.p3 .art { height:120px; background:linear-gradient(160deg,#d7c9f0,#b79fe0); }
.p4 .art { height:190px; background:linear-gradient(160deg,#f0d3d3,#e0a8a8); }
.p5 .art { height:160px; background:linear-gradient(160deg,#bcd8e6,#8cb6cc); }
.p6 .art { height:130px; background:linear-gradient(160deg,#f4e1a8,#e0c274); }
.p7 .art { height:175px; background:linear-gradient(160deg,#dcb8c9,#c98aa5); }
.p8 .art { height:145px; background:linear-gradient(160deg,#b8cfc2,#8fae9c); }
.p9 .art { height:200px; background:linear-gradient(160deg,#e6c6a0,#d19f6f); }
.p10 .art { height:135px; background:linear-gradient(160deg,#cdd8ec,#9fb3d9); }
</style></head>
<body>
<nav>
<div class="brand"><span class="dot">P</span>Pinterest</div>
<div class="search">Search for ideas</div>
<div class="navactions">
<button class="btn-ghost">Log in</button>
<button class="btn-red">Sign up</button>
</div>
</nav>
<div class="body">
<div class="rail">
<div class="ic active">⌂</div>
<div class="ic">🔍</div>
<div class="ic">＋</div>
<div class="ic">✉</div>
<div class="ic">◔</div>
</div>
<div class="grid">
<div class="pin p1"><div class="art"></div><div class="save" style="top:8px;right:8px;">Save</div><div class="cap">Autumn reading nook ideas</div><div class="meta"><span class="av" style="background:#f0b090;"></span>homeandhearth</div></div>
<div class="pin p2"><div class="art"></div><div class="cap">Balcony herb garden layout</div><div class="meta"><span class="av" style="background:#9fbf7e;"></span>greenthumb.co</div></div>
<div class="pin p3"><div class="art"></div><div class="cap">Minimal desk setup</div><div class="meta"><span class="av" style="background:#b79fe0;"></span>studio.notes</div></div>
<div class="pin p4"><div class="art"></div><div class="cap">Weekend brunch table</div><div class="meta"><span class="av" style="background:#e0a8a8;"></span>tablescapes</div></div>
<div class="pin p5"><div class="art"></div><div class="cap">Coastal bedroom palette</div><div class="meta"><span class="av" style="background:#8cb6cc;"></span>seasideliving</div></div>
<div class="pin p6"><div class="art"></div><div class="cap">Hand-lettering practice</div><div class="meta"><span class="av" style="background:#e0c274;"></span>inkandquill</div></div>
<div class="pin p7"><div class="art"></div><div class="cap">Terracotta color story</div><div class="meta"><span class="av" style="background:#c98aa5;"></span>palette.log</div></div>
<div class="pin p8"><div class="art"></div><div class="cap">Small kitchen storage hacks</div><div class="meta"><span class="av" style="background:#8fae9c;"></span>tidyhome</div></div>
<div class="pin p9"><div class="art"></div><div class="cap">Vintage travel poster set</div><div class="meta"><span class="av" style="background:#d19f6f;"></span>retroroute</div></div>
<div class="pin p10"><div class="art"></div><div class="cap">Capsule wardrobe basics</div><div class="meta"><span class="av" style="background:#9fb3d9;"></span>fewnthings</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0e2d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0e2d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8d9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e1438; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0e2d; color: #ffffff;
border: 1px solid #0e1438; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0e2d; color: #f5f5f5;
border: 1px solid #30334d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8d9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b0f2f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0E2D; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums; }
* { box-sizing:border-box; }
.screen { display:flex; flex-direction:column; width:960px; height:640px; }
nav { height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.brandwrap { display:flex; align-items:center; gap:8px; }
.mountain { width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent;
border-bottom:16px solid #0064FF; }
.wordmark { font-size:17px; font-weight:800; }
.wordmark span { color:#0064FF; }
.navright { display:flex; gap:18px; color:#FFFFFF; font-size:16px; }
.hubs { flex:0 0 48px; display:flex; align-items:center; gap:8px; padding:0 24px; }
.hub { min-width:70px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:800; color:#fff; padding:0 12px; }
.hero { flex:0 0 190px; position:relative; margin:10px 0; display:flex; align-items:flex-end;
background:linear-gradient(120deg,#2a3a8f 0%, #0E1438 65%); overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(10,14,45,0.72) 68%, #0A0E2D 100%); }
.hero-content { position:relative; z-index:1; padding:0 24px 16px; }
.hero-eyebrow { font-size:11px; font-weight:800; letter-spacing:1.6pt; text-transform:uppercase; color:#4D9DFF; }
.hero-title { font-size:28px; font-weight:800; margin-top:4px; letter-spacing:-0.5px; }
.hero-meta { font-size:12px; color:#AEB4D6; margin-top:6px; }
.hero-btns { display:flex; gap:10px; margin-top:12px; }
.btn-play { background:#0064FF; color:#fff; font-size:14px; font-weight:700; padding:9px 20px; border-radius:6px; display:flex; align-items:center; gap:6px; }
.btn-glass { background:rgba(255,255,255,0.14); color:#fff; font-size:13px; font-weight:600; padding:9px 16px; border-radius:6px; }
.rows { flex:1; padding:0 0 0 24px; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.row-header { font-size:16px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#FF2D46; }
.row-scroll { display:flex; gap:10px; }
.poster { width:104px; height:150px; border-radius:8px; flex:0 0 104px; position:relative; }
.live-flag { position:absolute; top:6px; left:6px; background:#FF2D46; border-radius:4px; padding:2px 6px;
font-size:8px; font-weight:800; text-transform:uppercase; display:flex; align-items:center; gap:4px; }
.live-flag .dot { width:5px; height:5px; border-radius:50%; background:#fff; }
.poster-cap { font-size:11px; font-weight:500; color:#AEB4D6; margin-top:6px; }
.tabbar { flex:0 0 60px; display:flex; align-items:center; justify-content:space-around;
background:rgba(10,14,45,0.96); border-top:0.5px solid #2A3266; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab-dot { width:8px; height:8px; border-radius:2px; }
.tab.active .tab-dot { background:#4D9DFF; }
.tab:not(.active) .tab-dot { background:none; border:1.5px solid #6F77A6; }
.tab-label { font-size:12px; font-weight:600; }
.tab.active .tab-label { color:#4D9DFF; }
.tab:not(.active) .tab-label { color:#6F77A6; }
</style></head>
<body>
<div class="screen">
<nav>
<div class="brandwrap"><span class="mountain"></span><span class="wordmark">Paramount+ (iOS)<span>+</span></span></div>
<div class="navright"><span>⌕</span><span>◐</span></div>
</nav>
<div class="hubs">
<div class="hub" style="background:linear-gradient(135deg,#0064FF,#0040A8);">CBS</div>
<div class="hub" style="background:#141414;">PARAMOUNT NETWORK</div>
<div class="hub" style="background:linear-gradient(135deg,#C8102E,#7A0A1C);">MTV</div>
<div class="hub" style="background:linear-gradient(135deg,#FFB81C,#C98A00);color:#1a1400;">NICK</div>
<div class="hub" style="background:#5B2E90;">COMEDY CENTRAL</div>
<div class="hub" style="background:linear-gradient(135deg,#008C45,#045128);">SHOWTIME</div>
</div>
<div class="hero">
<div class="hero-content">
<div class="hero-eyebrow">Paramount+ (iOS) Original</div>
<div class="hero-title">Harbor & Static</div>
<div class="hero-meta">2024 · Crime Drama · TV-MA · S1 New Episodes Weekly</div>
<div class="hero-btns">
<div class="btn-play">▶ Play</div>
<div class="btn-glass">+ My List</div>
</div>
</div>
</div>
<div class="rows">
<div>
<div class="row-header"><span class="live-dot"></span>Live TV & Sports</div>
<div class="row-scroll">
<div class="poster" style="background:linear-gradient(135deg,#264a8a,#0f1f42);">
<div class="live-flag"><span class="dot"></span>Live</div>
</div>
<div class="poster" style="background:linear-gradient(135deg,#3a3a3a,#151515);">
<div class="live-flag"><span class="dot"></span>Live</div>
</div>
<div class="poster" style="background:linear-gradient(135deg,#7a2020,#2c0a0a);">
<div class="live-flag"><span class="dot"></span>Live</div>
</div>
<div class="poster" style="background:linear-gradient(135deg,#264a8a,#0f1f42);"></div>
</div>
</div>
<div>
<div class="row-header">Trending Now</div>
<div class="row-scroll">
<div class="poster" style="background:linear-gradient(135deg,#5a3a8f,#241535);"></div>
<div class="poster" style="background:linear-gradient(135deg,#8f5a3a,#351f15);"></div>
<div class="poster" style="background:linear-gradient(135deg,#3a8f6b,#15352a);"></div>
<div class="poster" style="background:linear-gradient(135deg,#8f3a5a,#350f1f);"></div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="tab-dot"></span><span class="tab-label">Home</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Live TV</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Search</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">My List</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffff99; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffff99; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; background: #0000ff; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; background: #ff9933; color: #000000;
border: 1px solid #0000ff; border-radius: 4px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbf73; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; background: #ffff00; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffff99; color:#000000; box-sizing:border-box;
font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; }
* { box-sizing:border-box; }
a.l { color:#0000ff; font-weight:bold; text-decoration:none; }
a.l:hover { text-decoration:underline; }
.topbar { background:#ffff99; padding:6px 16px; font-size:11px; color:#333; border-bottom:1px solid #cccccc;
display:flex; justify-content:space-between; }
.topbar a.l { font-weight:normal; text-decoration:underline; }
nav.catnav { background:#ffff99; padding:8px 16px; border-bottom:1px solid #cccccc; font-size:13px; font-weight:bold; }
nav.catnav span { color:#0000ff; }
nav.catnav span.sep { color:#000; font-weight:normal; margin:0 6px; }
.searchrow { background:#ffffa0; padding:8px 16px; border-bottom:1px solid #cccccc; display:flex; gap:8px; align-items:center; }
.searchrow input { width:260px; height:22px; background:#ffff99; border:1px solid #0000ff; font-size:12px; padding:2px 6px; }
.searchrow button { height:24px; background:#0000ff; color:#fff; border:none; font-weight:bold; font-size:12px; border-radius:4px; padding:0 12px; }
.breadcrumb { padding:8px 16px 0; font-size:11px; color:#333; }
main { display:flex; padding:10px 16px; gap:16px; height:calc(640px - 30px - 34px - 34px - 20px - 8px); }
.stage { width:300px; background:#ffffff; border:1px solid #cccccc; padding:10px; position:relative; }
.figbox { position:relative; height:280px; display:flex; align-items:center; justify-content:center; }
.fig { position:relative; width:110px; height:220px; }
.fig .head { width:46px; height:46px; border-radius:50%; background:#f0c9a0; margin:0 auto; position:relative; z-index:2; }
.fig .hair { position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:60px; height:38px;
background:#2244aa; border-radius:50% 50% 0 0; z-index:1; }
.fig .body { width:70px; height:100px; background:linear-gradient(180deg,#ff3333,#cc0000); margin:0 auto;
border-radius:10px 10px 4px 4px; }
.fig .legs { width:60px; height:70px; background:#1a1a2e; margin:0 auto; border-radius:0 0 6px 6px; }
.fig .base { width:100px; height:12px; background:#333; border-radius:50%; margin:4px auto 0; }
.badge-new { position:absolute; top:8px; left:8px; background:#ffff00; color:#000; font-size:11px; font-weight:bold;
border-radius:4px; padding:2px 6px; border:1px solid #cccc00; }
.badge-sale { position:absolute; top:8px; right:8px; background:#ff0000; color:#fff; font-size:11px; font-weight:bold;
border-radius:4px; padding:2px 6px; }
.thumbs { display:flex; gap:6px; margin-top:10px; }
.thumb { width:52px; height:52px; background:#ffffa0; border:1px solid #cccccc; }
.thumb.active { border:2px solid #0000ff; }
.info { flex:1; background:#ffffff; border:1px solid #cccccc; padding:14px 18px; overflow:hidden; }
h1 { font-size:20px; margin:0 0 6px; color:#0000ff; }
.sku { font-size:11px; color:#666; margin-bottom:8px; }
.stars { font-size:13px; color:#ff9933; margin-bottom:8px; }
.stars span.n { color:#666; font-size:11px; margin-left:6px; }
.price-row { margin-bottom:12px; }
.price { font-size:20px; font-weight:bold; color:#ff9933; }
.was { font-size:12px; color:#999; text-decoration:line-through; margin-left:8px; }
p.desc { font-size:13px; line-height:1.5; color:#333; margin:0 0 12px; }
table.spec { width:100%; border-collapse:collapse; margin-bottom:14px; }
table.spec td { border:1px solid #e0e0e0; font-size:11px; padding:4px 8px; }
table.spec td.k { background:#ffffa0; font-weight:bold; width:110px; }
.opt-label { font-size:11px; font-weight:bold; margin-bottom:6px; }
.variants { display:flex; gap:6px; margin-bottom:14px; }
.variant { border:1px solid #cccccc; background:#ffffa0; font-size:11px; padding:5px 10px; font-weight:bold; }
.variant.active { border:2px solid #0000ff; background:#ffff00; }
.cta-row { display:flex; gap:8px; }
.btn-primary { background:#0000ff; color:#fff; border:none; border-radius:4px; padding:8px 20px; font-size:13px; font-weight:bold; }
.btn-secondary { background:#ff9933; color:#fff; border:none; border-radius:4px; padding:8px 20px; font-size:13px; font-weight:bold; }
footer { border-top:1px solid #cccccc; padding:6px 16px; font-size:11px; color:#666; display:flex; justify-content:space-between; }
</style></head>
<body>
<div class="topbar"><span>Welcome to Anime Corner Store — over 40,000 items in stock</span>
<span><a class="l" href="#">Sign In</a> | <a class="l" href="#">Register</a> | <a class="l" href="#">Order Status</a></span></div>
<nav class="catnav">
<span>Figurines</span><span class="sep">|</span><span>DVDs</span><span class="sep">|</span>
<span>Soundtracks</span><span class="sep">|</span><span>Apparel</span><span class="sep">|</span>
<span>Manga</span><span class="sep">|</span><span>Books</span><span class="sep">|</span><span>Collectibles</span>
</nav>
<div class="searchrow">
<input type="text" value="mecha figure" />
<button>Search</button>
<span style="font-size:11px;color:#333;">42,118 items in catalog</span>
</div>
<div class="breadcrumb"><a class="l" href="#">Home</a> > <a class="l" href="#">Figurines</a> > <a class="l" href="#">Scale Figures</a></div>
<main>
<div class="stage">
<div class="figbox">
<div class="badge-new">NEW</div>
<div class="badge-sale">SALE</div>
<div class="fig">
<div class="hair"></div>
<div class="head"></div>
<div class="body"></div>
<div class="legs"></div>
<div class="base"></div>
</div>
</div>
<div class="thumbs"><div class="thumb active"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<h1>Crimson Blade Warrior 1/7 Scale Figure</h1>
<div class="sku">Item #ACS-77451 · Manufacturer: Nagoya Studio</div>
<div class="stars">★★★★☆ <span class="n">(318 reviews)</span></div>
<div class="price-row"><span class="price">$84.99</span><span class="was">$99.99</span></div>
<p class="desc">Pre-painted PVC scale figure with interchangeable hands and display base. Officially licensed, limited production run — ships in original window box.</p>
<table class="spec">
<tr><td class="k">Scale</td><td>1/7</td></tr>
<tr><td class="k">Height</td><td>24 cm</td></tr>
<tr><td class="k">Material</td><td>PVC / ABS</td></tr>
</table>
<div class="opt-label">Version</div>
<div class="variants">
<span class="variant active">Standard Ver.</span>
<span class="variant">Limited Ver.</span>
<span class="variant">Pre-Order (Dec)</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Pre-Order</button>
</div>
</div>
</main>
<footer><span>© Anime Corner Store</span><span><a class="l" href="#">About Us</a> | <a class="l" href="#">Site Help</a> | <a class="l" href="#">Privacy Policy</a> | <a class="l" href="#">Contact</a></span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #12053a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #12053a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f89a1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b0b4d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #12053a; color: #ffffff;
border: 1px solid #1b0b4d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #12053a; color: #f5f5f5;
border: 1px solid #362b58; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f89a1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #13063d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#12053A; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.wordmark { font-size:22px; font-weight:800; letter-spacing:-0.3pt;
background:linear-gradient(90deg,#0046FF,#7B2FF7); -webkit-background-clip:text; background-clip:text; color:transparent; }
.avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#0046FF,#7B2FF7); }
.billboard { position:relative; height:300px; background:linear-gradient(120deg,#1B0B4D,#2c1466 60%,#3a1c7a); overflow:hidden; }
.billboard .grain { position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(123,47,247,0.35), transparent 60%); }
.billboard .fade { position:absolute; left:0; right:0; bottom:0; height:70%; background:linear-gradient(to bottom, rgba(18,5,58,0), #12053A); }
.billboard .content { position:absolute; left:24px; bottom:20px; z-index:2; }
.badge-orig { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:0.4pt; text-transform:uppercase;
padding:4px 10px; border-radius:999px; border:1px solid transparent;
background:linear-gradient(#1B0B4D,#1B0B4D) padding-box, linear-gradient(90deg,#0046FF,#7B2FF7) border-box; }
.billboard h1 { font-size:32px; font-weight:800; letter-spacing:-0.5pt; margin:8px 0 4px; }
.billboard .meta { font-size:13px; color:#B0A8D0; margin:0 0 12px; }
.actionrow { display:flex; align-items:center; gap:10px; }
.play-cta { display:flex; align-items:center; gap:8px; padding:12px 22px; border-radius:8px; font-size:16px; font-weight:800;
background:linear-gradient(135deg,#0046FF,#7B2FF7); box-shadow:rgba(91,43,224,0.35) 0 8px 24px; }
.play-cta .tri { width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #fff; }
.sec-btn { padding:12px 18px; border-radius:8px; background:rgba(255,255,255,0.14); font-size:15px; font-weight:600; }
.rows { padding:18px 24px; }
.rowhead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.rowhead h2 { font-size:20px; font-weight:800; letter-spacing:-0.3pt; margin:0; }
.rowhead span { font-size:13px; color:#B0A8D0; }
.tiles { display:flex; gap:12px; }
.tile { position:relative; width:160px; height:90px; border-radius:6px; flex-shrink:0; overflow:hidden; }
.tile .orig-badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.3pt;
padding:2px 6px; border-radius:999px; background:rgba(18,5,58,0.8); border:1px solid #7B2FF7; }
.t1 { background:linear-gradient(140deg,#1B0B4D,#0046FF); }
.t2 { background:linear-gradient(140deg,#250F5E,#7B2FF7); }
.t3 { background:linear-gradient(140deg,#36206E,#4a1e8f); }
.t4 { background:linear-gradient(140deg,#1B0B4D,#5a2be0); }
</style></head>
<body>
<div class="topnav">
<span class="wordmark">Max (iOS)</span>
<div class="avatar"></div>
</div>
<div class="billboard">
<div class="grain"></div>
<div class="fade"></div>
<div class="content">
<span class="badge-orig">Max Originals</span>
<h1>The Ink Line</h1>
<p class="meta">2024 · TV-MA · 1 Season · Drama</p>
<div class="actionrow">
<div class="play-cta"><div class="tri"></div>Play</div>
<div class="sec-btn">+ My List</div>
<div class="sec-btn">More Info</div>
</div>
</div>
</div>
<div class="rows">
<div class="rowhead"><h2>Max Originals</h2><span>See All</span></div>
<div class="tiles">
<div class="tile t1"><span class="orig-badge">Originals</span></div>
<div class="tile t2"><span class="orig-badge">Originals</span></div>
<div class="tile t3"><span class="orig-badge">Originals</span></div>
<div class="tile t4"><span class="orig-badge">Originals</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.2px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 15px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 1px; background: #d20000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:'Helvetica Now Display','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #d9d9d9; }
.brand { font-size:16px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
.navlinks { display:flex; gap:24px; font-size:12px; color:#707070; font-weight:500; text-transform:uppercase; letter-spacing:0.04em; }
.navlinks span.on { color:#212121; border-bottom:2px solid #000; padding-bottom:16px; }
.cart-ico { font-size:12px; font-weight:700; padding:6px 12px; border:1px solid #212121; }
main { display:flex; height:582px; }
.gallery { width:400px; background:#f7f7f7; position:relative; display:flex; align-items:center; justify-content:center; }
.bp { width:180px; height:250px; background:linear-gradient(150deg,#404040,#212121 65%); border-radius:14px 14px 26px 26px;
position:relative; box-shadow:0 18px 36px rgba(0,0,0,0.2); }
.bp .strap { position:absolute; top:-4px; left:22px; width:14px; height:60px; background:#575757; border-radius:8px; }
.bp .strap2 { position:absolute; top:-4px; right:22px; width:14px; height:60px; background:#575757; border-radius:8px; }
.bp .pocket { position:absolute; top:70px; left:20px; right:20px; height:60px; border:1px solid #707070; border-radius:6px; }
.laptop-badge { position:absolute; top:130px; left:34px; right:34px; height:60px; background:#e3e3e3;
border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:9px; color:#575757;
font-weight:700; letter-spacing:0.06em; }
.badge-fit { position:absolute; top:20px; left:20px; background:#000; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.04em; padding:5px 10px; }
.info { flex:1; padding:30px 36px; display:flex; flex-direction:column; gap:10px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#707070; }
h1 { font-size:22px; font-weight:700; margin:0; letter-spacing:-0.2px; line-height:1.3; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; }
.desc { font-size:13px; color:#404040; line-height:1.5; max-width:340px; }
.spec-strip { display:flex; gap:0; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; }
.spec { flex:1; padding:10px 0; text-align:left; }
.spec + .spec { border-left:1px solid #d9d9d9; padding-left:14px; }
.spec .k { font-size:9.5px; color:#959595; text-transform:uppercase; letter-spacing:0.05em; }
.spec .v { font-size:13px; font-weight:700; margin-top:2px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#000000; color:#fff; border:none; border-radius:2px; padding:13px 18px;
font-size:13.5px; font-weight:700; letter-spacing:0.02em; }
.btn-outline { border:1.5px solid #212121; background:#fff; color:#212121; border-radius:2px; padding:11.5px 16px;
font-size:12px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#d20000; font-weight:700; }
</style></head>
<body>
<nav>
<div class="brand">Aer Laptop B 2</div>
<div class="navlinks"><span>Bags</span><span class="on">Laptop</span><span>Travel</span><span>Sale</span></div>
<div class="cart-ico">Bag (1)</div>
</nav>
<main>
<div class="gallery">
<span class="badge-fit">Fits 16" Laptop</span>
<div class="bp"><div class="strap"></div><div class="strap2"></div><div class="pocket"></div><div class="laptop-badge">PADDED SLEEVE</div></div>
</div>
<div class="info">
<span class="cat">Laptop Backpack B2</span>
<h1>Aer Fit Pack 2 — Slim Commute Build</h1>
<div class="price-row"><span class="price">$189.00</span></div>
<p class="desc">A slim, structured commuter pack engineered around a padded 16" laptop sleeve — ballistic nylon shell, hidden zip security.</p>
<div class="spec-strip">
<div class="spec"><div class="k">Capacity</div><div class="v">18L</div></div>
<div class="spec"><div class="k">Weight</div><div class="v">1.1 kg</div></div>
<div class="spec"><div class="k">Material</div><div class="v">Ballistic Nylon</div></div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Compare Packs</button>
</div>
<span class="meta">Clearance — final sizes</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ededed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ededed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ededed; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ededed; color: #111111;
border: 1px solid #cacaca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f0f0f0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#EDEDED; color:#181818; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
.phone { position:absolute; top:20px; width:300px; height:600px; background:#0B0C0D; border-radius:36px; padding:9px; box-shadow:0 20px 50px rgba(0,0,0,0.25); }
.screen { position:relative; width:100%; height:100%; border-radius:27px; overflow:hidden; background:#EDEDED; }
.notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:116px; height:20px; background:#0B0C0D; border-radius:0 0 12px 12px; z-index:9; }
/* ---- middle brand column ---- */
.brandcol { position:absolute; left:358px; top:0; width:244px; height:640px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; }
.wordmark { font-size:26px; font-weight:600; color:#07C160; letter-spacing:-0.3px; }
.brandcol p { font-size:13px; color:#888888; max-width:190px; line-height:1.5; margin:0; }
.reddot-demo { display:flex; align-items:center; gap:8px; background:#fff; border-radius:10px; padding:10px 14px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.reddot-demo .dot { width:9px; height:9px; border-radius:50%; background:#FA5151; }
.reddot-demo span { font-size:12px; color:#181818; font-weight:400; }
.avatar-demo { width:44px; height:44px; border-radius:9px; background:linear-gradient(160deg,#95EC69,#07C160); }
/* ===================== phone 1 : chat ===================== */
.p1 { left:32px; }
.topbar { height:44px; padding-top:6px; display:flex; align-items:center; justify-content:space-between; padding-left:12px; padding-right:12px; background:#EDEDED; border-bottom:0.5px solid #D9D9D9; }
.topbar .back { font-size:18px; color:#181818; }
.topbar .title { font-size:17px; font-weight:600; }
.topbar .more { font-size:18px; color:#181818; }
.thread { padding:10px 8px; }
.timesep { text-align:center; font-size:12px; color:#888888; margin:6px 0 12px; }
.msgrow { display:flex; align-items:flex-end; gap:8px; margin-bottom:12px; }
.msgrow.out { justify-content:flex-end; }
.av { width:38px; height:38px; border-radius:8px; flex:none; }
.av.in { background:linear-gradient(160deg,#F4E6CE,#F1D9DC); }
.av.out { background:linear-gradient(160deg,#95EC69,#07C160); }
.bub { max-width:180px; padding:9px 12px; border-radius:6px; font-size:15px; line-height:1.4; position:relative; }
.bub.in { background:#FFFFFF; }
.bub.in::after { content:''; position:absolute; left:-5px; bottom:11px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:6px solid #FFFFFF; }
.bub.out { background:#95EC69; }
.bub.out::after { content:''; position:absolute; right:-5px; bottom:11px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:6px solid #95EC69; }
.packet { width:190px; background:linear-gradient(160deg,#FA5151,#D33A3A); border-radius:8px; padding:14px 14px 12px; box-shadow:0 2px 8px rgba(0,0,0,0.14); color:#fff; }
.packet .seal { width:40px; height:40px; border-radius:50%; background:#FBE3B3; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#B8892B; }
.packet .wish { text-align:center; font-size:13px; font-weight:600; }
.packet .sender { text-align:center; font-size:11px; opacity:.85; margin-top:4px; border-top:1px solid rgba(255,255,255,0.25); padding-top:8px; }
.composer { position:absolute; bottom:0; left:0; right:0; background:#EDEDED; border-top:0.5px solid #D9D9D9; padding:8px 10px; display:flex; align-items:center; gap:8px; }
.composer .mic { font-size:20px; }
.composer .field { flex:1; height:34px; background:#FFFFFF; border-radius:6px; }
.composer .send { background:#07C160; color:#fff; font-size:13px; font-weight:600; padding:0 14px; height:30px; display:flex; align-items:center; border-radius:4px; }
/* ===================== phone 2 : discover ===================== */
.p2 { left:628px; }
.dtitle { text-align:center; font-size:17px; font-weight:600; height:44px; line-height:44px; background:#EDEDED; border-bottom:0.5px solid #D9D9D9; }
.gutter { height:12px; }
.drow { height:56px; background:#FFFFFF; display:flex; align-items:center; padding:0 12px; gap:12px; border-bottom:0.5px solid #D9D9D9; }
.drow:last-child { border-bottom:none; }
.dicon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; flex:none; }
.drow .dt { flex:1; font-size:17px; }
.drow .badge { width:8px; height:8px; border-radius:50%; background:#FA5151; }
.drow .chev { color:#B2B2B2; font-size:15px; }
.tabbar2 { position:absolute; bottom:0; left:0; right:0; height:56px; background:#F7F7F7; border-top:0.5px solid #D9D9D9; display:flex; }
.tab2 { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:10px; color:#999999; }
.tab2 .ts { width:20px; height:20px; border-radius:5px; background:#999999; }
.tab2.active { color:#07C160; }
.tab2.active .ts { background:#07C160; }
</style></head>
<body>
<div class="phone p1">
<div class="screen">
<div class="notch"></div>
<div class="topbar"><span class="back">‹</span><span class="title">Family Group</span><span class="more">⋮</span></div>
<div class="thread">
<div class="timesep">2:14 PM</div>
<div class="msgrow"><div class="av in"></div><div class="bub in">Are we still on for dinner at 7?</div></div>
<div class="msgrow out"><div class="bub out">Yes! I'll bring the mooncakes 🥮</div><div class="av out"></div></div>
<div class="msgrow"><div class="av in"></div><div class="bub in">Perfect, see you soon</div></div>
<div class="msgrow out">
<div class="packet">
<div class="seal">🧧</div>
<div class="wish">Best wishes!</div>
<div class="sender">From Li Wei · Tap to open</div>
</div>
</div>
<div class="msgrow"><div class="av in"></div><div class="bub in">😍 thank you!!</div></div>
</div>
<div class="composer"><span class="mic">🎙️</span><div class="field"></div><div class="send">Send</div></div>
</div>
</div>
<div class="brandcol">
<div class="avatar-demo"></div>
<div class="wordmark">WeChat (iOS)</div>
<p>Chats, Moments, payments and Mini Programs — one calm gray list holds the whole ecosystem.</p>
<div class="reddot-demo"><span class="dot"></span><span>Unread activity uses one red dot, everywhere</span></div>
</div>
<div class="phone p2">
<div class="screen">
<div class="notch"></div>
<div class="dtitle">Discover</div>
<div class="drow"><div class="dicon" style="background:#3F7DD5;">◐</div><div class="dt">Moments</div><div class="badge"></div><div class="chev">›</div></div>
<div class="gutter"></div>
<div class="drow"><div class="dicon" style="background:#FA9D3B;">▶</div><div class="dt">Channels</div><div class="chev">›</div></div>
<div class="drow"><div class="dicon" style="background:#2EA0F8;">▣</div><div class="dt">Scan</div><div class="chev">›</div></div>
<div class="drow"><div class="dicon" style="background:#EB6F6F;">✦</div><div class="dt">Top Stories</div><div class="chev">›</div></div>
<div class="gutter"></div>
<div class="drow"><div class="dicon" style="background:#5C7CFA;">⌕</div><div class="dt">Search</div><div class="chev">›</div></div>
<div class="drow"><div class="dicon" style="background:#F76F34;">⌖</div><div class="dt">People Nearby</div><div class="chev">›</div></div>
<div class="gutter"></div>
<div class="drow"><div class="dicon" style="background:#3CC51F;">▦</div><div class="dt">Mini Programs</div><div class="chev">›</div></div>
<div class="tabbar2">
<div class="tab2"><div class="ts"></div>Chats</div>
<div class="tab2"><div class="ts"></div>Contacts</div>
<div class="tab2 active"><div class="ts"></div>Discover</div>
<div class="tab2"><div class="ts"></div>Me</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fd267a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fd267a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f998be; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6036; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd267a; color: #000000;
border: 1px solid #ff6036; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fd267a; color: #f5f5f5;
border: 1px solid #fc478e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f998be; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fd2f6f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#424242; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { display:flex; width:960px; height:640px; }
.hero { width:340px; padding:0 48px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.flame { width:44px; height:44px; border-radius:50% 50% 50% 0; background:linear-gradient(135deg,#FD267A,#FF6036); transform:rotate(45deg); }
.word { font-size:26px; font-weight:700; margin:6px 0 0; }
.tag { font-size:15px; color:#737373; line-height:1.5; }
.swipeside { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:20px; }
.card { position:relative; width:280px; height:373px; border-radius:16px; overflow:hidden; box-shadow:rgba(0,0,0,0.15) 0 4px 16px;
background:linear-gradient(160deg,#e0c9a6,#8a6a4a 75%); }
.dots { position:absolute; top:8px; left:16px; right:16px; display:flex; gap:3px; }
.dots i { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.4); }
.dots i.on { background:#fff; }
.grad { position:absolute; left:0; right:0; bottom:0; height:36%; background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); }
.nameage { position:absolute; left:16px; bottom:44px; color:#fff; font-size:28px; font-weight:700; }
.nameage span { font-size:24px; font-weight:400; }
.metarow { position:absolute; left:16px; bottom:20px; color:rgba(255,255,255,0.9); font-size:13px; }
.stamp { position:absolute; top:60px; left:20px; border:4px solid #00D68F; color:#00D68F; font-size:28px; font-weight:800; font-style:italic; padding:4px 10px; transform:rotate(-15deg); }
.actionrow { display:flex; align-items:center; gap:14px; }
.abtn { border-radius:50%; background:#fff; box-shadow:rgba(0,0,0,0.1) 0 2px 8px; display:flex; align-items:center; justify-content:center; }
.a-rw { width:48px; height:48px; border:2px solid #FFBD3B; color:#FFBD3B; font-size:16px; }
.a-no { width:56px; height:56px; border:2px solid #FF4458; color:#FF4458; font-size:20px; }
.a-sl { width:40px; height:40px; border:2px solid #5D8DF1; color:#5D8DF1; font-size:16px; }
.a-li { width:56px; height:56px; border:2px solid #00D68F; color:#00D68F; font-size:20px; }
.a-bo { width:48px; height:48px; border:2px solid #A952FF; color:#A952FF; font-size:16px; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<div class="flame"></div>
<div class="word">Tinder (iOS)</div>
<p class="tag">One card, five colored verbs. The gradient stays sealed behind glass until two people say yes at the same time.</p>
</div>
<div class="swipeside">
<div class="card">
<div class="dots"><i class="on"></i><i></i><i></i></div>
<div class="stamp">LIKE</div>
<div class="grad"></div>
<div class="nameage">Jamie<span>, 27</span></div>
<div class="metarow">2 miles away · Product Designer</div>
</div>
<div class="actionrow">
<div class="abtn a-rw">↺</div>
<div class="abtn a-no">✕</div>
<div class="abtn a-sl">★</div>
<div class="abtn a-li">♥</div>
<div class="abtn a-bo">⚡</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1ec59f; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1ec59f; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #176251; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17a384; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1ec59f; color: #000000;
border: 1px solid #17a384; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1ec59f; color: #111111;
border: 1px solid #1ca888; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #176251; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1dc09b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Pretendard", "Apple SD Gothic Neo", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { background:#19254d; color:#fff; padding:16px 40px; }
nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.brand { font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:13px; color:rgba(255,255,255,0.75); }
.cta-white { background:#fff; color:#19254d; border-radius:12px; padding:8px 16px; font-size:13px; font-weight:700; }
.top h1 { font-size:24px; font-weight:700; margin:0 0 8px; }
.top p { font-size:13px; color:rgba(255,255,255,0.7); margin:0 0 12px; }
.top-cta { display:inline-flex; background:#1ec59f; color:#fff; border-radius:12px; padding:12px 20px; font-size:14px; font-weight:700; }
.map { position:relative; margin:14px 40px; height:220px; background:linear-gradient(160deg,#eef2f0,#d7e3dc); border-radius:16px; overflow:hidden; }
.pin { position:absolute; width:12px; height:12px; border-radius:50%; background:#1ec59f; box-shadow:0 0 0 6px rgba(30,197,159,0.2); }
.pin.a { top:60px; left:120px; } .pin.b { top:120px; left:260px; background:#1a1a1a; box-shadow:none; }
.road { position:absolute; height:3px; background:#bbbbbb; }
.r1 { top:80px; left:100px; width:180px; transform:rotate(15deg); }
.search-field { position:absolute; top:14px; left:14px; right:14px; background:#f2f2f2; border-radius:12px;
height:48px; display:flex; align-items:center; padding:0 16px 0 20px; font-size:16px; color:#999999; }
.tripcard { position:absolute; bottom:14px; left:14px; right:14px; background:#fff; border-radius:16px;
padding:14px 16px; display:flex; justify-content:space-between; align-items:center; box-shadow:0px 2px 8px rgba(0,0,0,0.08); }
.tripcard .eta { font-size:20px; font-weight:700; }
.tripcard .status { background:#e6f8f3; color:#149378; border-radius:8px; font-size:11px; font-weight:700; padding:4px 8px; }
.call-btn { background:#1ec59f; color:#fff; border-radius:12px; padding:10px 22px; font-size:14px; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e5e5e5; padding:8px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#999999; }
</style></head>
<body>
<div class="top">
<nav>
<div class="brand">TADA</div>
<div class="navlinks"><span>Ride</span><span>Business</span><span>Reservations</span></div>
<div class="cta-white">Call TADA now, no sign-up</div>
</nav>
<h1>Better movement, better living</h1>
<p>Roomy rides, a clear ETA, and one calm button.</p>
<div class="top-cta">Call a car</div>
</div>
<div class="map">
<div class="search-field">Where to?</div>
<div class="road r1"></div>
<div class="pin a"></div><div class="pin b"></div>
<div class="tripcard">
<div><span class="status">Driver assigned</span><div class="eta">3 min</div></div>
<div class="call-btn">Confirm</div>
</div>
</div>
<footer><span>© TADA</span><span>TADA · Business · Airport Transfer</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002c5f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002c5f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879bb2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007fa8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002c5f; color: #007fa8;
border: 1px solid #007fa8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002c5f; color: #f5f5f5;
border: 1px solid #274c77; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879bb2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00396b; color: #007fa8;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"HyundaiSansTextKR","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.logo { font-size:19px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:16px; }
.hero { position:relative; height:280px; background:linear-gradient(135deg,#0a0a0a,#1c1c1c);
display:flex; align-items:flex-end; padding:26px 40px; }
.hero h1 { color:#ffffff; font-size:44px; font-weight:400; line-height:1.32; letter-spacing:-0.4px; margin:0; }
.dots { position:absolute; bottom:14px; right:40px; display:flex; gap:6px; }
.dots span { width:8px; height:8px; border-radius:0px; background:rgba(255,255,255,0.4); }
.dots span.active { background:#007fa8; border-radius:6px; width:18px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:24px 40px; }
.card { border:1px solid #eeeeee; }
.card .thumb { height:110px; background:#f4f4f4; }
.card .info { padding:12px; display:flex; justify-content:space-between; align-items:center; }
.card h3 { font-size:16px; font-weight:500; margin:0; }
.btn-navy { background:#002c5f; color:#ffffff; padding:8px 16px; font-size:14px; font-weight:500; }
.chatbot { position:absolute; bottom:20px; right:20px; width:44px; height:44px; border-radius:100%;
background:#00aad2; box-shadow:rgba(0,0,0,0.15) 0px 0px 20px 0px; }
footer { border-top:1px solid #eeeeee; padding:14px 40px; display:flex; justify-content:space-between;
font-size:12px; color:#444444; }
</style></head>
<body>
<nav>
<span class="logo">Hyundai</span>
<div class="navlinks"><span>Vehicles</span><span>Mobility</span><span>Brand</span></div>
</nav>
<section class="hero">
<h1>The New IONIQ</h1>
<div class="dots"><span></span><span class="active"></span><span></span></div>
</section>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="info"><h3>IONIQ 6</h3><span class="btn-navy">Explore</span></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h3>Tucson</h3><span class="btn-navy">Explore</span></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h3>Palisade</h3><span class="btn-navy">Explore</span></div></div>
</div>
<div class="chatbot"></div>
<footer>
<span>© Hyundai</span>
<span>Family Site</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #333333; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #333333; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323232; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: 1px solid #323232; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #333333; color: #f5f5f5;
border: 1px solid #525252; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #333333; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", system-ui, sans-serif; }
* { box-sizing:border-box; }
header { height:56px; background:#000000; display:flex; align-items:center; }
.navlist { display:flex; height:100%; }
.navlist li { list-style:none; height:100%; display:flex; align-items:center; padding:20px 13px;
color:#ffffff; font-size:14px; font-weight:400; }
.breadcrumb { padding:16px 40px 0; font-size:12px; color:#888; }
main { padding:20px 40px 0; }
h1.m-h1 { font-size:30px; font-weight:700; line-height:42px; margin:0 0 8px; color:#333333; }
p.m-text-lead { font-size:16px; font-weight:400; line-height:32px; color:#656565; margin:0 0 24px; max-width:640px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid #e2e2e2; }
.cell { border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; padding:22px 22px; }
.cell:nth-child(3n) { border-right:none; }
.cell .tag { font-size:11px; color:#999; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; }
.cell h3 { font-size:16px; font-weight:700; margin:0 0 8px; color:#333; }
.cell p { font-size:13px; color:#656565; line-height:1.6; margin:0; }
footer { position:absolute; bottom:0; width:960px; height:52px; background:#f7f7f7; border-top:1px solid #e2e2e2;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; color:#888; }
</style></head>
<body>
<header>
<ul class="navlist">
<li>SoftBank</li>
<li>Mobile</li>
<li>Broadband</li>
<li>Business</li>
<li>Company</li>
</ul>
</header>
<div class="breadcrumb">Home / Products & Services / Solutions</div>
<main>
<h1 class="m-h1">Information Revolution — Happiness for Everyone</h1>
<p class="m-text-lead">Building on our communications infrastructure, we're expanding the real-world use of AI across society, aiming to solve social challenges through technology.</p>
<div class="grid">
<div class="cell"><div class="tag">Mobile</div><h3>Mobile Communication Services</h3><p>A network supporting daily life, from voice and data to device sales.</p></div>
<div class="cell"><div class="tag">AI</div><h3>Activate AI for Society</h3><p>Driving AI adoption across society to create value for both industry and everyday life.</p></div>
<div class="cell"><div class="tag">Enterprise</div><h3>Enterprise Solutions</h3><p>An integrated service platform combining communications, cloud, and security.</p></div>
</div>
</main>
<footer>
<span>© SoftBank</span>
<span>Company / Careers / Privacy</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #171717; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #171717; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #919191; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #171717; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #171717; color: #f5f5f5;
border: 1px solid #3b3b3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919191; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #21233a; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171717; box-sizing:border-box;
font-family:Geist,-apple-system,BlinkMacSystemFont,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #ebebeb; }
.brand { font-weight:600; font-size:16px; display:flex; align-items:center; gap:8px; }
.tri { width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:14px solid #171717; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#4d4d4d; }
.btn { background:#171717; color:#ffffff; border-radius:6px; padding:8px 16px; font-size:14px; font-weight:500; }
.hero { padding:44px 36px 26px; text-align:center; }
.hero h1 { font-size:52px; font-weight:400; letter-spacing:-2.5px; line-height:1; margin:0 0 14px; }
.hero p { font-size:16px; color:#4d4d4d; margin:0 auto; max-width:480px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #ebebeb; margin:26px 36px 0; }
.cell { border-right:1px solid #ebebeb; border-top:1px solid #ebebeb; padding:20px; }
.cell:nth-child(3n) { border-right:none; }
.cell:nth-child(-n+3) { border-top:none; }
.cell .k { font-family:"Geist Mono",monospace; font-size:11px; color:#666666; margin-bottom:10px; }
.cell h3 { font-size:16px; font-weight:600; margin:0 0 8px; letter-spacing:-0.3px; }
.cell p { font-size:13px; color:#4d4d4d; margin:0; line-height:1.5; }
.code { background:#fafafa; border:1px solid #ebebeb; border-radius:6px; margin:16px 36px 0; padding:14px 18px;
font-family:"Geist Mono",monospace; font-size:12.5px; color:#171717; display:flex; justify-content:space-between; align-items:center; }
.code .prompt { color:#666666; }
</style></head>
<body>
<nav>
<span class="brand"><span class="tri"></span>Vercel</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Resources</span><span>Enterprise</span><span>Docs</span></div>
<button class="btn">Deploy</button>
</nav>
<section class="hero">
<h1>Build and deploy on the frontend cloud</h1>
<p>Your complete platform for the web — from framework to infrastructure to observability.</p>
</section>
<div class="code"><span class="prompt">$</span> vercel deploy --prod <span style="color:#666;">→ ready in 4.2s</span></div>
<div class="grid">
<div class="cell"><div class="k">01 / Framework</div><h3>Next.js on Vercel</h3><p>Zero-config builds with edge rendering and instant cache invalidation.</p></div>
<div class="cell"><div class="k">02 / Observability</div><h3>Speed Insights</h3><p>Real user metrics across every deployment, tied to the commit.</p></div>
<div class="cell"><div class="k">03 / AI</div><h3>AI SDK & v0</h3><p>Ship generative interfaces with the same pipeline as your app.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; margin: 0; color: #1d1d1f; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: -0.12px; margin: 0; color: #cccccc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; background: #0066cc; color: #ffffff;
border: none; border-radius: 9999px; padding: 11px 22px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; background: #ffffff; color: #0066cc;
border: 1px solid #0066cc; border-radius: 9999px;
padding: 11px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; background: #ffffff; color: #1d1d1f;
border: 1px solid #c6c6c7; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #cccccc; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.43; letter-spacing: -0.224px; background: #ffffff; color: #1d1d1f;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f7; color:#1d1d1f; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#000000; }
.brand { color:#f5f5f7; font-size:15px; font-weight:600; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:26px; }
.navlinks span { color:#f5f5f7; opacity:0.72; font-size:12px; font-weight:400; }
.stage { display:flex; height:588px; }
.productPane { width:520px; background:#000000; position:relative; display:flex;
flex-direction:column; align-items:center; justify-content:center; padding:28px; overflow:hidden; }
.productPane .eyebrow { color:#6e6e73; font-size:13px; font-weight:600; letter-spacing:0.02em; margin:0 0 6px; }
.productPane h1 { color:#f5f5f7; font-size:34px; font-weight:600; letter-spacing:-0.6px; margin:0 0 10px; text-align:center; }
.productPane p.tag { color:#a1a1a6; font-size:15px; margin:0 0 28px; text-align:center; max-width:360px; }
.device { position:relative; width:230px; height:230px; margin-bottom:20px; }
.device .ring { position:absolute; inset:0; border-radius:50%;
background:radial-gradient(circle at 34% 28%, #3a3a3c, #0071e3 46%, #000000 100%);
box-shadow: inset 0 0 40px rgba(255,255,255,0.08); }
.device .core { position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px;
border-radius:22px; background:linear-gradient(145deg,#2997ff,#0071e3); }
.pillrow { display:flex; gap:12px; }
.btn-primary { background:#0071e3; color:#ffffff; border:none; border-radius:980px;
padding:11px 21px; font-weight:400; font-size:15px; }
.btn-outline { background:transparent; color:#2997ff; border:1px solid #2997ff; border-radius:980px;
padding:11px 21px; font-weight:400; font-size:15px; }
.thumbrow { position:absolute; bottom:20px; left:28px; right:28px; display:flex; gap:10px; justify-content:center; }
.thumb { width:40px; height:40px; border-radius:10px; background:#1d1d1f; border:1px solid #3a3a3c; }
.thumb.active { border-color:#2997ff; background:#0071e3; }
.buyPane { flex:1; background:#ffffff; padding:30px 32px; display:flex; flex-direction:column; }
.buyPane h2 { font-size:22px; font-weight:600; letter-spacing:-0.3px; margin:0 0 4px; }
.buyPane .price { font-size:19px; font-weight:400; color:#1d1d1f; margin:0 0 18px; }
.buyPane .price span { color:#6e6e73; font-size:13px; font-weight:400; margin-left:8px; }
.swatchLabel { font-size:12px; color:#6e6e73; margin:0 0 8px; font-weight:400; }
.swatches { display:flex; gap:10px; margin-bottom:22px; }
.swatch { width:26px; height:26px; border-radius:50%; border:2px solid transparent; }
.s1{background:#e3e4e6;} .s2{background:#1d1d1f; border-color:#0071e3;} .s3{background:#0071e3;} .s4{background:#8e6b4f;}
.specs { border-top:1px solid #d2d2d7; padding-top:16px; margin-top:auto; }
.specrow { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #e8e8ed; font-size:13px; }
.specrow span:first-child { color:#6e6e73; }
.specrow span:last-child { color:#1d1d1f; font-weight:400; }
.buyBtn { margin-top:18px; background:#0071e3; color:#ffffff; border:none; border-radius:980px;
padding:12px 0; width:100%; font-size:16px; font-weight:400; text-align:center; }
.buyOutline { margin-top:10px; background:transparent; color:#0066cc; border:1px solid #0066cc; border-radius:980px;
padding:11px 0; width:100%; font-size:15px; font-weight:400; text-align:center; }
</style></head>
<body>
<nav>
<p class="brand">Apple</p>
<div class="navlinks"><span>Store</span><span>Mac</span><span>iPad</span><span>Watch</span><span>Support</span></div>
</nav>
<div class="stage">
<div class="productPane">
<p class="eyebrow">Apple</p>
<h1>Designed to feel inevitable.</h1>
<p class="tag">Precision hardware, calm software, and a single blue action to move forward.</p>
<div class="device"><div class="ring"></div><div class="core"></div></div>
<div class="pillrow">
<button class="btn-primary">Buy</button>
<button class="btn-outline">Learn more</button>
</div>
<div class="thumbrow">
<div class="thumb active"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div>
</div>
</div>
<div class="buyPane">
<h2>Apple Studio, 256GB</h2>
<p class="price">$1,199.00 <span>or $99.91/mo. for 12 mo.</span></p>
<p class="swatchLabel">Finish</p>
<div class="swatches">
<div class="swatch s1"></div><div class="swatch s2"></div><div class="swatch s3"></div><div class="swatch s4"></div>
</div>
<div class="specs">
<div class="specrow"><span>Chip</span><span>M-series, 12-core</span></div>
<div class="specrow"><span>Display</span><span>13.6-inch Liquid Retina</span></div>
<div class="specrow"><span>Battery</span><span>Up to 18 hours</span></div>
<div class="specrow"><span>Finish</span><span>Space Grey</span></div>
</div>
<button class="buyBtn">Add to Bag</button>
<button class="buyOutline">Check availability</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #862983; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #862983; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c399c2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a6a3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #862983; color: #00a6a3;
border: 1px solid #00a6a3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #862983; color: #f5f5f5;
border: 1px solid #984a95; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c399c2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #713d88; color: #00a6a3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#333333; box-sizing:border-box;
font-family:"Noto Sans", "Noto Sans TC", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-weight:700; font-size:17px; color:#0c2340; }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:600; color:#0c2340; }
.navlinks span:nth-child(2) { color:#862983; }
.join { background:#862983; color:#fff; border:none; border-radius:6px; padding:8px 18px; font-size:14px; font-weight:600; }
.hero { height:220px; background:linear-gradient(160deg,#6e28af,#ac8ffe); display:flex; flex-direction:column;
align-items:center; justify-content:center; text-align:center; gap:12px; color:#fff; position:relative; }
.hero h1 { font-size:32px; font-weight:800; margin:0; letter-spacing:0.3px; }
.hero p { font-size:14px; margin:0; opacity:0.9; }
.hero-btn { border:2px solid #fff; color:#fff; background:transparent; border-radius:9999px; padding:10px 30px; font-size:15px; font-weight:600; }
.plans { display:flex; gap:20px; padding:26px 40px; }
.plan { flex:1; background:#fff; border-radius:12px; box-shadow:rgba(99,99,99,0.2) 0px 2px 8px 0px; padding:22px; }
.plan h3 { font-size:18px; margin:0 0 4px; color:#000; }
.plan .price { font-size:24px; font-weight:800; color:#862983; margin:0 0 12px; }
.plan ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.plan li { font-size:13px; color:#333; }
.plan li::before { content:'✓ '; color:#12a3a0; font-weight:700; }
.plan .cta { margin-top:14px; width:100%; background:#862983; color:#fff; border:none; border-radius:6px; padding:10px; font-size:14px; font-weight:600; }
.plan.free .cta { background:#fff; color:#862983; border:1px solid #862983; }
</style></head>
<body>
<nav>
<div class="brand">Portaly</div>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Portaly AI</span><span>Blog</span></div>
<button class="join">Join Now</button>
</nav>
<div class="hero">
<h1>Your All-in-One Platform for Growth and Profit</h1>
<p>Join 200,000 creators worldwide to turn passion into profit</p>
<button class="hero-btn">Start for free</button>
</div>
<div class="plans">
<div class="plan free">
<h3>Free</h3>
<div class="price">$0</div>
<ul><li>Unlimited link blocks</li><li>Basic analytics</li><li>Community support</li></ul>
<button class="cta">Start for Free</button>
</div>
<div class="plan">
<h3>Premium</h3>
<div class="price">$12<span style="font-size:13px; color:#969696; font-weight:400;">/mo</span></div>
<ul><li>AI page builder</li><li>Product & lead blocks</li><li>Advanced analytics</li><li>Priority support</li></ul>
<button class="cta">Join Now</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0068ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0068ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0068ff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0068ff; color: #f5f5f5;
border: 1px solid #277ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2980ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#E8ECF1; color:#1A1A1A; box-sizing:border-box;
font-family:"Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; }
.side { width:300px; background:#FFFFFF; border-right:1px solid #E4E6EB; display:flex; flex-direction:column; }
.side .shead { padding:20px 20px 12px; }
.side .shead h1 { font-size:22px; font-weight:700; margin:0 0 12px; }
.search { background:#F4F5F7; border-radius:19px; height:34px; display:flex; align-items:center; padding:0 14px;
color:#9AA0AA; font-size:13px; }
.crow { display:flex; align-items:center; gap:10px; padding:11px 20px; }
.crow.active { background:#F4F5F7; }
.cavatar { width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:700; font-size:13px; position:relative; }
.cavatar.a { background:linear-gradient(135deg,#4D9FFF,#0047B3); }
.cavatar.b { background:linear-gradient(135deg,#FF9F7B,#E23744); }
.cavatar.c { background:linear-gradient(135deg,#7B5CFF,#4D2EBF); }
.cavatar .dot { position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%;
background:#18A957; border:2px solid #fff; }
.cinfo h4 { font-size:14px; font-weight:600; margin:0 0 2px; }
.cinfo p { font-size:12px; color:#6B7280; margin:0; }
.thread-wrap { flex:1; display:flex; flex-direction:column; }
header { height:64px; background:#0068FF; display:flex; align-items:center; padding:0 22px; gap:12px; flex:none; }
header .back { color:#fff; font-size:20px; }
.havatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#4D9FFF,#0047B3);
display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; }
.hwho .name { font-size:15px; font-weight:600; color:#fff; margin:0; }
.hwho .presence { font-size:11px; color:rgba(255,255,255,0.85); margin:1px 0 0; }
.hwho { flex:1; }
.hicons { display:flex; gap:20px; color:#fff; font-size:16px; }
.thread { flex:1; background:#E8ECF1; padding:18px 40px; overflow:hidden; }
.daypill { text-align:center; margin-bottom:14px; }
.daypill span { background:rgba(255,255,255,0.7); color:#6B7280; font-size:11px; font-weight:600;
padding:3px 12px; border-radius:999px; }
.row { display:flex; margin-bottom:6px; align-items:flex-end; gap:8px; }
.row.out { justify-content:flex-end; }
.rowavatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#FF9F7B,#E23744);
flex:none; }
.bubble { max-width:340px; padding:9px 13px; font-size:15px; line-height:1.4; }
.bubble.in { background:#FFFFFF; color:#1A1A1A; border-radius:16px 16px 16px 5px;
box-shadow:0 1px 2px rgba(0,0,0,0.06); }
.bubble.out { background:#DBEBFF; color:#14223A; border-radius:16px 16px 5px 16px; }
.bubble img.imgbub { width:100%; border-radius:14px; display:block; }
.seen { text-align:right; font-size:10px; color:#9AA0AA; margin:0 0 12px; }
.composer { flex:none; height:60px; background:#FFFFFF; border-top:1px solid #E4E6EB;
display:flex; align-items:center; padding:0 16px; gap:12px; }
.composer .ic { font-size:20px; color:#0068FF; }
.field { flex:1; background:#F4F5F7; border-radius:20px; height:38px; display:flex; align-items:center;
padding:0 16px; color:#9AA0AA; font-size:13px; }
.sendbtn { width:38px; height:38px; border-radius:50%; background:#0068FF; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:15px; }
</style></head>
<body>
<div class="app">
<div class="side">
<div class="shead"><h1>Tin nhắn</h1><div style="font-size:11px;color:#9AA0AA;margin:-8px 0 8px;">Zalo (iOS)</div><div class="search">🔍 Tìm kiếm</div></div>
<div class="crow active">
<div class="cavatar a">MJ<span class="dot"></span></div>
<div class="cinfo"><h4>Minh Jae</h4><p>Chị ơi, mai họp mấy giờ?</p></div>
</div>
<div class="crow">
<div class="cavatar b">SY</div>
<div class="cinfo"><h4>Nhóm Sao Yến</h4><p>Đã gửi một hình ảnh</p></div>
</div>
<div class="crow">
<div class="cavatar c">HB</div>
<div class="cinfo"><h4>Hân Bảo</h4><p>Cảm ơn nhiều nha ❤️</p></div>
</div>
</div>
<div class="thread-wrap">
<header>
<span class="back">‹</span>
<div class="havatar">MJ</div>
<div class="hwho"><p class="name">Minh Jae</p><p class="presence">Đang hoạt động</p></div>
<div class="hicons"><span>📞</span><span>📹</span></div>
</header>
<div class="thread">
<div class="daypill"><span>Hôm nay</span></div>
<div class="row"><div class="rowavatar"></div><div class="bubble in">Chị ơi, mai họp lúc mấy giờ vậy ạ?</div></div>
<div class="row out"><div class="bubble out">9 giờ sáng nha em, phòng họp tầng 3</div></div>
<div class="row out"><div class="bubble out">Nhớ mang laptop theo nhé</div></div>
<div class="seen">Đã xem · 09:41</div>
<div class="row"><div class="rowavatar"></div><div class="bubble in">Dạ em nhớ rồi ạ, cảm ơn chị 🙏</div></div>
</div>
<div class="composer">
<span class="ic">😊</span>
<div class="field">Tin nhắn</div>
<span class="ic">📷</span>
<div class="sendbtn">➤</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7f0019; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7f0019; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c08792; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7f0019; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7f0019; color: #f5f5f5;
border: 1px solid #92273c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c08792; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #73081d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { position:relative; height:100%; display:flex; flex-direction:column; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #dddddd; }
.brand { background:#7f0019; color:#fff; padding:4px 12px; font-size:13px; font-weight:400; letter-spacing:0.04em; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#666666; letter-spacing:0.02em; }
.cart { border:1px solid #333333; padding:8px 18px; font-size:13px; }
.lead { padding:36px 40px 20px; }
.lead h1 { font-size:28px; font-weight:300; letter-spacing:0.02em; margin:0 0 8px; }
.lead p { font-size:14px; color:#666666; line-height:1.7; margin:0; max-width:560px; }
.grid { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:8px 40px 24px; }
.card { display:flex; flex-direction:column; gap:8px; }
.photo { aspect-ratio:1; background:#f7f7f7; position:relative; overflow:hidden; }
.photo .obj { position:absolute; border-radius:2px; background:#e6e0d6; }
.c1 .photo .obj { width:60%; height:70%; left:20%; top:14%; background:#eee3d3; }
.c2 .photo .obj { width:40%; height:55%; left:30%; top:22%; background:#ded6c6; border-radius:50%; }
.c3 .photo .obj { width:70%; height:30%; left:15%; bottom:20%; background:#e3ddd0; }
.c4 .photo .obj { width:36%; height:66%; left:32%; top:16%; background:#e7e1d5; }
.tag { position:absolute; top:8px; left:8px; background:#7f0019; color:#fff; font-size:10px; padding:2px 8px; }
.title { font-size:13px; }
.price { font-size:14px; }
.price.sale { color:#7f0019; }
footer { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-top:1px solid #dddddd; font-size:11px; color:#666666; }
</style></head>
<body>
<div class="wrap">
<nav>
<div class="brand">MUJI</div>
<div class="navlinks"><span>Clothing</span><span>Furniture</span><span>Stationery</span><span>Food</span></div>
<div class="cart">Cart (0)</div>
</nav>
<div class="lead">
<h1>No-brand quality goods</h1>
<p>Lower priced for a reason. Simple materials, honest process — the product speaks, the chrome stays silent.</p>
</div>
<div class="grid">
<div class="card c1"><div class="photo"><div class="obj"></div></div><span class="title">Organic Cotton Shirt</span><span class="price">$29.90</span></div>
<div class="card c2"><div class="photo"><div class="obj"></div><div class="tag">NEW</div></div><span class="title">Ceramic Mug</span><span class="price">$12.50</span></div>
<div class="card c3"><div class="photo"><div class="obj"></div></div><span class="title">Storage Box, Set of 3</span><span class="price sale">$18.00</span></div>
<div class="card c4"><div class="photo"><div class="obj"></div></div><span class="title">Gel Ink Pen</span><span class="price">$3.20</span></div>
<div class="card c1"><div class="photo"><div class="obj"></div></div><span class="title">Linen Cushion Cover</span><span class="price">$15.90</span></div>
<div class="card c2"><div class="photo"><div class="obj"></div></div><span class="title">Travel Pouch</span><span class="price">$9.50</span></div>
<div class="card c3"><div class="photo"><div class="obj"></div><div class="tag">NEW</div></div><span class="title">Aroma Diffuser</span><span class="price">$34.00</span></div>
<div class="card c4"><div class="photo"><div class="obj"></div></div><span class="title">Notebook, A5</span><span class="price sale">$4.50</span></div>
</div>
<footer>
<span>© MUJI</span>
<span>MUJI · Clothing · Furniture · Stationery · Food</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a8a8a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #fa520f; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #1f1f1f;
border: 1px solid #fa520f; border-radius: 8px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1f1f1f;
border: 1px solid #c7c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8a8a8; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #fa520f; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fff8e0; color:#1f1f1f; box-sizing:border-box;
font-family:Georgia,"Times New Roman",Times,serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#4a4a4a; }
.btn { background:#fa520f; color:#fff; border:none; border-radius:8px; padding:9px 20px; font-weight:600; font-size:13px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
/* 대표 시각 모먼트: 산맥 위로 지는 해 그라디언트(mustard→orange→deep red) —
실제 사진 대신 CSS 로 능선을 근사한다. 세리프 히어로가 그 위에 얹힌다. */
.hero { position:relative; height:300px; overflow:hidden;
background:linear-gradient(180deg,#ffd06a 0%,#ffa110 45%,#fa520f 75%,#cc3a05 100%); }
.ridge { position:absolute; bottom:0; left:0; right:0; height:120px; background:#2c1608;
clip-path:polygon(0 100%,0 55%,10% 70%,22% 40%,35% 60%,48% 30%,60% 55%,74% 25%,88% 50%,100% 35%,100% 100%); }
.ridge2 { position:absolute; bottom:0; left:0; right:0; height:70px; background:#1a0d05; opacity:0.85;
clip-path:polygon(0 100%,0 70%,15% 85%,30% 55%,50% 80%,65% 45%,82% 70%,100% 50%,100% 100%); }
.herocopy { position:relative; z-index:2; text-align:center; padding-top:44px; }
.herocopy .tag { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#fff8e0; opacity:0.9; }
.herocopy h1 { font-size:52px; font-weight:400; letter-spacing:-1px; margin:10px 0 0; color:#fff; line-height:1.05; }
.body { padding:26px 40px; display:flex; gap:28px; }
.col { flex:1; }
.col h3 { font-size:20px; font-weight:400; margin:0 0 6px; }
.col p { font-size:13px; color:#3d3d3d; line-height:1.6; margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.swatch { width:34px; height:34px; border-radius:6px; margin-bottom:10px; }
.sw1 { background:#ff8105; } .sw2 { background:#ffd900; } .sw3 { background:#fa520f; }
/* 시그니처 "sunset stripe" — 매 페이지를 닫는 가로 그라디언트 바 */
.stripe { height:64px; background:linear-gradient(90deg,#ffd06a,#ffa110,#fa520f,#cc3a05,#ff8105,#ffd900);
display:flex; align-items:center; justify-content:space-between; padding:0 40px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
color:#1f1f1f; font-size:12px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Mistral AI</p>
<div class="navlinks"><span>Le Studio</span><span>Coding</span><span>Solutions</span><span>Pricing</span></div>
<button class="btn">Try the API</button>
</nav>
<div class="hero">
<div class="herocopy">
<span class="tag">Frontier AI</span>
<h1>Intelligence, in the open</h1>
</div>
<div class="ridge2"></div>
<div class="ridge"></div>
</div>
<div class="body">
<div class="col"><span class="swatch sw1"></span><h3>Le Studio</h3><p>Build, evaluate, and deploy custom AI agents with full observability.</p></div>
<div class="col"><span class="swatch sw2"></span><h3>Codestral</h3><p>A coding model tuned for low-latency completions across 80+ languages.</p></div>
<div class="col"><span class="swatch sw3"></span><h3>Enterprise</h3><p>Deploy on your own cloud, on-prem, or fully managed — your choice.</p></div>
</div>
<div class="stripe">
<span>© Mistral AI</span>
<span>Frontier AI · Le Studio · Docs · Contact</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Kakao Games detail mock</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:'SUIT Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
* { box-sizing:border-box; }
.wrap { width:960px; height:640px; display:grid; grid-template-rows:56px 260px 1fr 48px; }
/* nav */
.nav { display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #000000; }
.nav .brand { font-size:20px; font-weight:700; letter-spacing:-0.2px; color:#000000; }
.nav .links { display:flex; gap:24px; }
.nav .links span { font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#000000; }
/* hero */
.hero { position:relative; overflow:hidden; background:#000000; }
.heroart { position:absolute; inset:0;
background:
radial-gradient(420px 320px at 78% 20%, rgba(255,150,60,0.35), rgba(255,150,60,0) 70%),
linear-gradient(135deg, #2a2a2a 0%, #101010 55%, #000000 100%); }
.heroart .ridge { position:absolute; left:0; right:0; bottom:0; height:120px;
background:#000000; clip-path:polygon(0% 100%, 0% 60%, 15% 40%, 30% 65%, 46% 30%, 62% 58%, 78% 20%, 100% 50%, 100% 100%); opacity:0.85; }
.herotext { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
justify-content:center; padding:0 40px; gap:14px; max-width:640px; }
.tag { display:inline-flex; align-self:flex-start; border:1px solid #ffffff; color:#ffffff;
font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; }
.herotext h1 { margin:0; font-size:50px; font-weight:700; line-height:1.2; letter-spacing:0; color:#ffffff; }
.herotext p { margin:0; font-size:16px; font-weight:300; line-height:1.4; color:#ffffff; opacity:0.85; max-width:480px; }
.arrow { position:absolute; right:24px; bottom:20px; z-index:3; width:60px; height:60px;
border:1px solid #ffffff; display:flex; align-items:center; justify-content:center; }
.arrow span { display:block; width:12px; height:12px; border-right:2px solid #ffffff; border-bottom:2px solid #ffffff;
transform:rotate(-135deg); }
/* catalogue */
.catalogue { padding:24px 32px 0 32px; }
.catalogue h2 { margin:0 0 18px 0; font-size:34px; font-weight:600; line-height:1; color:#000000; }
.cards { display:flex; gap:20px; }
.card { flex:1; border:1px solid #000000; border-radius:0; padding-bottom:40px; display:flex; flex-direction:column; }
.card .art { height:96px; position:relative; overflow:hidden; border-bottom:1px solid #000000; }
.card .art .b1 { position:absolute; inset:0; background:linear-gradient(160deg,#1c1c1c,#000000); }
.card .art .b2 { position:absolute; width:70px; height:70px; border-radius:50%; right:-20px; top:-20px; }
.card.c1 .art .b2 { background:radial-gradient(circle, rgba(120,180,255,0.55), rgba(120,180,255,0) 70%); }
.card.c2 .art .b2 { background:radial-gradient(circle, rgba(255,120,90,0.5), rgba(255,120,90,0) 70%); }
.card.c3 .art .b2 { background:radial-gradient(circle, rgba(200,150,255,0.5), rgba(200,150,255,0) 70%); }
.card .meta { padding:14px 14px 0 14px; }
.card .meta .title { font-size:15px; font-weight:700; color:#000000; }
.card .meta .genre { margin-top:4px; font-size:12px; font-weight:400; color:#898989; }
/* footer */
.footer { border-top:1px solid #000000; padding:0 32px; display:flex; align-items:center;
justify-content:space-between; font-size:14px; font-weight:300; line-height:1.4; color:#898989; }
.footer .links { display:flex; gap:18px; }
</style></head>
<body>
<div class="wrap">
<div class="nav">
<div class="brand">Kakao Games</div>
<div class="links"><span>Games</span><span>Studios</span><span>News</span></div>
</div>
<div class="hero">
<div class="heroart"><div class="ridge"></div></div>
<div class="herotext">
<div class="tag">MMORPG · Global Launch</div>
<h1>Emberfall Odyssey</h1>
<p>An open-world adventure spanning mobile, PC, and console — uniting players across every platform this fall.</p>
</div>
<div class="arrow"><span></span></div>
</div>
<div class="catalogue">
<h2>More from our studios</h2>
<div class="cards">
<div class="card c1">
<div class="art"><div class="b1"></div><div class="b2"></div></div>
<div class="meta"><div class="title">Nebula Frontier</div><div class="genre">MMORPG</div></div>
</div>
<div class="card c2">
<div class="art"><div class="b1"></div><div class="b2"></div></div>
<div class="meta"><div class="title">Iron Requiem</div><div class="genre">Strategy</div></div>
</div>
<div class="card c3">
<div class="art"><div class="b1"></div><div class="b2"></div></div>
<div class="meta"><div class="title">Whisker Kingdoms</div><div class="genre">Casual</div></div>
</div>
</div>
</div>
<div class="footer">
<span>© Kakao Games. All titles and trademarks are property of their respective owners.</span>
<div class="links"><span>Privacy</span><span>Terms</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6c37; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ff6c37;
border: 1px solid #ff6c37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3f271f; color: #ff6c37;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#E8E8E8; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'SF Mono', ui-monospace, Menlo, Consolas, monospace; }
.app { position:relative; width:960px; height:640px; background:#1A1A1A; }
.topbar { position:absolute; top:0; left:0; right:0; height:44px; display:flex; align-items:center;
justify-content:space-between; padding:0 18px; }
.topleft { display:flex; align-items:center; gap:10px; }
.roundel { width:24px; height:24px; border-radius:50%; background:#FF6C37; display:flex; align-items:center;
justify-content:center; color:#fff; font-size:12px; font-weight:800; }
.reqname { font-size:16px; font-weight:600; color:#E8E8E8; }
.saveaction { font-size:13px; font-weight:600; color:#FF6C37; display:flex; align-items:center; gap:6px; }
.savedot { width:6px; height:6px; border-radius:50%; background:#FF6C37; }
.urlbar { position:absolute; top:52px; left:18px; right:18px; height:44px; background:#212121;
border:1px solid #444444; border-radius:10px; display:flex; align-items:center; overflow:hidden; }
.methodpill { padding:0 14px; height:100%; display:flex; align-items:center; font-size:13px; font-weight:700;
letter-spacing:0.02em; color:#6BDD9A; border-right:1px solid #444444; }
.urlfield { flex:1; padding:0 12px; font-size:13px; color:#E8E8E8; white-space:nowrap; overflow:hidden; }
.sendbtn { height:100%; padding:0 22px; background:#FF6C37; color:#fff; font-size:13px; font-weight:700;
display:flex; align-items:center; font-family:-apple-system, BlinkMacSystemFont, sans-serif; }
.tabstrip { position:absolute; top:104px; left:18px; right:18px; height:32px; display:flex; align-items:center;
gap:20px; border-bottom:1px solid #3A3A3A; }
.rtab { font-size:13px; font-weight:500; color:#A6A6A6; padding-bottom:9px; position:relative; }
.rtab.active { font-weight:600; color:#E8E8E8; border-bottom:2px solid #FF6C37; }
.rtab .dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#6BDD9A; margin-left:5px; vertical-align:middle; }
.kvsection { position:absolute; top:148px; left:18px; right:18px; }
.kveyebrow { font-size:12px; font-weight:500; letter-spacing:0.04em; color:#A6A6A6; margin:0 0 8px; text-transform:uppercase; }
.kvrow { display:flex; gap:8px; margin-bottom:8px; }
.kvcell { background:#212121; border:1px solid #3A3A3A; border-radius:6px; padding:9px 10px; font-size:12px; }
.kvkey { flex:0 0 38%; color:#74AEF6; }
.kvval { flex:1; color:#E8E8E8; }
.respsection { position:absolute; top:262px; left:18px; right:18px; bottom:64px; }
.resphead { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.statuschip { font-size:12px; font-weight:700; letter-spacing:0.02em; padding:5px 10px; border-radius:999px;
background:rgba(107,221,154,0.08); border:1px solid rgba(107,221,154,0.4); color:#6BDD9A; }
.respmeta { font-size:14px; font-weight:400; color:#A6A6A6; }
.jsonblock { background:#161616; border:1px solid #3A3A3A; border-radius:8px; padding:14px; height:calc(100% - 42px);
font-size:12px; line-height:1.6; overflow:hidden; }
.jl { margin:0; white-space:pre; }
.jk { color:#74AEF6; }
.js { color:#6BDD9A; }
.jn { color:#C0A8E1; }
.jp { color:#6E6E6E; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:52px; background:rgba(26,26,26,0.94);
border-top:0.5px solid #3A3A3A; display:flex; align-items:center; justify-content:space-around; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; }
.tab .ic { font-size:18px; color:#6E6E6E; }
.tab .lb { font-size:10px; font-weight:500; color:#6E6E6E; }
.tab.active .ic, .tab.active .lb { color:#FF6C37; }
</style></head>
<body>
<div class="app">
<div class="topbar">
<div class="topleft"><span class="roundel">Postman (iOS)</span><span class="reqname">Get User Profile</span></div>
<span class="saveaction"><span class="savedot"></span>Save</span>
</div>
<div class="urlbar">
<span class="methodpill mono">GET</span>
<span class="urlfield mono">https://api.example.com/v2/users/{{user_id}}/profile</span>
<span class="sendbtn">Send</span>
</div>
<div class="tabstrip">
<span class="rtab active">Params</span>
<span class="rtab">Headers<span class="dot"></span></span>
<span class="rtab">Body</span>
<span class="rtab">Auth</span>
<span class="rtab">Pre-request Script</span>
<span class="rtab">Tests</span>
</div>
<div class="kvsection">
<p class="kveyebrow">Query Params</p>
<div class="kvrow"><span class="kvcell kvkey mono">include</span><span class="kvcell kvval mono">avatar,stats</span></div>
<div class="kvrow"><span class="kvcell kvkey mono">locale</span><span class="kvcell kvval mono">en-US</span></div>
</div>
<div class="respsection">
<div class="resphead">
<span class="statuschip mono">200 OK</span>
<span class="respmeta mono">182 ms · 1.2 KB</span>
</div>
<div class="jsonblock mono">
<p class="jl"><span class="jp">{</span></p>
<p class="jl"> <span class="jk">"id"</span><span class="jp">:</span> <span class="jn">10492</span><span class="jp">,</span></p>
<p class="jl"> <span class="jk">"name"</span><span class="jp">:</span> <span class="js">"Alex Rivera"</span><span class="jp">,</span></p>
<p class="jl"> <span class="jk">"active"</span><span class="jp">:</span> <span class="jn">true</span><span class="jp">,</span></p>
<p class="jl"> <span class="jk">"stats"</span><span class="jp">: {</span></p>
<p class="jl"> <span class="jk">"requests"</span><span class="jp">:</span> <span class="jn">3841</span></p>
<p class="jl"> <span class="jp">}</span></p>
<p class="jl"><span class="jp">}</span></p>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="ic">▶</span><span class="lb">REQUEST</span></div>
<div class="tab"><span class="ic">☰</span><span class="lb">COLLECTIONS</span></div>
<div class="tab"><span class="ic">↻</span><span class="lb">HISTORY</span></div>
<div class="tab"><span class="ic">⚙</span><span class="lb">ENVIRONMENTS</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 25.3px; letter-spacing: -0.22px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; line-height: 11px; letter-spacing: 0.55px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 16px; letter-spacing: 0.08px; background: #000000; color: #ffffff;
border: none; border-radius: 4px; padding: {spacing.xs} {spacing.2xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 16px; letter-spacing: 0.08px; background: #c8f6f9; color: #000000;
border: 1px solid #000000; border-radius: 4px;
padding: {spacing.xs} {spacing.2xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20.8px; letter-spacing: -0.16px; background: #ffffff; color: #000000;
border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 20.8px; letter-spacing: -0.16px; background: #ffffff; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#010120; }
.brand { font-size:16px; font-weight:600; color:#ffffff; letter-spacing:-.2px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#ffffff; opacity:.8; }
.navcta { background:#000000; color:#ffffff; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:600; }
.heroband { background:#010120; padding:34px 32px 40px; display:flex; gap:20px; align-items:center; }
.heroleft { flex:1.1; }
.eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#bdbbff; margin-bottom:10px; }
.heroleft h1 { font-size:36px; font-weight:500; line-height:1.05; letter-spacing:-.6px; color:#ffffff; margin:0 0 12px; max-width:420px; }
.heroleft p { font-size:14px; color:#c8c8de; margin:0 0 18px; max-width:400px; }
.btnrow { display:flex; gap:10px; }
.btn { border-radius:4px; padding:9px 18px; font-size:13px; font-weight:600; }
.btn-blk { background:#000000; color:#ffffff; }
.btn-out { background:transparent; color:#ffffff; border:1px solid #4a4a66; }
.ribbon { flex:1; height:150px; border-radius:8px; position:relative; overflow:hidden;
background:linear-gradient(115deg,#fc4c02 0%,#ef2cc1 48%,#bdbbff 100%); }
.ribbon::after { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(115deg, rgba(1,1,32,0) 0px, rgba(1,1,32,0) 22px, rgba(1,1,32,.14) 22px, rgba(1,1,32,.14) 24px); }
.midband { background:#ffffff; padding:30px 32px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stat { border:1px solid #959494; border-radius:4px; padding:18px; }
.stat.tinted { background:#c8f6f9; border-color:#959494; }
.stat .num { font-size:26px; font-weight:600; color:#000000; }
.stat .lbl { font-size:12px; color:#959494; margin-top:4px; }
.stat.tinted .lbl { color:#01344a; }
.row2 { display:flex; gap:18px; margin-top:18px; }
.card { flex:1; border:1px solid #959494; border-radius:4px; padding:16px; background:#ffffff; }
.card .tag { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#959494; }
.card h3 { font-size:15px; font-weight:600; margin:8px 0 4px; }
.card p { font-size:12px; color:#959494; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<div class="brand">Together AI</div>
<div class="navlinks"><span>Platform</span><span>Research</span><span>Pricing</span><span>Docs</span></div>
<div class="navcta">Get started</div>
</nav>
<div class="heroband">
<div class="heroleft">
<div class="eyebrow mono">Grounded in cutting-edge research</div>
<h1>The fastest inference stack for open models</h1>
<p>Fine-tune, deploy, and scale generative AI on infrastructure built for it.</p>
<div class="btnrow"><button class="btn btn-blk">Start building</button><button class="btn btn-out">Contact sales</button></div>
</div>
<div class="ribbon"></div>
</div>
<div class="midband">
<div class="stats">
<div class="stat"><div class="num">4x</div><div class="lbl">Faster inference throughput</div></div>
<div class="stat tinted"><div class="num">200+</div><div class="lbl">Open-source models supported</div></div>
<div class="stat"><div class="num">11ms</div><div class="lbl">Median time to first token</div></div>
</div>
<div class="row2">
<div class="card"><div class="tag">Inference</div><h3>Serverless endpoints</h3><p>Pay per token with sub-second cold starts across every region.</p></div>
<div class="card"><div class="tag">Fine-tuning</div><h3>Custom model training</h3><p>Bring your data and ship a private model in an afternoon.</p></div>
<div class="card"><div class="tag">GPU Clusters</div><h3>Dedicated capacity</h3><p>Reserve H100 and H200 clusters for large training runs.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #102c40; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #102c40; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9ba4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #102c40; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #102c40; color: #f5f5f5;
border: 1px solid #354c5d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9ba4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #364e5f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#102c40; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; color:#ffffff; margin:0; }
.navlinks { display:flex; gap:20px; color:#ffffff; opacity:0.85; font-size:14px; }
.cta { background:#222222; color:#ffffff; border:1px solid transparent; border-radius:8px; padding:8px 20px; font-size:14px; font-weight:450; height:42px; display:flex; align-items:center; }
.hero { padding:36px 40px 20px; }
.hero h1 { font-size:48px; font-weight:700; line-height:1.1; letter-spacing:-1.6px; margin:0 0 14px; max-width:640px; }
.hero p { font-size:16px; color:#0b1012; opacity:0.7; max-width:480px; margin:0 0 20px; }
.section-title { font-size:32px; font-weight:700; margin:20px 40px 12px; letter-spacing:-0.6px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px; }
.card { background:#ffffff; border:1px solid #cfd5d7; border-radius:8px; height:150px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; }
.card .link { color:#0000ee; font-size:14px; text-decoration:underline; }
.card h3 { font-size:16px; font-weight:700; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Horizon</p>
<div class="navlinks"><span>Getting Started</span><span>Workspace</span><span>Components</span></div>
<button class="cta">Explore</button>
</nav>
<section class="hero">
<h1>ServiceNow Horizon Design System</h1>
<p>The source of truth for experience design across the Now Platform.</p>
</section>
<div class="section-title">Workspace components</div>
<section class="cards">
<div class="card"><h3>Component library</h3><span class="link">View components</span></div>
<div class="card"><h3>Patterns</h3><span class="link">Browse patterns</span></div>
<div class="card"><h3>App frameworks</h3><span class="link">Read guidance</span></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.96px; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 20px; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 24px; background: #171717; color: #ffffff;
border: none; border-radius: 100px; padding: 0px {spacing.sm};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 24px; background: #ffffff; color: #171717;
border: 1px solid #171717; border-radius: 100px;
padding: 0px {spacing.sm}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; background: #ffffff; color: #171717;
border: 1px solid #ebebeb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 16px; background: #fafafa; color: #4d4d4d;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171717; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #ebebeb; }
.logo { width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:16px solid #171717; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; color:#4d4d4d; }
.navcta { background:#171717; color:#ffffff; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { position:relative; padding:56px 32px 24px; text-align:center; overflow:hidden; }
.mesh { position:absolute; left:50%; top:0; transform:translateX(-50%); width:640px; height:280px; z-index:0;
background:
radial-gradient(220px 140px at 18% 30%, rgba(0,112,243,.35), transparent 70%),
radial-gradient(220px 160px at 80% 20%, rgba(238,0,238,.28), transparent 70%),
radial-gradient(200px 150px at 55% 70%, rgba(245,166,35,.30), transparent 70%),
radial-gradient(180px 140px at 30% 80%, rgba(0,200,220,.28), transparent 70%);
filter:blur(6px); opacity:.8; }
.eyebrow { position:relative; font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:11px;
letter-spacing:.1em; text-transform:uppercase; color:#888888; margin-bottom:14px; }
.hero h1 { position:relative; font-size:46px; font-weight:600; letter-spacing:-2.2px; margin:0 auto 14px; max-width:600px; line-height:1.06; }
.hero p { position:relative; font-size:15px; color:#4d4d4d; margin:0 auto 20px; max-width:420px; }
.btnrow { position:relative; display:flex; gap:10px; justify-content:center; }
.btn { border-radius:6px; padding:9px 18px; font-size:13px; font-weight:500; }
.btn-blk { background:#171717; color:#ffffff; }
.btn-out { background:#ffffff; color:#171717; border:1px solid #ebebeb; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:8px 32px 32px; }
.card { border:1px solid #ebebeb; border-radius:8px; padding:16px; background:#fafafa; }
.termbar { display:flex; gap:5px; margin-bottom:10px; }
.dot { width:8px; height:8px; border-radius:50%; background:#ebebeb; }
.code { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:11.5px; color:#171717; line-height:1.6; }
.code .muted { color:#a1a1a1; }
.code .blue { color:#0070f3; }
.card h3 { font-size:14px; font-weight:600; margin:12px 0 4px; }
.card p { font-size:12px; color:#4d4d4d; margin:0; }
</style></head>
<body>
<nav>
<div class="logo"></div>
<div class="navlinks"><span>Products</span><span>Templates</span><span>Docs</span><span>Enterprise</span><span>Pricing</span></div>
<div class="navcta">Deploy</div>
</nav>
<div class="hero">
<div class="mesh"></div>
<div class="eyebrow">$ vercel deploy</div>
<h1>Build and deploy on the AI Cloud</h1>
<p>Vercel gives you the developer experience and infrastructure to build, scale, and secure a faster web.</p>
<div class="btnrow"><button class="btn btn-blk">Start deploying</button><button class="btn btn-out">Get a demo</button></div>
</div>
<div class="cards">
<div class="card"><div class="termbar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<div class="code">$ vercel<br><span class="muted">▲ Deploying...</span><br><span class="blue">✓ Ready</span> in 1.2s</div>
<h3>Instant rollbacks</h3><p>Every deploy is atomic and reversible.</p></div>
<div class="card"><div class="termbar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<div class="code">edge.config.ts<br><span class="muted">export const</span> runtime<br>= <span class="blue">"edge"</span>;</div>
<h3>Edge network</h3><p>Ship to 100+ regions with zero config.</p></div>
<div class="card"><div class="termbar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<div class="code">next build<br><span class="muted">Compiling...</span><br><span class="blue">✓ Compiled</span> successfully</div>
<h3>Framework-defined</h3><p>Built for Next.js and every major framework.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5f00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5f00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab287; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8200; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5f00; color: #000000;
border: 1px solid #ff8200; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5f00; color: #f5f5f5;
border: 1px solid #fd7727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab287; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff6500; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FF5F00; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#FF5F00; }
.brand { color:#fff; font-weight:900; font-size:18px; letter-spacing:-0.3px; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; font-weight:800; text-transform:uppercase; }
.btn-secondary { background:#000; color:#fff; border:none; border-radius:36px; padding:9px 20px;
font-weight:800; font-size:13px; text-transform:uppercase; }
.hero { padding:26px 32px 18px; text-align:center; }
.badge { display:inline-block; background:#FFCE00; color:#000; border-radius:36px; padding:5px 14px;
font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:12px; }
.hero h1 { color:#fff; font-size:36px; font-weight:900; margin:0 0 8px; letter-spacing:-0.5px; text-transform:uppercase; }
.hero p { color:#F8E8DA; font-size:14px; margin:0 auto; max-width:520px; font-weight:500; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 32px 24px; }
.card { position:relative; background:#fff; border-radius:20px; padding:20px; overflow:hidden;
display:flex; flex-direction:column; gap:8px; }
.card::before { content:''; position:absolute; top:-26px; right:-26px; width:76px; height:76px; border-radius:22px; }
.card.c1::before { background:#FFCE00; transform:rotate(-8deg); }
.card.c2::before { background:#FF8200; transform:rotate(10deg); }
.card.c3::before { background:#F8E8DA; transform:rotate(-6deg); }
.card .tag { position:relative; font-size:10px; font-weight:800; text-transform:uppercase; color:#000; opacity:0.5; letter-spacing:0.05em; }
.card h3 { position:relative; font-size:16px; font-weight:900; margin:0; }
.card p { position:relative; font-size:12px; color:#666666; margin:0; line-height:1.45; }
.card .cta { position:relative; margin-top:auto; align-self:flex-start; background:#FF5F00; color:#fff;
border-radius:36px; padding:7px 16px; font-size:11px; font-weight:800; text-transform:uppercase; }
.strip { background:#000; padding:14px 32px; display:flex; align-items:center; justify-content:space-between; }
.strip .badges { display:flex; gap:8px; }
.strip .chip { background:#FFCE00; color:#000; border-radius:36px; padding:4px 12px; font-size:10px; font-weight:800; text-transform:uppercase; }
.strip .num { color:#fff; font-size:12px; font-weight:700; }
footer { padding:12px 32px; display:flex; justify-content:space-between; align-items:center;
font-size:11px; color:#F8E8DA; background:#FF5F00; font-weight:600; }
</style></head>
<body>
<nav>
<span class="brand">Devsisters</span>
<div class="navlinks"><span>Games</span><span>Studios</span><span>Careers</span><span>News</span></div>
<button class="btn-secondary">Play Now</button>
</nav>
<section class="hero">
<span class="badge">Now Trending</span>
<h1>Run Brave, Bake Joy</h1>
<p>We build worlds people live inside — Cookie Run and beyond, for more people, for longer.</p>
</section>
<section class="cards">
<div class="card c1"><span class="tag">Kingdom</span><h3>Cookie Run: Kingdom</h3><p>Build your kingdom, bake cookies, and battle across the Earthbread saga.</p><span class="cta">Download</span></div>
<div class="card c2"><span class="tag">OvenBreak</span><h3>Cookie Run: OvenBreak</h3><p>The classic runner that started it all — still baking after all these years.</p><span class="cta">Play</span></div>
<div class="card c3"><span class="tag">Studio</span><h3>Devsisters Ventures</h3><p>Investing in the next generation of joyful, globally loved play.</p><span class="cta">Explore</span></div>
</section>
<div class="strip">
<div class="badges"><span class="chip">300M+ Users</span><span class="chip">4 Studios</span></div>
<span class="num">Seoul · Est. 2007</span>
</div>
<footer>
<span>© Devsisters</span>
<span>Devsisters · Games · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.05; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.0; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 6px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.0; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 6px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #fcdfe1; color: #e91d2a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#000000; box-sizing:border-box;
font-family:"Times New Roman", Times, serif; }
* { box-sizing:border-box; }
.frame { position:relative; width:960px; height:640px; background:#000000; padding:8px; }
.inner { position:relative; width:100%; height:100%; background:#ffffff; overflow:hidden; }
.topbanner { background:#000000; color:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:10px 14px; border-bottom:2px solid #000; }
.topbanner .tag { font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:15px; }
.topbanner .tag small { display:block; font-weight:400; font-size:10px; color:#cfcfcf; }
.stickers { display:flex; align-items:center; gap:8px; }
.buysticker { background:#fcc20f; border:1px solid #000; padding:3px 7px; font-family:Arial, Helvetica, sans-serif;
font-weight:700; font-size:11px; color:#000; }
.buysticker b { color:#6a26a4; }
.phone { color:#e91d2a; font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:14px; white-space:nowrap; }
.body2col { display:flex; height:calc(100% - 46px); }
.rail { width:27%; background:#fff; border-right:1px solid #000; padding:10px; }
.railgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; margin-bottom:10px; }
.railitem { font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:10px; text-transform:uppercase;
color:#000; border-bottom:1px solid #0000ee; padding-bottom:3px; }
.ctared { background:#e91d2a; color:#fff; border:1px solid #000; padding:10px; font-size:12px; line-height:1.35; }
.ctared b { display:block; font-family:Arial Black, Arial, sans-serif; font-size:15px; margin-bottom:4px; }
.main { flex:1; padding:10px 14px; overflow:hidden; }
.eyebrow { background:#8e8a25; color:#000; font-family:"Arial Black", Arial, sans-serif; font-weight:900;
font-size:20px; padding:8px 10px; margin-bottom:8px; text-transform:uppercase; }
.ribbon { border:1px solid #000; margin-bottom:8px; display:flex; }
.ribbon-title { background:#fff; border-right:1px solid #000; padding:5px 10px; font-family:Helvetica, Arial, sans-serif;
font-weight:700; font-size:12px; text-transform:uppercase; display:flex; align-items:center; white-space:nowrap; }
.ribbon-body { flex:1; padding:6px 10px; font-size:12px; line-height:1.35; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.r-sage { background:#b3bd95; }
.r-salmon { background:#d77a7a; }
.r-lime { background:#c0d4a7; }
.r-peri { background:#8c9ae0; }
.photonotch { width:46px; height:34px; background:repeating-linear-gradient(135deg,#000 0 4px,#fff 4px 8px);
border:1px solid #000; flex:0 0 auto; }
.newburst { background:#fcc20f; border:1px solid #000; font-family:Helvetica, Arial, sans-serif; font-weight:700;
font-size:9px; padding:2px 5px; transform:rotate(-10deg); position:absolute; margin-left:-6px; margin-top:-14px; }
.footerbar { position:absolute; bottom:0; left:0; right:0; height:34px; background:#fff; border-top:1px solid #000;
display:flex; align-items:center; justify-content:space-between; padding:0 14px; font-size:10px; color:#000; }
.iconnav { display:flex; gap:14px; font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:9px; text-transform:uppercase; }
.iconnav span { border-bottom:2px solid #8e8a25; padding-bottom:2px; }
.copy { color:#0000ee; text-decoration:underline; }
</style></head>
<body>
<div class="frame">
<div class="inner">
<div class="topbanner">
<div class="tag">BUILD YOUR OWN COMPUTER. ONLINE.<small>Dell (1996) — Reliable PC's for High-Performance Computing.</small></div>
<div class="stickers">
<div class="buysticker">BUY <b>a</b> DELL</div>
<div class="phone">1-800-213-DELL</div>
</div>
</div>
<div class="body2col">
<div class="rail">
<div class="railgrid">
<div class="railitem">Online Store</div>
<div class="railitem">Service</div>
<div class="railitem">Why Dell?</div>
<div class="railitem">Government</div>
<div class="railitem">Worldwide</div>
<div class="railitem">Order Status</div>
<div class="railitem">Company Info</div>
<div class="railitem">U.S. Careers</div>
</div>
<div class="ctared">
<b>At Dell (1996).com</b>
we'll help you find the right system, configure it, price it, and order it — direct from the people who build it.
</div>
</div>
<div class="main">
<div class="eyebrow">DIMENSION DESKTOPS</div>
<div class="ribbon">
<div class="newburst">NEW!</div>
<div class="ribbon-title">DIMENSION XPS</div>
<div class="ribbon-body r-peri">
<span>Our fastest desktop system, built for high-performance computing at home or the office.</span>
<div class="photonotch"></div>
</div>
</div>
<div class="ribbon">
<div class="ribbon-title">OPTIPLEX GX PRO</div>
<div class="ribbon-body r-salmon">
<span>Managed corporate desktops with the reliability IT departments demand.</span>
<div class="photonotch"></div>
</div>
</div>
<div class="ribbon">
<div class="ribbon-title">LATITUDE NOTEBOOKS</div>
<div class="ribbon-body r-sage">
<span>Take your office on the road — durable, long battery life, corporate-ready.</span>
<div class="photonotch"></div>
</div>
</div>
<div class="ribbon">
<div class="ribbon-title">OPTIPLEX G SERIES</div>
<div class="ribbon-body r-lime">
<span>The value leader — dependable computing for growing businesses.</span>
<div class="photonotch"></div>
</div>
</div>
</div>
</div>
<div class="footerbar">
<div class="iconnav"><span>Find</span><span>Home</span><span>Online Store</span><span>Service & Support</span></div>
<div><span class="copy">Copyright</span> Dell (1996) Corp. (Terms of Use)</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.17; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.38; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.7px; background: #024ad8; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.7px; background: #ffffff; color: #024ad8;
border: 1px solid #024ad8; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.38; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.38; background: #1a1a1a; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.utility { height:24px; background:#1a1a1a; color:#fff; font-size:10px; display:flex; align-items:center;
justify-content:flex-end; gap:16px; padding:0 30px; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e8e8e8; }
.brand { font-size:16px; font-weight:500; }
.navlinks { display:flex; gap:18px; font-size:12px; color:#1a1a1a; }
.btn-blue { background:#024ad8; color:#fff; border:none; border-radius:4px; padding:9px 18px; font-size:11px;
font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.heroband { position:relative; margin:16px 32px 0; background:#f7f7f7; border-radius:16px; padding:22px 28px;
display:flex; align-items:center; gap:20px; overflow:hidden; }
.chevron { position:absolute; top:0; bottom:0; width:34px; background:#024ad8; clip-path:polygon(40% 0,100% 0,60% 100%,0 100%); }
.chevron.left { left:-6px; } .chevron.right { right:-6px; }
.herocopy { flex:1; z-index:1; }
.herocopy .eyebrow { font-size:11px; font-weight:600; color:#024ad8; text-transform:uppercase; letter-spacing:0.5px; }
.herocopy h1 { font-size:30px; font-weight:500; line-height:1.05; margin:6px 0 8px; }
.herocopy p { font-size:12px; color:#3d3d3d; margin:0 0 10px; }
.heroimg { width:220px; height:120px; background:linear-gradient(140deg,#c9e0fc,#024ad8 120%); border-radius:12px;
flex:0 0 auto; z-index:1; }
.cats { display:flex; gap:14px; padding:16px 32px; }
.catcard { flex:1; background:#fff; border:1px solid #e8e8e8; border-radius:8px; padding:12px; text-align:center; }
.catcard .ic { width:34px; height:34px; background:#f7f7f7; border-radius:50%; margin:0 auto 8px; }
.catcard span { font-size:11px; font-weight:500; }
.prodgrid { display:flex; gap:14px; padding:0 32px 16px; }
.prod { flex:1; background:#fff; border:1px solid #e8e8e8; border-radius:16px; padding:16px; }
.prod .img { height:70px; background:#f7f7f7; border-radius:10px; margin-bottom:10px; }
.prod h4 { font-size:13px; font-weight:500; margin:0 0 4px; }
.prod .price { font-size:14px; font-weight:600; color:#024ad8; }
.darkband { background:#1a1a1a; color:#fff; padding:16px 32px; display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.darkband p { font-size:13px; margin:0; }
.darkband .tabs { display:flex; gap:8px; }
.tab { border-radius:9999px; padding:5px 12px; font-size:10px; background:#292929; }
</style></head>
<body>
<div class="utility">For Business | For Home | Sign in | Cart</div>
<nav>
<span class="brand">HP</span>
<div class="navlinks"><span>Laptops</span><span>Desktops</span><span>Printers</span><span>Accessories</span><span>Solutions</span></div>
<button class="btn-blue">Shop now</button>
</nav>
<div class="heroband">
<div class="chevron left"></div>
<div class="herocopy">
<div class="eyebrow">Limited time</div>
<h1>Save $200 on select laptops</h1>
<p>Powerful performance for work, gaming, and everything between.</p>
<button class="btn-blue">Shop laptops</button>
</div>
<div class="heroimg"></div>
<div class="chevron right"></div>
</div>
<div class="cats">
<div class="catcard"><div class="ic"></div><span>Laptops</span></div>
<div class="catcard"><div class="ic"></div><span>Desktops</span></div>
<div class="catcard"><div class="ic"></div><span>Printers</span></div>
<div class="catcard"><div class="ic"></div><span>Enterprise</span></div>
</div>
<div class="prodgrid">
<div class="prod"><div class="img"></div><h4>Spectre x360</h4><span class="price">$1,299.99</span></div>
<div class="prod"><div class="img"></div><h4>OMEN 16</h4><span class="price">$1,599.99</span></div>
<div class="prod"><div class="img"></div><h4>OfficeJet Pro</h4><span class="price">$249.99</span></div>
</div>
<div class="darkband">
<p>When did work start getting in the way of work?</p>
<div class="tabs"><span class="tab">Browse Topics</span><span class="tab">Live Chat</span><span class="tab">Contact</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0176d3; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0176d3; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bce6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b5cab; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0176d3; color: #ffffff;
border: 1px solid #0b5cab; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0176d3; color: #f5f5f5;
border: 1px solid #288ad8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bce6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0372cd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#080707; box-sizing:border-box;
font-family:"Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"Century Gothic", "Futura", "Avenir Next", -apple-system, sans-serif; font-weight:400; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e5e5e5; background:#ffffff; }
.navleft { display:flex; align-items:center; gap:28px; }
.brand { font-size:17px; font-weight:700; color:#032d60; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13.5px; color:#080707; }
.navlinks span.on { color:#0176d3; font-weight:700; }
.btn-primary { background:#0176d3; color:#ffffff; border:2px solid #0176d3; border-radius:4px;
padding:8px 20px; font-size:13.5px; font-weight:700; letter-spacing:0.02em; white-space:nowrap; }
.btn-secondary { background:#ffffff; color:#0176d3; border:2px solid #0176d3; border-radius:4px;
padding:8px 20px; font-size:13.5px; font-weight:700; letter-spacing:0.02em; white-space:nowrap; }
.hero { padding:22px 32px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.hero h1 { font-size:38px; line-height:1.05; color:#002c6e; margin:0; max-width:640px; }
.hero p { font-size:14px; color:#080707; margin:0; max-width:460px; line-height:1.5; }
.hero .row { display:flex; gap:10px; margin-top:4px; }
.agentband { background:linear-gradient(120deg, #002c6e, #032d60 55%, #014486);
padding:20px 32px 22px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.agentband h2 { font-size:22px; color:#ffffff; margin:0; text-align:center; }
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100%; }
.tile { background:rgba(255,255,255,0.05); border:2px solid rgba(255,255,255,0.1); border-radius:24px;
padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.tile .nm { font-size:13.5px; font-weight:700; color:#ffffff; }
.tile .ds { font-size:10.5px; color:#aacbff; line-height:1.35; }
.bands { display:flex; }
.band { flex:1; padding:16px 22px; }
.band.grey { background:#f4f4f4; }
.band.tint { background:#eaf5fe; }
.band h3 { font-size:14.5px; color:#032d60; margin:0 0 4px; }
.band p { font-size:11.5px; color:#080707; line-height:1.45; margin:0 0 8px; }
.learnmore { font-size:11px; font-weight:700; color:#032d60; }
.carousel { display:flex; align-items:center; justify-content:space-between; padding:12px 32px;
background:#080707; }
.cc-btn { width:30px; height:30px; border-radius:9999px; border:2px solid #ffffff; color:#ffffff;
display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.card-media { flex:1; margin:0 16px; background:#181818; border-radius:22px; padding:10px 18px;
display:flex; align-items:center; justify-content:space-between; }
.card-media .qt { font-size:12px; color:#ffffff; font-style:italic; }
.card-media .who { font-size:10.5px; color:#78b0fd; font-weight:700; white-space:nowrap; margin-left:14px; }
</style></head>
<body>
<nav>
<div class="navleft">
<span class="brand">Salesforce</span>
<div class="navlinks"><span class="on">Agentforce</span><span>Sales</span><span>Service</span><span>Industries</span><span>Pricing</span></div>
</div>
<button class="btn-primary">Start for free</button>
</nav>
<section class="hero">
<h1 class="display">Welcome to the Agentic Enterprise.</h1>
<p>Humans and agents drive customer success together — on the #1 Agentic CRM.</p>
<div class="row">
<button class="btn-primary">Start for free</button>
<button class="btn-secondary">Watch demo</button>
</div>
</section>
<section class="agentband">
<h2 class="display">Bring your brand to life.</h2>
<div class="tiles">
<div class="tile"><span class="nm">Agentforce</span><span class="ds">Autonomous AI agents for every workflow</span></div>
<div class="tile"><span class="nm">Customer 360</span><span class="ds">One customer record, every team</span></div>
<div class="tile"><span class="nm">Data 360</span><span class="ds">Unified, trusted data foundation</span></div>
<div class="tile"><span class="nm">Slack</span><span class="ds">Where agents and teams work together</span></div>
</div>
</section>
<div class="bands">
<div class="band">
<h3>Retail & Consumer Goods</h3>
<p>Simply put, an agentic enterprise is a business where humans and AI agents work together toward customer success.</p>
<span class="learnmore">Learn more →</span>
</div>
<div class="band grey">
<h3>Financial Services</h3>
<p>Trust is our #1 value — every workflow ships with an analyst-cited claim and a plain-language explainer.</p>
<span class="learnmore">Learn more →</span>
</div>
<div class="band tint">
<h3>Healthcare & Life Sciences</h3>
<p>Calculate pricing built on the same brand-blue token that powers every button across the platform.</p>
<span class="learnmore">Learn more →</span>
</div>
</div>
<div class="carousel">
<span class="cc-btn">‹</span>
<div class="card-media">
<span class="qt">"We didn't just adopt a CRM — we became Trailblazers."</span>
<span class="who">— VP Operations, Fortune 500 Retailer</span>
</div>
<span class="cc-btn">›</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe600; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #ffe600; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fffbd6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { display:flex; align-items:center; justify-content:space-between; padding:18px 24px 6px; }
.tabs { display:flex; gap:22px; font-size:15px; font-weight:700; }
.tabs span.on { border-bottom:3px solid #FFE600; padding-bottom:6px; }
.fab { width:34px; height:44px; border-radius:12px; background:#FFE600; display:flex; align-items:center; justify-content:center; font-weight:800; color:#1A1A1A; }
.masonry { column-count:4; column-gap:10px; padding:14px 10px; }
.card { break-inside:avoid; margin-bottom:12px; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); background:#fff; }
.cimg { position:relative; }
.cimg.h1 { height:150px; background:linear-gradient(150deg,#FCE8EE,#F09BB6); }
.cimg.h2 { height:200px; background:linear-gradient(150deg,#E4F5EC,#6FD49E); }
.cimg.h3 { height:120px; background:linear-gradient(150deg,#E6F0FB,#8FBEE8); }
.cimg.h4 { height:170px; background:linear-gradient(150deg,#FFF6CC,#E6CF66); }
.chip { position:absolute; bottom:8px; left:8px; background:rgba(26,26,26,0.55); color:#fff; font-size:9px; font-weight:600; padding:2px 7px; border-radius:8px; }
.cbody { padding:10px 11px; }
.ctitle { font-size:13px; font-weight:600; line-height:1.3; margin-bottom:6px; font-family:'Poppins',sans-serif; }
.tags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; }
.tag { font-size:9px; font-weight:700; padding:2px 6px; border-radius:6px; }
.creator { display:flex; align-items:center; gap:6px; }
.cav { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#F09BB6,#8FBEE8); }
.cname { font-size:10px; color:#6B6B6B; }
.likes { margin-left:auto; font-size:10px; color:#6B6B6B; }
</style></head>
<body>
<div class="top">
<div class="tabs"><span>Following</span><span class="on">For You</span><span>Nearby</span></div>
<div class="fab">+</div>
</div>
<div class="masonry">
<div class="card"><div class="cimg h2"><span class="chip">Guide</span></div>
<div class="cbody"><div class="ctitle">10 aesthetic desk setups that will fix your 2026</div>
<div class="tags"><span class="tag" style="background:#FFF6CC;color:#8A7300;">Home</span></div>
<div class="creator"><div class="cav"></div><span class="cname">Lemon8 (iOS)</span><span class="likes">♥ 2.4k</span></div></div></div>
<div class="card"><div class="cimg h1"><span class="chip">5 photos</span></div>
<div class="cbody"><div class="ctitle">Get ready with me: soft glam edition</div>
<div class="tags"><span class="tag" style="background:#FCE8EE;color:#C13E68;">Beauty</span></div>
<div class="creator"><div class="cav"></div><span class="cname">rosie.k</span><span class="likes">♥ 891</span></div></div></div>
<div class="card"><div class="cimg h3"></div>
<div class="cbody"><div class="ctitle">Weekend brunch spots you need to try</div>
<div class="tags"><span class="tag" style="background:#E4F5EC;color:#1F8A52;">Food</span></div>
<div class="creator"><div class="cav"></div><span class="cname">min.eats</span><span class="likes">♥ 1.2k</span></div></div></div>
<div class="card"><div class="cimg h4"></div>
<div class="cbody"><div class="ctitle">3 stretches to start your morning right</div>
<div class="tags"><span class="tag" style="background:#E6F0FB;color:#2D6FB8;">Wellness</span><span class="tag" style="background:#F0EAFB;color:#7050B0;">Hobbies</span></div>
<div class="creator"><div class="cav"></div><span class="cname">wellwithava</span><span class="likes">♥ 640</span></div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f5f7; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4f5f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F4F5F7; color:#16191C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { background:#fff; padding:16px 28px; border-bottom:1px solid #E2E5E9; }
.brand { font-size:15px; font-weight:800; color:#FF690F; margin:0 0 6px; }
.route { font-size:18px; font-weight:800; }
.routesub { font-size:12px; color:#5C656E; margin-top:2px; }
.cal { display:flex; gap:6px; padding:14px 28px; overflow:hidden; }
.day { flex:1; background:#fff; border:1px solid #E2E5E9; border-radius:8px; padding:8px 4px; text-align:center; }
.day.sel { background:#FF690F; border-color:#FF690F; }
.day.sel .dn, .day.sel .dp { color:#fff; }
.dn { font-size:11px; color:#5C656E; }
.dp { font-size:13px; font-weight:800; margin-top:4px; }
.dp.low { color:#1E9E5A; }
.dp.high { color:#E5484D; }
.forecast { margin:0 28px 14px; background:#FFF0E6; border:1px solid #FF8A42; border-radius:10px; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.fc-glyph { color:#FF690F; font-size:18px; }
.fc-text { font-size:13px; font-weight:600; }
.fc-sub { font-size:11px; color:#5C656E; }
.fare { margin:0 28px 12px; background:#fff; border:1px solid #E2E5E9; border-radius:10px; padding:14px 16px; }
.airline-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.alogo { width:26px; height:26px; border-radius:6px; background:linear-gradient(135deg,#21262B,#101214); }
.aname { font-size:13px; font-weight:700; }
.hacker { background:#FF690F; color:#fff; font-size:10px; font-weight:800; padding:2px 8px; border-radius:4px; margin-left:auto; }
.legrow { display:flex; align-items:center; justify-content:space-between; }
.time { font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.apt { font-size:11px; color:#5C656E; }
.arc { flex:1; text-align:center; }
.arc .dur { font-size:11px; color:#5C656E; }
.arc .line { height:1px; background:#E2E5E9; margin:6px 0; position:relative; }
.bottomrow { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid #E2E5E9; }
.provider { font-size:11px; color:#5C656E; }
.price { font-size:20px; font-weight:800; color:#16191C; font-variant-numeric:tabular-nums; }
.pricesub { font-size:10px; color:#5C656E; text-align:right; }
</style></head>
<body>
<div class="top">
<p class="brand">KAYAK (iOS)</p>
<div class="route">SFO → JFK</div>
<div class="routesub">Oct 12 · 1 adult · Economy · Round-trip</div>
</div>
<div class="cal">
<div class="day"><div class="dn">SUN</div><div class="dp low">$210</div></div>
<div class="day"><div class="dn">MON</div><div class="dp">$254</div></div>
<div class="day sel"><div class="dn">TUE</div><div class="dp">$232</div></div>
<div class="day"><div class="dn">WED</div><div class="dp high">$318</div></div>
<div class="day"><div class="dn">THU</div><div class="dp">$268</div></div>
<div class="day"><div class="dn">FRI</div><div class="dp high">$342</div></div>
<div class="day"><div class="dn">SAT</div><div class="dp low">$198</div></div>
</div>
<div class="forecast">
<span class="fc-glyph">↗</span>
<div><div class="fc-text">Prices are likely to rise — book soon</div><div class="fc-sub">87% confidence</div></div>
</div>
<div class="fare">
<div class="airline-row"><div class="alogo"></div><div class="aname">JetBlue</div><div class="hacker">HACKER FARE</div></div>
<div class="legrow">
<div><div class="time">7:45a</div><div class="apt">SFO</div></div>
<div class="arc"><div class="dur">5h 32m · 1 stop</div><div class="line"></div></div>
<div style="text-align:right;"><div class="time">4:17p</div><div class="apt">JFK</div></div>
</div>
<div class="bottomrow"><span class="provider">2 booking sites</span><div><div class="price">$232</div><div class="pricesub">round-trip</div></div></div>
</div>
<div class="fare">
<div class="airline-row"><div class="alogo"></div><div class="aname">Delta</div></div>
<div class="legrow">
<div><div class="time">9:10a</div><div class="apt">SFO</div></div>
<div class="arc"><div class="dur">5h 05m · Nonstop</div><div class="line"></div></div>
<div style="text-align:right;"><div class="time">5:15p</div><div class="apt">JFK</div></div>
</div>
<div class="bottomrow"><span class="provider">Delta.com</span><div><div class="price">$318</div><div class="pricesub">round-trip</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6821f; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6821f; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #784417; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6821f; color: #000;
border: 1px solid #000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f6821f; color: #111111;
border: 1px solid #d1701d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #784417; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf6d1a; color: #000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1D1F20; box-sizing:border-box;
font-family:Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid #EDEDED; }
.nav .brand { font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; }
.nav .brand .cloud { width:20px; height:14px; background:#F6821F; border-radius:8px; }
.nav .tabs { display:flex; gap:4px; }
.tab { font-size:14px; font-weight:600; color:#717174; padding:8px 4px; border-bottom:2px solid transparent; }
.tab.active { color:#1D1F20; border-color:#F6821F; }
.navbtn { background:#F6821F; color:#fff; border-radius:8px; padding:8px 14px; font-size:14px; font-weight:600; }
.body { display:flex; padding:16px 24px 0; gap:16px; }
.col { flex:1; display:flex; flex-direction:column; gap:14px; }
.statrow { display:flex; gap:14px; }
.stat { flex:1; background:#fff; border:1px solid #EDEDED; border-radius:8px; padding:14px 16px; }
.stat .num { font-size:26px; font-weight:700; color:#1D1F20; }
.stat .lbl { font-size:11px; font-weight:600; color:#717174; text-transform:uppercase; letter-spacing:0.04em; margin-top:4px; }
.card { background:#fff; border:1px solid #EDEDED; border-radius:8px; padding:16px; }
.card h4 { font-size:14px; font-weight:600; margin:0 0 10px; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; font-weight:600; color:#717174; text-transform:uppercase; background:#fafafa; padding:8px 10px; }
td { font-size:12.5px; padding:8px 10px; border-top:1px solid #EDEDED; color:#36393A; }
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:9999px; padding:2px 10px; font-size:11px; font-weight:600; }
.pill .d { width:7px; height:7px; border-radius:50%; }
.active-pill { background:#e8f5d8; color:#3d6b14; } .active-pill .d{background:#2FB344;}
.pending-pill { background:#fcf3d6; color:#8a6d1b; } .pending-pill .d{background:#F6C549;}
.sidecard { background:#fff; border:1px solid #EDEDED; border-radius:8px; padding:16px; }
.sidecard h4 { font-size:14px; font-weight:600; margin:0 0 10px; }
.switchrow { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid #EDEDED; font-size:12.5px; }
.switch { width:32px; height:18px; border-radius:9999px; background:#F6821F; position:relative; }
.switch::after { content:''; position:absolute; right:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; }
.switch.off { background:#D9D9D9; }
.switch.off::after { left:2px; right:auto; }
</style></head>
<body>
<nav class="nav">
<div class="brand"><span class="cloud"></span>Cloudflare</div>
<div class="tabs"><span class="tab active">Overview</span><span class="tab">Analytics</span><span class="tab">DNS</span><span class="tab">SSL</span></div>
<button class="navbtn">Add site</button>
</nav>
<div class="body">
<div class="col" style="flex:2;">
<div class="statrow">
<div class="stat"><div class="num">128M</div><div class="lbl">Requests / day</div></div>
<div class="stat"><div class="num">4.2 TB</div><div class="lbl">Bandwidth saved</div></div>
<div class="stat"><div class="num">6,204</div><div class="lbl">Threats blocked</div></div>
</div>
<div class="card">
<h4>DNS records</h4>
<table>
<tr><th>Type</th><th>Name</th><th>Content</th><th>Status</th></tr>
<tr><td>A</td><td>www</td><td>203.0.113.42</td><td><span class="pill active-pill"><span class="d"></span>Proxied</span></td></tr>
<tr><td>CNAME</td><td>api</td><td>edge.example.com</td><td><span class="pill active-pill"><span class="d"></span>Proxied</span></td></tr>
<tr><td>MX</td><td>@</td><td>mail.example.com</td><td><span class="pill pending-pill"><span class="d"></span>Pending</span></td></tr>
</table>
</div>
</div>
<div class="col">
<div class="sidecard">
<h4>Security</h4>
<div class="switchrow"><span>DDoS mitigation</span><div class="switch"></div></div>
<div class="switchrow"><span>Bot fight mode</span><div class="switch"></div></div>
<div class="switchrow"><span>Always use HTTPS</span><div class="switch off"></div></div>
</div>
<button class="navbtn" style="width:100%;height:36px;">Deploy Worker</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1b1b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1b1b1b;
border: 1px solid #1b1b1b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1b1b1b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:100%; }
.list { width:300px; border-right:0.5px solid #E5E5E5; }
.list-hdr { padding:24px 20px 10px; }
.list-hdr .big { font-size:26px; font-weight:700; letter-spacing:-.3px; }
.search { margin:10px 16px; height:34px; border-radius:10px; background:#F5F5F5; display:flex; align-items:center; padding:0 12px; color:#9A9A9A; font-size:13px; }
.row { display:flex; align-items:center; gap:12px; padding:10px 16px; }
.row.active { background:#F5F5F5; }
.av { width:44px; height:44px; border-radius:50%; }
.name { font-size:15px; font-weight:500; }
.prev { font-size:13px; color:#6B6B6B; margin-top:2px; }
.meta { margin-left:auto; text-align:right; }
.time { font-size:11px; color:#6B6B6B; }
.badge { margin-top:4px; width:18px; height:18px; border-radius:50%; background:#3A76F0; color:#fff; font-size:10px;
display:flex; align-items:center; justify-content:center; margin-left:auto; }
.thread { flex:1; display:flex; flex-direction:column; }
.th-hdr { height:52px; display:flex; align-items:center; gap:12px; padding:0 24px; border-bottom:0.5px solid #E5E5E5; }
.th-hdr .av { width:32px; height:32px; }
.th-name { font-size:17px; font-weight:600; }
.icons { margin-left:auto; display:flex; gap:20px; color:#3A76F0; font-size:16px; }
.encrypt { text-align:center; font-size:13px; color:#6B6B6B; padding:16px 0 6px; }
.msgs { flex:1; padding:8px 24px; display:flex; flex-direction:column; gap:8px; }
.bubble { max-width:75%; padding:9px 13px; border-radius:18px; font-size:16px; line-height:1.4; }
.in { align-self:flex-start; background:#E9E9EB; color:#000; border-bottom-left-radius:6px; }
.out { align-self:flex-end; background:#3A76F0; color:#fff; border-bottom-right-radius:6px; }
.meta-in { font-size:12px; color:#6B6B6B; align-self:flex-start; margin-top:-4px; }
.composer { display:flex; align-items:center; gap:10px; padding:12px 24px; }
.pill { flex:1; background:#F5F5F5; border-radius:18px; height:36px; display:flex; align-items:center; padding:0 14px; color:#9A9A9A; font-size:16px; }
.send { width:32px; height:32px; border-radius:50%; background:#3A76F0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }
</style></head>
<body>
<div class="app">
<div class="list">
<div class="list-hdr"><div style="font-size:11px;font-weight:600;color:#8E8E93;letter-spacing:.2px;">Signal (iOS)</div><div class="big">Chats</div></div>
<div class="search">Search</div>
<div class="row active"><div class="av" style="background:linear-gradient(135deg,#767676,#484848);"></div><div><div class="name">Renata Vogel</div><div class="prev">See you at 8 then</div></div><div class="meta"><div class="time">9:41 PM</div><div class="badge">3</div></div></div>
<div class="row"><div class="av" style="background:linear-gradient(135deg,#89b,#456);"></div><div><div class="name">Family Group</div><div class="prev">Mom: dinner sunday?</div></div><div class="meta"><div class="time">Yesterday</div></div></div>
<div class="row"><div class="av" style="background:linear-gradient(135deg,#e9a,#c56);"></div><div><div class="name">Marco</div><div class="prev">👍</div></div><div class="meta"><div class="time">Mon</div></div></div>
</div>
<div class="thread">
<div class="th-hdr"><div class="av" style="background:linear-gradient(135deg,#767676,#484848);"></div><div class="th-name">Renata Vogel</div><div class="icons">📹 📞</div></div>
<div class="encrypt">🔒 Messages and calls are end-to-end encrypted.</div>
<div class="msgs">
<div class="bubble in">Running a little late, sorry!</div>
<div class="bubble out">No worries, we'll grab a table</div>
<div class="bubble in">See you at 8 then</div>
<div class="meta-in">Read 9:41 PM</div>
</div>
<div class="composer"><div class="pill">Signal message</div><div class="send">↑</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0px; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin: 0; color: #868e96; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #6741d9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #ffffff; color: #1e1e1e;
border: 1px solid #ced4da; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; background: #ffffff; color: #1e1e1e;
border: 1px solid #e9ecef; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #868e96; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0px; background: #e5dbff; color: #5f3dc4;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e1e1e; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e0e0e0;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; display:flex; gap:28px; color:#868e96; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: 0px; margin:0; max-width:640px; color:#1e1e1e; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin:0; max-width:520px; color:#868e96; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background:#6741d9; color:#ffffff;
border:none; border-radius:8px; padding:8px 16px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background:#ffffff; color:#1e1e1e;
border:1px solid #ced4da; border-radius:8px;
padding:8px 16px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0px; background:#e5dbff; color:#5f3dc4;
border-radius:9999px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e0e0e0; border-radius: 8px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0px; font-size: 16px; margin:0; color:#1e1e1e; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin:0; color:#868e96; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; border-top:1px solid #e0e0e0; padding: 18px 40px; color:#868e96;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">Excalidraw</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© Excalidraw</span>
<span>Excalidraw · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #40c8f7; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #40c8f7; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #266378; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0092c2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40c8f7; color: #000000;
border: 1px solid #0092c2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #40c8f7; color: #111111;
border: 1px solid #38abd2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #266378; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #36bfef; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#4a4a4a; box-sizing:border-box;
font-family:"PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; gap:20px; padding:0 32px; background:#ffffff; border-bottom:1px solid #dddfe1; }
.brand { font-size:18px; font-weight:700; color:#40c8f7; margin:0; }
.search { flex:1; display:flex; max-width:340px; height:34px; }
.search input { flex:1; border:1px solid #dddfe1; border-radius:4px 0 0 4px; padding:0 12px; font-size:13px; background:#fff; color:#000; }
.search .go { width:44px; background:#40c8f7; color:#fff; border-radius:0 4px 4px 0; display:flex; align-items:center; justify-content:center; font-size:13px; }
.navr { margin-left:auto; display:flex; gap:14px; align-items:center; font-size:13px; color:#666; }
.register { background:#40c8f7; color:#fff; border-radius:3px; padding:0 12px; height:28px; display:flex; align-items:center; font-weight:700; font-size:13px; }
.cattabs { display:flex; gap:6px; padding:10px 32px 0; background:#fff; border-bottom:1px solid #dddfe1; }
.cattab { font-family:"Songti TC", serif; font-size:15px; font-weight:700; color:#666; padding:8px 16px; border-radius:4px 4px 0 0; }
.cattab.active { background:#f2f2f2; color:#333; border-bottom:2px solid #40c8f7; }
.hero { padding:26px 32px 18px; text-align:center; background:#fff; }
.hero h1 { font-size:26px; font-weight:400; margin:0 0 8px; color:#212529; }
.hero p { font-size:14px; color:#666; margin:0 0 16px; }
.hero .pillrow { display:flex; gap:10px; justify-content:center; }
.pill { border-radius:25px; padding:6px 18px; font-size:13px; height:32px; display:flex; align-items:center; }
.pill.primary { background:#40c8f7; color:#fff; }
.pill.secondary { background:#e98192; color:#fff; }
.pill.grey { background:#f2f2f2; color:#333; }
.grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; padding:20px 32px; background:#fafafa; }
.book { background:#fff; border:1px solid #dddfe1; border-radius:4px; overflow:hidden; position:relative; }
.cover { height:118px; position:relative; }
.cover.g1 { background:linear-gradient(160deg,#40c8f7,#0092c2); }
.cover.g2 { background:linear-gradient(160deg,#c2f0ff,#40c8f7); }
.cover.g3 { background:linear-gradient(160deg,#e98192,#b5495a); }
.cover.g4 { background:linear-gradient(160deg,#f8b62d,#c98d10); }
.cover.g5 { background:linear-gradient(160deg,#666,#333); }
.cover.g6 { background:linear-gradient(160deg,#28a745,#1b6d30); }
.sale { position:absolute; top:6px; left:6px; background:#dc3545; color:#fff; font-size:9px; border-radius:3px; padding:1px 5px; }
.book .meta { padding:8px; }
.book .t { font-size:11px; color:#212529; font-weight:400; margin:0 0 3px; }
.book .a { font-size:10px; color:#9b9b9b; margin:0; }
.callout { margin:0 32px 16px; background:#c2f0ff; border-radius:4px; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; }
.callout h4 { font-size:15px; font-weight:700; color:#212529; margin:0; }
.callout .pill.primary { padding:5px 14px; height:28px; font-size:12px; }
footer { border-top:1px solid #dddfe1; padding:10px 32px; display:flex; justify-content:space-between; font-size:11px; color:#9b9b9b; background:#fff; }
</style></head>
<body>
<nav>
<p class="brand">Readmoo</p>
<div class="search"><input placeholder="Search by title, author, ISBN"><span class="go">Search</span></div>
<div class="navr"><span>Log In</span><span class="register">Sign Up</span></div>
</nav>
<div class="cattabs">
<span class="cattab active">Books</span>
<span class="cattab">Magazines</span>
<span class="cattab">Audiobooks</span>
<span class="cattab">Comics</span>
<span class="cattab">Light Novels</span>
</div>
<div class="hero">
<h1>Every Minute Is a Good Time to Read</h1>
<p>Open the door to easy reading — mooInk e-reader</p>
<div class="pillrow">
<span class="pill primary">Learn More</span>
<span class="pill secondary">Bundle Deals</span>
<span class="pill grey">Compare Specs</span>
</div>
</div>
<div class="grid">
<div class="book"><div class="cover g1"><span class="sale">21% OFF</span></div><div class="meta"><p class="t">Midnight Library</p><p class="a">Sarah Lin</p></div></div>
<div class="book"><div class="cover g2"></div><div class="meta"><p class="t">Sound of the Islands</p><p class="a">Alex Chen</p></div></div>
<div class="book"><div class="cover g3"><span class="sale">50% OFF</span></div><div class="meta"><p class="t">Coffee and Rain</p><p class="a">Amy Wong</p></div></div>
<div class="book"><div class="cover g4"></div><div class="meta"><p class="t">Stardust Chronicles</p><p class="a">John Wu</p></div></div>
<div class="book"><div class="cover g5"></div><div class="meta"><p class="t">Letters from Afar</p><p class="a">Grace Lee</p></div></div>
<div class="book"><div class="cover g6"><span class="sale">35% OFF</span></div><div class="meta"><p class="t">Trail Through the Fog</p><p class="a">Mark Chang</p></div></div>
</div>
<div class="callout">
<h4>Everyone Has Their Own Way to Read</h4>
<span class="pill primary">Learn About mooInk</span>
</div>
<footer>
<span>© Readmoo eBooks</span>
<span>Books · Magazines · Audiobooks · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #833ab4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #833ab4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c2a1d8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd1d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #833ab4; color: #ffffff;
border: 1px solid #fd1d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #833ab4; color: #f5f5f5;
border: 1px solid #9558be; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c2a1d8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #97359c; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.col { flex:1; border-right:1px solid #DBDBDB; padding:18px 20px; overflow:hidden; }
.nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.logotype { font-family:Georgia, serif; font-size:24px; font-weight:400; }
.navicons { display:flex; gap:16px; font-size:18px; }
.stories { display:flex; gap:16px; margin-bottom:18px; }
.story { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ring { width:60px; height:60px; border-radius:50%; padding:2.5px;
background:linear-gradient(45deg,#833AB4,#FD1D1D,#FCAF45); }
.ring i { display:block; width:100%; height:100%; border-radius:50%; background:linear-gradient(135deg,#ccc,#eee); border:2px solid #fff; }
.story span { font-size:11px; }
.post { border-bottom:1px solid #DBDBDB; padding-bottom:14px; margin-bottom:14px; }
.phead { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pav { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#833AB4,#FCAF45); }
.puser { font-size:14px; font-weight:600; }
.pmore { margin-left:auto; }
.pimg { height:260px; border-radius:4px; background:linear-gradient(160deg,#dbe4ee,#aeb9c7); }
.pactions { display:flex; gap:16px; padding:10px 0 6px; font-size:20px; }
.plikes { font-size:13px; font-weight:600; }
.pcap { font-size:13px; margin-top:4px; }
.col2 { width:340px; flex:0 0 auto; padding:20px; }
.col2 h3 { font-size:15px; font-weight:600; margin:0 0 10px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.gcell { aspect-ratio:1; }
.g1 { background:linear-gradient(135deg,#e5b7c9,#c7899e); }
.g2 { background:linear-gradient(135deg,#b9d6ec,#7ea9c9); }
.g3 { background:linear-gradient(135deg,#c9e2c0,#93bd85); }
.g4 { background:linear-gradient(135deg,#e8d3a8,#c8a765); }
.g5 { background:linear-gradient(135deg,#d8c7ea,#a988ce); }
.g6 { background:linear-gradient(135deg,#f0c9c0,#d99a8d); }
.g7 { background:linear-gradient(135deg,#c0dede,#83b8b8); }
.g8 { background:linear-gradient(135deg,#e0e0a0,#bcbc70); }
.g9 { background:linear-gradient(135deg,#cfd8e8,#9fb0cc); }
.reelbadge { position:relative; }
.followbtn { margin-top:16px; background:#0095F6; color:#fff; text-align:center; padding:9px; border-radius:8px; font-size:14px; font-weight:600; }
</style></head>
<body>
<div class="wrap">
<div class="col">
<div class="nav"><span class="logotype">Instagram (iOS)</span><div class="navicons"><span>♡</span><span>✉</span></div></div>
<div class="stories">
<div class="story"><div class="ring"><i></i></div><span>Your story</span></div>
<div class="story"><div class="ring"><i></i></div><span>ava</span></div>
<div class="story"><div class="ring"><i></i></div><span>marco</span></div>
<div class="story"><div class="ring"><i></i></div><span>lin</span></div>
<div class="story"><div class="ring"><i></i></div><span>noah</span></div>
</div>
<div class="post">
<div class="phead"><div class="pav"></div><div class="puser">creator.studio</div><div class="pmore">⋯</div></div>
<div class="pimg"></div>
<div class="pactions"><span>♡</span><span>💬</span><span>➤</span><span style="margin-left:auto;">🔖</span></div>
<div class="plikes">12,483 likes</div>
<div class="pcap"><b>creator.studio</b> golden hour, no filter needed ✨</div>
</div>
</div>
<div class="col2">
<h3>Profile grid</h3>
<div class="grid3">
<div class="gcell g1"></div><div class="gcell g2"></div><div class="gcell g3"></div>
<div class="gcell g4"></div><div class="gcell g5"></div><div class="gcell g6"></div>
<div class="gcell g7"></div><div class="gcell g8"></div><div class="gcell g9"></div>
</div>
<div class="followbtn">Follow</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e1116; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e1116; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8e91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #161b22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e1116; color: #ffffff;
border: 1px solid #161b22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e1116; color: #f5f5f5;
border: 1px solid #33353a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8e91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f1318; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E1116; color:#F2F4F8; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric:tabular-nums; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#0E1116; padding:22px 16px; position:relative; }
.rtitle { font-size:20px; font-weight:700; }
.metricrow { display:flex; gap:22px; margin:10px 0 14px; }
.metricrow .m .lbl { font-size:10px; color:#9BA3B0; }
.metricrow .m .val { font-size:15px; font-weight:700; }
.metricrow .m.dur .val { color:#1E6FFF; }
.restpill { height:40px; border-radius:12px; background:#14233F; border:1px solid rgba(30,111,255,0.35);
display:flex; align-items:center; padding:0 12px; gap:10px; margin-bottom:14px; }
.rring { width:20px; height:20px; border-radius:50%; background:conic-gradient(#1E6FFF 0 60%, rgba(30,111,255,0.3) 60% 100%); }
.resttxt { font-size:13px; font-weight:600; color:#1E6FFF; flex:1; }
.skiptxt { font-size:12px; color:#9BA3B0; }
.excard { background:#161B22; border:1px solid #262C36; border-radius:16px; padding:12px; margin-bottom:10px; }
.exhead { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.exthumb { width:28px; height:28px; border-radius:6px; background:#283040; }
.exname { color:#1E6FFF; font-weight:700; font-size:15px; }
.setrow { display:grid; grid-template-columns:26px 1fr 44px 44px 22px; align-items:center; gap:6px; font-size:12px; padding:5px 0; }
.idx { background:#1F2630; border-radius:6px; text-align:center; color:#9BA3B0; font-weight:700; padding:2px 0; }
.prev { color:#5E6675; }
.cell { background:#1F2630; border-radius:6px; text-align:center; padding:4px 0; font-weight:600; }
.chk { width:20px; height:20px; border-radius:5px; border:1.5px solid #262C36; }
.chk.done { background:#2FBF71; border-color:#2FBF71; color:#fff; text-align:center; font-size:12px; line-height:20px; }
.setrow.done { background:rgba(47,191,113,0.09); border-radius:8px; }
.prbadge { display:inline-block; background:rgba(245,184,61,0.18); color:#F5B83D; font-size:9px; font-weight:800;
text-transform:uppercase; padding:3px 8px; border-radius:6px; margin-top:6px; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:60px; background:rgba(14,17,22,0.94);
border-top:0.5px solid #262C36; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#5E6675; text-align:center; }
.tab.on { color:#1E6FFF; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:800; letter-spacing:-0.5px; margin:0; }
.brand span { color:#1E6FFF; }
.tag { font-size:14px; color:#9BA3B0; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:8px; border:1px solid #262C36; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#9BA3B0; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:800; }
.typeblock .t2 { font-size:13px; color:#9BA3B0; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:10px;
background:#161B22; border:1px solid #262C36; color:#9BA3B0; }
.footer { margin-top:auto; border-top:1px solid #262C36; padding-top:16px; font-size:11px; color:#5E6675; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="rtitle">Push Day</div>
<div class="metricrow"><div class="m dur"><div class="lbl">DURATION</div><div class="val">42:18</div></div>
<div class="m"><div class="lbl">VOLUME</div><div class="val">8,420 kg</div></div>
<div class="m"><div class="lbl">SETS</div><div class="val">14</div></div></div>
<div class="restpill"><div class="rring"></div><div class="resttxt">Rest · 1:24</div><div class="skiptxt">Skip</div></div>
<div class="excard">
<div class="exhead"><div class="exthumb"></div><div class="exname">Bench Press</div></div>
<div class="setrow" style="color:#9BA3B0;font-weight:700"><span>SET</span><span>PREV</span><span>KG</span><span>REPS</span><span></span></div>
<div class="setrow done"><span class="idx">1</span><span class="prev">60 × 10</span><span class="cell">62.5</span><span class="cell">10</span><span class="chk done">✓</span></div>
<div class="setrow"><span class="idx">2</span><span class="prev">60 × 10</span><span class="cell">62.5</span><span class="cell">9</span><span class="chk"></span></div>
<span class="prbadge">★ NEW PR · 1RM 87.5 kg</span>
</div>
<div class="tabbar"><div class="tab">Home</div><div class="tab">Profile</div><div class="tab on">Workout</div><div class="tab">History</div><div class="tab">Exercises</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Hevy (iOS)<span>.</span></h1>
<p class="tag">A dark gym-floor instrument — a dense set table with a Previous column so you always know the target.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#0E1116"></div><small>#0E1116</small></div>
<div class="sw"><div class="chip2" style="background:#1E6FFF"></div><small>#1E6FFF</small></div>
<div class="sw"><div class="chip2" style="background:#2FBF71"></div><small>#2FBF71</small></div>
<div class="sw"><div class="chip2" style="background:#F5B83D"></div><small>#F5B83D</small></div>
<div class="sw"><div class="chip2" style="background:#161B22"></div><small>#161B22</small></div>
</div>
<div class="typeblock">
<div class="t1">62.5 kg × 10</div>
<div class="t2">Inter · tabular figures on every number — the table must never reflow</div>
</div>
<div class="taglist">
<span>Set table w/ Previous</span><span>Rest-timer pill</span><span>Gold PR badge</span>
<span>Green set-done wash</span><span>Live Activity rest ring</span>
</div>
<div class="footer">Near-black blue-cool #0E1116 · Hevy Blue is the only action color in the app</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ef223a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ef223a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f296a1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000d25; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ef223a; color: #000d25;
border: 1px solid #000d25; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ef223a; color: #f5f5f5;
border: 1px solid #f04458; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f296a1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c91f37; color: #000d25;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000d25; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:17px; font-weight:700; display:flex; align-items:center; gap:8px; }
.brand .dot { width:12px; height:12px; border-radius:50%; background:#ef223a; }
.navlinks { display:flex; gap:22px; font-size:14px; }
.cta { background:#1866ee; color:#ffffff; border-radius:9999px; padding:8px 24px; font-size:16px; font-weight:500; }
.hero { padding:20px 34px 10px; }
h1 { font-size:40px; font-weight:700; line-height:1.2; letter-spacing:-1px; margin:0 0 8px; max-width:560px; }
.lead { font-size:15px; color:#000d25; opacity:0.7; margin:0 0 16px; }
.darkband { margin:0 34px; background:#081f47; border-radius:8px 8px 4px 4px; padding:20px 24px; display:flex; gap:20px; align-items:center; }
.darkband .tabs { display:flex; gap:14px; font-size:12px; color:rgba(255,255,255,0.5); margin-bottom:10px; }
.darkband .tabs span.on { color:#ffffff; font-weight:600; border-bottom:2px solid #3acefa; padding-bottom:4px; }
.code { color:#3acefa; font-size:13px; font-family:monospace; line-height:1.6; }
.code .c1 { color:#ffffff; }
.cards { display:flex; gap:16px; padding:20px 34px 0; }
.card { flex:1; background:#f3f4f7; border-radius:24px; padding:20px; }
.card .t { font-size:16px; font-weight:600; margin-bottom:6px; }
.card .d { font-size:13px; color:#606b85; line-height:1.4; }
.badge { display:inline-block; background:#f4f9ff; color:#030b5d; border-radius:9999px; padding:4px 8px; font-size:11px; font-weight:600; margin-top:8px; }
</style></head>
<body>
<nav>
<div class="brand"><span class="dot"></span>Twilio</div>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Docs</span><span>Pricing</span></div>
<span class="cta">Start for free</span>
</nav>
<section class="hero">
<h1>The platform for conversations</h1>
<p class="lead">Send messages, make calls, verify users, connect data — one API at a time.</p>
</section>
<div class="darkband">
<div style="flex:1">
<div class="tabs"><span class="on">Node.js</span><span>Python</span><span>Java</span></div>
<div class="code"><span class="c1">client.messages.create({</span><br> body: "Your code is 4821",<br> to: "+15551234567"<br><span class="c1">});</span></div>
</div>
</div>
<div class="cards">
<div class="card"><div class="t">Messaging</div><div class="d">Programmable SMS and WhatsApp at global scale.</div><span class="badge">New</span></div>
<div class="card"><div class="t">Verify</div><div class="d">Add phone verification in a single API call.</div></div>
<div class="card"><div class="t">Voice</div><div class="d">Build inbound and outbound calling flows.</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ec0047; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ec0047; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f187a7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff1553; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ec0047; color: #000000;
border: 1px solid #ff1553; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ec0047; color: #f5f5f5;
border: 1px solid #ed2763; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f187a7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ef0349; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard Variable", "Malgun Gothic", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { background:#181818; height:210px; padding:20px 30px; display:flex; flex-direction:column; }
.hero nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.brand { color:#ffffff; font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; }
.navlinks span { color:#ffffff; font-size:14px; opacity:0.85; }
.cta { background:#ec0047; color:#ffffff; border:none; border-radius:9999px; height:34px; padding:0 18px; font-size:13px; font-weight:700; }
.hero h1 { color:#ffffff; font-size:32px; font-weight:700; margin:0 0 8px; letter-spacing:-0.5px; }
.hero h1 span { color:#00b7ff; }
.hero p { color:#cccccc; font-size:14px; margin:0 0 12px; }
.glasspill { display:inline-flex; align-items:center; width:fit-content; color:#00b7ff; border:1px solid rgba(255,255,255,0.4);
background:rgba(255,255,255,0.05); border-radius:9999px; height:36px; padding:0 20px; font-size:14px; }
.body { padding:18px 30px; height:390px; }
.tagrow { display:flex; gap:8px; margin-bottom:16px; }
.tag { border:1px solid #ec0047; color:#ec0047; border-radius:5px; font-size:12px; padding:4px 10px; font-weight:500; }
.heatpanel { display:flex; gap:20px; }
.heatmap { width:460px; height:280px; background:#f1f1f1; border-radius:20px; position:relative; overflow:hidden; }
.heatmap .ui-line { position:absolute; left:20px; right:20px; height:10px; background:#dcdcdc; border-radius:4px; }
.l1{top:22px;} .l2{top:44px; width:60%;} .l3{top:70px;}
.blob { position:absolute; border-radius:50%; filter:blur(2px); }
.b1 { width:110px; height:110px; left:40px; top:110px; background:radial-gradient(circle, rgba(246,225,54,0.9), rgba(246,225,54,0) 70%); }
.b2 { width:150px; height:150px; left:170px; top:90px; background:radial-gradient(circle, rgba(236,0,71,0.75), rgba(236,0,71,0) 70%); }
.b3 { width:90px; height:90px; left:320px; top:150px; background:radial-gradient(circle, rgba(19,165,191,0.6), rgba(19,165,191,0) 70%); }
.statcol { flex:1; display:flex; flex-direction:column; gap:12px; }
.sc { background:#e0f6fa; border-radius:20px; padding:16px 18px; }
.sc .n { font-size:22px; font-weight:700; color:#222222; margin:0; }
.sc .l { font-size:12px; color:#444444; margin:4px 0 0; }
.back { display:inline-flex; align-items:center; gap:6px; background:#ffffff; color:#00b7ff; border-radius:20px;
padding:9px 15px; font-size:14px; box-shadow:rgba(0,0,0,0.05) 0px 9px 11px -5px; width:fit-content; margin-top:auto; }
</style></head>
<body>
<div class="hero">
<nav>
<p class="brand">Beusable</p>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Resources</span></div>
<button class="cta">Get Started</button>
</nav>
<h1>UX <span>Heatmap</span> for every page</h1>
<p>See exactly where users click, scroll, and hesitate — in real time.</p>
<div class="glasspill">Watch a live demo →</div>
</div>
<div class="body">
<div class="tagrow"><span class="tag">Click map</span><span class="tag">Scroll depth</span><span class="tag">Journey map</span></div>
<div class="heatpanel">
<div class="heatmap">
<div class="ui-line l1"></div><div class="ui-line l2"></div><div class="ui-line l3"></div>
<div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
</div>
<div class="statcol">
<div class="sc"><p class="n">62.4%</p><p class="l">Users who scroll past the fold</p></div>
<div class="sc"><p class="n">4.1s</p><p class="l">Avg. time to first click</p></div>
<div class="back">← Back to features</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #007bc6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #007bc6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bee0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e4007f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007bc6; color: #000000;
border: 1px solid #e4007f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #007bc6; color: #f5f5f5;
border: 1px solid #278fce; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bee0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2467bb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:2px solid #f7b146; }
.brand { font-weight:700; font-size:16px; color:#007bc6; }
.navlinks { display:flex; gap:20px; font-size:13.5px; letter-spacing:0.03em; color:#333; }
.hero { text-align:center; padding:20px 32px 10px; }
.beep { font-size:100px; font-weight:700; line-height:1; margin:0; color:#000; letter-spacing:-2px; }
.tag { font-size:30px; font-weight:700; margin:6px 0 16px; }
.hl { display:inline-block; background:#007bc6; color:#fff; font-size:17px; font-weight:500; letter-spacing:0.1em;
padding:8px 14px; border-radius:2px; }
.circles { display:flex; gap:14px; justify-content:center; padding:10px 32px 24px; }
.circle { width:88px; height:88px; border-radius:9999px; border:2px solid #e4007f; display:flex; align-items:center;
justify-content:center; text-align:center; font-size:12px; color:#e4007f; font-weight:500; }
.circle.on { background:#e4007f; color:#fff; }
.feature { background:#efefef; padding:22px 36px; display:flex; gap:16px; }
.fcard { flex:1; background:#fff; border-radius:8px; padding:16px; box-shadow:rgba(0,0,0,0.15) 0px 10px 20px 0px; }
.fcard .ic { width:32px; height:32px; border-radius:9999px; background:#f6ac19; margin-bottom:8px; }
.fcard h4 { font-size:14px; margin:0 0 4px; }
.fcard p { font-size:12px; color:#595153; margin:0; }
.dl { background:#000; color:#fff; padding:16px 36px; display:flex; justify-content:center; gap:40px; }
.dl span { font-size:16px; font-weight:700; letter-spacing:0.1em; }
</style></head>
<body>
<nav>
<span class="brand">EasyWallet</span>
<div class="navlinks"><span>Key Features</span><span>Watch the Video</span><span>Partner Banks</span><span>Security & Trust</span></div>
</nav>
<section class="hero">
<p class="beep">BEEP!</p>
<p class="tag">Smarter Payments, Total Peace of Mind!</p>
<div class="hl">One Card, One Tap — Step Into a Cashless Life</div>
</section>
<section class="circles">
<div class="circle on">Tap to Ride</div>
<div class="circle">Scan to Pay</div>
<div class="circle">Auto Top-Up</div>
<div class="circle">Card Management</div>
</section>
<section class="feature">
<div class="fcard"><div class="ic"></div><h4>The Smartest Digital Wallet</h4><p>From physical card to digital wallet — 20 years of trust, extended.</p></div>
<div class="fcard"><div class="ic"></div><h4>Simplify Your Everyday Life</h4><p>Manage transit, purchases, and bills all in one place.</p></div>
<div class="fcard"><div class="ic"></div><h4>Automatic e-Invoice Lottery Matching</h4><p>Never miss a winning receipt again.</p></div>
</section>
<section class="dl"><span>App Store</span><span>Google Play</span></section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0082ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0082ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c1fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007bff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0082ff; color: #000000;
border: 1px solid #007bff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0082ff; color: #f5f5f5;
border: 1px solid #2794fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0081ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Spoqa Han Sans", "Spoqa Han Sans JP", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { height:60px; flex:0 0 60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; }
.brand { font-size:18px; font-weight:700; color:#1a1b22; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#333333; }
.navcta { background:#007bff; color:#ffffff; border:1px solid #007bff; border-radius:6px;
height:38px; padding:0 16px; font-size:14px; font-weight:700; display:flex; align-items:center; }
.hero { flex:0 0 auto; padding:14px 40px 8px; text-align:center; }
.hero h1 { font-size:26px; font-weight:700; color:#1a1b22; line-height:1.25; margin:0 0 4px; }
.hero p { font-size:13px; color:#6b6c74; margin:0; }
.widget { flex:0 0 auto; margin:14px auto 0; width:640px; background:#f7f7f8; border-radius:16px;
box-shadow:rgba(0,0,0,0.05) 0px 4px 15px 0px; padding:20px 28px; display:flex; align-items:center; gap:18px; }
.amtcol { flex:1; }
.amtcol label { font-size:11.5px; color:#818daa; font-weight:700; letter-spacing:0.02em; }
.amtrow { display:flex; align-items:baseline; gap:6px; }
.amt { font-size:32px; font-weight:700; color:#242424; }
.amt.active { color:#0082ff; }
.cur { font-size:14px; color:#6b6c74; font-weight:700; }
.arrow { width:34px; height:34px; border-radius:50%; background:#ffffff; border:1px solid #e0e0e0;
display:flex; align-items:center; justify-content:center; color:#555555; font-size:14px; flex:0 0 34px; }
.sendbtn { flex:0 0 auto; background:#0082ff; color:#ffffff; border:1px solid rgba(0,50,100,0.1);
border-radius:6px; height:50px; padding:0 26px; font-size:16px; font-weight:700; }
.features { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 40px; align-content:center; }
.feat { background:#f3f5f8; border:1px solid #efefef; border-radius:16px; padding:18px 18px; }
.eyebrow { color:#0082ff; font-weight:700; font-size:13px; margin-bottom:6px; display:block; }
.feat h3 { font-size:17px; font-weight:700; color:#1a1b22; margin:0 0 6px; }
.feat p { font-size:12.5px; color:#6b6c74; margin:0; line-height:1.45; }
.reviews { flex:0 0 118px; background:#ffffff; border-top:1px solid #efefef; padding:14px 40px; display:flex; align-items:center; gap:14px; }
.revcard { flex:1; background:#f7f7f8; border-radius:16px; box-shadow:rgba(0,0,0,0.05) 0px 4px 15px 0px;
padding:14px 18px; font-size:12.5px; color:#1a1b22; }
.revcard b { display:block; font-size:13px; margin-bottom:3px; color:#1a1b22; }
.navarrow { width:34px; height:34px; border-radius:8px; background:#ffffff; border:1px solid #e0e0e0;
display:flex; align-items:center; justify-content:center; color:#555555; flex:0 0 34px; }
</style></head>
<body>
<nav>
<p class="brand">Moin</p>
<div class="navlinks"><span>Remittance</span><span>Rate calculator</span><span>Reviews</span><span>Support</span></div>
<div class="navcta">Send money</div>
</nav>
<section class="hero">
<h1>Complex international remittances,<br>now made simple with Moin</h1>
<p>Done in five minutes, right in the app — see the rate and fee before you commit.</p>
</section>
<div class="widget">
<div class="amtcol">
<label>YOU SEND</label>
<div class="amtrow"><span class="amt">1,000,000</span><span class="cur">KRW</span></div>
</div>
<div class="arrow">→</div>
<div class="amtcol">
<label>THEY RECEIVE</label>
<div class="amtrow"><span class="amt active">742.15</span><span class="cur">USD</span></div>
</div>
<button class="sendbtn">Send money</button>
</div>
<section class="features">
<div class="feat"><span class="eyebrow">Speed</span><h3>Fast, direct remittances you can trust</h3><p>Money moves on a direct rail, not a chain of correspondent banks.</p></div>
<div class="feat"><span class="eyebrow">Easy to start</span><h3>Done in five minutes, right in the app</h3><p>Verify once, then send again in a couple of taps.</p></div>
<div class="feat"><span class="eyebrow">Lower fees</span><h3>See the real rate before you send</h3><p>The fee and exchange rate are shown up front, never after you commit.</p></div>
</section>
<div class="reviews">
<div class="navarrow">←</div>
<div class="revcard"><b>Alex Kim</b>Sent money home in minutes — the rate was exactly what the app showed.</div>
<div class="revcard"><b>Jane Doe</b>Switched from my bank and started saving on every transfer since.</div>
<div class="navarrow">→</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dd99; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dd99; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096d4e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #18da9e; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dd99; color: #000000;
border: 1px solid #18da9e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dd99; color: #111111;
border: 1px solid #03bc83; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096d4e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #04dd9a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Poppins","Inter",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.logo { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:16px; font-weight:700; }
.navlinks .active { color:#00dd99; }
.hero { background:#1c1c1c; color:#ffffff; text-align:center; padding:34px 40px; }
.hero h1 { font-size:42px; font-weight:700; line-height:1.17; margin:0 0 8px; }
.hero p { font-size:15px; color:rgba(255,255,255,0.75); margin:0; }
.band { background:#f8f8f8; padding:24px 40px; }
.band h2 { font-size:28px; font-weight:700; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border-radius:8px; padding:16px; box-shadow:rgba(0,0,0,0.08) 0px 4px 16px; }
.card h3 { font-size:14px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; color:#696969; margin:0; }
.row { display:flex; gap:10px; justify-content:center; padding:20px 40px; }
.btn-ink { background:#222222; color:#ffffff; border-radius:2px; padding:12px 30px; font-size:14px;
font-weight:700; letter-spacing:0.14px; }
.pill { background:#3860be; color:#ffffff; border-radius:17px; padding:8px 16px; font-size:14px; font-weight:600;
border:1px solid #bbbbbb; }
</style></head>
<body>
<nav>
<span class="logo">Hyperconnect</span>
<div class="navlinks"><span class="active">Our Mission</span><span>Culture</span><span>Careers</span></div>
</nav>
<section class="hero">
<h1>Our Mission</h1>
<p>Connecting people across languages and borders through real-time video.</p>
</section>
<div class="band">
<h2>Grow Rapidly & Expand Globally</h2>
<div class="grid">
<div class="card"><h3>Real-time Video</h3><p>WebRTC infrastructure at global scale.</p></div>
<div class="card"><h3>AI Translation</h3><p>On-device ML connects any two languages.</p></div>
<div class="card"><h3>Global Matching</h3><p>Millions of connections across the world.</p></div>
</div>
</div>
<div class="row">
<button class="btn-ink">Apply</button>
<span class="pill">Serviced in 150+ countries</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #534dff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #534dff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aca9fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #403ae6; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #534dff; color: #ffffff;
border: 1px solid #403ae6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #534dff; color: #f5f5f5;
border: 1px solid #6d68fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aca9fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #504afb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#152632; box-sizing:border-box;
font-family:'Inter',-apple-system,"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 64px; display:flex; align-items:center; justify-content:space-between; padding:0 48px;
border-bottom:1px solid #e3e6eb; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.3px; color:#152632; margin:0; }
.navlinks { display:flex; gap:28px; font-size:14px; font-weight:500; color:#4a5360; }
.btn-primary { background:#534dff; color:#fff; border:none; border-radius:8px; height:38px; padding:0 20px;
font-size:14px; font-weight:700; }
.hero { flex:0 0 240px; position:relative; display:flex; flex-direction:column; align-items:flex-start;
justify-content:center; padding:0 48px; overflow:hidden;
background: radial-gradient(circle at 88% 20%, rgba(141,187,255,0.35), rgba(141,187,255,0) 55%),
radial-gradient(circle at 8% 90%, rgba(83,77,255,0.10), rgba(83,77,255,0) 55%);
}
.kicker { color:#534dff; font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin:0 0 14px; }
.hero h1 { font-size:38px; font-weight:700; line-height:1.28; letter-spacing:-0.5px; margin:0 0 12px; max-width:560px; color:#152632; }
.hero p { font-size:15px; color:#4a5360; margin:0 0 18px; max-width:480px; line-height:1.6; }
.hero .row { display:flex; gap:10px; }
.btn-ghost { background:#ffffff; color:#534dff; border:1.5px solid #cbd1d9; border-radius:8px; height:40px; padding:0 20px; font-size:14px; font-weight:600; }
.grid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:24px 48px 0; }
.card { background:#ffffff; border:1px solid #e3e6eb; border-radius:16px; padding:20px;
box-shadow:0 4px 16px rgba(21,38,50,0.06); display:flex; flex-direction:column; gap:8px; }
.card .icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#534dff,#7b6cff); }
.card h3 { font-size:17px; font-weight:700; margin:6px 0 0; color:#152632; }
.card p { font-size:12.5px; color:#6b7585; line-height:1.6; margin:0; }
footer { flex:0 0 56px; border-top:1px solid #e3e6eb; display:flex; align-items:center; justify-content:space-between;
padding:0 48px; font-size:12px; color:#9aa4b2; }
</style></head>
<body>
<nav>
<p class="brand">LayerX</p>
<div class="navlinks"><span>Bakuraku</span><span>Fintech</span><span>Company</span><span>Careers</span></div>
<button class="btn-primary">Contact sales</button>
</nav>
<section class="hero">
<p class="kicker">Compound startup</p>
<h1>Digitize all economic activity.</h1>
<p>Cloud back-office software for corporate spend, invoices, and expense management — built for calm, confident operations.</p>
<div class="row">
<button class="btn-primary">Get started</button>
<button class="btn-ghost">See Bakuraku</button>
</div>
</section>
<section class="grid">
<div class="card"><div class="icon"></div><h3>Spend management</h3><p>Real-time corporate card and expense visibility across every team.</p></div>
<div class="card"><div class="icon" style="background:#8dbbff"></div><h3>Invoice automation</h3><p>AI-assisted invoice capture and approval routing that removes paperwork.</p></div>
<div class="card"><div class="icon" style="background:#1fa971"></div><h3>Fintech infrastructure</h3><p>The compliance and ledger backbone trusted by finance teams at scale.</p></div>
</section>
<footer>
<span>© LayerX</span>
<span>LayerX · Bakuraku · Privacy · Terms</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323237; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #323237; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #080809; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:'Graphik','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; background:#000000; }
nav { height:60px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#000000; border-bottom:1px solid rgba(255,255,255,0.08); }
.navleft { display:flex; align-items:center; gap:12px; }
.gmark { width:26px; height:26px; border-radius:7px; background:#0074ff; position:relative; }
.gmark::after { content:''; position:absolute; left:5px; top:5px; width:10px; height:10px; border-radius:50%;
background:#28c3ff; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.2px; color:#ffffff; margin:0; }
.navright { display:flex; align-items:center; gap:12px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; color:#b9bcbf; margin-right:6px; }
.btn-account { background:#2b96ed; color:#ffffff; border:none; border-radius:12px; padding:0 18px; height:34px;
font-size:13px; font-weight:600; }
main { flex:1 1 auto; display:flex; overflow:hidden; }
.stage { width:540px; flex:0 0 auto; padding:34px 40px; display:flex; flex-direction:column; gap:12px;
position:relative; overflow:hidden; background:#000000; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#737d82; }
.stage h1 { font-size:52px; font-weight:700; line-height:1.03; letter-spacing:-1.6px; margin:2px 0 0; color:#ffffff; }
.stage .sub { font-size:20px; font-weight:700; letter-spacing:-0.3px; color:#28c3ff; margin:0; }
.ctarow { display:flex; gap:12px; margin-top:10px; }
.btn-marketing { background:#0074ff; color:#ffffff; border:none; border-radius:12px; padding:14px 26px;
font-weight:600; font-size:15px; }
.btn-outline { background:transparent; color:#ffffff; border:1px solid rgba(255,255,255,0.4); border-radius:12px;
padding:14px 26px; font-weight:600; font-size:15px; }
.rig { flex:1 1 auto; position:relative; margin-top:6px; }
.glow { position:absolute; left:60px; bottom:18px; width:260px; height:120px; border-radius:50%;
background:radial-gradient(closest-side, rgba(0,116,255,0.35), rgba(0,116,255,0)); }
.scooter { position:absolute; left:40px; bottom:52px; width:340px; height:74px; border-radius:38px;
background:linear-gradient(100deg,#1c1e21,#323237); transform:rotate(-3deg); }
.scooter::before { content:''; position:absolute; right:36px; top:-46px; width:70px; height:60px; border-radius:16px;
background:linear-gradient(160deg,#2a2c30,#141719); transform:rotate(-3deg); }
.wheel { position:absolute; bottom:22px; width:58px; height:58px; border-radius:50%; background:#101214;
border:6px solid #45474a; }
.wheel.front { left:58px; }
.wheel.back { left:296px; }
.wheel::after { content:''; position:absolute; inset:14px; border-radius:50%; background:#28c3ff; opacity:0.55; }
.panel { flex:1 1 auto; background:#f6f6f6; color:#323237; padding:26px 30px; display:flex; flex-direction:column;
gap:16px; overflow:hidden; }
.panelhead { display:flex; align-items:center; justify-content:space-between; }
.panelhead h2 { font-size:19px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.livepill { display:flex; align-items:center; gap:6px; background:#ffffff; border:1px solid #dee2e6; border-radius:999px;
padding:5px 12px; font-size:11px; font-weight:600; color:#737d82; }
.livedot { width:7px; height:7px; border-radius:50%; background:#28c3ff; }
.map { position:relative; height:216px; border-radius:16px; background:
radial-gradient(circle,#dee2e6 1.4px,transparent 1.4px) 0 0/18px 18px, #ffffff;
border:1px solid #dee2e6; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.08); }
.pin { position:absolute; width:14px; height:14px; border-radius:50%; background:#0074ff; border:3px solid #ffffff;
box-shadow:0 1px 4px rgba(0,0,0,0.25); }
.pin.sel { background:#28c3ff; width:18px; height:18px; }
.card-pop { position:absolute; background:#ffffff; border-radius:12px; padding:10px 14px; box-shadow:0 4px 16px rgba(0,0,0,0.14);
display:flex; flex-direction:column; gap:2px; }
.card-pop b { font-size:13px; color:#141719; }
.card-pop span { font-size:11px; color:#737d82; }
.specs { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:auto; }
.spec { background:#ffffff; border-radius:16px; padding:16px 14px; box-shadow:0 2px 12px rgba(0,0,0,0.08); }
.spec b { display:block; font-size:26px; font-weight:700; letter-spacing:-0.5px; color:#141719; }
.spec span { font-size:11px; font-weight:600; color:#737d82; }
</style></head>
<body>
<div class="page">
<nav>
<div class="navleft"><div class="gmark"></div><p class="brand">Gogoro</p></div>
<div class="navright">
<div class="navlinks"><span>Smartscooter</span><span>Network</span><span>Owners</span></div>
<button class="btn-account">Account</button>
</div>
</nav>
<main>
<div class="stage">
<span class="eyebrow">Electric Mobility</span>
<h1>Ride Smarter.</h1>
<p class="sub">Refuel in seconds.</p>
<div class="ctarow">
<button class="btn-marketing">DISCOVER MORE</button>
<button class="btn-outline">WORK WITH US</button>
</div>
<div class="rig">
<div class="glow"></div>
<div class="scooter"></div>
<div class="wheel front"></div>
<div class="wheel back"></div>
</div>
</div>
<div class="panel">
<div class="panelhead">
<h2>GoStation Network</h2>
<div class="livepill"><span class="livedot"></span>1,842 stations live</div>
</div>
<div class="map">
<div class="pin" style="left:34px; top:40px;"></div>
<div class="pin" style="left:96px; top:118px;"></div>
<div class="pin sel" style="left:168px; top:70px;"></div>
<div class="pin" style="left:240px; top:150px;"></div>
<div class="pin" style="left:296px; top:56px;"></div>
<div class="card-pop" style="left:150px; top:20px;"><b>Battery available</b><span>2 min walk</span></div>
</div>
<div class="specs">
<div class="spec"><b>170 km</b><span>Range per charge</span></div>
<div class="spec"><b><6 s</b><span>Battery swap time</span></div>
<div class="spec"><b>1,842</b><span>GoStations live</span></div>
</div>
</div>
</main>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a19b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a19b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cfcc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007a7a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a19b; color: #000000;
border: 1px solid #007a7a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a19b; color: #f5f5f5;
border: 1px solid #27aea9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cfcc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #009b96; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-weight:700; font-size:18px; color:#00a19b; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#7c7c7c; }
.navlinks span.on { color:#00a19b; font-weight:500; }
.cta { background:#00a19b; color:#fff; border:1px solid #00a19b; border-radius:4px; padding:10px; font-size:14px;
height:40px; display:flex; align-items:center; padding:0 16px; }
.hero { background:linear-gradient(135deg,#00a19b,#007a7a); padding:26px 40px; color:#fff; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 12px; max-width:600px; line-height:1.4; }
.services { display:flex; gap:12px; }
.service { border:1px solid #fff; border-radius:4px; padding:10px 16px; font-size:13px; background:transparent; color:#fff; }
.exch { margin:20px 40px; background:#fff; border-radius:4px; padding:16px; box-shadow:rgb(208,230,230) 0px 0px 12px 0px; }
.exch h2 { font-size:20px; font-weight:500; color:#00a19b; margin:0 0 10px; }
.row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #d9d9d9; font-size:14px; }
.row .cur { font-weight:500; }
.row .rate { color:#1c1c1c; }
.digital { padding:20px 40px 24px; }
.digital h2 { font-size:22px; font-weight:500; color:#00a19b; margin:0 0 14px; }
.cards { display:flex; gap:14px; }
.card { flex:1; background:#f4f8fa; border-radius:8px; padding:16px; box-shadow:rgb(208,230,230) 0px 0px 12px 0px; }
.card h4 { font-size:15px; margin:0 0 6px; }
.card p { font-size:12px; color:#7c7c7c; margin:0; }
</style></head>
<body>
<nav>
<span class="brand">E.SUN Bank</span>
<div class="navlinks"><span class="on">Personal Banking</span><span>Business</span><span>Private Banking</span><span>ESG & Sustainability</span></div>
<div class="cta">Open an Account</div>
</nav>
<section class="hero">
<h1>A strong ESG strategy<br>is a strong growth strategy</h1>
<div class="services">
<div class="service">Credit Cards</div><div class="service">Digital Accounts</div><div class="service">E.Sun Wallet</div>
</div>
</section>
<section class="exch">
<h2>Foreign Exchange Rates</h2>
<div class="row"><span class="cur">USD</span><span class="rate">32.15 / 32.45</span></div>
<div class="row"><span class="cur">JPY</span><span class="rate">0.208 / 0.212</span></div>
<div class="row"><span class="cur">EUR</span><span class="rate">34.80 / 35.20</span></div>
</section>
<section class="digital">
<h2>Explore Digital Services</h2>
<div class="cards">
<div class="card"><h4>Easy payments with E.Sun Wallet</h4><p>Scan to pay, transfer in one tap.</p></div>
<div class="card"><h4>Digital credit card services</h4><p>Apply online, get approved instantly.</p></div>
<div class="card"><h4>ESG sustainable investing</h4><p>Choose finance that's better for the planet.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f8f6; color: #101010;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f8f6; color: #101010;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #101010; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f9f8f6; color: #101010;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f8f6; color: #101010;
border: 1px solid #bfbebc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e5ff52; color: #101010;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f8f6; color:#101010; box-sizing:border-box;
font-family:'Space Grotesk','Nunito Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #eeeeee; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:0; font-size:14px; font-weight:600; }
.navlinks span { padding:0 14px; height:72px; display:flex; align-items:center; border-bottom:2px solid transparent; }
.navlinks span.active { color:#108474; border-bottom-color:#108474; }
.search-pill { background:#fff; border:1px solid #dddddd; border-radius:999px; padding:12px 24px; font-size:13px; color:#101010; width:220px; height:56px; display:flex; align-items:center; }
.hero { padding:20px 36px 14px; }
.hero h1 { font-size:44px; font-weight:700; letter-spacing:-1px; margin:0 0 8px; line-height:1.08; }
.hero p { font-family:'Nunito Sans',sans-serif; font-size:14px; color:#333333; margin:0; max-width:420px; }
.catrow { display:flex; gap:8px; padding:12px 36px; }
.catpill { border-radius:999px; padding:6px 14px; font-size:11px; font-weight:700; text-transform:uppercase; background:#f9fafb; color:#555555; }
.catpill.active { background:#101010; color:#f9f8f6; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0 36px; }
.card { background:#fff; border-radius:12px; margin:6px; overflow:hidden; }
.card-img { height:96px; background:linear-gradient(135deg,#108474,#e5ff52); border-radius:12px 12px 0 0; }
.cbody { padding:16px; }
.cbody h3 { font-size:16px; font-weight:600; margin:0 0 4px; }
.price { font-size:16px; font-weight:400; font-family:'Nunito Sans',sans-serif; }
.badge-yellow { display:inline-block; background:#e5ff52; color:#101010; font-size:11px; font-weight:800; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:8px; }
footer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#101010; color:#7b7b7b;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; font-family:'Nunito Sans',sans-serif; }
</style></head>
<body>
<nav>
<p class="brand">Beardbrand Men S GR 2</p>
<div class="navlinks"><span class="active">Shop</span><span>Beard Oil</span><span>Kits</span><span>Journal</span></div>
<div class="search-pill">Search products</div>
</nav>
<section class="hero">
<h1>Groom Like It's<br>Barbershop Day</h1>
<p>Workshop-meets-barbershop grooming, built for the man who takes his beard seriously — and his mornings not too seriously.</p>
</section>
<div class="catrow">
<div class="catpill active">All</div><div class="catpill">Beard Oil</div><div class="catpill">Wash</div><div class="catpill">Balm</div>
</div>
<div class="grid">
<div class="card">
<div class="card-img"></div>
<div class="cbody"><span class="badge-yellow">New</span><h3>Original Beard Oil</h3><div class="price">$28</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Beard Wash Bar</h3><div class="price">$22</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Utility Balm 2oz</h3><div class="price">$26</div></div>
</div>
</div>
<footer>
<span>© Beardbrand Men S GR 2</span>
<span>Beardbrand Men S GR 2 · Grooming Guide · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a6fd6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a6fd6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9ab9e7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b1e3f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a6fd6; color: #0b1e3f;
border: 1px solid #0b1e3f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a6fd6; color: #f5f5f5;
border: 1px solid #4a84db; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ab9e7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2562be; color: #0b1e3f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B1E3F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia,"Times New Roman",serif; }
.sky { position:relative; width:960px; height:640px;
background:linear-gradient(180deg,#2A6FD6 0%,#1A4A8F 46%,#0B1E3F 100%);
display:flex; align-items:center; }
.hero { position:relative; z-index:2; width:470px; padding:0 56px; display:flex; flex-direction:column; gap:14px; }
.greet { font-size:32px; font-weight:600; letter-spacing:-0.3pt; margin:0; }
.tag { font-size:16px; color:#B8C4D8; line-height:1.55; max-width:360px; margin:0; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.row { display:flex; gap:12px; align-items:center; margin-top:8px; }
.cta { background:#2A6FD6; color:#FFFFFF; border-radius:26px; padding:14px 30px; font-weight:600; font-size:16px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.cta2 { background:rgba(255,255,255,0.12); border:1pt solid rgba(255,255,255,0.16); color:#FFFFFF; border-radius:26px; padding:13px 24px; font-weight:600; font-size:15px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.glasscard { margin-top:16px; background:rgba(255,255,255,0.08); border:1pt solid rgba(255,255,255,0.12); border-radius:20px; padding:18px 20px; max-width:360px; }
.glasscard .k { font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#FFFFFF; opacity:0.8; }
.glasscard .t { font-size:20px; font-weight:600; margin:6px 0 2px; }
.glasscard .s { font-size:13px; color:#B8C4D8; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.streak { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; color:#B8C4D8; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.flame { width:14px; height:14px; border-radius:50% 50% 50% 0; background:#F2C94C; transform:rotate(45deg); }
.phonewrap { position:relative; z-index:2; width:490px; height:640px; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:296px; height:604px; border-radius:46px; overflow:hidden;
background:linear-gradient(180deg,#2A6FD6 0%,#123067 60%,#0B1E3F 100%);
box-shadow:0 30px 90px rgba(0,0,0,0.55); border:1pt solid rgba(255,255,255,0.14); }
.notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#08152c; border-radius:12px; z-index:6; }
.ptop { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:34px 20px 0; }
.avatar { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.18); }
.ptopstreak { font-size:12px; color:#FFFFFF; display:flex; align-items:center; gap:6px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.bubblezone { position:relative; height:340px; display:flex; align-items:center; justify-content:center; }
.glow { position:absolute; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle, rgba(74,133,224,0.55), rgba(74,133,224,0) 70%); }
.bubble { position:relative; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,0.92);
box-shadow:0 0 50px rgba(74,133,224,0.55); display:flex; align-items:center; justify-content:center; }
.cue { position:absolute; bottom:36px; left:0; right:0; text-align:center; font-size:19px; color:#FFFFFF; letter-spacing:0.4pt; }
.ringzone { position:relative; margin:0 auto; width:88px; height:88px; }
.ring { position:absolute; inset:0; border-radius:50%; border:3pt solid rgba(255,255,255,0.16); }
.ringfill { position:absolute; inset:0; border-radius:50%; background:conic-gradient(#2A6FD6 0deg 230deg, rgba(255,255,255,0) 230deg 360deg); }
.ringcenter { position:absolute; inset:8px; border-radius:50%; background:rgba(11,30,63,0.6); display:flex; align-items:center; justify-content:center; }
.playglyph { width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid #FFFFFF; margin-left:4px; }
.caption { text-align:center; font-size:12px; color:#B8C4D8; margin-top:14px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.ptabbar { position:absolute; left:14px; right:14px; bottom:16px; height:56px; border-radius:24px;
background:rgba(11,30,63,0.72); border:1pt solid rgba(255,255,255,0.12);
display:flex; align-items:center; justify-content:space-around; }
.tdot { width:20px; height:20px; border-radius:6px; background:rgba(255,255,255,0.55); }
.tdot.on { background:#2A6FD6; }
</style></head>
<body>
<div class="sky">
<div class="hero">
<div style="font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#FFFFFF;opacity:0.55;margin-bottom:4px;">Calm (iOS)</div>
<p class="tag" style="margin-bottom:-6px; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.7);">Good evening</p>
<h1 class="greet serif">Breathe. Rest. Return.</h1>
<p class="tag">A night-sky gradient, glass cards you can see the sky through, and a breathing bubble that expands and contracts on a true 4-7-8 cycle.</p>
<div class="row">
<div class="cta">Play</div>
<div class="cta2">Add to favorites</div>
</div>
<div class="glasscard">
<div class="k">Daily Calm</div>
<div class="t serif">Falling Asleep</div>
<div class="s">Narrated by Tamara · 10 min</div>
</div>
<div class="streak"><span class="flame"></span> 214-day streak</div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="notch"></div>
<div class="ptop"><span class="avatar"></span><span class="ptopstreak"><span class="flame" style="width:10px;height:10px;"></span>214</span></div>
<div class="bubblezone">
<span class="glow"></span>
<span class="bubble"></span>
<span class="cue serif">Breathe in</span>
</div>
<div class="ringzone">
<span class="ring"></span>
<span class="ringfill"></span>
<span class="ringcenter"><span class="playglyph"></span></span>
</div>
<div class="caption">6 min remaining</div>
<div class="ptabbar">
<span class="tdot"></span><span class="tdot"></span><span class="tdot on"></span><span class="tdot"></span><span class="tdot"></span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #18181b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e10; color: #ffffff;
border: 1px solid #18181b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e10; color: #f5f5f5;
border: 1px solid #333335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #101012; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E10; color:#EFEFF1; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.grid { width:340px; padding:16px; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.gridhead { font-size:16px; font-weight:700; }
.lcard { border-radius:6px; overflow:hidden; }
.thumb { height:110px; position:relative; }
.t1 { background:linear-gradient(160deg,#3a1a55,#111); }
.t2 { background:linear-gradient(160deg,#1a3a3a,#111); }
.livepill { position:absolute; top:6px; left:6px; background:#EB0400; color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; }
.viewpill { position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:11px; padding:2px 6px; border-radius:4px; }
.lmeta { display:flex; gap:8px; padding:6px 2px; }
.lav { width:28px; height:28px; border-radius:50%; background:#9146FF; flex-shrink:0; }
.ltitle { font-size:13px; font-weight:600; }
.lchan { font-size:12px; color:#ADADB8; }
.stream { flex:1; display:flex; flex-direction:column; }
.video { flex:1; background:linear-gradient(160deg,#1a1a1a,#000); position:relative; }
.channelbar { height:56px; display:flex; align-items:center; gap:12px; padding:0 16px; background:#0E0E10; border-bottom:1px solid #2A2A2D; }
.cav { width:36px; height:36px; border-radius:50%; background:#9146FF; border:2px solid #EB0400; }
.cname { font-size:16px; font-weight:700; }
.followbtn { margin-left:auto; background:#9146FF; color:#fff; font-size:14px; font-weight:700; padding:8px 16px; border-radius:6px; }
.viewers { font-size:13px; color:#ADADB8; margin-left:16px; }
.chat { height:220px; background:#18181B; padding:10px 14px; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.cline { font-size:14px; line-height:1.35; }
.cline b { font-weight:700; }
.chatinput { height:44px; background:#1F1F23; border-radius:8px; margin:0 14px 14px; display:flex; align-items:center; padding:0 14px; color:#ADADB8; font-size:15px; }
</style></head>
<body>
<div class="app">
<div class="grid">
<div class="gridhead">Live Channels</div>
<div class="lcard"><div class="thumb t1"><span class="livepill">● LIVE</span><span class="viewpill">● 12.4K</span></div>
<div class="lmeta"><div class="lav"></div><div><div class="ltitle">Ranked grind to Masters</div><div class="lchan">proplayer · League</div></div></div></div>
<div class="lcard"><div class="thumb t2"><span class="livepill">● LIVE</span><span class="viewpill">● 3.1K</span></div>
<div class="lmeta"><div class="lav"></div><div><div class="ltitle">late night jazz + code</div><div class="lchan">lofi.dev · Music</div></div></div></div>
</div>
<div class="stream">
<div class="channelbar">
<div class="cav"></div>
<div class="cname">Twitch (iOS)</div>
<span class="viewers">12.4K viewers</span>
<div class="followbtn">♥ Follow</div>
</div>
<div class="video"><span class="livepill" style="position:absolute;top:12px;left:12px">● LIVE</span></div>
<div class="chat">
<div class="cline"><b style="color:#9146FF">modjess:</b> welcome in everyone 👋</div>
<div class="cline"><b style="color:#00C16E">newbie22:</b> what game is this</div>
<div class="cline" style="background:rgba(145,70,255,0.20);border-left:2px solid #9146FF;padding-left:6px"><b style="color:#F5A623">@you</b> mentioned you</div>
<div class="cline"><b style="color:#579DFF">chatterbox:</b> that play was clean 🔥</div>
</div>
<div class="chatinput">Send a message</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"SST W20 Roman", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:60px; background:#000000; display:flex; align-items:center; }
.navlist { display:flex; height:100%; }
.navlist a { color:#ffffff; font-size:14px; padding:20px 13px; }
main { padding:36px 44px; }
h1.m-h1 { font-size:30px; font-weight:700; line-height:42px; margin:0 0 10px; color:#191919; }
p.m-text-lead { font-size:16px; font-weight:400; line-height:32px; color:#656565; margin:0 0 28px; max-width:600px; }
.products { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid #ddd; border-left:1px solid #ddd; }
.p { border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:20px 16px; }
.p .sw { height:70px; margin-bottom:14px; background:linear-gradient(160deg,#e8e8e8,#c9c9c9); }
.p h3 { font-size:14px; font-weight:700; margin:0 0 4px; color:#191919; }
.p span { font-size:11.5px; color:#656565; }
footer { position:absolute; bottom:0; width:960px; height:48px; background:#0a0a0a; color:#bbb;
display:flex; align-items:center; justify-content:space-between; padding:0 44px; font-size:11px; }
</style></head>
<body>
<header>
<div class="navlist">
<a>Sony</a><a>Electronics</a><a>Entertainment</a><a>Games & Network</a><a>Music</a><a>Pictures</a>
</div>
</header>
<main>
<h1 class="m-h1">Fill the world with emotion.</h1>
<p class="m-text-lead">Creativity and technology, across every business — from imaging and sensing to games, music, and pictures.</p>
<div class="products">
<div class="p"><div class="sw"></div><h3>BRAVIA</h3><span>Television</span></div>
<div class="p"><div class="sw"></div><h3>Xperia</h3><span>Mobile</span></div>
<div class="p"><div class="sw"></div><h3>PlayStation</h3><span>Games & Network</span></div>
<div class="p"><div class="sw"></div><h3>α (Alpha)</h3><span>Imaging</span></div>
</div>
</main>
<footer>
<span>© Sony Group Corporation</span>
<span>Purpose & Values · History · Careers</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #26251e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #26251e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #989794; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #26251e; color: #f7f7f4;
border: 1px solid #f7f7f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #26251e; color: #f5f5f5;
border: 1px solid #474640; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #989794; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #474740; color: #f7f7f4;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f4; color:#26251e; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:15px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#26251e; }
.pill { background:#26251e; color:#f7f7f4; border-radius:9999px; padding:11px 20px; font-size:14px; }
.hero { padding:18px 40px 22px; text-align:center; }
.hero h1 { font-size:44px; font-weight:400; line-height:1.05; margin:0 0 12px; }
.hero p { font-size:16px; color:#26251e; opacity:0.7; max-width:480px; margin:0 auto 16px; }
.editor { margin:0 40px; background:#f2f1ed; border-radius:4px; padding:18px 20px; display:flex; gap:20px; }
.tabs { display:flex; gap:2px; margin-bottom:10px; }
.tab { padding:6px 12px; font-size:13px; border-right:1px solid rgba(38,37,30,0.1); }
.tab.sel { background:#f7f7f4; }
.lines { font-family:"Menlo","Consolas",monospace; font-size:13px; line-height:1.9; color:#26251e; }
.lines .g { color:#f54e00; }
.row { display:flex; justify-content:center; gap:14px; padding:16px 40px 30px; }
.card { flex:1; background:#f2f1ed; border-radius:4px; padding:16px; }
.card h3 { font-size:14px; margin:0 0 6px; }
.card p { font-size:12px; opacity:0.7; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Cursor</p>
<div class="navlinks"><span>Agents</span><span>Cloud</span><span>CLI</span><span>Mobile</span></div>
<button class="pill">Download</button>
</nav>
<section class="hero">
<h1>The AI code editor</h1>
<p>Built to make you extraordinarily productive. Cursor is the best way to code with AI.</p>
</section>
<div class="editor">
<div style="flex:1">
<div class="tabs"><span class="tab sel">agent.ts</span><span class="tab">utils.ts</span></div>
<div class="lines">
<span class="g">function</span> planRelease(version: string) {'{'}<br>
<span class="g">const</span> tasks = agent.plan(version);<br>
<span class="g">return</span> tasks.filter(t => !t.done);<br>
{'}'}
</div>
</div>
</div>
<div class="row">
<div class="card"><h3>Tab</h3><p>Predicts your next edit across the whole file.</p></div>
<div class="card"><h3>Agent</h3><p>Runs terminal commands and edits multiple files.</p></div>
<div class="card"><h3>Bugbot</h3><p>Reviews pull requests before a human has to.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002d18; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002d18; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879b92; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c84600; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002d18; color: #c84600;
border: 1px solid #c84600; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002d18; color: #f5f5f5;
border: 1px solid #274d3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879b92; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #203114; color: #c84600;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#002d18; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { display:flex; justify-content:space-between; align-items:center; padding:20px 40px; }
.logo { font-size:22px; font-weight:100; letter-spacing:2px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:300; }
.hero { text-align:center; padding:20px 40px 30px; }
.hero h1 { font-size:56px; font-weight:100; letter-spacing:2px; line-height:1.1; margin:0 0 14px; }
.hero p { font-size:16px; font-weight:400; line-height:1.5; max-width:520px; margin:0 auto 20px; }
.btn-outline { display:inline-block; border:2px solid #002d18; color:#002d18; padding:12px 20px;
font-size:14px; letter-spacing:1px; background:transparent; }
.sage { background:#9caba3; padding:26px 40px; display:grid; grid-template-columns:1.1fr 1fr; gap:28px;
align-items:center; }
.sage .photo { height:150px; border-radius:0; background:linear-gradient(135deg,#7f9389,#b6c3ba); }
.sage h2 { font-size:30px; font-weight:100; letter-spacing:2px; margin:0 0 10px; }
.sage p { font-size:14px; line-height:1.5; margin:0 0 16px; }
.btn-accent { display:inline-block; background:#c84600; border:2px solid #c84600; color:#ffffff;
padding:12px 20px; font-size:14px; letter-spacing:1px; }
.strip { display:grid; grid-template-columns:repeat(3,1fr); }
.strip .cell { height:74px; display:flex; align-items:flex-end; padding:10px; color:#ffffff;
font-size:14px; font-weight:100; background-size:cover; }
.strip .c1 { background:#3b5647; }
.strip .c2 { background:#0a2d1b; }
.strip .c3 { background:#002d18; }
footer { background:#002d18; color:#ffffff; padding:20px 40px; display:flex; justify-content:space-between; }
footer .col h4 { color:#9b9b9b; font-size:13px; font-weight:100; letter-spacing:1px; margin:0 0 8px; }
footer .col div { font-size:13px; margin-bottom:4px; }
footer .fine { color:#aaaaaa; font-size:11px; }
</style></head>
<body>
<nav>
<span class="logo">Greenvines</span>
<div class="navlinks"><span>Our Story</span><span>Clean Skincare</span><span>Sustainability Report</span></div>
</nav>
<section class="hero">
<h1>Less is the formula</h1>
<p>Subtraction skincare — strip every formula down to what skin actually needs.</p>
<span class="btn-outline">Learn More →</span>
</section>
<section class="sage">
<div class="photo"></div>
<div>
<h2>Subtraction Care</h2>
<p>Over 20,000 verified reviews across 23 clean skincare and body wash products. We don't worship "natural" blindly — we look for where nature and safety actually overlap.</p>
<span class="btn-accent">Add to Cart</span>
</div>
</section>
<div class="strip">
<div class="cell">Our Story</div>
<div class="cell">Empty Bottle Recycling</div>
<div class="cell">3,200+ Ingredients We Never Use</div>
</div>
<footer>
<div class="col">
<h4>Learn More</h4>
<div>Our Story</div>
<div>Clean Care Manifesto</div>
</div>
<div class="col">
<h4>Customer Care</h4>
<div>45-Day No-Questions Returns</div>
<div>FAQ</div>
</div>
<div class="col">
<h4>Newsletter</h4>
<div class="fine">© Greenvines</div>
</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #286efa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #286efa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99b8f7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #286efa; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #286efa; color: #f5f5f5;
border: 1px solid #4984f9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99b8f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #245fd5; color: #111111;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf9f6; color:#111111; box-sizing:border-box;
font-family:"Saans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav.top { flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#faf9f6; border-bottom:1px solid #dedbd6; }
.logo { font-size:19px; font-weight:700; letter-spacing:-0.4px; color:#111111; margin:0; }
.navlinks { display:flex; gap:26px; font-size:15px; color:#111111; opacity:0.72; }
.btn-dark { background:#111111; color:#ffffff; border:none; border-radius:4px; height:38px;
padding:0 16px; font-size:15px; font-weight:400; white-space:nowrap; }
.hero { flex:0 0 auto; padding:22px 40px 14px; display:flex; flex-direction:column; gap:10px; }
.fin-badge { display:inline-flex; align-self:flex-start; align-items:center; gap:5px; background:rgba(255,86,0,0.10);
color:#ff5600; border-radius:4px; padding:3px 10px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.hero h1 { margin:0; font-size:46px; font-weight:400; line-height:1.0; letter-spacing:-1.4px; color:#111111; max-width:760px; }
.hero p { margin:0; font-size:16px; color:#7b7b78; max-width:520px; line-height:1.5; }
.row { display:flex; gap:10px; margin-top:2px; }
.btn-outline { background:transparent; color:#111111; border:1px solid #111111; border-radius:4px; height:40px;
padding:0 18px; font-size:15px; font-weight:400; }
.btn-primary { background:#111111; color:#ffffff; border:none; border-radius:4px; height:40px;
padding:0 18px; font-size:15px; font-weight:400; }
.mockupwrap { flex:1; padding:12px 40px 16px; }
.panel { height:100%; background:#ffffff; border:1px solid #dedbd6; border-radius:8px; display:flex; overflow:hidden; }
.sidebar { flex:0 0 216px; background:#faf9f6; border-right:1px solid #dedbd6; padding:12px; display:flex; flex-direction:column; gap:8px; }
.sidebar .label { font-size:11px; font-weight:600; color:#9c9fa5; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:2px; }
.convo { border-radius:6px; padding:8px 8px; display:flex; flex-direction:column; gap:2px; }
.convo.active { background:rgba(255,86,0,0.07); border-left:3px solid #ff5600; padding-left:6px; }
.convo .row1 { display:flex; justify-content:space-between; }
.convo .name { font-size:14px; font-weight:600; color:#111111; }
.convo .time { font-size:11px; color:#9c9fa5; }
.convo .preview { font-size:12px; color:#7b7b78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chatpane { flex:1; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:72%; padding:10px 14px; border-radius:8px; font-size:14px; line-height:1.4; }
.msg.customer { align-self:flex-start; background:#f2f1ee; color:#111111; }
.finrow { align-self:flex-end; display:flex; gap:8px; align-items:flex-start; max-width:78%; }
.finavatar { width:24px; height:24px; border-radius:999px; background:#ff5600; color:#ffffff; font-size:11px;
font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 24px; }
.msg.fin { background:#fff6f0; border:1px solid rgba(255,86,0,0.3); color:#111111; }
.resbadge { align-self:flex-end; background:#ff5600; color:#ffffff; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:0.05em; border-radius:4px; padding:4px 10px; margin-top:2px; }
footer { flex:0 0 36px; height:36px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; font-size:12px; color:#7b7b78; border-top:1px solid #dedbd6; }
</style></head>
<body>
<nav class="top">
<p class="logo">Intercom</p>
<div class="navlinks"><span>Product</span><span>Fin</span><span>Pricing</span><span>Customers</span></div>
<button class="btn-dark">Get started</button>
</nav>
<section class="hero">
<span class="fin-badge">Fin · AI Agent</span>
<h1>The only helpdesk built for the AI agent era</h1>
<p>Fin resolves tickets instantly, and your team steps in exactly when it matters.</p>
<div class="row">
<button class="btn-primary">Get started</button>
<button class="btn-outline">Book a demo</button>
</div>
</section>
<div class="mockupwrap">
<div class="panel">
<div class="sidebar">
<span class="label">Inbox</span>
<div class="convo active">
<div class="row1"><span class="name">Alex Kim</span><span class="time">2m</span></div>
<span class="preview">Can I get a refund for this month?</span>
</div>
<div class="convo">
<div class="row1"><span class="name">Morgan Park</span><span class="time">14m</span></div>
<span class="preview">Thanks, that fixed it!</span>
</div>
<div class="convo">
<div class="row1"><span class="name">Taylor Chen</span><span class="time">1h</span></div>
<span class="preview">Where do I update billing info?</span>
</div>
</div>
<div class="chatpane">
<div class="msg customer">Hey, I was charged twice this month.</div>
<div class="finrow">
<div class="finavatar">F</div>
<div class="msg fin">I found your duplicate charge and refunded $24.00 — anything else I can help with?</div>
</div>
<span class="resbadge">Resolved by Fin</span>
</div>
</div>
</div>
<footer>
<span>© Intercom</span>
<span>Intercom · Product · Fin · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6464; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6464; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3636; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202124; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6464; color: #202124;
border: 1px solid #202124; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6464; color: #111111;
border: 1px solid #d95757; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3636; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db595a; color: #202124;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202124; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:600; color:#ff6464; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#202124; }
.navlinks .on { color:#ff6464; }
.header-cta { background:#ff6464; color:#fff; border-radius:4px; height:36px; padding:0 16px;
display:flex; align-items:center; font-size:13px; }
.hero { text-align:center; padding:20px 40px 22px; }
.hero h1 { font-size:34px; font-weight:600; line-height:1.3; letter-spacing:-0.4px; margin:0 0 10px; color:#202124; }
.hero p { font-size:14px; color:#606165; margin:0 0 16px; }
.hero-ctas { display:flex; justify-content:center; gap:12px; }
.btn-primary { background:#ff6464; color:#fff; border-radius:4px; height:44px; padding:0 22px;
display:flex; align-items:center; font-size:14px; }
.btn-outline { background:#fff; color:#ff6464; border:1px solid #ff6464; border-radius:4px; height:44px;
padding:0 22px; display:flex; align-items:center; font-size:14px; }
.plans { display:flex; gap:16px; padding:6px 40px; }
.plan { flex:1; background:#fff; border:1px solid #ebebeb; border-radius:10px; overflow:hidden; }
.plan .top { padding:16px 18px 10px; }
.plan .top .tag { font-size:11px; color:#747579; }
.plan .top h3 { font-size:16px; font-weight:600; margin:6px 0; color:#202124; }
.plan .top p { font-size:12px; color:#606165; margin:0 0 6px; line-height:1.4; }
.plan .foot { background:#f6f6f6; padding:14px 18px; border-radius:0 0 10px 10px; }
.plan .price { font-size:19px; font-weight:600; color:#202124; }
.plan.hi .top { background:#fff8f8; }
.plan .foot .btn-mini { display:inline-block; margin-top:8px; background:#ff6464; color:#fff; font-size:11px;
border-radius:4px; padding:6px 12px; }
.subscribe { margin:14px 40px 0; background:#fff8f8; border-radius:10px; padding:16px 22px;
display:flex; justify-content:space-between; align-items:center; }
.subscribe .txt h4 { font-size:15px; margin:0 0 2px; color:#202124; }
.subscribe .txt p { font-size:12px; margin:0; color:#606165; }
.subscribe .fields { display:flex; gap:8px; }
.subscribe input-like { background:#f6f6f6; border-radius:4px; height:36px; width:130px; display:flex;
align-items:center; padding:0 12px; font-size:12px; color:#747579; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #ebebeb; padding:12px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#747579; }
</style></head>
<body>
<nav>
<div class="brand">Stibee</div>
<div class="navlinks"><span class="on">Features</span><span>Pricing</span><span>Resources</span><span>Help</span><span>Log in</span></div>
<div class="header-cta">Start free</div>
</nav>
<div class="hero">
<h1>Send emails your customers actually love</h1>
<p>Forget the complex code and focus on the content.</p>
<div class="hero-ctas">
<div class="btn-primary">Start for free</div>
<div class="btn-outline">Talk to sales</div>
</div>
</div>
<div class="plans">
<div class="plan"><div class="top"><span class="tag">FREE</span><h3>Starter</h3><p>Up to 2,000 subscribers, all core sending features.</p></div>
<div class="foot"><span class="price">$0</span><div class="btn-mini">Choose</div></div></div>
<div class="plan hi"><div class="top"><span class="tag">MOST POPULAR</span><h3>Growth</h3><p>Automation, A/B testing, and segmentation for growing lists.</p></div>
<div class="foot"><span class="price">$29/mo</span><div class="btn-mini">Choose</div></div></div>
<div class="plan"><div class="top"><span class="tag">TEAM</span><h3>Pro</h3><p>Shared workspaces, roles, and priority delivery support.</p></div>
<div class="foot"><span class="price">$79/mo</span><div class="btn-mini">Choose</div></div></div>
</div>
<div class="subscribe">
<div class="txt"><h4>Get product news in your inbox</h4><p>One short email a month, no spam.</p></div>
<div class="fields"><span style="background:#f6f6f6;border-radius:4px;height:36px;width:150px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#747579;">[email protected]</span>
<div class="btn-primary" style="height:36px;">Subscribe</div></div>
</div>
<footer><span>© Stibee</span><span>Stibee · Blog · Careers · Privacy</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #010102; color: #f7f8f8;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #010102; color: #f7f8f8;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.4px; margin: 0; color: #f7f8f8; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.4px; margin: 0; color: #d0d6e0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; background: #5e6ad2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 14px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; background: #0f1011; color: #f7f8f8;
border: 1px solid #5e6ad2; border-radius: 8px;
padding: 8px 14px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.05px; background: #0f1011; color: #f7f8f8;
border: 1px solid #3e3f40; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #d0d6e0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background: #141516; color: #d0d6e0;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#010102; color:#f7f8f8; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:15px; font-weight:600; display:flex; align-items:center; gap:6px; }
.brand .dot { width:10px; height:10px; border-radius:3px; background:#5e6ad2; display:inline-block; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#8a8f98; }
.btn-lav { background:#5e6ad2; color:#fff; border:none; border-radius:8px; padding:7px 14px; font-size:13px; font-weight:500; }
.btn-sec { background:#0f1011; color:#f7f8f8; border:1px solid #23252a; border-radius:8px; padding:7px 14px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:14px 40px 10px; }
.hero h1 { font-size:44px; font-weight:600; letter-spacing:-1.6px; line-height:1.08; margin:0 0 8px; }
.hero p { font-size:13px; color:#8a8f98; margin:0 0 12px; }
.screenshot { margin:0 60px; background:#0f1011; border:1px solid #23252a; border-radius:16px; padding:16px;
height:230px; display:flex; flex-direction:column; gap:8px; }
.toolbar { display:flex; gap:6px; }
.toolbar span { width:6px; height:6px; border-radius:50%; background:#34343a; display:inline-block; }
.issuerow { display:flex; align-items:center; gap:10px; background:#141516; border-radius:6px; padding:8px 10px; }
.issuerow .status { width:8px; height:8px; border-radius:50%; }
.status.done { background:#5e6ad2; } .status.progress { background:#828fff; } .status.todo { background:#3e3e44; }
.issuerow .title { flex:1; font-size:11px; }
.issuerow .id { font-size:10px; color:#62666d; font-family:monospace; }
.issuerow .pill { background:#18191a; color:#8a8f98; font-size:9px; border-radius:9999px; padding:2px 8px; }
.pricingrow { display:flex; gap:12px; padding:16px 40px; }
.pcard { flex:1; background:#0f1011; border:1px solid #23252a; border-radius:12px; padding:16px; }
.pcard.feat { background:#141516; }
.pcard h4 { font-size:13px; font-weight:600; margin:0 0 4px; }
.pcard .price { font-size:20px; font-weight:600; letter-spacing:-0.6px; margin-bottom:6px; }
.pcard p { font-size:11px; color:#8a8f98; margin:0; }
footer { margin-top:auto; padding:12px 40px; display:flex; justify-content:space-between; font-size:11px; color:#8a8f98; }
</style></head>
<body>
<nav>
<span class="brand"><span class="dot"></span>Linear</span>
<div class="navlinks"><span>Product</span><span>Method</span><span>Customers</span><span>Pricing</span></div>
<div style="display:flex;gap:8px"><button class="btn-sec">Log in</button><button class="btn-lav">Get started</button></div>
</nav>
<section class="hero">
<h1>Linear is a purpose-built tool<br>for planning and building products</h1>
<p>Meet the system for modern software development.</p>
</section>
<div class="screenshot">
<div class="toolbar"><span></span><span></span><span></span></div>
<div class="issuerow"><div class="status done"></div><span class="title">Migrate billing to new provider</span><span class="id">ENG-142</span><span class="pill">Done</span></div>
<div class="issuerow"><div class="status progress"></div><span class="title">Add dark mode to settings panel</span><span class="id">ENG-158</span><span class="pill">In Progress</span></div>
<div class="issuerow"><div class="status todo"></div><span class="title">Investigate webhook latency spikes</span><span class="id">ENG-163</span><span class="pill">Todo</span></div>
<div class="issuerow"><div class="status todo"></div><span class="title">Write onboarding email sequence</span><span class="id">ENG-171</span><span class="pill">Todo</span></div>
</div>
<div class="pricingrow">
<div class="pcard"><h4>Free</h4><div class="price">$0</div><p>For individuals and small teams.</p></div>
<div class="pcard feat"><h4>Business</h4><div class="price">$14/mo</div><p>For growing teams that need more.</p></div>
<div class="pcard"><h4>Enterprise</h4><div class="price">Custom</div><p>For organizations that need control.</p></div>
</div>
<footer>
<span>© Linear</span>
<span>Linear · Method · Changelog · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #76b900; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #76b900; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #3e5d09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #bff230; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #76b900; color: #000000;
border: 1px solid #bff230; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #76b900; color: #111111;
border: 1px solid #669e03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3e5d09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #82c208; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Arial", "Helvetica", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #5e5e5e; }
.brand { font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.btn-green { border:2px solid #76b900; border-radius:2px; padding:9px 13px; font-size:14px; font-weight:700;
color:#ffffff; }
.hero { padding:30px 32px 0; }
.label-green { color:#76b900; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
.hero h1 { font-size:36px; font-weight:700; line-height:1.25; margin:0 0 12px; max-width:560px; }
.hero p { font-size:18px; color:#a7a7a7; line-height:1.6; max-width:500px; margin:0 0 20px; }
.metricbar { display:flex; gap:24px; margin-bottom:24px; }
.metric { border-left:2px solid #76b900; padding-left:14px; }
.metric .num { font-size:32px; font-weight:700; }
.metric .unit { font-size:14px; color:#a7a7a7; }
.cards { display:flex; gap:16px; padding:0 32px; }
.card { flex:1; background:#ffffff; color:#000000; border-radius:2px; padding:18px; box-shadow:rgba(0,0,0,0.3) 0px 0px 5px 0px; }
.card h3 { font-size:20px; font-weight:700; margin:0 0 8px; border-bottom:2px solid #76b900; display:inline-block; padding-bottom:4px; }
.card p { font-size:15px; color:#757575; line-height:1.6; margin:0 0 12px; }
.card .cta { display:inline-block; border:1px solid #76b900; border-radius:2px; padding:6px 12px; font-size:13px; font-weight:700; }
.darkcard { flex:1; background:#1a1a1a; color:#ffffff; border-radius:2px; padding:18px; border:1px solid #5e5e5e; }
.darkcard h3 { font-size:20px; font-weight:700; margin:0 0 8px; border-bottom:2px solid #76b900; display:inline-block; padding-bottom:4px; }
.darkcard p { font-size:15px; color:#a7a7a7; line-height:1.6; margin:0; }
</style></head>
<body>
<nav>
<span class="brand">NVIDIA</span>
<div class="navlinks"><span>Platforms</span><span>Solutions</span><span>Developer</span></div>
<span class="btn-green">Learn More</span>
</nav>
<div class="hero">
<div class="label-green">Accelerated Computing</div>
<h1>The lowest cost per token, at scale.</h1>
<p>Cost per token is the key metric for inference TCO — and this platform leads on the metric that matters.</p>
<div class="metricbar">
<div class="metric"><div class="num">4.2x</div><div class="unit">tokens / sec</div></div>
<div class="metric"><div class="num">192GB</div><div class="unit">HBM memory</div></div>
<div class="metric"><div class="num">99.9%</div><div class="unit">uptime</div></div>
</div>
</div>
<div class="cards">
<div class="card"><h3>Platform</h3><p>A single stack from silicon to application, built for training and inference.</p><span class="cta">Explore Platform</span></div>
<div class="darkcard"><h3>Research</h3><p>Open papers, reference code, and reproducible benchmarks published together.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d333f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d333f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d9ea3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d333f; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d333f; color: #f5f5f5;
border: 1px solid #32525c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d9ea3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b2b35; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Avenir Next forINTUIT", "Avenir Next", "Avenir", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav.top { flex:0 0 84px; height:84px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; border-bottom:1px solid #e5e5e5; }
.logo { font-size:19px; font-weight:600; color:#000000; margin:0; }
.tabs { display:flex; align-items:center; gap:32px; height:100%; }
.tab { font-size:16px; font-weight:400; color:#000000; height:100%; display:flex; align-items:center;
border-bottom:2px solid transparent; }
.tab.active { border-bottom:2px solid #0d333f; font-weight:600; }
.signin { font-size:16px; color:#055393; }
.hero { flex:0 0 auto; padding:32px 40px 8px; display:flex; flex-direction:column; gap:20px; max-width:640px; }
.hero h1 { margin:0; font-size:40px; font-weight:600; line-height:52px; color:#000000; }
.hero p { margin:0; font-size:16px; font-weight:400; line-height:24px; color:#6b6c72; max-width:520px; }
.btn-secondary { align-self:flex-start; background:transparent; color:#0d333f; border:1px solid #0d333f;
border-radius:4px; height:52px; padding:0 28px; font-size:16px; font-weight:400; }
.tiles { flex:1; padding:16px 40px 0; display:grid; grid-template-columns:repeat(4,1fr); }
.tile { padding:20px 20px 0; border-left:1px solid #e5e5e5; display:flex; flex-direction:column; }
.tile:first-child { border-left:none; }
.swatch { width:100%; height:88px; border-radius:0; }
.tile .label { margin-top:20px; font-size:16px; font-weight:600; color:#000000; }
.tile .sub { margin-top:4px; font-size:14px; font-weight:400; color:#6b6c72; line-height:1.4; }
footer { flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-top:1px solid #e5e5e5; font-size:12px; color:#6b6c72; }
</style></head>
<body>
<nav class="top">
<p class="logo">Intuit QuickBooks</p>
<div class="tabs">
<span class="tab active">Overview</span>
<span class="tab">Small business</span>
<span class="tab">Accounting</span>
<span class="tab">Payments</span>
<span class="tab">Payroll</span>
</div>
<span class="signin">Sign in</span>
</nav>
<section class="hero">
<h1>Champion the business you serve.</h1>
<p>See what needs your attention today, and keep moving forward with confidence.</p>
<button class="btn-secondary">See how it works</button>
</section>
<section class="tiles">
<div class="tile">
<div class="swatch" style="background:#0d333f;"></div>
<p class="label">Retail</p>
<p class="sub">Point of sale and inventory in one place.</p>
</div>
<div class="tile">
<div class="swatch" style="background:#055393;"></div>
<p class="label">Services</p>
<p class="sub">Invoicing and time tracking, made simple.</p>
</div>
<div class="tile">
<div class="swatch" style="background:#6b6c72;"></div>
<p class="label">Freelance</p>
<p class="sub">Track expenses and estimate taxes as you go.</p>
</div>
<div class="tile">
<div class="swatch" style="background:#4a6b75;"></div>
<p class="label">Nonprofit</p>
<p class="sub">Fund and grant tracking built for accountability.</p>
</div>
</section>
<footer>
<span>© Intuit QuickBooks</span>
<span>Intuit QuickBooks · Small business · Accounting · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #747d88; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #2ea3f2; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #2ea3f2; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3e3e3e;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747d88; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c37cc6; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#313131; box-sizing:border-box;
font-family:'Montserrat','Poppins',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#fff; }
.brand { font-size:19px; font-weight:700; color:#2ea3f2; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#3e3e3e; }
.btn-primary { background:#2ea3f2; color:#fff; border:none; border-radius:8px; padding:11px 20px; font-size:13px; font-weight:600; }
main { display:flex; height:calc(640px - 70px - 42px); }
.gallery { width:380px; background:#f4f4f4; position:relative; display:flex; align-items:center; justify-content:center; }
.toy { width:170px; height:150px; border-radius:16px; background:#7cc68d; position:relative; }
.toy::before { content:''; position:absolute; top:-30px; left:30px; width:60px; height:60px; border-radius:16px; background:#c37cc6; transform:rotate(12deg); }
.toy::after { content:''; position:absolute; bottom:-24px; right:20px; width:70px; height:50px; border-radius:14px; background:#edb059; transform:rotate(-8deg); }
.badge-eco { position:absolute; top:20px; left:20px; background:#7cc68d; color:#fff; font-size:11px; font-weight:600; padding:4px 10px; border-radius:8px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:12px; color:#747d88; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-family:'Open Sans',Arial,sans-serif; font-size:22px; font-weight:700; margin:0; }
.stars { color:#f5a623; font-size:13px; }
.price { font-size:21px; font-weight:700; color:#2ea3f2; }
.desc { font-family:'Open Sans',Arial,sans-serif; font-size:13px; color:#3e3e3e; line-height:1.55; max-width:360px; }
.age { display:flex; gap:8px; }
.agepill { background:#f4f4f4; border-radius:9999px; padding:6px 14px; font-size:12px; color:#3e3e3e; }
.certs { display:flex; gap:8px; font-size:11px; color:#747d88; }
.cert { background:#fff; border:1px solid #d9d9d9; border-radius:6px; padding:5px 10px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#2ea3f2; color:#fff; border:none; border-radius:8px; padding:13px; font-size:14px; font-weight:700; }
.btn-sec { background:#fff; color:#3e3e3e; border:1px solid #d9d9d9; border-radius:8px; padding:13px 16px; font-size:13px; font-weight:600; }
footer { padding:11px 32px; border-top:1px solid #e2e2e2; font-size:11px; color:#747d88; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bigjigs Toys</div>
<div class="navlinks"><span>Wooden Toys</span><span>Games</span><span>Nursery</span><span>Outdoor</span></div>
<button class="btn-primary">Shop All</button>
</nav>
<main>
<div class="gallery"><span class="badge-eco">FSC Certified Wood</span><div class="toy"></div></div>
<div class="info">
<span class="cat">Wooden Stacking Toy</span>
<h1>Rainbow Ring Stacker</h1>
<div class="stars">★★★★★ 4.8 (146 reviews)</div>
<div class="price">£16.99</div>
<p class="desc">Hand-finished beechwood pieces, non-toxic paint, and rounded edges — built for small hands and long playrooms.</p>
<div class="age"><span class="agepill">Ages 12m+</span><span class="agepill">6 pieces</span></div>
<div class="certs"><span class="cert">EN71 Safety Tested</span><span class="cert">FSC Wood</span></div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">Save for Later</button>
</div>
</div>
</main>
<footer><span>© Bigjigs Toys</span><span>Creating perfect playrooms</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0033; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0033; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa879e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e0002e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0033; color: #000000;
border: 1px solid #e0002e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0033; color: #f5f5f5;
border: 1px solid #fd2752; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa879e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fa0032; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:100%; }
/* left promo panel */
.promo { width:420px; background:linear-gradient(160deg,#ff0033,#cc0029); position:relative; padding:40px 36px; color:#ffffff; overflow:hidden; }
.promo::before { content:''; position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,0.08); top:-100px; right:-90px; }
.promo::after { content:''; position:absolute; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,0.06); bottom:-70px; left:-60px; }
.brand-badge { position:relative; display:inline-flex; align-items:center; gap:8px; background:#ffffff; color:#ff0033; border-radius:999px; padding:6px 16px; font-weight:700; font-size:15px; }
.promo h1 { position:relative; font-size:32px; font-weight:700; line-height:1.38; margin:28px 0 12px; max-width:320px; }
.promo p { position:relative; font-size:14px; line-height:1.6; color:rgba(255,255,255,0.9); max-width:300px; margin:0 0 24px; }
.coin-row { position:relative; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.14); border-radius:16px; padding:14px 18px; max-width:300px; }
.coin { width:34px; height:34px; border-radius:50%; background:#ffb200; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#ffffff; }
.coin-row .txt { font-size:13px; font-weight:700; line-height:1.4; }
.coin-row .txt span { display:block; font-weight:400; font-size:11px; opacity:0.85; }
.promo .dl { position:relative; margin-top:auto; display:flex; gap:10px; }
.dl-btn { background:#ffffff; color:#ff0033; border-radius:24px; padding:10px 20px; font-size:13px; font-weight:700; }
/* right app screen */
.screen { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:16px; background:#f5f5f5; }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.topbar .greet { font-size:13px; color:#767676; }
.topbar .greet b { color:#222222; font-weight:700; }
.bell { width:34px; height:34px; border-radius:50%; background:#ffffff; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.balance-card { background:linear-gradient(135deg,#ff0033,#e0002e); border-radius:16px; padding:20px 22px; color:#ffffff; box-shadow:0 2px 8px rgba(255,0,51,0.2); display:flex; flex-direction:column; gap:6px; }
.balance-card .lbl { font-size:13px; opacity:0.85; }
.balance-card .amt { font-size:28px; font-weight:700; }
.balance-actions { display:flex; gap:10px; margin-top:8px; }
.bact { flex:1; background:rgba(255,255,255,0.18); border-radius:12px; text-align:center; padding:8px 0; font-size:13px; font-weight:700; }
.shortcuts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.sc { background:#ffffff; border-radius:12px; padding:14px 8px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.sc .ic { width:32px; height:32px; border-radius:8px; background:#ffebef; margin:0 auto 8px; }
.sc span { font-size:11px; color:#555555; font-weight:700; }
.promo-card { background:#ffebef; border-radius:16px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.promo-card .t1 { font-size:12px; font-weight:700; color:#ff0033; text-transform:uppercase; letter-spacing:0.05em; }
.promo-card .t2 { font-size:14px; font-weight:700; color:#222222; margin-top:4px; }
.promo-card .badge-gold { background:#ffb200; color:#ffffff; border-radius:10px; padding:4px 10px; font-size:12px; font-weight:700; white-space:nowrap; }
.txlist { background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.txrow { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eeeeee; }
.txrow:last-child { border-bottom:none; }
.txleft { display:flex; align-items:center; gap:10px; }
.txicon { width:34px; height:34px; border-radius:50%; background:#f5f5f5; }
.txname { font-size:13px; font-weight:700; color:#222222; }
.txdate { font-size:11px; color:#767676; }
.txamt { font-size:13px; font-weight:700; color:#222222; }
</style></head>
<body>
<div class="wrap">
<section class="promo">
<div class="brand-badge">PayPay</div>
<h1>Pay anywhere with one red tap</h1>
<p>Scan, send, and charge — the wallet that turns every payment into a reward moment.</p>
<div class="coin-row">
<div class="coin">P</div>
<div class="txt">+100 points earned<span>on your last payment</span></div>
</div>
<div class="dl">
<div class="dl-btn">Get the app</div>
</div>
</section>
<section class="screen">
<div class="topbar">
<div class="greet">Good afternoon, <b>Alex</b></div>
<div class="bell"></div>
</div>
<div class="balance-card">
<span class="lbl">PayPay Balance</span>
<span class="amt">¥12,400</span>
<div class="balance-actions">
<div class="bact">Charge</div>
<div class="bact">Send</div>
</div>
</div>
<div class="shortcuts">
<div class="sc"><div class="ic"></div><span>Scan</span></div>
<div class="sc"><div class="ic"></div><span>Send</span></div>
<div class="sc"><div class="ic"></div><span>Points</span></div>
<div class="sc"><div class="ic"></div><span>Cards</span></div>
</div>
<div class="promo-card">
<div>
<div class="t1">Limited offer</div>
<div class="t2">Get 100 points on your next tap</div>
</div>
<span class="badge-gold">+100P</span>
</div>
<div class="txlist">
<div class="txrow">
<div class="txleft"><div class="txicon"></div><div><div class="txname">Green Leaf Cafe</div><div class="txdate">Today · 12:41</div></div></div>
<div class="txamt">-¥620</div>
</div>
<div class="txrow">
<div class="txleft"><div class="txicon"></div><div><div class="txname">Charge from bank</div><div class="txdate">Yesterday · 09:02</div></div></div>
<div class="txamt">+¥5,000</div>
</div>
</div>
</section>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1b9efb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1b9efb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #93cef8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20d5c4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b9efb; color: #000000;
border: 1px solid #20d5c4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1b9efb; color: #f5f5f5;
border: 1px solid #3eacfa; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #93cef8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1ca7f2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0E11; color:#EAEEF2; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric:tabular-nums; }
* { box-sizing:border-box; font-variant-numeric:tabular-nums; }
body { position:relative; }
.col { position:absolute; top:18px; bottom:18px; }
.rail-title { font-size:13px; font-weight:700; color:#EAEEF2; margin-bottom:8px; letter-spacing:-0.1px; }
/* ---- brand strip ---- */
.brand { position:absolute; top:18px; left:222px; display:flex; align-items:center; gap:8px; }
.brand .mark { width:16px; height:16px; border-radius:4px; background:linear-gradient(135deg,#1B9EFB,#20D5C4); }
.brand b { font-size:13px; font-weight:800; letter-spacing:0.2px; }
/* ---- left: watchlist ---- */
.watchlist { left:16px; width:190px; }
.wrow { height:52px; border-bottom:0.5px solid #232931; display:flex; align-items:center; justify-content:space-between; }
.wrow .sym { font-size:13px; font-weight:600; }
.wrow .name { font-size:10px; color:#8B95A1; }
.spark { width:44px; height:20px; }
.wrow .price { font-size:13px; font-weight:700; text-align:right; }
.chip { font-size:10px; font-weight:800; padding:1px 5px; border-radius:4px; text-align:center; margin-top:2px; }
.up-c { color:#00C076; } .down-c { color:#FA5252; }
.chip.up { background:#00C076; color:#03150D; } .chip.down { background:#FA5252; color:#1B0606; }
/* ---- center: quote + chart ---- */
.quote { left:222px; width:480px; }
.qhead { display:flex; align-items:flex-start; justify-content:space-between; margin:26px 0 10px; }
.qhead .sym { font-size:20px; font-weight:800; }
.qhead .exch { font-size:12px; color:#8B95A1; margin-top:2px; }
.paper { background:#20D5C4; color:#04121C; font-size:10px; font-weight:800; padding:3px 8px; border-radius:4px; }
.lastpx { font-size:32px; font-weight:800; letter-spacing:-0.6px; color:#00C076; }
.delta { font-size:14px; font-weight:700; color:#00C076; margin-top:2px; }
.chartbox { position:relative; width:470px; height:170px; margin-top:14px; border-radius:4px; overflow:hidden; }
.gridline { position:absolute; left:0; right:0; height:1px; background:#1A1F26; }
.prevclose { position:absolute; left:0; right:0; height:0; border-top:1px dashed #1B9EFB; }
.body { position:absolute; width:8px; border-radius:1px; }
.wick { position:absolute; width:2px; border-radius:1px; }
.up { background:#00C076; } .down { background:#FA5252; }
.tf-row { display:flex; gap:6px; margin-top:10px; }
.tf { font-size:11px; font-weight:700; color:#8B95A1; padding:5px 10px; border-radius:4px; }
.tf.on { color:#1B9EFB; background:rgba(27,158,251,0.16); }
.ind-row { display:flex; gap:6px; margin-top:12px; }
.ind { font-size:11px; font-weight:600; color:#8B95A1; background:#1C2127; border:1px solid #232931; padding:5px 9px; border-radius:6px; }
.ind.on { color:#1B9EFB; background:rgba(27,158,251,0.16); border-color:transparent; }
.buysell { display:flex; gap:10px; margin-top:20px; }
.bs { flex:1; height:48px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; }
.buy { background:#00C076; color:#03150D; } .sell { background:#FA5252; color:#1B0606; }
/* ---- right: order book + chain ---- */
.book { left:718px; width:224px; }
.lrow { height:24px; position:relative; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; }
.lrow .depth { position:absolute; right:0; top:0; bottom:0; }
.lrow .px { position:relative; z-index:1; padding-left:4px; }
.lrow .sz { position:relative; z-index:1; padding-right:4px; color:#8B95A1; font-weight:400; }
.mid { border-top:0.5px solid #232931; border-bottom:0.5px solid #232931; text-align:center; font-size:13px; font-weight:800; padding:5px 0; margin:2px 0; }
.chain-title { font-size:12px; font-weight:700; margin:16px 0 6px; }
.chain-head { display:grid; grid-template-columns:1fr 1fr 1fr; font-size:10px; font-weight:600; color:#5A636E; text-transform:uppercase; border-bottom:0.5px solid #232931; padding-bottom:4px; }
.chain-row { display:grid; grid-template-columns:1fr 1fr 1fr; font-size:12px; padding:5px 0; border-bottom:0.5px solid #232931; }
.chain-row.atm { background:#1C2127; }
.call { color:#00C076; font-weight:700; } .strike { text-align:center; font-weight:800; } .put { color:#FA5252; font-weight:700; text-align:right; }
</style></head>
<body>
<div class="brand"><div class="mark"></div><b>Webull (iOS)</b></div>
<div class="col watchlist">
<div class="rail-title" style="margin-top:44px;">Quotes</div>
<div class="wrow"><div><div class="sym">TSLA</div><div class="name">Tesla, Inc.</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,16 8,12 16,14 24,6 32,8 44,2" fill="none" stroke="#00C076" stroke-width="2"/></svg><div><div class="price up-c">248.50</div><div class="chip up">+3.04%</div></div></div>
<div class="wrow"><div><div class="sym">AAPL</div><div class="name">Apple Inc.</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,6 8,10 16,7 24,13 32,11 44,16" fill="none" stroke="#FA5252" stroke-width="2"/></svg><div><div class="price down-c">191.20</div><div class="chip down">-1.12%</div></div></div>
<div class="wrow"><div><div class="sym">NVDA</div><div class="name">NVIDIA Corp.</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,14 8,12 16,9 24,10 32,4 44,2" fill="none" stroke="#00C076" stroke-width="2"/></svg><div><div class="price up-c">905.40</div><div class="chip up">+5.61%</div></div></div>
<div class="wrow"><div><div class="sym">AMD</div><div class="name">Adv. Micro Dev.</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,8 8,9 16,12 24,10 32,14 44,13" fill="none" stroke="#FA5252" stroke-width="2"/></svg><div><div class="price down-c">162.05</div><div class="chip down">-0.48%</div></div></div>
<div class="wrow"><div><div class="sym">SPY</div><div class="name">SPDR S&P 500</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,12 8,11 16,9 24,8 32,6 44,5" fill="none" stroke="#00C076" stroke-width="2"/></svg><div><div class="price up-c">512.88</div><div class="chip up">+0.62%</div></div></div>
<div class="wrow" style="border-bottom:none;"><div><div class="sym">COIN</div><div class="name">Coinbase Gl.</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,10 8,14 16,11 24,15 32,10 44,7" fill="none" stroke="#00C076" stroke-width="2"/></svg><div><div class="price up-c">228.61</div><div class="chip up">+2.15%</div></div></div>
</div>
<div class="col quote">
<div class="qhead">
<div><div class="sym">TSLA</div><div class="exch">Tesla, Inc. · NASDAQ</div></div>
<div class="paper">PAPER</div>
</div>
<div class="lastpx">248.50</div>
<div class="delta">+7.32 (+3.04%) ▲</div>
<div class="chartbox">
<div class="gridline" style="top:20px;"></div>
<div class="gridline" style="top:80px;"></div>
<div class="gridline" style="top:140px;"></div>
<div class="prevclose" style="top:100px;"></div>
<div class="wick up" style="left:9px;top:136px;height:28px;"></div><div class="body up" style="left:6px;top:142px;height:16px;"></div>
<div class="wick down" style="left:35px;top:126px;height:32px;"></div><div class="body down" style="left:32px;top:132px;height:20px;"></div>
<div class="wick up" style="left:61px;top:114px;height:36px;"></div><div class="body up" style="left:58px;top:120px;height:24px;"></div>
<div class="wick down" style="left:87px;top:122px;height:26px;"></div><div class="body down" style="left:84px;top:128px;height:14px;"></div>
<div class="wick up" style="left:113px;top:99px;height:34px;"></div><div class="body up" style="left:110px;top:105px;height:22px;"></div>
<div class="wick down" style="left:139px;top:106px;height:28px;"></div><div class="body down" style="left:136px;top:112px;height:16px;"></div>
<div class="wick up" style="left:165px;top:82px;height:38px;"></div><div class="body up" style="left:162px;top:88px;height:26px;"></div>
<div class="wick down" style="left:191px;top:90px;height:30px;"></div><div class="body down" style="left:188px;top:96px;height:18px;"></div>
<div class="wick up" style="left:217px;top:64px;height:36px;"></div><div class="body up" style="left:214px;top:70px;height:24px;"></div>
<div class="wick down" style="left:243px;top:72px;height:28px;"></div><div class="body down" style="left:240px;top:78px;height:16px;"></div>
<div class="wick up" style="left:269px;top:46px;height:38px;"></div><div class="body up" style="left:266px;top:52px;height:26px;"></div>
<div class="wick down" style="left:295px;top:54px;height:30px;"></div><div class="body down" style="left:292px;top:60px;height:18px;"></div>
<div class="wick up" style="left:321px;top:28px;height:36px;"></div><div class="body up" style="left:318px;top:34px;height:24px;"></div>
<div class="wick down" style="left:347px;top:36px;height:28px;"></div><div class="body down" style="left:344px;top:42px;height:16px;"></div>
<div class="wick up" style="left:373px;top:10px;height:38px;"></div><div class="body up" style="left:370px;top:16px;height:26px;"></div>
<div class="wick down" style="left:399px;top:18px;height:26px;"></div><div class="body down" style="left:396px;top:24px;height:14px;"></div>
<div class="wick up" style="left:425px;top:4px;height:30px;"></div><div class="body up" style="left:422px;top:10px;height:18px;"></div>
<div class="wick down" style="left:451px;top:8px;height:24px;"></div><div class="body down" style="left:448px;top:12px;height:14px;"></div>
</div>
<div class="tf-row">
<div class="tf">1m</div><div class="tf">5m</div><div class="tf on">1D</div><div class="tf">5D</div><div class="tf">1M</div><div class="tf">1Y</div>
</div>
<div class="ind-row">
<div class="ind on">MA</div><div class="ind">EMA</div><div class="ind">BOLL</div><div class="ind on">MACD</div><div class="ind">RSI</div>
</div>
<div class="buysell">
<div class="bs buy">Buy</div>
<div class="bs sell">Sell</div>
</div>
</div>
<div class="col book">
<div class="rail-title" style="margin-top:44px;">Order book</div>
<div class="lrow"><div class="depth" style="width:70%;background:#FA525224;"></div><span class="px" style="color:#FA5252;">248.62</span><span class="sz">120</span></div>
<div class="lrow"><div class="depth" style="width:52%;background:#FA525224;"></div><span class="px" style="color:#FA5252;">248.58</span><span class="sz">340</span></div>
<div class="lrow"><div class="depth" style="width:38%;background:#FA525224;"></div><span class="px" style="color:#FA5252;">248.54</span><span class="sz">210</span></div>
<div class="lrow"><div class="depth" style="width:24%;background:#FA525224;"></div><span class="px" style="color:#FA5252;">248.51</span><span class="sz">96</span></div>
<div class="mid">248.50 · Spread 0.08</div>
<div class="lrow"><div class="depth" style="width:30%;background:#00C07624;"></div><span class="px" style="color:#00C076;">248.42</span><span class="sz">142</span></div>
<div class="lrow"><div class="depth" style="width:48%;background:#00C07624;"></div><span class="px" style="color:#00C076;">248.38</span><span class="sz">288</span></div>
<div class="lrow"><div class="depth" style="width:64%;background:#00C07624;"></div><span class="px" style="color:#00C076;">248.34</span><span class="sz">402</span></div>
<div class="lrow"><div class="depth" style="width:80%;background:#00C07624;"></div><span class="px" style="color:#00C076;">248.30</span><span class="sz">560</span></div>
<div class="chain-title">Options · Jun 21</div>
<div class="chain-head"><span>Call</span><span style="text-align:center;">Strike</span><span style="text-align:right;">Put</span></div>
<div class="chain-row"><span class="call">4.20</span><span class="strike">245</span><span class="put">1.05</span></div>
<div class="chain-row atm"><span class="call">2.85</span><span class="strike">250</span><span class="put">2.40</span></div>
<div class="chain-row"><span class="call">1.60</span><span class="strike">255</span><span class="put">4.15</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.appbar { height:56px; background:#003580; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; }
.appbar b { color:#fff; font-size:15px; font-weight:700; }
.appbar span { color:rgba(255,255,255,0.7); font-size:12px; }
.appbar .btn { background:#0071C2; color:#fff; border-radius:8px; padding:8px 16px; font-size:12px; font-weight:700; }
.searchcard { position:relative; margin:-24px 36px 0; background:#fff; border-radius:8px;
box-shadow:rgba(26,26,26,0.12) 0 4px 14px; padding:6px 0; z-index:2; }
.srow { display:flex; align-items:center; gap:10px; padding:9px 18px; border-bottom:1px solid #E0E0E0; font-size:13px; }
.srow:last-child { border-bottom:none; }
.srow .ic { font-size:14px; }
.srow b { font-weight:600; }
.srowbtn { padding:8px 16px; }
.searchbtn { width:100%; background:#0071C2; color:#fff; border:none; border-radius:8px; padding:11px 0;
font-weight:700; font-size:14px; }
.genius { margin:16px 36px 0; background:#003580; border-radius:8px; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; }
.genius b { color:#fff; font-size:13px; font-weight:700; }
.genius span.sub { color:rgba(255,255,255,0.75); font-size:11px; display:block; margin-top:1px; }
.genius .chip { background:#FEBB02; color:#1A1A1A; font-size:11px; font-weight:700; border-radius:999px; padding:5px 12px; }
.cards { display:flex; gap:16px; padding:16px 36px 0; }
.pcard { flex:1; background:#fff; border:1px solid #E0E0E0; border-radius:8px; overflow:hidden; display:flex; }
.pphoto { width:100px; flex-shrink:0; background:linear-gradient(155deg,#dfeaf5,#8bb8dd); }
.pinfo { flex:1; padding:10px 12px; }
.pinfo .pname { font-size:14px; font-weight:700; margin:0 0 2px; }
.ploc { font-size:11px; color:#0071C2; } .pdist { font-size:11px; color:#6B6B6B; }
.pfree { font-size:11px; color:#008009; font-weight:600; margin-top:3px; }
.scorerow { display:flex; align-items:center; gap:6px; margin-top:6px; }
.scorebadge { background:#003580; color:#fff; font-size:12px; font-weight:700; border-radius:5px; padding:3px 6px; }
.scoreword { font-size:11px; font-weight:700; }
.scorect { font-size:10px; color:#6B6B6B; }
.pricebox { text-align:right; margin-top:8px; }
.pstrike { font-size:11px; color:#949494; text-decoration:line-through; }
.pprice { font-size:15px; font-weight:700; }
.ptax { font-size:9px; color:#6B6B6B; }
.urgency { font-size:10px; color:#CC0000; font-weight:600; margin-top:3px; }
footer { position:absolute; bottom:0; left:0; right:0; height:52px; border-top:1px solid #E0E0E0;
display:flex; align-items:center; justify-content:space-around; padding:0 36px; font-size:10px; color:#6B6B6B; font-weight:600; }
footer span.on { color:#0071C2; }
</style></head>
<body>
<div class="appbar">
<b>Booking.com (iOS)</b>
<span>Seoul · Fri 12 Jul — Sun 14 Jul · 2 adults</span>
<span class="btn">Search</span>
</div>
<div class="searchcard">
<div class="srow"><span class="ic">📍</span><b>Where are you going?</b></div>
<div class="srow"><span class="ic">📅</span>Fri 12 Jul — Sun 14 Jul</div>
<div class="srow"><span class="ic">🧑</span>2 adults · 0 children · 1 room</div>
<div style="padding:8px 18px 4px;"><button class="searchbtn">Search</button></div>
</div>
<div class="genius">
<div><b>Genius</b><span class="sub">You're a Genius Level 1 member</span></div>
<span class="chip">10% off</span>
</div>
<div class="cards">
<div class="pcard">
<div class="pphoto"></div>
<div class="pinfo">
<p class="pname">Grand Plaza Hotel</p>
<span class="ploc">City centre</span> <span class="pdist">· 0.5 km</span>
<div class="pfree">Free cancellation</div>
<div class="scorerow"><span class="scorebadge">8.9</span><span class="scoreword">Fabulous</span><span class="scorect">· 1,284 reviews</span></div>
<div class="pricebox">
<div class="pstrike">$240</div>
<div class="pprice">$198</div>
<div class="ptax">Includes taxes and fees</div>
<div class="urgency">Only 2 rooms left</div>
</div>
</div>
</div>
<div class="pcard">
<div class="pphoto" style="background:linear-gradient(155deg,#f5e6d3,#d9b285);"></div>
<div class="pinfo">
<p class="pname">Riverside Boutique Inn</p>
<span class="ploc">Mapo-gu</span> <span class="pdist">· 2.1 km</span>
<div class="pfree">Breakfast included</div>
<div class="scorerow"><span class="scorebadge">9.2</span><span class="scoreword">Exceptional</span><span class="scorect">· 642 reviews</span></div>
<div class="pricebox">
<div class="pprice">$142</div>
<div class="ptax">Includes taxes and fees</div>
</div>
</div>
</div>
</div>
<footer>
<span class="on">Search</span><span>Saved</span><span>Bookings</span><span>Profile</span><span>Help</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3c2bac; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3c2bac; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a29ad4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b1e90; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3c2bac; color: #ffffff;
border: 1px solid #2b1e90; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3c2bac; color: #f5f5f5;
border: 1px solid #5a4bb8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a29ad4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3929a8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#140f33; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:800; color:#140f33; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#80839e; }
.navlinks span:first-child { color:#3c2bac; }
.btn-nav { background:#3c2bac; color:#fff; border-radius:5px; padding:10px 16px; font-size:14px; }
.hero { padding:24px 32px 20px; text-align:center; }
.hero .eyebrow { font-size:22px; font-weight:700; color:#3c2bac; margin:0 0 8px; }
.hero h1 { font-size:44px; font-weight:800; line-height:1.3; margin:0 0 18px; }
.btn-primary { display:inline-block; background:#3c2bac; color:#fff; border-radius:8px; height:56px; line-height:56px; padding:0 40px; font-size:18px; }
.band { background:#201852; padding:30px 32px; display:flex; gap:20px; }
.bandcard { flex:1; text-align:center; color:#fff; }
.bandcard h3 { font-size:28px; font-weight:800; margin:0 0 8px; }
.bandcard p { font-size:13px; color:#a89ee6; margin:0 0 14px; }
.link-dark { display:inline-block; background:#120b60; color:#fff; border-radius:8px; padding:10px 22px; font-size:13px; }
.tints { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:24px 32px; }
.tint { background:#eeebfa; border-radius:12px; padding:18px; }
.tint h4 { font-size:16px; font-weight:700; margin:0 0 6px; color:#140f33; }
.tint p { font-size:12px; color:#3e426a; margin:0; line-height:1.6; }
.promo { margin:0 32px 20px; background:#2259e5; border-radius:24px; padding:22px 28px; display:flex; align-items:center; justify-content:space-between; }
.promo h4 { color:#ffd391; font-weight:700; font-size:18px; margin:0; }
.promo span.link-dark { background:#ffffff; color:#2259e5; }
footer { border-top:1px solid #eeebfa; padding:12px 32px; display:flex; justify-content:space-between; font-size:12px; color:#80839e; }
</style></head>
<body>
<nav>
<span class="brand">Ringle</span>
<div class="navlinks"><span>Video Tutoring</span><span>AI Speaking</span><span>Business Solutions</span><span>Ringle Teens</span></div>
<span class="btn-nav">Free Trial</span>
</nav>
<section class="hero">
<p class="eyebrow">1:1 video lessons with top-university tutors</p>
<h1>Speak English Like You Mean It</h1>
<span class="btn-primary">Get Started with Ringle</span>
</section>
<div class="band">
<div class="bandcard"><h3>1:1 Video Tutoring</h3><p>Lessons tailored to your goals</p><span class="link-dark">Learn More</span></div>
<div class="bandcard"><h3>AI Speaking</h3><p>Practice speaking daily, pressure-free</p><span class="link-dark">Learn More</span></div>
</div>
<div class="tints">
<div class="tint"><h4>Ivy League Tutors</h4><p>Learn 1:1 with vetted tutors from top universities.</p></div>
<div class="tint"><h4>Business English</h4><p>Prepare for meetings, presentations, and negotiations with real scenarios.</p></div>
<div class="tint"><h4>Personalized Reports</h4><p>Get detailed feedback after every lesson.</p></div>
</div>
<div class="promo">
<h4>Fall Sign-Up Special for New Members</h4>
<span class="link-dark">Check It Out</span>
</div>
<footer>
<span>© Ringle</span>
<span>Video Tutoring · AI Speaking · Business · Teens</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a2d5a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a2d5a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9a9baf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b4371; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a2d5a; color: #ffffff;
border: 1px solid #3b4371; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a2d5a; color: #f5f5f5;
border: 1px solid #4a4d73; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9baf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d315e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background: linear-gradient(180deg,#2A2D5A 0%,#3B4371 42%,#14152E 100%);
color:#F2F3FB; box-sizing:border-box;
font-family:"Nunito", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { padding:32px 40px; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:1.4px; color:#4FD1E6; text-transform:uppercase; }
.title { font-size:32px; font-weight:900; margin-top:6px; }
.sub { font-size:14px; color:#A6A9D4; margin-top:4px; }
.row1 { display:flex; gap:24px; margin-top:22px; align-items:center; }
.ring { width:92px; height:92px; border-radius:50%;
background: conic-gradient(#4FD1E6 0deg 300deg, #292C58 300deg 360deg);
display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ring-in { width:74px; height:74px; border-radius:50%; background:#1E2046; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-in b { font-size:26px; font-weight:900; }
.ring-in span { font-size:9px; font-weight:700; color:#A6A9D4; text-transform:uppercase; }
.stat b { font-size:26px; font-weight:800; }
.stat span { display:block; font-size:12px; color:#A6A9D4; margin-top:2px; }
.pill { display:inline-block; margin-top:8px; background:#4FD1E6; color:#07303A; font-size:11px; font-weight:800; padding:5px 12px; border-radius:999px; }
.card { background:#1E2046; border:1px solid #353974; border-radius:20px; padding:18px; margin-top:22px; }
svg { width:100%; height:110px; display:block; }
.legend { display:flex; gap:20px; margin-top:10px; }
.leg { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:700; color:#A6A9D4; }
.dot { width:9px; height:9px; border-radius:50%; }
.alarm { display:flex; align-items:center; gap:14px; margin-top:16px; background:#1E2046; border:1px solid #353974; border-radius:18px; padding:14px 18px; }
.icon-tile { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#6C7BFF,#3D4ABF); display:flex; align-items:center; justify-content:center; font-size:18px; }
.al-title { font-size:15px; font-weight:800; }
.al-sub { font-size:11px; color:#A6A9D4; }
.al-time { margin-left:auto; font-size:19px; font-weight:900; }
</style></head>
<body>
<div class="wrap">
<div class="eyebrow">Sleep Cycle (iOS) · Sleep Analysis</div>
<div class="title">Last night</div>
<div class="sub">Mon, May 12 · 23:42 – 07:18</div>
<div class="row1">
<div class="ring"><div class="ring-in"><b>83</b><span>Score</span></div></div>
<div>
<div class="stat"><b>7h 36m</b><span>Time asleep · 31m to fall asleep</span></div>
<div class="pill">Good night</div>
</div>
</div>
<div class="card">
<svg viewBox="0 0 700 110" preserveAspectRatio="none">
<path d="M0,20 C60,20 90,80 150,85 C220,90 260,40 330,45 C400,50 430,90 500,88 C560,86 600,30 700,25"
fill="none" stroke="#7FE3F0" stroke-width="2.5" stroke-linecap="round"/>
<path d="M0,20 C60,20 90,80 150,85 C220,90 260,40 330,45 C400,50 430,90 500,88 C560,86 600,30 700,25 L700,110 L0,110 Z"
fill="rgba(108,123,255,0.25)"/>
</svg>
<div class="legend">
<div class="leg"><div class="dot" style="background:#FF8FB1;"></div>Awake</div>
<div class="leg"><div class="dot" style="background:#6C7BFF;"></div>Light</div>
<div class="leg"><div class="dot" style="background:#3D4ABF;"></div>Deep</div>
<div class="leg"><div class="dot" style="background:#4FD1E6;"></div>REM</div>
</div>
</div>
<div class="alarm">
<div class="icon-tile">⏰</div>
<div><div class="al-title">Smart alarm</div><div class="al-sub">Wakes you in your lightest sleep</div></div>
<div class="al-time">07:30</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1c2028; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1c2028; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #939599; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #543e35; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c2028; color: #ffffff;
border: 1px solid #543e35; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1c2028; color: #f5f5f5;
border: 1px solid #3f4249; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #939599; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #25252a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1C2028; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
border-bottom:1px solid rgba(182,171,161,0.15); }
.nav .brand { font-size:16px; font-weight:700; }
.nav .links { display:flex; gap:20px; font-size:13px; color:#93989E; }
.nav .links .cur { color:#fff; }
.signup { background:#1C2028; border:1px solid #B6ABA1; color:#fff; border-radius:4px; height:32px; padding:0 14px; font-size:13px; font-weight:500; }
.chips { display:flex; gap:8px; padding:14px 24px 0; }
.chip { border-radius:8px; height:36px; padding:0 14px; font-size:13px; display:flex; align-items:center; }
.chip.active { background:#1C2028; border:1px solid #fff; font-weight:600; }
.chip.inactive { background:transparent; border:1px solid rgba(28,32,40,0.5); color:#707882; }
.ticker { margin:14px 24px 0; border:1px solid rgba(182,171,161,0.15); border-radius:8px; overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; font-weight:500; color:#93989E; padding:9px 16px; border-bottom:1px solid rgba(182,171,161,0.15); }
td { padding:9px 16px; font-size:13px; border-bottom:1px solid rgba(182,171,161,0.08); }
.coin { display:flex; align-items:center; gap:8px; }
.coin .ic { width:22px; height:22px; border-radius:50%; }
.up { color:#E15241; } .down { color:#4880EE; }
.ctarow { display:flex; gap:12px; padding:16px 24px 0; }
.cta-filled { flex:1; background:#543E35; color:#F8F9FA; border-radius:4px; height:56px; font-size:18px; font-weight:500;
display:flex; align-items:center; justify-content:center; }
.cta-outline { flex:1; background:transparent; color:#4F3327; border:1px solid #B6ABA1; border-radius:4px; height:56px;
font-size:18px; font-weight:500; display:flex; align-items:center; justify-content:center; background-color:#2a2f38; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Bithumb</div>
<div class="links"><span class="cur">Exchange</span><span>Markets</span><span>NFT</span><span>Wallet</span><span>Support</span></div>
<button class="signup">Sign up</button>
</nav>
<div class="chips">
<div class="chip active">Favorites</div>
<div class="chip inactive">KRW Market</div>
<div class="chip inactive">BTC Market</div>
<div class="chip inactive">USDT Market</div>
</div>
<div class="ticker">
<table>
<tr><th>Asset</th><th>Price (KRW)</th><th>24h change</th><th>Volume</th></tr>
<tr><td><div class="coin"><div class="ic" style="background:linear-gradient(135deg,#f7931a,#ffb84d);"></div>Bitcoin</div></td><td>91,204,000</td><td class="up">+3.42%</td><td>210.4B</td></tr>
<tr><td><div class="coin"><div class="ic" style="background:linear-gradient(135deg,#627eea,#8ea2f2);"></div>Ethereum</div></td><td>4,812,300</td><td class="down">-1.08%</td><td>153.2B</td></tr>
<tr><td><div class="coin"><div class="ic" style="background:linear-gradient(135deg,#00c2a8,#5be3cf);"></div>Solana</div></td><td>288,900</td><td class="up">+6.71%</td><td>98.7B</td></tr>
<tr><td><div class="coin"><div class="ic" style="background:linear-gradient(135deg,#c2a6ff,#8f6bff);"></div>Polkadot</div></td><td>9,420</td><td class="down">-0.42%</td><td>21.4B</td></tr>
<tr><td><div class="coin"><div class="ic" style="background:linear-gradient(135deg,#ffcf4d,#ff9d4d);"></div>Chainlink</div></td><td>19,880</td><td class="up">+2.15%</td><td>30.1B</td></tr>
</table>
</div>
<div class="ctarow">
<div class="cta-filled">Start trading</div>
<div class="cta-outline">View markets</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #fde0f0;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #fde0f0;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #fde0f0; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a5a8b5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #1c1c1e; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #1c1c1e;
border: 1px solid #1c1c1e; border-radius: 9999px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1c1e;
border: 1px solid #fef7fb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a5a8b5; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #ffd02f; color: #1c1c1e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1e; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #eef0f3; position:relative; z-index:3; background:#fff; }
.brand { font-size:18px; font-weight:700; color:#050038; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#555a6a; }
.btn { background:#1c1c1e; color:#fff; border:none; border-radius:999px; padding:9px 20px; font-weight:600; font-size:13px; }
/* 화이트보드 캔버스: 실제 제품처럼 색색 스티키노트가 흩어져 있고 그 위에
캔버스 야옐로 워드마크가 얹힌다 — Miro 의 "진짜 정체성"은 이 산만한 배치다. */
.board { position:relative; height:400px; background:
radial-gradient(circle,#eef0f3 1px,transparent 1.4px) 0 0/22px 22px, #fafbfc; overflow:hidden; }
.sticky { position:absolute; width:130px; height:110px; border-radius:6px; padding:12px; font-size:12px;
box-shadow:0 6px 16px rgba(5,0,56,0.10); font-weight:600; line-height:1.35; }
.s1 { background:#ffd02f; top:36px; left:60px; transform:rotate(-5deg); color:#746019; }
.s2 { background:#ffd8f4; top:24px; left:230px; transform:rotate(4deg); color:#600043; }
.s3 { background:#c3faf5; top:70px; right:250px; transform:rotate(-3deg); color:#187574; }
.s4 { background:#ffe6cd; top:30px; right:70px; transform:rotate(6deg); color:#7a3d00; }
.s5 { background:#ffc6c6; bottom:40px; left:150px; transform:rotate(3deg); color:#600000; }
.s6 { background:#dcecfa; bottom:30px; right:170px; transform:rotate(-4deg); color:#1a3d7a; }
.center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:2; }
.badge { background:#fff8e0; color:#746019; border:1.5px solid #ffd02f; border-radius:999px; padding:4px 14px; font-size:11px; font-weight:700; }
.center h1 { font-size:44px; font-weight:500; letter-spacing:-1.2px; margin:0; text-align:center; color:#050038; }
.center h1 .hl { color:#4262ff; }
.center p { font-size:14px; color:#555a6a; margin:0; }
.row { display:flex; gap:10px; }
.btn-yellow { background:#ffd02f; color:#050038; border:none; border-radius:999px; padding:10px 22px; font-weight:700; font-size:13px; }
.btn-outline { background:#fff; color:#1c1c1e; border:1.5px solid #1c1c1e; border-radius:999px; padding:9px 22px; font-weight:700; font-size:13px; }
.strip { display:flex; height:180px; border-top:1px solid #eef0f3; }
.tile { flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 26px;
border-right:1px solid #eef0f3; }
.tile:last-child { border-right:none; }
.tile .dot { width:26px; height:26px; border-radius:8px; }
.t1 .dot { background:#ffd02f; } .t2 .dot { background:#0fbcb0; } .t3 .dot { background:#ff9999; }
.tile h4 { font-size:14px; font-weight:700; margin:0; color:#050038; }
.tile p { font-size:12px; color:#555a6a; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Miro</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Templates</span><span>Pricing</span></div>
<button class="btn">Sign up free</button>
</nav>
<div class="board">
<div class="sticky s1">Sprint plan</div>
<div class="sticky s2">Kickoff!</div>
<div class="sticky s3">User flow v2</div>
<div class="sticky s4">Retro notes</div>
<div class="sticky s5">Roadmap Q3</div>
<div class="sticky s6">Ask design</div>
<div class="center">
<span class="badge">AI Workflows</span>
<h1>Where teams<br><span class="hl">think together</span></h1>
<p>The visual workspace for innovation, powered by AI.</p>
<div class="row"><button class="btn-yellow">Sign up free</button><button class="btn-outline">Take a tour</button></div>
</div>
</div>
<div class="strip">
<div class="tile t1"><span class="dot"></span><h4>Brainstorm</h4><p>Sticky notes, at scale</p></div>
<div class="tile t2"><span class="dot"></span><h4>Diagram</h4><p>Flowcharts and maps</p></div>
<div class="tile t3"><span class="dot"></span><h4>Present</h4><p>Turn boards into decks</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0088cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0088cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c4e3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40a7e3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0088cc; color: #000000;
border: 1px solid #40a7e3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0088cc; color: #f5f5f5;
border: 1px solid #2799d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c4e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a8dd0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.sidebar { width:300px; height:640px; background:#FFFFFF; border-right:1px solid #C7C7CC; display:flex; flex-direction:column; }
.sb-head { padding:20px 16px 8px; }
.sb-head h1 { margin:0; font-size:28px; font-weight:700; letter-spacing:0.3px; }
.search { margin:10px 16px 6px; height:34px; border-radius:10px; background:#F2F2F7; display:flex; align-items:center; padding:0 12px; color:#A0A6AD; font-size:14px; }
.rows { flex:1; overflow:hidden; }
.row { display:flex; align-items:center; gap:10px; padding:8px 14px; height:64px; }
.row.pinned { background:#F7F7F7; }
.av { width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; }
.row .info { flex:1; min-width:0; border-bottom:1px solid #EFEFEF; padding-bottom:8px; height:56px; display:flex; flex-direction:column; justify-content:center; }
.row .top { display:flex; justify-content:space-between; }
.row .name { font-weight:600; font-size:15px; }
.row .time { font-size:12px; color:#A0A6AD; }
.row .prev { display:flex; justify-content:space-between; align-items:center; }
.row .msg { font-size:13px; color:#707579; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.unread { background:#0088CC; color:#fff; font-size:11px; font-weight:700; border-radius:9px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.chatpane { flex:1; height:640px; background:#DBE7F4; display:flex; flex-direction:column; }
.chat-head { height:56px; background:rgba(255,255,255,0.92); border-bottom:1px solid #E5E5E5; display:flex; align-items:center; padding:0 18px; gap:12px; }
.chat-head .cav { width:34px; height:34px; border-radius:50%; background:#0088CC; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.chat-head .who { font-size:16px; font-weight:600; }
.chat-head .status { font-size:12px; color:#4DD364; }
.chat-head .icons { margin-left:auto; display:flex; gap:20px; color:#0088CC; font-size:17px; }
.msgs { flex:1; padding:20px 60px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.bub { max-width:62%; padding:9px 13px; font-size:15px; line-height:1.3; position:relative; }
.in { align-self:flex-start; background:#FFFFFF; border:1px solid #E5E5E5; border-radius:17px 17px 17px 6px; color:#000; }
.out { align-self:flex-end; background:#2B86FD; border-radius:17px 17px 6px 17px; color:#fff; }
.meta { font-size:10.5px; opacity:0.75; margin-top:4px; text-align:right; }
.compose { height:52px; background:#FFFFFF; border-top:1px solid #E5E5E5; display:flex; align-items:center; padding:0 16px; gap:14px; }
.compose .field { flex:1; height:34px; display:flex; align-items:center; color:#A0A6AD; font-size:15px; }
.compose .send { color:#0088CC; font-size:22px; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="sb-head"><h1>Chats</h1></div>
<div class="search">Search</div>
<div class="rows">
<div class="row pinned"><div class="av" style="background:#FC5C51">EL</div>
<div class="info"><div class="top"><span class="name">Elena · Telegram (iOS)</span><span class="time">10:24</span></div>
<div class="prev"><span class="msg">Sent you the deck, check it 📎</span><span class="unread">2</span></div></div></div>
<div class="row"><div class="av" style="background:#0FB297">Team</div>
<div class="info"><div class="top"><span class="name">Design Team</span><span class="time">09:58</span></div>
<div class="prev"><span class="msg">Marco: sounds good 👍</span><span></span></div></div></div>
<div class="row"><div class="av" style="background:#895DD5">DK</div>
<div class="info"><div class="top"><span class="name">Dana K.</span><span class="time">Yesterday</span></div>
<div class="prev"><span class="msg">Secret Chat 🔒</span><span></span></div></div></div>
<div class="row"><div class="av" style="background:#3CA5EC">City</div>
<div class="info"><div class="top"><span class="name">City Runners</span><span class="time">Mon</span></div>
<div class="prev"><span class="msg">128 members</span><span class="unread">14</span></div></div></div>
</div>
</div>
<div class="chatpane">
<div class="chat-head">
<div class="cav">EL</div>
<div><div class="who">Elena · Telegram (iOS)</div><div class="status">online</div></div>
<div class="icons"><span>📞</span><span>⋮</span></div>
</div>
<div class="msgs">
<div class="bub in">Where should we send the launch invites?<div class="meta" style="color:#707579">10:19</div></div>
<div class="bub out">Sending the segmented list now — silent send so nobody wakes up 😄<div class="meta">10:24 ✓✓</div></div>
<div class="bub in">Perfect, scheduling for 9am then.<div class="meta" style="color:#707579">10:24</div></div>
</div>
<div class="compose">
<span>📎</span>
<div class="field">Message</div>
<span>😊</span>
<span class="send">➤</span>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #096fc8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #096fc8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bb9e1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #81b0da; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #096fc8; color: #ffffff;
border: 1px solid #81b0da; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #096fc8; color: #f5f5f5;
border: 1px solid #2f84cf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bb9e1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c79cb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#333333; box-sizing:border-box;
font-family:'My Galano Grotesque','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; background:#f6f6f6; }
nav { height:56px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { font-size:16px; font-weight:600; letter-spacing:-0.2px; color:#333333; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:400; color:#333333; }
.navlinks span:first-child { color:#096fc8; }
.hero { flex:0 0 auto; padding:2px 40px 14px; }
.eyebrow { font-size:14px; font-weight:400; color:#096fc8; display:block; margin-bottom:4px; }
.hero h1 { font-size:58px; font-weight:700; line-height:0.92; letter-spacing:-2px; margin:0; color:#333333; }
.hero p { font-size:14px; font-weight:400; color:#6e6e6e; margin:10px 0 0; max-width:520px; line-height:1.5; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr);
gap:12px; padding:6px 40px; overflow:hidden; }
.work { background:#ffffff; border-radius:8px; padding:12px 14px; display:flex; flex-direction:column; gap:6px;
box-shadow:none; overflow:hidden; }
.swatch { height:44px; border-radius:6px; }
.swatch.a { background:#e8f1fd; }
.swatch.b { background:#ffe6e3; }
.swatch.c { background:#e6e2f5; }
.swatch.d { background:#dcf0ff; }
.swatch.e { background:#fff0ee; }
.swatch.f { background:#eee6f6; }
.worktag { font-size:11px; font-weight:400; color:#096fc8; text-transform:uppercase; letter-spacing:0.04em; }
.worktitle { font-size:19px; font-weight:600; letter-spacing:-0.4px; margin:0; color:#333333; line-height:1.15; }
.worktitle.sky { color:#81b0da; }
.work p { font-size:12px; color:#9096a2; margin:0; }
.contact { flex:0 0 auto; padding:16px 40px 24px; display:flex; align-items:center; justify-content:space-between; }
.contact .msg { font-size:15px; font-weight:400; color:#333333; }
.contact .msg b { font-weight:600; }
.ctarow { display:flex; gap:12px; }
.btn-primary { background:#096fc8; color:#ffffff; border:none; border-radius:9999px; padding:0 24px; height:46px;
font-size:14px; font-weight:400; }
.btn-outline { background:#ffffff; color:#096fc8; border:1px solid #096fc8; border-radius:9999px; padding:0 24px;
height:46px; font-size:14px; font-weight:400; }
</style></head>
<body>
<div class="page">
<nav>
<p class="brand">Goodpatch</p>
<div class="navlinks"><span>Why design</span><span>Services</span><span>Work</span><span>Company</span></div>
</nav>
<div class="hero">
<span class="eyebrow">Work</span>
<h1>Design to empower</h1>
<p>Selected case studies from a studio that treats design as a strategic force — bridging business, product, and craft.</p>
</div>
<div class="grid">
<div class="work">
<div class="swatch a"></div>
<span class="worktag">Fintech</span>
<h3 class="worktitle sky">Ledger for everyone</h3>
<p>Consumer banking app redesign</p>
</div>
<div class="work">
<div class="swatch b"></div>
<span class="worktag">Mobility</span>
<h3 class="worktitle">Fleet dispatch console</h3>
<p>Enterprise operations platform</p>
</div>
<div class="work">
<div class="swatch c"></div>
<span class="worktag">Healthcare</span>
<h3 class="worktitle">Care coordination</h3>
<p>Cross-team clinical workflow</p>
</div>
<div class="work">
<div class="swatch d"></div>
<span class="worktag">Retail</span>
<h3 class="worktitle">Store of the future</h3>
<p>Omnichannel commerce system</p>
</div>
<div class="work">
<div class="swatch e"></div>
<span class="worktag">Culture</span>
<h3 class="worktitle">Design maturity study</h3>
<p>Organizational design research</p>
</div>
<div class="work">
<div class="swatch f"></div>
<span class="worktag">Products</span>
<h3 class="worktitle">Prototyping toolkit</h3>
<p>In-house product for designers</p>
</div>
</div>
<div class="contact">
<span class="msg">Won't you <b>prove the power of design</b> together?</span>
<div class="ctarow">
<button class="btn-primary">View selected works</button>
<button class="btn-outline">View career info</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #eeeeee; color: #232323;
border: 1px solid #003399; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #232323;
border: 1px solid #bbbbbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #003399; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeeeee; color:#232323; box-sizing:border-box;
font-family:'Arial', 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.serif { font-family:'Georgia', 'Times New Roman', serif; }
nav { flex:0 0 auto; height:64px; background:#003399; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; }
.brand { font-size:18px; font-weight:700; margin:0; font-family:'Georgia', serif; }
.navlinks { display:flex; gap:6px; font-size:14px; font-weight:600; letter-spacing:0.3px; }
.navlinks span { padding:8px 14px; border-radius:4px; }
.navlinks .active { background:rgba(255,255,255,0.15); }
.cart { font-size:13px; font-weight:600; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:18px 28px; min-height:0; }
.hero { flex:0 0 auto; margin-bottom:16px; }
.hero h1 { font-size:26px; margin:0 0 6px; font-weight:700; max-width:520px; line-height:1.2; }
.hero p { font-size:14px; color:#555555; margin:0; max-width:480px; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; min-height:0; }
.card { background:#ffffff; border:1px solid #dddddd; border-radius:12px; padding:12px; display:flex;
flex-direction:column; gap:6px; position:relative; }
.card .badge { position:absolute; top:10px; left:10px; background:#003399; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 7px; border-radius:4px; }
.cover { flex:1; border-radius:8px; min-height:0; }
.c1 { background:linear-gradient(160deg,#01426a,#24588d 130%); }
.c2 { background:linear-gradient(160deg,#d32f2f,#8a1414 130%); }
.c3 { background:linear-gradient(160deg,#232323,#555 130%); }
.c4 { background:linear-gradient(160deg,#003399,#01426a 130%); }
.card h3 { font-size:14px; font-weight:600; margin:2px 0 0; font-family:'Arial', sans-serif; }
.card .author { font-size:12px; color:#555555; margin:0; }
.card .price { font-size:14px; font-weight:700; margin:2px 0 0; }
footer { flex:0 0 auto; background:#003399; color:#ffffff; height:52px; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; font-size:12px; }
footer .links { display:flex; gap:16px; opacity:0.85; }
</style></head>
<body>
<nav>
<p class="brand">Annabelle S Book Club LA</p>
<div class="navlinks"><span class="active">New Arrivals</span><span>Fiction</span><span>Staff Picks</span><span>Events</span></div>
<div class="cart">Cart (0)</div>
</nav>
<main>
<div class="hero">
<h1 class="serif">A living room for readers in Los Angeles</h1>
<p>Hand-picked fiction, staff notes, and a shelf that changes with the season.</p>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="cover c1"></div>
<h3>The Long Water</h3><p class="author">Nadia Farrow</p><p class="price">$24.00</p></div>
<div class="card"><div class="cover c2"></div>
<h3>Salt & Company</h3><p class="author">Iris Weller</p><p class="price">$18.50</p></div>
<div class="card"><span class="badge">New</span><div class="cover c3"></div>
<h3>Nine Winters</h3><p class="author">Tomas Reyes</p><p class="price">$21.00</p></div>
<div class="card"><div class="cover c4"></div>
<h3>Blue Hour Diner</h3><p class="author">Marguerite Cole</p><p class="price">$16.75</p></div>
</div>
</main>
<footer>
<span>© Annabelle S Book Club LA</span>
<div class="links"><span>Shipping</span><span>Returns</span><span>Contact</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #303030;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #303030;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #929495; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #db5757; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #394962;
border: 1px solid #db5757; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #303030;
border: 1px solid #cbcbcb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929495; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2px; background: #d0d6d9; color: #394962;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#303030; box-sizing:border-box;
font-family:'DM Sans',sans-serif; }
* { box-sizing:border-box; }
.topstripe { height:26px; background:#62623a; color:#e8e8d0; font-size:10.5px; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
nav { height:54px; background:#394962; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#c6c7c9; }
.navlinks span.on { color:#ffffff; font-weight:700; }
.modelsearch { background:#ffffff; border-radius:6px; padding:6px 14px; font-size:11px; color:#767676; width:190px; }
.wrap { display:flex; height:506px; padding:16px 30px; gap:26px; }
.photo { width:280px; flex-shrink:0; background:#d0d6d9; border-radius:6px; display:flex; align-items:center; justify-content:center; position:relative; }
.unit { width:170px; height:190px; border-radius:6px; background:linear-gradient(160deg,#c6c7c9,#929495 60%,#687979 100%); }
.auth-badge { position:absolute; top:14px; left:14px; background:#929457; color:#fff; font-size:10px; font-weight:700; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:10px; }
.model-code { font-size:12px; color:#767676; letter-spacing:.03em; }
.info h1 { font-size:20px; font-weight:700; margin:0; letter-spacing:-.2px; }
.spec-row { display:flex; gap:20px; font-size:11px; border-top:1px solid #cfcfcf; border-bottom:1px solid #cfcfcf; padding:10px 0; }
.spec-row div b { display:block; font-size:13px; color:#394962; }
.desc { font-size:12.5px; color:#626263; line-height:1.6; max-width:460px; }
.trust-row { display:flex; gap:8px; }
.trust-row span { font-size:10.5px; border:1px solid #cfcfcf; border-radius:4px; padding:4px 10px; color:#626263; }
.price-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.price { font-size:20px; font-weight:700; }
.btn-buy { background:#db5757; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:12px; font-weight:700; }
.btn-quote { border:1px solid #394962; color:#394962; border-radius:4px; padding:12px 18px; font-size:12px; font-weight:700; }
footer { height:54px; background:#d0d6d9; display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:10.5px; color:#626263; }
</style></head>
<body>
<div class="topstripe"><span>Wholesale Account: Contractor Tier 2</span><span>Freight Ships to Jobsite · Net-30 Available</span></div>
<nav>
<p class="brand">AC Outlet</p>
<div class="navlinks"><span>Split Systems</span><span class="on">Package Units</span><span>Air Handlers</span><span>Thermostats</span></div>
<span class="modelsearch">GSX14024…</span>
</nav>
<div class="wrap">
<div class="photo"><span class="auth-badge">Authorized Dealer</span><div class="unit"></div></div>
<div class="info">
<span class="model-code">MODEL GSX14024 · Goodman</span>
<h1>2-Ton 14 SEER Split System A/C Condenser</h1>
<div class="spec-row">
<div>SEER<b>14.0</b></div>
<div>Refrigerant<b>R-410A</b></div>
<div>Warranty<b>10-Yr Parts</b></div>
</div>
<p class="desc">Direct from the jobsite catalog — full model documentation, matched-system compatibility, and freight shipping thresholds available at checkout.</p>
<div class="trust-row"><span>Goodman Authorized</span><span>Wholesale Pricing</span><span>Freight Available</span></div>
<div class="price-row">
<span class="price">$1,395.00</span>
<button class="btn-buy">Add to Cart</button>
<button class="btn-quote">Get Quote</button>
</div>
</div>
</div>
<footer><span>© AC Outlet</span><span>Matched Systems · Freight Info · Contractor Accounts</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 600; line-height: 1.4; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6f6f6f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #006080; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f5f5f5; color: #222222;
border: 1px solid #006080; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #e5e5e5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6f6f6f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f04124; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#222222; box-sizing:border-box;
font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#006080; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:17px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#cfe6ee; }
.navlinks span.on { color:#ffffff; font-weight:700; }
.search { flex:1; max-width:280px; margin:0 20px; background:#ffffff; border-radius:8px; padding:7px 14px; font-size:11px; color:#6f6f6f; }
.wrap { display:flex; height:524px; padding:16px 30px; gap:26px; }
.photo { width:280px; flex-shrink:0; background:#ffffff; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.disc { width:200px; height:200px; border-radius:50%; background:repeating-radial-gradient(circle,#1a1a1a 0,#1a1a1a 2px,#2b2b2b 3px,#2b2b2b 6px); position:relative; }
.disc::after { content:''; position:absolute; inset:0; margin:auto; width:70px; height:70px; border-radius:50%; background:#006080; }
.limited-badge { position:absolute; top:14px; left:14px; background:#f04124; color:#fff; font-size:10px; font-weight:700; padding:5px 10px; border-radius:8px; }
.instock-badge { position:absolute; top:14px; right:14px; background:#43ac6a; color:#fff; font-size:10px; font-weight:700; padding:5px 10px; border-radius:8px; }
.info { flex:1; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:12px; color:#6f6f6f; }
.info h1 { font-size:24px; font-weight:700; margin:0; line-height:1.25; }
.press-row { display:flex; gap:8px; }
.press-opt { border:1px solid #e5e5e5; border-radius:8px; padding:8px 16px; font-size:12px; background:#ffffff; }
.press-opt.on { border-color:#006080; color:#006080; font-weight:700; }
.desc { font-size:13px; color:#444444; line-height:1.6; max-width:460px; }
.amber-note { font-size:11px; color:#794b02; }
.buy-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.price { font-size:22px; font-weight:700; color:#f04124; }
.btn-buy { flex:1; background:#006080; color:#fff; border:none; border-radius:8px; padding:13px; font-size:13px; font-weight:700; }
footer { height:56px; background:#e7e7e7; display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:11px; color:#6f6f6f; }
</style></head>
<body>
<nav>
<p class="brand">Acoustic Sounds</p>
<div class="search">Search artist, title, or catalog #…</div>
<div class="navlinks"><span class="on">SACD</span><span>180g Vinyl</span><span>Reels</span></div>
</nav>
<div class="wrap">
<div class="photo"><span class="limited-badge">Limited Edition</span><span class="instock-badge">In Stock</span><div class="disc"></div></div>
<div class="info">
<span class="cat">Jazz · 180g LP · Analogue Remaster</span>
<h1>Midnight Session — Analogue Remaster</h1>
<div class="press-row">
<span class="press-opt on">180g Vinyl</span>
<span class="press-opt">Hybrid SACD</span>
<span class="press-opt">Reel-to-Reel</span>
</div>
<p class="desc">Mastered from the original analogue tapes and pressed to 180g vinyl at a boutique plant — the felt of the platter, the quiet glow of the preamp, nothing between you and the session.</p>
<span class="amber-note">Only 240 copies pressed for this release</span>
<div class="buy-row">
<span class="price">$39.98</span>
<button class="btn-buy">Add to Cart</button>
</div>
</div>
</div>
<footer><span>© Acoustic Sounds</span><span>Shipping · Returns · Mastering Notes</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #007ff5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #007ff5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c0f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b4043; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007ff5; color: #3b4043;
border: 1px solid #3b4043; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #007ff5; color: #f5f5f5;
border: 1px solid #2792f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c0f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0975d9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#282a2b; color:#ffffff; box-sizing:border-box;
font-family:"Pretendard",sans-serif; letter-spacing:-0.5px; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; color:#ffffff; }
.navlinks { display:flex; gap:20px; font-size:14px; opacity:0.8; }
.cbtn { background:#ffffff; color:#000000; border:1px solid #000000; border-radius:8px; height:38px; padding:0 16px; font-size:15px; font-weight:700; display:flex; align-items:center; }
.hero { padding:26px 40px 20px; }
.eyebrow { color:#007ff5; font-size:16px; font-weight:700; margin-bottom:8px; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.3; margin:0 0 18px; max-width:640px; }
.row { display:flex; gap:12px; }
.darkpill { background:#3b4043; color:#ffffff; border-radius:90px; padding:16px 30px; font-size:16px; font-weight:700; }
.outlinepill { background:transparent; color:#007ff5; border:1px solid #007ff5; border-radius:90px; padding:16px 24px; font-size:16px; font-weight:700; }
.whitesection { background:#ffffff; color:#000000; padding:28px 40px; }
.whitesection .eyebrow2 { color:#007ff5; font-size:16px; font-weight:700; margin-bottom:10px; }
.whitesection h2 { font-size:32px; font-weight:700; margin:0 0 18px; max-width:600px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border:1px solid #eceff1; border-radius:30px; padding:20px; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 6px; }
.card p { font-size:13px; color:#596066; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">SIONIC AI</p>
<div class="navlinks"><span>STORM PLATFORM</span><span>USE CASE</span><span>NEWS</span></div>
<span class="cbtn">Contact us</span>
</nav>
<section class="hero">
<div class="eyebrow">STORM PLATFORM</div>
<h1>The Power of AI for Every Business</h1>
<div class="row"><span class="darkpill">Learn More</span><span class="outlinepill">Explore STORM PLATFORM</span></div>
</section>
<div class="whitesection">
<div class="eyebrow2">USE CASE</div>
<h2>Reliable, Hallucination-Free Answers</h2>
<div class="cards">
<div class="card"><h3>Optimized for RAG</h3><p>Grounded in your own company data.</p></div>
<div class="card"><h3>No Experts Needed</h3><p>Anyone can design and deploy AI agents.</p></div>
<div class="card"><h3>Data Engine</h3><p>Turns messy documents into clean context.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #efbcb4;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #efbcb4;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #efbcb4; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #121212;
border: 1px solid #f7eae8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.4px; background: #e5e9fa; color: #4770db;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#121212; box-sizing:border-box;
font-family:'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.promo { flex:0 0 auto; height:28px; background:#f1dc0c; color:#121212; display:flex; align-items:center;
justify-content:center; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; }
nav { flex:0 0 auto; height:54px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; border-bottom:1px solid #eeeeee; background:#fafafa; }
.brand { font-family:'Bricolage Grotesque', system-ui, sans-serif; font-size:20px; font-weight:800;
letter-spacing:-0.5px; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#121212; }
.navicons { display:flex; gap:16px; font-size:12px; color:#7b7b7b; }
.hero { flex:0 0 auto; background:#0e1b4d; color:#ffffff; padding:22px 36px; display:flex;
align-items:center; justify-content:space-between; gap:24px; }
.hero-copy { max-width:400px; }
.hero-copy h1 { font-family:'Bricolage Grotesque', system-ui, sans-serif; font-size:30px; font-weight:800;
line-height:1.08; letter-spacing:-1px; margin:0 0 8px; }
.hero-copy p { font-size:14px; color:#d0e0fa; margin:0 0 14px; }
.hero-btns { display:flex; gap:10px; }
.btn-primary { background:#108474; color:#fff; border:none; border-radius:8px; padding:12px 22px;
font-size:14px; font-weight:600; }
.btn-secondary { background:transparent; color:#fff; border:1.5px solid #fff; border-radius:8px;
padding:11px 21px; font-size:14px; font-weight:600; }
.hero-visual { width:210px; height:120px; border-radius:8px;
background:linear-gradient(150deg,#4770db,#0e1b4d 70%); position:relative; flex:0 0 auto; }
.hero-visual::after { content:''; position:absolute; left:16px; top:16px; width:110px; height:70px;
border-radius:6px; background:linear-gradient(160deg,#108474,#887fc4); }
.chips { flex:0 0 auto; display:flex; gap:10px; padding:14px 36px 8px; }
.chip { border-radius:999px; padding:7px 16px; font-size:13px; font-weight:600; background:#eff0f5; color:#7b7b7b; }
.chip.active { background:#108474; color:#fff; }
.products { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0 36px 10px; min-height:0; }
.card { border:1px solid #eeeeee; border-radius:8px; background:#fafafa; display:flex; flex-direction:column;
overflow:hidden; padding:10px; gap:8px; }
.card.tinted { background:#eff0f5; border:none; }
.imgwrap { position:relative; flex:1; min-height:0; border-radius:6px; }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.4px; padding:3px 8px; border-radius:4px; z-index:2; }
.badge.line { background:#e5e9fa; color:#4770db; }
.badge.newb { background:#108474; color:#fff; }
.p1 .imgwrap { background:linear-gradient(150deg,#e5e9fa,#4770db); }
.p2 .imgwrap { background:linear-gradient(150deg,#eeeff8,#108474); }
.p3 .imgwrap { background:linear-gradient(150deg,#f7e2b5,#887fc4); }
.cardmeta .title { font-size:16px; font-weight:600; margin:0 0 3px; }
.cardmeta .price { font-family:'Bricolage Grotesque', system-ui, sans-serif; font-size:19px; font-weight:700;
letter-spacing:-0.3px; margin:0; color:#121212; }
footer { flex:0 0 auto; background:#0e1b4d; color:#ffffff; padding:12px 36px; display:flex;
justify-content:space-between; align-items:center; font-size:11px; }
footer .flinks span { margin-left:16px; color:#d0e0fa; }
</style></head>
<body>
<div class="promo">Free shipping on orders over $75 — ends Sunday</div>
<nav>
<p class="brand">Artisul</p>
<div class="navlinks"><span>Pen Tablets</span><span>Display Tablets</span><span>Pen Mice</span><span>Accessories</span></div>
<div class="navicons"><span>Support</span><span>Cart</span></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Draw without limits</h1>
<p>Pressure-sensitive pen tablets built for illustrators, colorists, and animators.</p>
<div class="hero-btns">
<button class="btn-primary">Shop Tablets</button>
<button class="btn-secondary">Compare Models</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<div class="chips">
<span class="chip active">All</span>
<span class="chip">Pen Tablets</span>
<span class="chip">Display Tablets</span>
<span class="chip">Pen Mice</span>
</div>
<section class="products">
<div class="card p3">
<div class="imgwrap"><span class="badge newb">New</span></div>
<div class="cardmeta">
<p class="title">D22 Display Tablet</p>
<p class="price">$449.00</p>
</div>
</div>
<div class="card p1">
<div class="imgwrap"><span class="badge line">Pen Tablet</span></div>
<div class="cardmeta">
<p class="title">D10 Pen Tablet</p>
<p class="price">$79.00</p>
</div>
</div>
<div class="card tinted p2">
<div class="imgwrap"><span class="badge line">Pen Mouse</span></div>
<div class="cardmeta">
<p class="title">M06 Pen Mouse</p>
<p class="price">$59.00</p>
</div>
</div>
</section>
<footer>
<span>© Artisul</span>
<span class="flinks"><span>Support</span><span>Drivers</span><span>Warranty</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #8169ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #8169ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c1b6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6d4ff0; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8169ff; color: #000000;
border: 1px solid #6d4ff0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #8169ff; color: #f5f5f5;
border: 1px solid #947ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c1b6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7e65fd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181818; box-sizing:border-box; font-family:"Inter", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 4px 0 20px; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:2px; }
.navlinks span { font-size:12px; padding:4px 20px; }
.btn-violet { background:#8169ff; color:#fff; border:none; border-radius:4px; padding:14px 16px; font-size:12px; margin-right:20px; }
.hero { padding:36px 40px 22px; }
.hero h1 { font-family:'Gilroy', 'Helvetica Neue', sans-serif; font-size:44px; font-weight:700; line-height:1.25; margin:0 0 14px; max-width:640px; }
.hero h1 em { color:#6d4ff0; font-style:normal; }
.hero .cta { background:#8169ff; color:#fff; border:none; border-radius:4px; padding:14px 20px; font-size:12px; }
.dark { background:#1a1935; color:#fff; padding:26px 40px; display:flex; gap:20px; }
.card { flex:1; }
.card h3 { font-family:'Gilroy', sans-serif; font-size:22px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; color:rgba(255,255,255,0.75); margin:0; }
.resources { display:flex; gap:14px; padding:20px 40px; }
.res { flex:1; background:#fff; border-radius:12px; box-shadow:rgba(0,0,0,0.08) 0px 3px 12px 0px; padding:16px; }
.res .tag { display:inline-block; background:#e3deff; color:#6d4ff0; border-radius:4px; font-size:11px; padding:3px 8px; margin-bottom:8px; }
.res h4 { font-size:15px; margin:0; }
</style></head>
<body>
<nav>
<div class="brand">ProtoPie</div>
<div class="navlinks"><span>Solutions</span><span>Resources</span><span>Features</span><span>Pricing</span></div>
<button class="btn-violet">Get started for free</button>
</nav>
<div class="hero">
<h1>#1 advanced prototyping tool for <em>dynamic</em> interactions</h1>
<button class="cta">Book a Demo</button>
</div>
<div class="dark">
<div class="card"><h3>Powerful features for highest fidelity</h3><p>Sensors, hardware, and conditional logic — prototypes that respond like the real product.</p></div>
<div class="card"><h3>Built for makers</h3><p>Automotive, aviation, finance, and consumer teams design real interaction, not slideshows.</p></div>
</div>
<div class="resources">
<div class="res"><span class="tag">Learn</span><h4>ProtoPie School</h4></div>
<div class="res"><span class="tag">Belong</span><h4>Community</h4></div>
<div class="res"><span class="tag">Read</span><h4>Blog</h4></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d8bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d8bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #94c5fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d8bff; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d8bff; color: #f5f5f5;
border: 1px solid #409cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #94c5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2685fd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; gap:18px; padding:0 32px; }
.brand { font-size:19px; font-weight:700; color:#1d8bff; margin:0; }
.searchbar { flex:1; max-width:420px; background:#ffffff; border:1px solid #e6e6e6; border-radius:12px; height:40px;
display:flex; align-items:center; padding:0 14px; font-size:14px; color:#222222; gap:8px; }
.btn-primary { margin-left:auto; background:#1d8bff; color:#ffffff; border:none; border-radius:8px; height:40px; padding:0 18px; font-size:14px; font-weight:700; }
.chiprow { display:flex; gap:8px; padding:8px 32px 4px; }
.chip { width:38px; height:38px; border-radius:50%; border:1.5px solid #e6e6e6; display:flex; align-items:center; justify-content:center; font-size:16px; }
.banner { margin:10px 32px 0; background:#e3f0ff; border-radius:20px; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; }
.banner h2 { font-size:24px; font-weight:700; margin:0; color:#0b3f7a; }
.banner p { font-size:13px; color:#0b3f7a; margin:4px 0 0; }
.banner .badge { background:#f94239; color:#ffffff; border-radius:9999px; padding:4px 12px; font-size:12px; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 32px 0; }
.card { background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,0.08); }
.cover { height:120px; position:relative; }
.discount { position:absolute; top:8px; left:8px; background:#f94239; color:#ffffff; font-size:11px; font-weight:700; border-radius:9999px; padding:2px 10px; }
.cbody { padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; }
.cbody .name { font-size:14px; font-weight:700; }
.cbody .loc { font-size:12px; color:#6e6e6e; }
.rating { display:flex; align-items:center; gap:4px; font-size:12px; color:#222222; }
.rating .star { color:#ffc83b; }
.price-row { display:flex; align-items:baseline; gap:6px; margin-top:2px; }
.price-row .old { font-size:11px; color:#999999; text-decoration:line-through; }
.price-row .new { font-size:15px; font-weight:700; color:#222222; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; font-size:11px; color:#6e6e6e; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<p class="brand">Yeogiotte</p>
<div class="searchbar">🔍 Where are you headed?</div>
<button class="btn-primary">Search</button>
</nav>
<div class="chiprow">
<span class="chip">🏨</span><span class="chip">🏕️</span><span class="chip">✈️</span><span class="chip">🎟️</span><span class="chip">🚗</span>
</div>
<div class="banner">
<div><h2>Member Price Weekend</h2><p>Extra discount on same-day domestic stays</p></div>
<span class="badge">UP TO 40% OFF</span>
</div>
<div class="grid">
<div class="card">
<div class="cover" style="background:linear-gradient(160deg,#cfe6ff,#7fb8ec);"><span class="discount">-32%</span></div>
<div class="cbody"><span class="name">Sky Bay Hotel</span><span class="loc">Busan · Gwangalli</span>
<div class="rating"><span class="star">★</span>4.8 (2,140)</div>
<div class="price-row"><span class="old">₩142,000</span><span class="new">₩96,600</span></div>
</div>
</div>
<div class="card">
<div class="cover" style="background:linear-gradient(160deg,#ffe3c7,#ffb680);"><span class="discount">-20%</span></div>
<div class="cbody"><span class="name">Green Hill Pension</span><span class="loc">Gapyeong</span>
<div class="rating"><span class="star">★</span>4.6 (890)</div>
<div class="price-row"><span class="old">₩210,000</span><span class="new">₩168,000</span></div>
</div>
</div>
<div class="card">
<div class="cover" style="background:linear-gradient(160deg,#d9d3f7,#a99df0);"><span class="discount">-15%</span></div>
<div class="cbody"><span class="name">City Center Suites</span><span class="loc">Seoul · Myeongdong</span>
<div class="rating"><span class="star">★</span>4.5 (3,320)</div>
<div class="price-row"><span class="old">₩98,000</span><span class="new">₩83,300</span></div>
</div>
</div>
</div>
<footer>
<span>© Yeogiotte</span>
<span>Yeogiotte · Stay · Leisure · Flight</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a2352; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a2352; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9296ac; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #046cb8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a2352; color: #046cb8;
border: 1px solid #046cb8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a2352; color: #f5f5f5;
border: 1px solid #3d456c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9296ac; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #162f62; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a2352; box-sizing:border-box;
font-family:"Segoe UI", -apple-system, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.hero { background:#0d1230; padding:38px 40px 30px; color:#fff; position:relative; overflow:hidden; }
nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:rgba(255,255,255,0.75); }
.hero h1 { font-size:38px; font-weight:400; line-height:1.15; max-width:560px; margin:0 0 10px; }
.hero p { font-size:14px; color:rgba(255,255,255,0.65); max-width:460px; margin:0 0 18px; }
.pill-white { background:#fff; color:#1a2352; border-radius:50px; padding:11px 24px; font-size:14px; font-weight:600; }
.achieve { display:flex; gap:16px; padding:20px 40px; background:#fff; }
.a-item { flex:1; }
.a-item .eyebrow { font-size:13px; color:#046cb8; font-weight:600; margin-bottom:4px; }
.a-item .txt { font-size:15px; font-weight:600; }
.outline-pill { border:1px solid #000; border-radius:999px; color:#1a2352; font-size:11px; padding:4px 12px; margin-top:8px; display:inline-block; }
.moon { background:#402060; padding:24px 40px; display:flex; gap:16px; align-items:center; }
.m-card { flex:1; background:rgba(255,255,255,0.06); border-radius:16px; padding:16px; }
.m-card .k { color:#fff3b7; font-weight:600; font-size:15px; margin-bottom:4px; }
.m-card .v { color:rgba(255,255,255,0.7); font-size:12px; }
.stat { font-size:28px; font-weight:400; color:#fff3b7; }
</style></head>
<body>
<div class="hero">
<nav>
<p class="brand">Corca</p>
<div class="navlinks"><span>Product</span><span>About</span><span>Careers</span><span>Blog</span></div>
<button class="pill-white">Learn More</button>
</nav>
<h1>Corca is changing the world with AI technology</h1>
<p>From research to product — an AI lab proven by benchmarks.</p>
<button class="pill-white">Try it now</button>
</div>
<div class="achieve">
<div class="a-item"><div class="eyebrow">Named a 2024 Rising Unicorn!</div><div class="txt">Recognized as a next-generation AI startup</div></div>
<div class="a-item"><div class="eyebrow">Ranked #7 globally, #1 domestically!</div><div class="txt">Results announced from a global benchmark<span class="outline-pill">Read Article</span></div></div>
</div>
<div class="moon">
<div class="m-card"><div class="k">Moonlight</div><div class="v">AI Colleague for Research Papers</div><div class="stat">100,000+</div></div>
<div class="m-card"><div class="k">Papers Read</div><div class="v">Total papers processed</div><div class="stat">1.7M+</div></div>
<div class="m-card"><div class="k">Active Teams</div><div class="v">Adopted by labs and companies</div><div class="stat">150+</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5266eb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5266eb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #acb5f0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4354c8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5266eb; color: #ffffff;
border: 1px solid #4354c8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5266eb; color: #f5f5f5;
border: 1px solid #6c7ded; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #acb5f0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5063e5; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#171721; color:#ededf3; box-sizing:border-box;
font-family:"Arcadia", -apple-system, "Helvetica Neue", Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; padding:0 40px; }
.brand { font-size:15px; font-weight:600; color:#ededf3; margin:0; }
.navlinks { display:flex; gap:24px; margin-left:36px; }
.navlinks span { font-size:14px; color:#ededf3; opacity:0.8; }
.pill { margin-left:auto; background:#5266eb; color:#ffffff; border-radius:9999px; height:34px; padding:0 20px;
display:flex; align-items:center; font-size:14px; font-weight:600; }
.hero { display:flex; align-items:center; padding:20px 40px 0; gap:30px; }
.hero-text { flex:1; }
.hero h1 { font-size:44px; font-weight:400; letter-spacing:0.4px; line-height:1.08; margin:0 0 14px; max-width:420px; }
.hero p { font-size:16px; color:#c3c3cc; line-height:1.55; margin:0 0 20px; max-width:380px; }
.hero .pill { margin:0; }
.glow-wrap { flex:1; position:relative; height:260px; }
.glow { position:absolute; width:280px; height:220px; border-radius:50%;
background:radial-gradient(circle, rgba(156,180,232,0.5), rgba(205,221,255,0.05) 70%); left:20px; top:10px; filter:blur(2px); }
.float-card { position:absolute; right:0; top:30px; width:260px; background:#1e1e2a; border:1px solid #272735;
border-radius:12px; padding:20px; box-shadow:0px 8px 32px rgba(0,0,0,0.4); }
.float-card .label { font-size:12px; color:#70707d; margin-bottom:6px; }
.float-card .amt { font-size:28px; font-weight:480; color:#ededf3; margin-bottom:14px; }
.float-card .row { display:flex; justify-content:space-between; font-size:13px; color:#c3c3cc; padding:6px 0;
border-top:1px solid #272735; }
.stats { display:flex; gap:16px; padding:24px 40px 0; }
.stat { flex:1; background:#1e1e2a; border:1px solid #272735; border-radius:12px; padding:16px 18px; }
.stat .v { font-size:22px; font-weight:480; color:#ededf3; }
.stat .l { font-size:12px; color:#70707d; margin-top:4px; }
</style></head>
<body>
<nav>
<p class="brand">Mercury</p>
<div class="navlinks"><span>Banking</span><span>Treasury</span><span>Credit Card</span><span>API</span></div>
<div class="pill">Open account</div>
</nav>
<div class="hero">
<div class="hero-text">
<h1>Banking for startups</h1>
<p>The financial stack ambitious companies run on — checking, treasury, and credit, in one calm dashboard.</p>
<div class="pill">Open account</div>
</div>
<div class="glow-wrap">
<div class="glow"></div>
<div class="float-card">
<div class="label">Total balance</div>
<div class="amt">$482,910.44</div>
<div class="row"><span>Operating</span><span>$312,400</span></div>
<div class="row"><span>Treasury</span><span>$170,510</span></div>
</div>
</div>
</div>
<div class="stats">
<div class="stat"><div class="v">200,000+</div><div class="l">Startups banked</div></div>
<div class="stat"><div class="v">$0</div><div class="l">Monthly fees</div></div>
<div class="stat"><div class="v">4.5% APY</div><div class="l">On idle cash</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f06a6a; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f06a6a; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #753939; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd3ffd; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f06a6a; color: #000000;
border: 1px solid #fd3ffd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f06a6a; color: #111111;
border: 1px solid #cc5c5c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #753939; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f26382; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d0e10; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e7e7e7; }
.brand { font-size:18px; font-weight:500; letter-spacing:-0.01em; margin:0; }
.breadcrumb { color:#646f79; font-size:13px; margin-left:14px; }
.topbar .left { display:flex; align-items:center; }
.newbtn { background:#0d0d0d; color:#ffffff; border:none; border-radius:100px;
padding:0 20px; height:36px; font-size:13px; font-weight:500; }
.body { display:flex; height:584px; }
.side { width:190px; background:#fafafa; border-right:1px solid #e7e7e7; padding:20px 14px; }
.side .proj { font-size:13px; font-weight:500; color:#0d0d0d; margin:0 0 18px; padding:0 8px; }
.side .item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; color:#646f79; margin-bottom:2px; }
.side .item.on { background:#f3f3f3; color:#0d0d0d; font-weight:500; }
.dot { width:8px; height:8px; border-radius:50%; }
.d1{background:#f06a6a;} .d2{background:#222875;} .d3{background:#cbefff;} .d4{background:#466451;}
.board { flex:1; padding:20px 24px; overflow:hidden; }
.boardhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.boardhead h2 { font-size:22px; font-weight:400; margin:0; letter-spacing:-0.01em; }
.tag-pill { background:#ffeaec; color:#690031; border-radius:9999px; font-size:11px; padding:4px 12px; font-weight:400; }
.cols { display:flex; gap:16px; height:490px; }
.col { width:210px; }
.colhead { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:500;
color:#646f79; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
.colhead .count { background:#f3f3f3; color:#0d0d0d; border-radius:9999px; padding:1px 8px; font-size:11px; }
.card { background:#ffffff; border:1px solid #e7e7e7; border-radius:16px; padding:14px; margin-bottom:12px; }
.card h4 { font-size:13px; font-weight:500; margin:0 0 8px; color:#0d0e10; }
.badgerow { display:flex; gap:6px; margin-bottom:10px; }
.b-sky { background:#cbefff; color:#0d0e10; border-radius:9999px; font-size:10px; padding:2px 8px; }
.b-sage { background:#e9f1ea; color:#466451; border-radius:9999px; font-size:10px; padding:2px 8px; }
.cardfoot { display:flex; align-items:center; justify-content:space-between; }
.avatar { width:22px; height:22px; border-radius:50%; background:#222875; }
.due { font-size:11px; color:#9ca6af; }
.col.done .card { opacity:0.6; }
.accent-col { background:#f3f3f3; border-radius:16px; padding:12px; height:fit-content; }
</style></head>
<body>
<div class="topbar">
<div class="left">
<p class="brand">Asana</p>
<span class="breadcrumb">/ Growth Roadmap</span>
</div>
<button class="newbtn">+ New task</button>
</div>
<div class="body">
<div class="side">
<p class="proj">My Workspace</p>
<div class="item on"><span class="dot d1"></span>Growth Roadmap</div>
<div class="item"><span class="dot d2"></span>Design System</div>
<div class="item"><span class="dot d3"></span>Q3 Launch</div>
<div class="item"><span class="dot d4"></span>Support Backlog</div>
</div>
<div class="board">
<div class="boardhead">
<h2>Growth Roadmap</h2>
<span class="tag-pill">AI Teammate active</span>
</div>
<div class="cols">
<div class="col">
<div class="colhead">To do <span class="count">4</span></div>
<div class="card"><h4>Draft onboarding email sequence</h4>
<div class="badgerow"><span class="b-sky">Marketing</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Due Fri</span></div></div>
<div class="card"><h4>Audit signup funnel drop-off</h4>
<div class="badgerow"><span class="b-sage">Growth</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Due Mon</span></div></div>
</div>
<div class="col">
<div class="colhead">In progress <span class="count">3</span></div>
<div class="card"><h4>Ship referral program v2</h4>
<div class="badgerow"><span class="b-sky">Product</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Due Wed</span></div></div>
<div class="card"><h4>Interview 5 churned users</h4>
<div class="badgerow"><span class="b-sage">Research</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Due Thu</span></div></div>
</div>
<div class="col done">
<div class="colhead">Done <span class="count">6</span></div>
<div class="card"><h4>Set Q3 growth targets</h4>
<div class="badgerow"><span class="b-sky">Planning</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Done</span></div></div>
<div class="card"><h4>Publish pricing page test</h4>
<div class="badgerow"><span class="b-sage">Growth</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Done</span></div></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5537; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5537; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faada0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4dcbcb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5537; color: #000000;
border: 1px solid #4dcbcb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5537; color: #f5f5f5;
border: 1px solid #fd6f55; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faada0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e3684f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f5; color:#252729; box-sizing:border-box;
font-family: "Helvetica Neue", Helvetica, "PingFang TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
nav { height:50px; flex:0 0 auto; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; }
.logo { font-size:17px; font-weight:700; color:#ff5537; }
.city { font-size:15px; color:#000000; font-weight:400; }
.navright { display:flex; align-items:center; gap:10px; }
.btn-outline-teal { border:1px solid #4dcbcb; color:#4dcbcb; border-radius:4px; height:30px; padding:0 10px;
display:flex; align-items:center; font-size:12px; }
.btn-text { color:#000000; border-radius:4px; height:30px; padding:0 10px; display:flex; align-items:center; font-size:12px; }
.hero { flex:0 0 auto; background:#ffffff; padding:16px 24px; }
.hero h1 { font-size:26px; font-weight:500; line-height:1.2; margin:0 0 4px; color:#252729; }
.hero h2 { font-size:13px; font-weight:400; color:#a7a7a9; margin:0 0 12px; }
.bookbar { display:flex; align-items:center; gap:0; border:1px solid #eaeaea; border-radius:4px; overflow:hidden; }
.bparam { font-size:12px; color:#252729; padding:0 12px; height:36px; display:flex; align-items:center;
border-right:1px solid #eaeaea; white-space:nowrap; }
.bsearch { flex:1; font-size:12px; color:#a7a7a9; padding:0 12px; height:36px; display:flex; align-items:center; min-width:0; }
.bsubmit { background:#ff5537; color:#ffffff; border-radius:0; height:36px; padding:0 18px; display:flex;
align-items:center; font-size:13px; font-weight:400; white-space:nowrap; }
.content { flex:1 1 auto; padding:14px 24px; overflow:hidden; display:flex; flex-direction:column; gap:12px; min-height:0; }
.sectiontitle { font-size:15px; font-weight:700; color:#252729; margin:0 0 8px; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.tile { background:#ffffff; border-radius:4px; overflow:hidden; }
.photo { height:98px; position:relative; }
.p1 { background:linear-gradient(135deg,#ffb199,#ff5537); }
.p2 { background:linear-gradient(135deg,#8fe3e3,#4dcbcb); }
.p3 { background:linear-gradient(135deg,#ffe08a,#ffb107); }
.p4 { background:linear-gradient(135deg,#c7c9fb,#5a69eb); }
.tag { position:absolute; top:6px; left:6px; border-radius:4px; padding:2px 7px; font-size:10px; font-weight:500; color:#ffffff; }
.tag-avail { background:#ff5537; }
.tinfo { padding:8px 10px; }
.tname { font-size:12px; color:#252729; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trate { font-size:10px; color:#ffb107; margin-bottom:3px; }
.tprice { font-size:12px; font-weight:700; color:#ff5537; }
.flashband { flex:1 1 auto; background:#ffffff; border-radius:4px; padding:10px 14px; min-height:0; }
.flashrow { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.fcard { display:flex; border:1px solid #eaeaea; border-radius:4px; overflow:hidden; }
.fphoto { width:64px; flex:0 0 auto; }
.f1 { background:linear-gradient(135deg,#c7c9fb,#5a69eb); }
.f2 { background:linear-gradient(135deg,#ffe08a,#ffb107); }
.f3 { background:linear-gradient(135deg,#8fe3e3,#4dcbcb); }
.finfo { padding:7px 10px; min-width:0; }
.fname { font-size:11px; color:#252729; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ftag { display:inline-block; background:#5a69eb; color:#ffffff; border-radius:4px; padding:0 6px; font-size:10px; }
</style></head>
<body>
<div class="wrap">
<nav>
<div class="logo">FunNow</div>
<div class="city">Taipei ▾</div>
<div class="navright">
<span class="btn-outline-teal">Download App</span>
<span class="btn-text">Login / Sign Up</span>
</div>
</nav>
<div class="hero">
<h1>Explore & book your fun activities in Taipei now</h1>
<h2>Enjoy your life the way you want.</h2>
<div class="bookbar">
<div class="bparam">Category</div>
<div class="bparam">Now</div>
<div class="bparam">Date</div>
<div class="bparam">Time</div>
<div class="bparam" style="border-right:none;">Pax</div>
<div class="bsearch">Search for products or locations</div>
<div class="bsubmit">Search</div>
</div>
</div>
<div class="content">
<div>
<div class="sectiontitle">Trending Themes</div>
<div class="grid">
<div class="tile">
<div class="photo p1"><span class="tag tag-avail">Available now</span></div>
<div class="tinfo"><div class="tname">Beitou Hot Spring Hotel</div><div class="trate">★★★★★ 4.8</div><div class="tprice">$1,280</div></div>
</div>
<div class="tile">
<div class="photo p2"></div>
<div class="tinfo"><div class="tname">Riverside Massage & Spa</div><div class="trate">★★★★★ 4.6</div><div class="tprice">$980</div></div>
</div>
<div class="tile">
<div class="photo p3"><span class="tag tag-avail">Book For 20:00</span></div>
<div class="tinfo"><div class="tname">Rooftop Bar & Bistro</div><div class="trate">★★★★★ 4.7</div><div class="tprice">$650</div></div>
</div>
<div class="tile">
<div class="photo p4"></div>
<div class="tinfo"><div class="tname">Jiaoxi Hot Spring Room</div><div class="trate">★★★★★ 4.9</div><div class="tprice">$2,100</div></div>
</div>
</div>
</div>
<div class="flashband">
<div class="sectiontitle" style="margin-bottom:8px;">Flash Sales Now</div>
<div class="flashrow">
<div class="fcard"><div class="fphoto f1"></div><div class="finfo"><div class="fname">Night Market Food Tour</div><span class="ftag">20:00 Flash Sale</span></div></div>
<div class="fcard"><div class="fphoto f2"></div><div class="finfo"><div class="fname">Late-Night Karaoke Room</div><span class="ftag">22:00 Flash Sale</span></div></div>
<div class="fcard"><div class="fphoto f3"></div><div class="finfo"><div class="fname">Express Foot Massage</div><span class="ftag">21:00 Flash Sale</span></div></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1f21; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1e1f21;
border: 1px solid #1e1f21; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1e1f21;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1E1F21; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #EDEBE9; }
.brand { font-size:20px; font-weight:800; letter-spacing:-0.3px; margin:0; }
.navr { display:flex; align-items:center; gap:18px; }
.navr span { font-size:13px; color:#6D6E6F; font-weight:600; }
.avatar { width:28px; height:28px; border-radius:50%; background:#4573D2; color:#fff; font-size:11px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
main { display:flex; height:calc(640px - 64px - 30px); }
/* left: task list, the actual Asana product */
.listpane { flex:1; padding:22px 30px 0; border-right:1px solid #EDEBE9; }
.title { font-size:26px; font-weight:800; letter-spacing:-0.4px; margin:0 0 12px; }
.viewtabs { display:flex; gap:20px; border-bottom:1px solid #EDEBE9; padding-bottom:8px; margin-bottom:10px; }
.viewtabs span { font-size:13px; font-weight:600; color:#6D6E6F; padding-bottom:9px; }
.viewtabs span.active { color:#1E1F21; border-bottom:2px solid #F06A6A; }
.section { display:flex; align-items:center; gap:6px; padding:10px 0 4px; }
.section .caret { font-size:9px; color:#6D6E6F; }
.section .label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:#1E1F21; }
.section .count { font-size:11px; color:#9CA3A6; margin-left:4px; }
.row { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #EDEBE9; }
.circ { width:18px; height:18px; border-radius:50%; border:1.5px solid #9CA3A6; flex:0 0 auto; }
.circ.done { background:#62D26F; border-color:#62D26F; position:relative; }
.circ.done::after { content:'✓'; position:absolute; inset:0; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; }
.rowbody { flex:1; min-width:0; }
.rowbody .name { font-size:14px; font-weight:500; }
.rowbody .name.strike { text-decoration:line-through; color:#9CA3A6; }
.pills { display:flex; gap:6px; margin-top:5px; }
.pill { font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; }
.p-plum { color:#4573D2; background:#4573D214; }
.p-aqua { color:#4ECBC4; background:#4ECBC414; }
.p-orange { color:#F1BD6C; background:#F1BD6C1F; }
.p-overdue { color:#E8384F; background:#E8384F2E; }
.rowav { width:20px; height:20px; border-radius:50%; font-size:9px; color:#fff; font-weight:700;
display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
/* right: status update card + board sliver, showing the "same task, different rendering" idea */
.side { width:300px; padding:22px 26px 0; }
.stitle { font-size:11px; font-weight:700; color:#6D6E6F; text-transform:uppercase; letter-spacing:0.4px; margin:0 0 10px; }
.statuscard { border:1px solid #EDEBE9; border-radius:12px; padding:16px; margin-bottom:16px; }
.badge { display:inline-block; font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px;
color:#4ECBC4; background:#4ECBC42E; margin-bottom:8px; }
.statuscard h4 { margin:0 0 6px; font-size:15px; font-weight:700; }
.statuscard p { margin:0; font-size:12px; color:#6D6E6F; line-height:1.5; }
.boardcol { background:#F9F8F8; border-radius:10px; padding:10px; }
.boardcol .col-h { font-size:10px; font-weight:700; color:#6D6E6F; text-transform:uppercase; margin-bottom:8px; }
.bcard { background:#fff; border:1px solid #E8E6E4; border-radius:8px; padding:9px 10px; margin-bottom:8px; }
.bcard .t { font-size:12px; font-weight:500; margin-bottom:6px; }
.fab { position:absolute; right:32px; bottom:56px; width:52px; height:52px; border-radius:50%;
background:#F06A6A; color:#fff; font-size:22px; font-weight:300; display:flex; align-items:center; justify-content:center;
box-shadow:rgba(240,106,106,0.45) 0 8px 20px; }
footer { height:30px; border-top:1px solid #EDEBE9; padding:0 32px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#6D6E6F; }
</style></head>
<body>
<nav>
<p class="brand">Asana (iOS)</p>
<div class="navr">
<span>Home</span><span>My Tasks</span><span>Inbox</span>
<div class="avatar">MW</div>
</div>
</nav>
<main>
<div class="listpane">
<p class="title">My Tasks</p>
<div class="viewtabs">
<span class="active">List</span><span>Board</span><span>Calendar</span><span>Timeline</span><span>Files</span>
</div>
<div class="section"><span class="caret">▾</span><span class="label">Today</span><span class="count">3</span></div>
<div class="row">
<div class="circ done"></div>
<div class="rowbody">
<div class="name strike">Ship onboarding redesign</div>
<div class="pills"><span class="pill p-plum">Design System</span></div>
</div>
<div class="rowav" style="background:#4573D2">JK</div>
</div>
<div class="row">
<div class="circ"></div>
<div class="rowbody">
<div class="name">Review Q3 roadmap doc</div>
<div class="pills"><span class="pill p-aqua">Planning</span><span class="pill p-overdue">Overdue</span></div>
</div>
<div class="rowav" style="background:#F26FD3">RS</div>
</div>
<div class="row">
<div class="circ"></div>
<div class="rowbody">
<div class="name">Sync with growth on activation metrics</div>
<div class="pills"><span class="pill p-orange">Due today</span></div>
</div>
<div class="rowav" style="background:#62D26F">TL</div>
</div>
<div class="section"><span class="caret">▾</span><span class="label">Upcoming</span><span class="count">2</span></div>
<div class="row">
<div class="circ"></div>
<div class="rowbody">
<div class="name">Draft status update for stakeholders</div>
<div class="pills"><span class="pill p-plum">Comms</span></div>
</div>
<div class="rowav" style="background:#5A3FFF">MW</div>
</div>
</div>
<div class="side">
<p class="stitle">Project Status</p>
<div class="statuscard">
<span class="badge">On Track</span>
<h4>Q3 Platform Migration</h4>
<p>Core services cut over on schedule. Two follow-up tasks remain before the freeze window closes Friday.</p>
</div>
<p class="stitle">Board Preview</p>
<div class="boardcol">
<div class="col-h">In Progress</div>
<div class="bcard"><div class="t">API rate-limit rollout</div><span class="pill p-aqua">Backend</span></div>
<div class="bcard"><div class="t">Empty-state illustrations</div><span class="pill p-orange">Design</span></div>
</div>
</div>
</main>
<div class="fab">+</div>
<footer>
<span>© Asana (iOS)</span>
<span>Asana (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #50ffeb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #50ffeb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #2d7c73; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #321e37; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #50ffeb; color: #321e37;
border: 1px solid #321e37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #50ffeb; color: #111111;
border: 1px solid #46d9c8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #2d7c73; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4bdbce; color: #321e37;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f5f0; color:#321e37; box-sizing:border-box;
font-family:"Avantt", "Inter tight", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-family:"CoFo Sans Semi-Mono",monospace; font-size:14px; font-weight:550; }
.cta { background:#50ffeb; color:#321e37; border-radius:4px; padding:10px 18px;
font-family:"CoFo Sans Semi-Mono",monospace; font-size:14px; font-weight:550; }
.hero { background:#321e37; color:#fff; padding:30px 34px; text-align:center; }
.hero h1 { font-size:38px; font-weight:550; line-height:1.125; margin:0 0 12px; }
.hero p { font-size:15px; color:#d9d2dc; margin:0 0 16px; }
.band { padding:22px 34px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border:1px solid #d6d2d7; border-radius:8px; padding:18px; }
.card h3 { font-size:17px; font-weight:600; margin:0 0 6px; }
.card p { font-size:13px; color:#706273; margin:0; line-height:1.4; }
.accrow { display:flex; gap:12px; padding:0 34px 20px; }
.acc { flex:1; background:#f6efea; border-radius:8px; padding:16px; text-align:center; }
.acc h4 { font-size:14px; margin:0 0 4px; }
.acc span { font-size:11px; color:#706273; }
footer { position:absolute; bottom:0; width:960px; padding:12px 34px; display:flex; justify-content:space-between;
font-size:11.5px; color:#a3a9ba; border-top:1px solid #d6d2d7; }
</style></head>
<body>
<nav>
<p class="brand">Starling Bank</p>
<div class="navlinks"><span>Personal</span><span>Business</span><span>About</span><span>Help</span></div>
<span class="cta">Apply now</span>
</nav>
<section class="hero">
<h1>Good with money starts here.</h1>
<p>Fast technology, fair service and honest values. All at the tap of a phone.</p>
<span class="cta" style="display:inline-block;">Apply now</span>
</section>
<section class="band">
<div class="card"><h3>Spaces</h3><p>Set money aside automatically for the things that matter.</p></div>
<div class="card"><h3>Instant notifications</h3><p>Know the moment money moves — no surprises.</p></div>
<div class="card"><h3>Business banking</h3><p>Business banking. But better — built for sole traders too.</p></div>
</section>
<div class="accrow">
<div class="acc"><h4>Personal</h4><span>Everyday current account</span></div>
<div class="acc"><h4>Joint</h4><span>Do life together</span></div>
<div class="acc"><h4>Business</h4><span>Let's talk business</span></div>
<div class="acc"><h4>Under 16s</h4><span>Teach life skills</span></div>
</div>
<footer>
<span>Banking was broken — so we decided to fix it.</span>
<span>Starling Bank · Which? Recommended</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #396eff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #396eff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a0b8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #396eff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #396eff; color: #f5f5f5;
border: 1px solid #5784fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a0b8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #305cd6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d0d0e; box-sizing:border-box;
font-family:"Spoqa Han Sans Neo","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e9eaec; }
.logo { font-size:19px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:700; }
.navlinks span:nth-child(2) { color:#37383d; opacity:0.6; font-weight:400; }
.btn-primary { background:#396eff; color:#f8f8f9; border-radius:4px; padding:0 20px; height:38px; font-size:14px;
font-weight:700; display:flex; align-items:center; }
.listing { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; padding:24px 36px; }
.gallery { background:rgba(112,114,124,0.08); border-radius:4px; height:220px; position:relative; }
.gallery::before { content:''; position:absolute; inset:20px; background:linear-gradient(135deg,#d0d2da,#70727c); border-radius:4px; }
.info h1 { font-size:20px; font-weight:700; margin:0 0 6px; }
.info .meta { font-size:15px; color:#858892; margin:0 0 14px; }
.chips { display:flex; gap:8px; margin-bottom:16px; }
.chip { background:rgba(112,114,124,0.08); border:1px solid #000000; border-radius:4px; padding:8px 12px;
font-size:14px; }
.strip { background:rgba(57,110,255,0.04); border-radius:4px; padding:12px; font-size:14px; margin-bottom:16px; }
.btn-row { display:flex; gap:10px; }
.btn-blue { flex:1; background:#396eff; color:#f8f8f9; border-radius:4px; height:52px; font-size:15px;
font-weight:700; display:flex; align-items:center; justify-content:center; }
.btn-black { flex:1; background:#000000; color:#f8f8f9; border-radius:4px; height:52px; font-size:15px;
font-weight:700; display:flex; align-items:center; justify-content:center; }
.similar { padding:0 36px 24px; }
.similar h3 { font-size:18px; font-weight:700; margin:0 0 12px; letter-spacing:-0.252px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.card { background:#ffffff; border:1px solid #e9eaec; border-radius:4px; padding:10px; }
.card .thumb { height:70px; background:rgba(112,114,124,0.08); border-radius:4px; margin-bottom:8px; }
.card .p { font-size:15px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="logo">Heydealer</span>
<div class="navlinks"><span>Buy a Car</span><span>Sell My Car</span></div>
<span class="btn-primary">Reserve Now</span>
</nav>
<section class="listing">
<div class="gallery"></div>
<div class="info">
<h1>2022 Grandeur IG 2.4 Gasoline</h1>
<p class="meta">2022 model · 32,400km · No accident history</p>
<div class="chips"><span class="chip">2.4 Gasoline</span><span class="chip">No Accidents</span></div>
<div class="strip">1-year free warranty on every car · Free refund even for a simple change of mind</div>
<div class="btn-row">
<div class="btn-black">Verified Report</div>
<div class="btn-blue">Reserve Now</div>
</div>
</div>
</section>
<section class="similar">
<h3>Similar Cars</h3>
<div class="cards">
<div class="card"><div class="thumb"></div><div class="p">$16,700</div></div>
<div class="card"><div class="thumb"></div><div class="p">$15,100</div></div>
<div class="card"><div class="thumb"></div><div class="p">$17,900</div></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d1d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: 1px solid #1d1d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #111111; color: #f5f5f5;
border: 1px solid #353535; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #131313; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>IICOMBINED</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; width:960px; height:340px; overflow:hidden;
background:linear-gradient(160deg,#1d1d1d 0%,#111111 55%,#0a0a0a 100%); }
.lens { position:absolute; border-radius:50%; opacity:0.5; }
.lens.l1 { width:260px; height:260px; left:-70px; top:40px; background:#27455c; opacity:0.35; }
.lens.l2 { width:220px; height:220px; right:60px; top:-40px; background:#343434; opacity:0.55; transform:rotate(8deg); }
.lens.l3 { width:140px; height:140px; right:200px; bottom:-40px; background:#000000; opacity:0.5; }
header { position:absolute; top:0; left:0; width:100%; height:64px; z-index:3;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.wordmark { font-size:13px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; color:#ffffff; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:12px; color:#ffffff; opacity:0.88; }
.campaign { position:absolute; left:40px; bottom:36px; z-index:3; max-width:420px; }
.overlay-label { font-size:12px; font-weight:400; letter-spacing:0.12em; text-transform:uppercase;
color:#ffffff; opacity:0.85; margin:0 0 10px; }
.campaign h1 { font-family:Georgia,"Times New Roman",serif; font-size:34px; font-weight:400; line-height:1.17;
color:#ffffff; margin:0; }
.campaign-cta { display:flex; align-items:center; gap:18px; margin-top:18px; }
.btn-pill { background:transparent; border:1px solid #ffffff; color:#ffffff; border-radius:25px;
height:36px; padding:0 23px; font-size:14px; font-weight:400; box-shadow:none; white-space:nowrap; }
.link-onlight { color:#ffffff; font-size:13px; opacity:0.85; }
.products { padding:24px 40px 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tile { background:#ffffff; border-radius:0; box-shadow:none; }
.tile-art { height:118px; background:#f3f4f6; position:relative; overflow:hidden; }
.tile-art .oval { position:absolute; border-radius:50%; }
.tile-art .o1 { width:88px; height:56px; left:50%; top:50%; transform:translate(-58%,-50%); background:#27455c; opacity:0.28; }
.tile-art .o2 { width:70px; height:44px; left:50%; top:50%; transform:translate(-38%,-46%); background:#111111; opacity:0.16; }
.tile-name { font-size:11px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase; color:#111111;
margin:10px 0 0; }
.tile-meta { font-size:11px; color:#858585; margin:3px 0 0; }
.consent { position:relative; z-index:3; height:44px; background:#f3f4f6; display:flex;
align-items:center; justify-content:space-between; padding:0 40px; }
.consent p { font-size:11px; color:#555555; margin:0; }
.btn-solid { background:#111111; color:#ffffff; border:none; border-radius:8px; height:30px;
padding:0 16px; font-size:11px; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; box-shadow:none; }
</style></head>
<body>
<section class="hero">
<div class="lens l1"></div>
<div class="lens l2"></div>
<div class="lens l3"></div>
<header>
<p class="wordmark">IICOMBINED</p>
<div class="navlinks">
<span>Sunglasses</span><span>Glasses</span><span>Bestsellers</span><span>Gifts</span>
</div>
</header>
<div class="campaign">
<p class="overlay-label">New Campaign — 2027</p>
<h1>Solstice Collection</h1>
<div class="campaign-cta">
<button class="btn-pill">View Campaign</button>
<span class="link-onlight">Shop Eyewear →</span>
</div>
</div>
</section>
<section class="products">
<div class="tile">
<div class="tile-art"><span class="oval o1"></span><span class="oval o2"></span></div>
<p class="tile-name">Toffee 02</p>
<p class="tile-meta">Acetate / Grey</p>
</div>
<div class="tile">
<div class="tile-art"><span class="oval o1"></span><span class="oval o2"></span></div>
<p class="tile-name">Vert 02</p>
<p class="tile-meta">Metal / Green</p>
</div>
<div class="tile">
<div class="tile-art"><span class="oval o1"></span><span class="oval o2"></span></div>
<p class="tile-name">Arden 02</p>
<p class="tile-meta">Acetate / Black</p>
</div>
</section>
<section class="consent">
<p>© IICOMBINED — Eyewear · Fragrance · Gifts</p>
<button class="btn-solid">Accept All</button>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffbed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffbed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7a74; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fffbed; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fffbed; color: #111111;
border: 1px solid #d9d6ca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7a74; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dad7cb; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFBED; color:#1C1C1E; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #EDEAD8; }
.brand { font-size:15px; font-weight:700; margin:0; color:#1C1C1E; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:600; color:#F09A38; }
.wrap { display:flex; height:584px; }
.sidebar { width:270px; padding:20px 0 0; border-right:1px solid #EDEAD8; }
h1.title { font-size:30px; font-weight:800; letter-spacing:-0.4px; margin:0 0 14px 20px; }
.folderrow { display:flex; align-items:center; gap:10px; height:40px; padding:0 20px; }
.folder { position:relative; width:22px; height:17px; }
.folder::before { content:''; position:absolute; inset:0; background:#F5D773; border:1px solid #F09A38; border-radius:2px 4px 4px 4px; }
.folder::after { content:''; position:absolute; left:0; top:-4px; width:11px; height:5px; background:#F5D773; border:1px solid #F09A38; border-bottom:none; border-radius:2px 4px 0 0; }
.fname { font-size:14px; flex:1; }
.fcount { font-size:13px; color:#8E8E93; }
.main { flex:1; padding:18px 26px 0; }
.tags { display:flex; gap:8px; margin-bottom:14px; }
.chip { height:26px; display:flex; align-items:center; padding:0 12px; background:#FFF1DD; border-radius:16px;
font-size:12px; font-weight:500; color:#F09A38; }
.chip.sel { background:#F09A38; color:#fff; }
.pinhead { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:#8E8E93; margin:6px 0 8px; }
.pinstrip { display:flex; gap:10px; margin-bottom:16px; }
.pincard { width:150px; height:88px; background:#FAF6E3; border-radius:10px; padding:10px 12px; position:relative; }
.pintitle { font-size:13.5px; font-weight:600; margin:0 0 4px; }
.pinprev { font-size:11px; color:#8E8E93; line-height:1.35; }
.pinglyph { position:absolute; top:8px; right:10px; width:8px; height:8px; background:#F09A38; border-radius:2px; transform:rotate(45deg); }
.noterow { display:flex; flex-direction:column; justify-content:center; height:64px; padding:0 4px;
border-bottom:1px solid #EDEAD8; position:relative; }
.rowtitle { font-size:14.5px; font-weight:600; }
.rowprev { font-size:12.5px; color:#8E8E93; margin-top:2px; }
.rowdate { position:absolute; right:4px; top:10px; font-size:11px; color:#8E8E93; }
.pin11 { position:absolute; left:-2px; top:12px; width:6px; height:6px; background:#F09A38; border-radius:1px; transform:rotate(45deg); }
.fab { position:absolute; right:32px; bottom:26px; width:52px; height:52px; border-radius:50%; background:#F09A38;
box-shadow:0 4px 12px rgba(240,154,56,0.30); display:flex; align-items:center; justify-content:center; }
.fab::before { content:'+'; color:#fff; font-size:26px; font-weight:400; line-height:1; }
</style></head>
<body>
<nav>
<p class="brand">Apple Notes (iOS)</p>
<div class="navlinks"><span>Edit</span><span>⋯</span></div>
</nav>
<div class="wrap">
<aside class="sidebar">
<h1 class="title">Folders</h1>
<div class="folderrow"><span class="folder"></span><span class="fname">Notes</span><span class="fcount">12</span></div>
<div class="folderrow"><span class="folder"></span><span class="fname">Recipes</span><span class="fcount">8</span></div>
<div class="folderrow"><span class="folder"></span><span class="fname">Travel</span><span class="fcount">5</span></div>
<div class="folderrow"><span class="folder"></span><span class="fname">Work</span><span class="fcount">21</span></div>
<div class="folderrow"><span class="folder"></span><span class="fname">Ideas</span><span class="fcount">3</span></div>
</aside>
<main class="main">
<div class="tags">
<span class="chip sel">#all</span>
<span class="chip">#recipes</span>
<span class="chip">#books</span>
<span class="chip">#ideas</span>
</div>
<p class="pinhead">Pinned</p>
<div class="pinstrip">
<div class="pincard"><span class="pinglyph"></span><p class="pintitle">Grocery list</p><p class="pinprev">Milk, eggs, butter, sourdough bread, spinach</p></div>
<div class="pincard"><span class="pinglyph"></span><p class="pintitle">Trip packing</p><p class="pinprev">Passport, charger, hiking boots, sunscreen</p></div>
<div class="pincard"><span class="pinglyph"></span><p class="pintitle">Book quotes</p><p class="pinprev">"The only way out is through" — collected lines</p></div>
</div>
<div class="noterow"><span class="pin11"></span><span class="rowtitle">Meeting notes — Q3 planning</span><span class="rowprev">Budget review, hiring plan, roadmap sync for next quarter</span><span class="rowdate">Yesterday</span></div>
<div class="noterow"><span class="rowtitle">Sourdough starter log</span><span class="rowprev">Day 6 — bubbly, doubled in 4hrs, ready to bake</span><span class="rowdate">May 12</span></div>
<div class="noterow"><span class="rowtitle">Weekend hike route</span><span class="rowprev">Trailhead at 8am, 6.2mi loop, bring extra water</span><span class="rowdate">May 10</span></div>
<div class="noterow"><span class="rowtitle">Gift ideas</span><span class="rowprev">Ceramic mug set, hardcover novel, film camera</span><span class="rowdate">May 6</span></div>
</main>
</div>
<div class="fab"></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa0050; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa0050; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f787ab; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e00048; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa0050; color: #000000;
border: 1px solid #e00048; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa0050; color: #f5f5f5;
border: 1px solid #f9276a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f787ab; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f6004f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:Pretendard, "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; }
/* ---- Top tabs ---- */
.topbar { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
border-bottom:1px solid #ececef; background:#ffffff; }
.brand { font-size:19px; font-weight:800; letter-spacing:-0.3px; color:#fa0050; }
.toptabs { display:flex; gap:22px; }
.toptabs span { font-size:14px; font-weight:600; color:#999999; padding:6px 0; position:relative; }
.toptabs span.active { color:#fa0050; }
.toptabs span.active::after { content:''; position:absolute; left:0; right:0; bottom:-11px; height:2px; background:#fa0050; }
.searchicon { width:34px; height:34px; border-radius:999px; background:#f5f5f7; }
/* ---- Search field ---- */
.searchwrap { padding:14px 24px 6px; }
.searchfield { background:#f5f5f7; border-radius:12px; padding:12px 16px; font-size:14px; color:#bbbbbb; }
/* ---- Category row ---- */
.catrow { display:flex; gap:14px; padding:14px 24px 6px; }
.cattile { width:64px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.cattile .icon { width:52px; height:52px; border-radius:16px; background:#f5f5f7; position:relative; }
.cattile .icon::before { content:''; position:absolute; inset:14px; border-radius:10px; }
.cattile.c1 .icon::before { background:linear-gradient(135deg,#ffb37a,#ff7a45); }
.cattile.c2 .icon::before { background:linear-gradient(135deg,#ffd76a,#ffb300); }
.cattile.c3 .icon::before { background:linear-gradient(135deg,#8fd3a0,#3fa860); }
.cattile.c4 .icon::before { background:linear-gradient(135deg,#8fc7ff,#3f8fe0); }
.cattile.c5 .icon::before { background:linear-gradient(135deg,#f6a3c2,#e0538c); }
.cattile span.lbl { font-size:12px; font-weight:600; color:#333333; }
/* ---- Promo banner ---- */
.promo { margin:12px 24px 4px; height:64px; border-radius:16px; padding:14px 18px;
background:linear-gradient(100deg,#fff0f5,#ffe3ec); display:flex; align-items:center; justify-content:space-between; }
.promo .txt { font-size:15px; font-weight:700; color:#1a1a1a; }
.promo .sub { font-size:12px; color:#999999; margin-top:3px; font-weight:400; }
.promo .badge { background:#fa0050; color:#fff; font-size:11px; font-weight:700; border-radius:6px; padding:4px 9px; }
/* ---- Section heading ---- */
.sect { padding:16px 24px 4px; font-size:17px; font-weight:700; color:#1a1a1a; }
/* ---- Restaurant cards ---- */
.cards { display:flex; gap:14px; padding:8px 24px 0; }
.rcard { flex:1; background:#ffffff; border-radius:16px; box-shadow:0px 2px 8px rgba(0,0,0,0.06); overflow:hidden; }
.rcard .photo { height:96px; position:relative; }
.rc1 .photo { background:linear-gradient(135deg,#ffcf8a,#ff8a3d); }
.rc2 .photo { background:linear-gradient(135deg,#a7e0b8,#4fae6c); }
.rc3 .photo { background:linear-gradient(135deg,#ffc1cf,#ff6f92); }
.rcard .disc { position:absolute; top:8px; left:8px; background:#fa0050; color:#fff; font-size:10px; font-weight:700;
border-radius:6px; padding:2px 6px; }
.rcard .body { padding:10px 12px 12px; }
.rcard .name { font-size:14px; font-weight:600; color:#1a1a1a; }
.rcard .meta { display:flex; align-items:center; gap:4px; font-size:11px; color:#999999; margin-top:4px; }
.rcard .star { color:#ffb300; font-weight:700; }
.rcard .row2 { font-size:11px; color:#999999; margin-top:3px; }
/* ---- Sticky cart bar ---- */
.cartbar { position:absolute; left:0; right:0; bottom:0; height:76px; background:#ffffff;
border-top:1px solid #ececef; box-shadow:0px -2px 12px rgba(0,0,0,0.06);
display:flex; align-items:center; padding:0 24px; gap:14px; }
.cartbtn { flex:1; height:52px; border-radius:12px; background:#fa0050; color:#fff; font-size:16px; font-weight:600;
display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.cartbtn .count { background:rgba(255,255,255,0.25); border-radius:999px; width:22px; height:22px; font-size:12px;
display:flex; align-items:center; justify-content:center; font-weight:700; }
.cartbtn .total { font-variant-numeric:tabular-nums; }
.bottomnav { position:absolute; right:24px; bottom:88px; display:flex; gap:18px; }
.navicon { display:flex; flex-direction:column; align-items:center; gap:3px; }
.navicon .dot { width:20px; height:20px; border-radius:6px; background:#ececef; }
.navicon.active .dot { background:#fa0050; }
.navicon span { font-size:10px; color:#bbbbbb; }
.navicon.active span { color:#fa0050; font-weight:600; }
</style></head>
<body>
<div class="app">
<div class="topbar">
<span class="brand">Yogiyo</span>
<div class="toptabs">
<span class="active">Delivery</span>
<span>Takeout</span>
<span>Store Mart</span>
</div>
<div class="searchicon"></div>
</div>
<div class="searchwrap">
<div class="searchfield">Search food or restaurants</div>
</div>
<div class="catrow">
<div class="cattile c1"><div class="icon"></div><span class="lbl">Chicken</span></div>
<div class="cattile c2"><div class="icon"></div><span class="lbl">Pizza</span></div>
<div class="cattile c3"><div class="icon"></div><span class="lbl">Korean</span></div>
<div class="cattile c4"><div class="icon"></div><span class="lbl">Japanese</span></div>
<div class="cattile c5"><div class="icon"></div><span class="lbl">Solo Meal</span></div>
</div>
<div class="promo">
<div>
<div class="txt">Free delivery this week</div>
<div class="sub">On orders over 15,000 won near you</div>
</div>
<span class="badge">EVENT</span>
</div>
<div class="sect">Yogiyo picks for you</div>
<div class="cards">
<div class="rcard rc1">
<div class="photo"><span class="disc">20% OFF</span></div>
<div class="body">
<div class="name">Golden Fried Chicken</div>
<div class="meta"><span class="star">★ 4.8</span><span>(2,310)</span></div>
<div class="row2">25 min · Min 12,000 · Fee 2,000</div>
</div>
</div>
<div class="rcard rc2">
<div class="photo"><span class="disc">FREE DELIV.</span></div>
<div class="body">
<div class="name">Seoul Home Kitchen</div>
<div class="meta"><span class="star">★ 4.9</span><span>(1,884)</span></div>
<div class="row2">18 min · Min 10,000 · Fee 0</div>
</div>
</div>
<div class="rcard rc3">
<div class="photo"><span class="disc">COUPON</span></div>
<div class="body">
<div class="name">Solo Bibim House</div>
<div class="meta"><span class="star">★ 4.7</span><span>(956)</span></div>
<div class="row2">22 min · Min 9,000 · Fee 1,500</div>
</div>
</div>
</div>
<div class="cartbar">
<div class="cartbtn"><span>Order now</span><span class="total">28,500 won</span><span class="count">2</span></div>
</div>
<div class="bottomnav">
<div class="navicon active"><div class="dot"></div><span>Home</span></div>
<div class="navicon"><div class="dot"></div><span>Search</span></div>
<div class="navicon"><div class="dot"></div><span>Saved</span></div>
<div class="navicon"><div class="dot"></div><span>Orders</span></div>
<div class="navicon"><div class="dot"></div><span>My</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #40e2de; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #40e2de; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #266f6d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #102135; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40e2de; color: #102135;
border: 1px solid #102135; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #40e2de; color: #111111;
border: 1px solid #38c1bd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #266f6d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #38c3c3; color: #102135;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#102135; color:#d7dfe6; box-sizing:border-box;
font-family:Poppins,"NANUMSQUARE",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-weight:600; font-size:17px; color:#ffffff; }
.navlinks { display:flex; gap:22px; font-size:15px; }
.navlinks span.active { color:#40e2de; }
.lang { display:flex; gap:8px; font-size:14px; }
.lang .on { color:#ffffff; font-weight:500; } .lang .off { color:#9bacbb; }
.hero { text-align:center; padding:26px 34px 20px; }
.eyebrow { color:#40e2de; font-weight:500; font-size:15px; margin-bottom:6px; }
.hero h1 { font-size:32px; font-weight:600; color:#ffffff; margin:0 0 10px; line-height:1.36; }
.hero p { font-size:14px; color:#d7dfe6; margin:0 auto 14px; max-width:480px; line-height:1.5; }
.cta { display:inline-block; color:#40e2de; font-size:16px; font-weight:600; }
.news { background:#ffffff; margin:0 34px; padding:26px; }
.news h2 { color:#102135; font-size:20px; margin:0 0 14px; }
.cards { display:flex; gap:14px; }
.card { flex:1; border:none; padding:14px; }
.card.featured { border:2px solid #40e2de; }
.card .cat { font-size:11px; color:#40e2de; font-weight:700; }
.card h3 { font-size:15px; color:#000000; margin:8px 0 6px; line-height:1.3; }
.card p { font-size:11px; color:#707070; margin:0; }
.icon { width:40px; height:40px; border:1px solid #ffffff; border-radius:50%; margin:14px auto 0; display:flex; align-items:center;
justify-content:center; color:#ffffff; font-size:16px; }
</style></head>
<body>
<nav>
<span class="brand">VUNO</span>
<div class="navlinks"><span class="active">About</span><span>Products</span><span>News</span><span>IR</span><span>Publications</span><span>Career</span></div>
<div class="lang"><span class="on">KR</span><span class="off">EN</span></div>
</nav>
<section class="hero">
<div class="eyebrow">View the Invisible, Know the Unknown</div>
<h1>Leading the future of medical artificial intelligence</h1>
<p>Imaging, pathology, and biosignal AI that augments clinicians in their daily workflow.</p>
<span class="cta">Contact us</span>
</section>
<div class="icon">↓</div>
<section class="news">
<h2>Latest News</h2>
<div class="cards">
<div class="card featured"><span class="cat">CLINICAL</span><h3>Chest X-ray abnormality detection cleared for hospital deployment</h3><p>Regulatory approval expands coverage across partner networks.</p></div>
<div class="card"><span class="cat">RESEARCH</span><h3>Cardiac-arrest risk model reduces false alerts by 21%</h3><p>New study published on ICU deployment outcomes.</p></div>
<div class="card"><span class="cat">IR</span><h3>Quarterly results show continued platform growth</h3><p>Expansion into pathology and biosignal product lines.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eae8e4; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eae8e4; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #565656; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #00abc8; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #eae8e4; color: #744f28;
border: 1px solid #00abc8; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #b4b2b0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #565656; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #f5f5f5; color: #2a472b;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#eae8e4; color:#504545; box-sizing:border-box; font-family:'Cabin','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.promo { height:28px; background:#2a472b; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; }
nav { height:56px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #dedede; }
.brand { font-family:'Petrona',Georgia,serif; font-size:20px; font-weight:700; color:#2a472b; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; color:#504545; }
.search-pill { background:#f5f5f5; border-radius:999px; padding:8px 18px; font-size:12px; border:1px solid #dadada; color:#565656; }
.main { display:flex; gap:20px; padding:20px 32px; height:440px; }
.gallery { width:400px; background:#fff; border:1px solid #dadada; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.seed-pack { width:150px; height:220px; background:linear-gradient(180deg,#77b11e,#00abc8); border-radius:8px; position:relative; }
.seed-pack::before { content:''; position:absolute; top:16px; left:16px; right:16px; height:80px; background:rgba(255,255,255,0.9); border-radius:4px; }
.badge-new { position:absolute; top:16px; left:16px; background:#00abc8; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:3px 8px; border-radius:4px; }
.cat-badge { position:absolute; bottom:16px; right:16px; background:#f5f5f5; border:1px solid #dadada; color:#2a472b; font-size:10px; font-weight:700; text-transform:uppercase; padding:4px 12px; border-radius:999px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-family:'Petrona',Georgia,serif; font-size:26px; font-weight:600; margin:0; color:#2a472b; }
.price { font-size:20px; font-weight:600; color:#744f28; }
.desc { font-size:13px; line-height:1.6; color:#504545; max-width:440px; }
.grow-guide { background:#2a472b; color:#fff; border-radius:12px; padding:14px 18px; border-left:4px solid #00abc8; }
.grow-guide h4 { font-family:'Petrona',Georgia,serif; font-size:15px; margin:0 0 6px; font-weight:600; }
.grow-stats { display:flex; gap:18px; font-family:'Anonymous Pro','Courier New',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; }
.grow-stats b { display:block; font-size:16px; color:#00abbc; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#00abc8; color:#fff; border:none; border-radius:12px; font-weight:700; font-size:15px; letter-spacing:0.5px; }
.btn-secondary { flex:1; height:48px; background:#eae8e4; color:#744f28; border:2px solid #744f28; border-radius:12px; font-weight:700; font-size:15px; }
.trust-strip { display:flex; gap:24px; padding:12px 32px; border-top:1px solid #dadada; border-bottom:1px solid #dadada; font-size:11px; color:#504545; }
.trust-strip span::before { content:'✓ '; color:#5d8b16; font-weight:700; }
</style></head>
<body>
<div class="promo">Free shipping on orders $50+ · Garden season is here 🌱</div>
<nav>
<p class="brand">Back TO The Roots</p>
<div class="navlinks"><span>Grow Kits</span><span>Seeds</span><span>Soil</span><span>Mushroom</span></div>
<div class="search-pill">🔍 Search varieties</div>
</nav>
<div class="main">
<div class="gallery">
<div class="badge-new">New</div>
<div class="seed-pack"></div>
<div class="cat-badge">Grow Kits</div>
</div>
<div class="info">
<h1>Windowsill Herb Grow Kit</h1>
<span class="price">$24.99</span>
<p class="desc">Everything you need to grow basil, cilantro, and parsley from seed — organic soil pucks, a bamboo tray, and a step-by-step grow guide. Great for classrooms and first-time growers.</p>
<div class="grow-guide">
<h4>Grow Guide</h4>
<div class="grow-stats">
<div><b>5-7</b>Days to Sprout</div>
<div><b>60</b>Days to Harvest</div>
<div><b>USDA</b>Organic Certified</div>
</div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Grow Guide</button>
</div>
</div>
</div>
<div class="trust-strip">
<span>USDA Organic</span>
<span>Non-GMO Project</span>
<span>B-Corp Certified</span>
<span>Certified Regenerative</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #a0522d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #a0522d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #cfac9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4623a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a0522d; color: #ffffff;
border: 1px solid #f4623a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #a0522d; color: #f5f5f5;
border: 1px solid #ae6c4d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #cfac9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ad552f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#14100D; color:#EFE6DA; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.screen { width:960px; height:640px; display:flex; flex-direction:column; align-items:center;
padding:20px 0 22px; }
.batch { text-align:center; margin-bottom:16px; }
.batch .t { font-size:19px; font-weight:700; }
.batch .s { font-size:12px; color:#B7A48E; margin-top:2px; }
.stage { flex:1; display:flex; align-items:center; gap:60px; }
.card { width:280px; height:400px; border-radius:24px; overflow:hidden; position:relative;
background:linear-gradient(160deg,#8A5A3A 0%,#5C3D26 55%,#3A2717 100%);
box-shadow:0 16px 40px -16px rgba(0,0,0,0.7); }
.card::after { content:''; position:absolute; left:0; right:0; bottom:0; height:55%;
background:linear-gradient(to bottom, rgba(20,16,13,0), rgba(20,16,13,0.95)); }
.badge { position:absolute; top:14px; left:14px; background:rgba(20,16,13,0.55); backdrop-filter:blur(2px);
color:#F3E4CF; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; z-index:2; }
.cardinfo { position:absolute; left:20px; right:20px; bottom:18px; z-index:2; }
.namerow { font-size:24px; font-weight:700; color:#fff; }
.namerow .age { font-weight:500; }
.meta { font-size:13px; color:#F3E4CF; margin:4px 0 10px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { font-size:11.5px; font-weight:600; color:#F3E4CF; background:rgba(243,228,207,0.18);
border:1px solid rgba(243,228,207,0.28); padding:4px 11px; border-radius:999px; }
.actions { display:flex; flex-direction:column; align-items:center; gap:26px; }
.act { border-radius:50%; display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 20px -8px rgba(0,0,0,0.6); }
.pass { width:56px; height:56px; background:#2A2017; border:1.5px solid #33281D; color:#B7A48E; font-size:20px; }
.like { width:72px; height:72px; background:#F4623A; color:#fff; font-size:30px; }
.sendb { width:52px; height:52px; background:#A0522D; color:#F3E4CF; font-size:18px; }
.brand { position:absolute; top:20px; right:26px; font-size:13px; font-weight:700; color:#F4623A; }
</style></head>
<body>
<div class="screen">
<div class="brand">Coffee Meets Bagel (iOS)</div>
<div class="batch"><div class="t">Today's Bagels</div><div class="s">6 fresh picks · expires in 23h</div></div>
<div class="stage">
<div class="card">
<div class="badge">🕐 Active today</div>
<div class="cardinfo">
<div class="namerow">Maya<span class="age">, 28</span></div>
<div class="meta">Designer · 2 mi away · ☕ Latte person</div>
<div class="chips"><span class="chip">🥾 Hiking</span><span class="chip">📚 Book club</span><span class="chip">🎹 Piano</span></div>
</div>
</div>
<div class="actions">
<div class="act pass">✕</div>
<div class="act like">♥</div>
<div class="act sendb">★</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2dd4bf; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2dd4bf; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #1e695f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbbf24; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2dd4bf; color: #000000;
border: 1px solid #fbbf24; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2dd4bf; color: #111111;
border: 1px solid #29b5a3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #1e695f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4ed1a6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#374151; box-sizing:border-box;
font-family:Montserrat, -apple-system, sans-serif; }
* { box-sizing:border-box; }
.glow { position:absolute; width:400px; height:400px; border-radius:50%; background:#fffbeb;
top:-140px; left:280px; z-index:0; }
nav { position:relative; z-index:2; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:19px; font-weight:800; color:#000; }
.apps { display:flex; gap:22px; font-size:14px; color:#111827; }
.hero { position:relative; z-index:2; text-align:center; padding:6px 30px 24px; }
.hero h1 { font-size:40px; font-weight:700; letter-spacing:-0.9px; margin:0 0 12px; color:#000; }
.hero p { font-size:15px; color:#4b5563; margin:0 0 18px; }
.pill { display:inline-block; background:linear-gradient(to right,#fbbf24,#a3e635,#2dd4bf); color:#fff;
border-radius:9999px; padding:12px 26px; font-size:15px; font-weight:600; }
.approw { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:8px 34px 0; }
.appcard { border-radius:12px; padding:16px; text-align:center; }
.appcard .ic { width:52px; height:52px; margin:0 auto 8px; border-radius:16px; }
.appcard h4 { font-size:13px; font-weight:700; margin:0; color:#111827; }
.a1 .ic { background:linear-gradient(135deg,#215468,#a5f3fc); }
.a2 .ic { background:linear-gradient(135deg,#55b67c,#d1f5db); }
.a3 .ic { background:linear-gradient(135deg,#fbbf24,#fde68a); }
.a4 .ic { background:linear-gradient(135deg,#a3e635,#ecfccb); }
.band { position:relative; z-index:2; background:#f3f4f6; margin-top:22px; padding:22px 34px; display:flex; gap:16px; }
.panel { background:#ffffff; border-radius:20px; padding:20px; flex:1; }
.panel h3 { font-size:19px; font-weight:800; letter-spacing:-0.6px; margin:0 0 8px; }
.panel p { font-size:13px; color:#4b5563; margin:0; }
.darkpanel { background:#1f2937; color:#fff; border-radius:24px; padding:20px; flex:0 0 220px; }
.darkpanel h4 { font-size:15px; margin:0 0 6px; }
</style></head>
<body>
<div class="glow"></div>
<nav>
<p class="brand">Fourdesire</p>
<div class="apps"><span>Plant Nanny</span><span>Fortune City</span><span>Walkr</span><span>Book Morning!</span></div>
</nav>
<section class="hero">
<h1>Spark the fun in the ordinary.</h1>
<p>SPARKFUL's apps help you take care of your health and wellness without forgetting the fun.</p>
<span class="pill">Explore SPARKFUL Apps</span>
</section>
<div class="approw">
<div class="appcard a1"><div class="ic"></div><h4>Walkr</h4></div>
<div class="appcard a2"><div class="ic"></div><h4>Plant Nanny</h4></div>
<div class="appcard a3"><div class="ic"></div><h4>Fortune City</h4></div>
<div class="appcard a4"><div class="ic"></div><h4>To-Do Adventure</h4></div>
</div>
<div class="band">
<div class="panel"><h3>The Most Playful Form of Self-Care</h3><p>Change begins with fun — every habit becomes a tiny adventure.</p></div>
<div class="darkpanel"><h4>Explore the Boundless Universe</h4><p style="font-size:12px;color:#a5f3fc;">Walkr — walk your way across the galaxy.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0070d1; color: #0064b7;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0070d1; color: #0064b7;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.25; letter-spacing: 0.1px; margin: 0; color: #0064b7; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.45px; background: #0070d1; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.45px; background: transparent; color: #000000;
border: 1px solid #0070d1; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.1px; background: #ffffff; color: #000000;
border: 1px solid #006dca; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; background: #0070d1; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight:300; }
* { box-sizing:border-box; }
/* 3표면 교차: 블랙 → 블루 → 화이트 챕터가 위에서 아래로 흐른다.
타이포는 시그니처 weight 300(라이트)만 쓰고, PS 블루 필 CTA 하나가 유일한 색이다. */
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; margin:0; letter-spacing:0.02em; }
.navlinks { display:flex; gap:22px; font-size:12px; color:rgba(255,255,255,0.7); font-weight:400; }
.btn-blue { background:#0070d1; color:#fff; border:none; border-radius:999px; padding:9px 22px; font-weight:400; font-size:13px; }
.sec-black { height:180px; display:flex; align-items:center; padding:0 40px; position:relative; overflow:hidden; }
.sec-black::after { content:''; position:absolute; right:-60px; top:-40px; width:280px; height:280px; border-radius:50%;
background:radial-gradient(circle,rgba(0,112,209,0.35),transparent 65%); }
.sec-black h1 { font-size:38px; font-weight:300; letter-spacing:-0.1px; margin:0; max-width:460px; line-height:1.25; position:relative; z-index:2; }
.sec-black .console { position:absolute; right:50px; width:130px; height:130px; border-radius:8px;
background:linear-gradient(160deg,#2a2b30,#000); border:1px solid #333; }
.sec-blue { height:150px; background:#0070d1; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.sec-blue .badge { background:linear-gradient(90deg,#ffce21,#f5a623,#ee8e00); color:#121314; font-weight:700;
font-size:11px; padding:5px 12px; border-radius:4px; text-transform:uppercase; letter-spacing:0.04em; }
.sec-blue h2 { font-size:26px; font-weight:300; margin:8px 0 0; }
.sec-blue p { font-size:12px; color:rgba(255,255,255,0.85); margin:4px 0 0; font-weight:400; }
.sec-blue .render { width:100px; height:100px; border-radius:8px; background:rgba(255,255,255,0.15); }
.sec-white { background:#ffffff; color:#000; flex:1; display:flex; gap:14px; padding:22px 40px; }
.card { flex:1; background:#f5f7fa; border-radius:8px; padding:16px; }
.card h4 { font-size:15px; font-weight:400; margin:0 0 6px; }
.card p { font-size:11px; color:rgba(0,0,0,0.6); margin:0; font-weight:400; }
.card .dot { width:8px; height:8px; border-radius:50%; background:#0070d1; margin-bottom:8px; }
</style></head>
<body>
<nav>
<p class="brand">PlayStation</p>
<div class="navlinks"><span>PS5</span><span>Games</span><span>PS Plus</span><span>Store</span></div>
<button class="btn-blue">Shop now</button>
</nav>
<div class="sec-black">
<div class="console"></div>
<h1>Play Has No Limits</h1>
</div>
<div class="sec-blue">
<div>
<span class="badge">PS Plus</span>
<h2>More games. More perks.</h2>
<p>Essential, Extra, and Premium — pick your tier.</p>
</div>
<div class="render"></div>
</div>
<div class="sec-white">
<div class="card"><span class="dot"></span><h4>Console</h4><p>PS5 Pro — 8K-ready, ray tracing built in.</p></div>
<div class="card"><span class="dot"></span><h4>Accessories</h4><p>DualSense wireless controller, redefined.</p></div>
<div class="card"><span class="dot"></span><h4>News</h4><p>Latest updates from PlayStation Blog.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #155dfc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #155dfc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #90b1f8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0970ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #155dfc; color: #ffffff;
border: 1px solid #0970ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #155dfc; color: #f5f5f5;
border: 1px solid #3975fb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #90b1f8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1360fc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0c; color:#fafafa; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { display:flex; justify-content:space-between; align-items:center; padding:18px 32px; }
.navlinks { display:flex; gap:18px; font-size:14px; }
.navlinks span.act { background:rgba(255,255,255,0.08); border-radius:10px; padding:8px 12px; }
.ghost { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); color:#fafafa;
border-radius:8px; height:36px; padding:0 20px; font-size:14px; font-weight:500; }
.hero { padding:8px 32px 20px; }
.hero h1 { font-size:44px; font-weight:600; letter-spacing:-0.8px; margin:0 0 10px; max-width:640px;
background:linear-gradient(90deg,#ffffff,#8fb0ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.heroctas { display:flex; gap:12px; }
.primary { background:#155dfc; color:#fafafa; border:none; border-radius:8px; height:44px; padding:0 20px; font-size:15px; font-weight:500;
box-shadow:rgba(21,93,252,0.15) 0px 0px 0px 4px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 32px 0; }
.dcard { background:#18181b; border-radius:16px; padding:18px; }
.dcard .lbl { font-size:14px; font-weight:700; color:#98989f; margin-bottom:8px; }
.dcard .val { font-size:32px; font-weight:700; color:#fafafa; }
.dcard .mint { color:#7eedb8; font-size:12px; font-weight:700; margin-top:6px; }
.chartcard { margin:14px 32px 0; background:#18181b; border-radius:16px; padding:18px; height:180px; position:relative; }
.chartcard .lbl { font-size:14px; font-weight:700; color:#98989f; margin-bottom:12px; }
.bars { display:flex; align-items:flex-end; gap:10px; height:110px; }
.bar { flex:1; background:linear-gradient(180deg,#155dfc,#0970ff); border-radius:4px 4px 0 0; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; font-size:11px; color:#98989f;
border-top:1px solid rgba(255,255,255,0.08); }
</style></head>
<body>
<nav>
<span style="font-weight:700; font-size:16px;">Airbridge</span>
<div class="navlinks"><span class="act">Features</span><span>Solutions</span><span>Insights</span><span>Pricing</span></div>
<button class="ghost">Request a Demo</button>
</nav>
<div class="hero">
<h1>Complete your ad performance measurement with AI.</h1>
<div class="heroctas">
<button class="primary">Request a Demo</button>
<button class="ghost">View Pricing</button>
</div>
</div>
<div class="cards">
<div class="dcard"><div class="lbl">TOTAL EVENTS</div><div class="val">1.2B+</div><div class="mint">▲ 12.4% this week</div></div>
<div class="dcard"><div class="lbl">DEVICES TRACKED</div><div class="val">108M</div><div class="mint">▲ 4.1% this week</div></div>
<div class="dcard"><div class="lbl">RPM (LIVE)</div><div class="val">1.03M</div><div class="mint">▲ real-time</div></div>
</div>
<div class="chartcard">
<div class="lbl">Attribution by channel</div>
<div class="bars">
<div class="bar" style="height:60%"></div>
<div class="bar" style="height:85%"></div>
<div class="bar" style="height:40%"></div>
<div class="bar" style="height:95%"></div>
<div class="bar" style="height:55%"></div>
<div class="bar" style="height:70%"></div>
</div>
</div>
<footer>Make decisions on data, not gut feeling · Airbridge</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #10a37f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #10a37f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8ed0c0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a7f64; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #10a37f; color: #000000;
border: 1px solid #1a7f64; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #10a37f; color: #f5f5f5;
border: 1px solid #35b092; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8ed0c0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #129d7b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d0d0d; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; width:960px; height:640px; }
/* Sidebar — dark-mode-native surface, as canonical to OpenAI as the light page */
.side { width:260px; height:640px; background:#171717; color:#ececec; flex-shrink:0;
display:flex; flex-direction:column; padding:16px 12px; gap:4px; }
.side .new { background:transparent; border:1px solid #3e3e42; color:#ececec; border-radius:12px;
padding:10px 14px; font-size:14px; font-weight:500; text-align:left; margin-bottom:14px; }
.side .item { padding:9px 12px; border-radius:8px; font-size:13px; color:#b4b4b4; }
.side .item.active { background:#2f2f2f; color:#ececec; }
.side .label { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:#6e6e80;
padding:14px 12px 6px; }
.side .foot { margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 12px;
border-top:1px solid #3e3e42; }
.avatar { width:26px; height:26px; border-radius:9999px; background:#10a37f; flex-shrink:0; }
.side .foot span { font-size:13px; color:#ececec; }
/* Main column */
.main { flex:1; display:flex; flex-direction:column; height:640px; background:#ffffff; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e5e5e5; flex-shrink:0; }
.modelpick { display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600; }
.modelpick .badge { background:#ececec; color:#40414f; font-size:12px; font-weight:500;
padding:2px 8px; border-radius:6px; }
.navbtn { border:1px solid #d1d1d1; background:#ffffff; color:#0d0d0d; border-radius:9999px;
padding:8px 16px; font-size:13px; font-weight:500; }
.thread { flex:1; padding:36px 0 12px; overflow:hidden; display:flex; flex-direction:column;
align-items:center; }
.measure { width:100%; max-width:560px; padding:0 8px; }
.turn-user { display:flex; justify-content:flex-end; margin-bottom:22px; }
.bubble { background:#f7f7f8; color:#0d0d0d; border-radius:18px; padding:10px 16px;
font-size:15px; line-height:1.6; max-width:78%; }
.turn-ai { margin-bottom:8px; }
.ai-text { font-size:15px; line-height:1.6; color:#0d0d0d; }
.ai-text p { margin:0 0 12px; }
.ai-text .cursor { display:inline-block; width:8px; height:16px; background:#0d0d0d;
vertical-align:text-bottom; opacity:0.85; border-radius:1px; }
.composer-wrap { padding:0 0 22px; display:flex; justify-content:center; flex-shrink:0; }
.composer { width:100%; max-width:560px; background:#ffffff; border:1px solid #d1d1d1;
border-radius:26px; padding:14px 18px; font-size:15px; color:#9b9b9b;
display:flex; align-items:center; justify-content:space-between;
box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.composer .send { width:30px; height:30px; border-radius:9999px; background:#0d0d0d;
flex-shrink:0; }
.hint { text-align:center; font-size:11px; color:#b4b4b4; margin-top:10px; }
</style></head>
<body>
<div class="shell">
<aside class="side">
<button class="new">＋ New chat</button>
<div class="label">Today</div>
<div class="item active">Quarterly roadmap outline</div>
<div class="item">Rewrite onboarding email</div>
<div class="label">Previous 7 days</div>
<div class="item">API rate limit question</div>
<div class="item">Summarize research paper</div>
<div class="item">Trip planning — Kyoto</div>
<div class="foot"><div class="avatar"></div><span>Alex Kim</span></div>
</aside>
<div class="main">
<nav>
<div class="modelpick">OpenAI <span class="badge">Plus</span></div>
<button class="navbtn">Share</button>
</nav>
<div class="thread">
<div class="measure">
<div class="turn-user"><div class="bubble">Can you draft a short outline for our Q3 roadmap update, keeping it to three themes?</div></div>
<div class="turn-ai">
<div class="ai-text">
<p>Here's a three-theme structure you can adapt:</p>
<p>1. Reliability — infrastructure work that reduces latency and error rate.<br>
2. Developer experience — SDK updates, clearer docs, faster support turnaround.<br>
3. New capabilities — the two features closest to shipping this quarter.</p>
<p>Want me to expand any of these into talking points<span class="cursor"></span></p>
</div>
</div>
</div>
</div>
<div class="composer-wrap">
<div>
<div class="composer"><span>Message OpenAI</span><div class="send"></div></div>
<div class="hint">OpenAI can make mistakes. Check important info.</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #17b6c9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #17b6c9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #91d9e1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2be0ec; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17b6c9; color: #000000;
border: 1px solid #2be0ec; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #17b6c9; color: #000000;
border: 1px solid #3bc0d0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #91d9e1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1abdcf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfdfd; color:#1b2028; box-sizing:border-box;
font-family:"Noto Sans TC", "Montserrat", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; color:#17b6c9; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#364053; font-weight:500; }
.btn-sec { border:2px solid #17b6c9; color:#17b6c9; border-radius:9999px; padding:8px 18px; font-size:13px; font-weight:500; }
.hero { position:relative; padding:24px 32px 26px; text-align:center; overflow:hidden; }
.blob { position:absolute; border-radius:50%; opacity:0.5; }
.blob1 { width:200px; height:200px; background:radial-gradient(circle,#64cedb,transparent 70%); top:-60px; left:-40px; }
.blob2 { width:220px; height:220px; background:radial-gradient(circle,#dafa5f,transparent 70%); bottom:-90px; right:-50px; }
.hero-in { position:relative; z-index:1; }
.hero h1 { font-size:38px; font-weight:700; letter-spacing:-1px; margin:0 0 12px; color:#2a3342; }
.hero p { font-size:15px; color:#727d8c; margin:0 0 20px; }
.btn-xl { display:inline-block; border-radius:9999px; background:radial-gradient(circle at 30% 30%,#64cedb,#15a6b7); color:#fdfdfd; padding:14px 40px; font-size:18px; font-weight:500;
box-shadow:0px 10px 24px rgba(23,182,201,0.3); }
.cards { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:8px 32px 24px; }
.card { background:#fdfdfd; border-radius:16px; padding:18px;
box-shadow:0px 10px 34px rgba(102,102,102,0.12), inset -2px -2px 8px rgba(84,92,101,0.08); }
.titlebar { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.titlebar .bar { width:4px; height:20px; background:#17b6c9; border-radius:2px; }
.card h3 { font-size:16px; font-weight:500; margin:0; color:#2a3342; }
.card p { font-size:12px; color:#727d8c; margin:8px 0 0; line-height:1.6; }
.card .tag { display:inline-block; margin-top:10px; background:#ecf9fa; color:#17b6c9; border-radius:9999px; padding:3px 12px; font-size:11px; }
.promo { margin:0 32px; background:#f3f5f6; border-radius:16px; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; }
.promo h4 { font-size:16px; font-weight:500; margin:0; color:#2a3342; }
.promo .amt { color:#17b6c9; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; color:#b6bec7; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Richart</span>
<div class="navlinks"><span>Deposits</span><span>Credit Cards</span><span>Investing</span><span>Loans</span></div>
<span class="btn-sec">Open an Account</span>
</nav>
<section class="hero">
<span class="blob blob1"></span><span class="blob blob2"></span>
<div class="hero-in">
<h1>The Bank That Helps Young People Save</h1>
<p>Open an account in minutes and manage every purchase and saving with ease</p>
<span class="btn-xl">Open an Account</span>
</div>
</section>
<div class="cards">
<div class="card"><div class="titlebar"><span class="bar"></span><h3>Digital Savings Account</h3></div><p>Free interbank transfers, so your money moves freely.</p><span class="tag">New Customer Offer</span></div>
<div class="card"><div class="titlebar"><span class="bar"></span><h3>Richart Cashback Card</h3></div><p>Up to 5% cashback on daily spending, zero foreign transaction fees abroad.</p><span class="tag">Most Popular</span></div>
<div class="card"><div class="titlebar"><span class="bar"></span><h3>Smart Robo-Advisor</h3></div><p>Start investing from NT$1,000, let AI manage your portfolio.</p><span class="tag">Beginner Friendly</span></div>
</div>
<div class="promo">
<h4>New customer bonus — get up to <span class="amt">NT$1,500</span> cashback</h4>
<span class="btn-sec">Learn About the Offer</span>
</div>
<footer>
<span>© Richart · Taishin International Bank</span>
<span>Deposits · Credit Cards · Wealth Management · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #282828;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #282828;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #282828; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #fdbc00; color: #282828;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #282828;
border: 1px solid #fdbc00; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #282828;
border: 1px solid #c9c9c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #dd2c00; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#282828; box-sizing:border-box;
font-family:'DM Sans','Inter',-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #ececec; }
.brand { font-size:17px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:0; font-size:14px; font-weight:500; color:#696969; }
.navlinks span { padding:0 14px; height:64px; display:flex; align-items:center; }
.navlinks span.active { color:#282828; border-bottom:2px solid #fdbc00; }
.search { background:#f5f5f5; border-radius:999px; padding:8px 16px; font-size:13px; color:#696969; width:220px; }
.hero { background:#f5f5f5; padding:26px 36px; display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:26px; font-weight:600; margin:0 0 6px; line-height:1.25; }
.hero p { font-size:13px; color:#464646; margin:0; }
.btn { display:inline-block; background:#fdbc00; color:#282828; font-size:14px; font-weight:600; padding:11px 24px; border-radius:8px; margin-top:12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:18px 36px; }
.card { background:#fff; border:1px solid #ececec; border-radius:12px; overflow:hidden; position:relative; }
.card-img { height:96px; background:linear-gradient(135deg,#fdbc00,#ffe38a); position:relative; }
.card-img::after { content:''; position:absolute; left:50%; top:50%; width:34px; height:34px; border-radius:50%; background:#282828; transform:translate(-50%,-50%); }
.badge { position:absolute; top:8px; left:8px; font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.badge.sale { background:#dd2c00; color:#fff; }
.badge.new { background:#00aeef; color:#fff; }
.cbody { padding:10px 12px; }
.cbody h3 { font-size:13px; font-weight:500; margin:0 0 4px; }
.stars { color:#fdbc00; font-size:11px; }
.price { font-size:14px; font-weight:600; margin-top:4px; }
.price .old { font-size:11px; color:#888888; text-decoration:line-through; font-weight:400; margin-left:4px; }
footer { position:absolute; bottom:0; left:0; right:0; height:48px; background:#282828; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Baseus</p>
<div class="navlinks"><span class="active">Charging</span><span>Audio</span><span>Car</span><span>Smart Home</span></div>
<div class="search">Search products...</div>
</nav>
<section class="hero">
<div>
<h1>Power That Keeps Up With You</h1>
<p>GaN chargers, fast cables, and smart accessories engineered for everyday carry.</p>
<span class="btn">Shop Chargers</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge sale">Sale</span></div>
<div class="cbody">
<h3>65W GaN5 Pro Charger</h3>
<div class="stars">★★★★★ 4.8</div>
<div class="price">$39.99<span class="old">$49.99</span></div>
</div>
</div>
<div class="card">
<div class="card-img"><span class="badge new">New</span></div>
<div class="cbody">
<h3>Blade2 USB-C Cable 100W</h3>
<div class="stars">★★★★★ 4.9</div>
<div class="price">$16.99</div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody">
<h3>MagPro Wireless Stand</h3>
<div class="stars">★★★★☆ 4.6</div>
<div class="price">$44.99</div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody">
<h3>10000mAh Power Bank</h3>
<div class="stars">★★★★★ 4.7</div>
<div class="price">$32.99</div>
</div>
</div>
</div>
<footer>
<span>© Baseus</span>
<span>Baseus · Support · Warranty · Where to Buy</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d54300; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d54300; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e7a587; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d54300; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d54300; color: #f5f5f5;
border: 1px solid #da5f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e7a587; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc6129; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gangnam Unni</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#131517; box-sizing:border-box; font-family: "PretendardVariable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; border-bottom:1px solid #eff2f5; }
.logo { font-size:19px; font-weight:700; color:#131517; }
.search-pill { flex:1; max-width:340px; margin:0 24px; height:36px; background:#eff2f5; border-radius:9999px; display:flex; align-items:center; padding:0 16px; font-size:13px; color:#697683; }
.outline-cta { color:#131517; border:1px solid #b5bfc9; border-radius:6px; padding:8px 12px; font-size:13px; font-weight:600; background:#ffffff; white-space:nowrap; }
.chipbar { display:flex; gap:8px; padding:14px 26px 12px; }
.chip { height:32px; border-radius:9999px; padding:0 14px; font-size:14px; font-weight:500; display:flex; align-items:center; background:#eff2f5; color:#131517; }
.chip.selected { background:#131517; color:#ffffff; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; padding:0 26px 18px; }
.card { background:#ffffff; border-radius:20px; border:1px solid #eff2f5; overflow:hidden; display:flex; flex-direction:column; }
.thumb { height:96px; background:linear-gradient(135deg,#eff2f5 0%, #d9e0e6 100%); position:relative; }
.thumb .badge { position:absolute; top:8px; left:8px; background:#ffffff; border:1px solid #b5bfc9; border-radius:9999px; padding:2px 9px; font-size:11px; font-weight:600; color:#131517; }
.card-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; }
.clinic-name { font-size:16px; font-weight:700; line-height:1.35; color:#131517; }
.meta-row { display:flex; align-items:center; gap:6px; font-size:12px; color:#697683; }
.stars { color:#131517; font-size:12px; letter-spacing:1px; }
.tagrow { display:flex; gap:6px; flex-wrap:wrap; }
.tag { background:#eff2f5; color:#697683; border-radius:6px; padding:2px 8px; font-size:11px; font-weight:500; }
.price { font-size:14px; font-weight:700; color:#131517; margin-top:2px; }
.price-note { font-size:11px; font-weight:400; color:#697683; }
.card-cta { margin-top:8px; align-self:flex-start; }
</style>
</head>
<body>
<div class="header">
<div class="logo">Gangnam Unni</div>
<div class="search-pill">Search a procedure or clinic…</div>
<div class="outline-cta">Book consultation</div>
</div>
<div class="chipbar">
<div class="chip selected">All procedures</div>
<div class="chip">Eyes</div>
<div class="chip">Nose</div>
<div class="chip">Skin</div>
<div class="chip">Body contour</div>
<div class="chip">Dental</div>
</div>
<div class="grid">
<div class="card">
<div class="thumb"><span class="badge">Verified</span></div>
<div class="card-body">
<div class="clinic-name">Willow Aesthetic Clinic</div>
<div class="meta-row"><span class="stars">★★★★★</span> 4.9 · 812 reviews</div>
<div class="tagrow"><span class="tag">Double eyelid</span><span class="tag">Non-incision</span></div>
<div class="price">from ₩1,200,000 <span class="price-note">event price</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
<div class="card">
<div class="thumb"><span class="badge">Top rated</span></div>
<div class="card-body">
<div class="clinic-name">Hanul Dermatology</div>
<div class="meta-row"><span class="stars">★★★★★</span> 4.8 · 630 reviews</div>
<div class="tagrow"><span class="tag">Laser toning</span><span class="tag">Skin booster</span></div>
<div class="price">from ₩180,000 <span class="price-note">per session</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
<div class="card">
<div class="thumb"><span class="badge">New</span></div>
<div class="card-body">
<div class="clinic-name">Baekje Nose Center</div>
<div class="meta-row"><span class="stars">★★★★☆</span> 4.6 · 214 reviews</div>
<div class="tagrow"><span class="tag">Rhinoplasty</span><span class="tag">Revision</span></div>
<div class="price">from ₩3,900,000 <span class="price-note">consultation incl.</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
<div class="card">
<div class="thumb"></div>
<div class="card-body">
<div class="clinic-name">Seorae Body Line</div>
<div class="meta-row"><span class="stars">★★★★★</span> 4.9 · 501 reviews</div>
<div class="tagrow"><span class="tag">Liposuction</span><span class="tag">Body contour</span></div>
<div class="price">from ₩2,450,000 <span class="price-note">event price</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
<div class="card">
<div class="thumb"><span class="badge">Event</span></div>
<div class="card-body">
<div class="clinic-name">Yeoksam Dental Studio</div>
<div class="meta-row"><span class="stars">★★★★★</span> 5.0 · 388 reviews</div>
<div class="tagrow"><span class="tag">Veneers</span><span class="tag">Whitening</span></div>
<div class="price">from ₩350,000 <span class="price-note">per unit</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
<div class="card">
<div class="thumb"></div>
<div class="card-body">
<div class="clinic-name">Cheongdam Eye Clinic</div>
<div class="meta-row"><span class="stars">★★★★☆</span> 4.7 · 297 reviews</div>
<div class="tagrow"><span class="tag">Ptosis</span><span class="tag">Canthoplasty</span></div>
<div class="price">from ₩980,000 <span class="price-note">event price</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f2326; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f2326; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #959698; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e5a00d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f2326; color: #e5a00d;
border: 1px solid #e5a00d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f2326; color: #f5f5f5;
border: 1px solid #414547; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #959698; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3f3722; color: #e5a00d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1F2326; color:#F2F3F4; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; background:#1F2326; }
.topbar { position:absolute; top:0; left:0; right:0; height:56px; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; background:#1F2326; }
.serverpill { display:flex; align-items:center; gap:8px; background:#282C30; border:1px solid #34393D;
border-radius:999px; padding:7px 14px; }
.sdot { width:8px; height:8px; border-radius:50%; background:#4CAF50; }
.serverpill .name { font-size:13px; font-weight:600; color:#F2F3F4; }
.serverpill .chev { font-size:12px; color:#9BA0A4; }
.brandmark { font-size:14px; font-weight:800; color:#E5A00D; letter-spacing:0.02em; }
.topicons { color:#F2F3F4; font-size:16px; display:flex; gap:14px; }
.content { position:absolute; top:56px; left:0; right:0; bottom:64px; padding:20px 24px; }
.sectionhdr { font-size:18px; font-weight:700; color:#F2F3F4; margin:0 0 10px; }
.ondeck { display:flex; gap:16px; }
.odtile { position:relative; width:260px; height:146px; border-radius:6px; overflow:hidden; flex-shrink:0; }
.od1 { background:linear-gradient(150deg,#3a4a63,#5a3a4a); }
.od2 { background:linear-gradient(150deg,#2f4a3f,#3a5a63); }
.od3 { background:linear-gradient(150deg,#4a3a5a,#63403a); }
.playov { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px;
border-radius:50%; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center;
color:#fff; font-size:15px; }
.progtrack { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.22); }
.progfill { position:absolute; left:0; bottom:0; height:3px; background:#E5A00D; }
.odmeta { margin-top:24px; }
.odrow { display:flex; gap:16px; }
.odcol { width:260px; }
.odtitle { font-size:15px; font-weight:600; color:#F2F3F4; margin:0 0 3px; }
.odsub { font-size:14px; font-weight:400; color:#9BA0A4; margin:0; }
.libsection { margin-top:20px; }
.postergrid { display:flex; gap:12px; }
.poster { position:relative; width:142px; height:213px; border-radius:6px; overflow:hidden; flex-shrink:0; }
.p1 { background:linear-gradient(165deg,#5a3a3a,#2f2f3a); }
.p2 { background:linear-gradient(165deg,#3a4a5a,#2f2f2f); }
.p3 { background:linear-gradient(165deg,#4a5a3a,#2f3a2f); }
.p4 { background:linear-gradient(165deg,#5a3a5a,#2f2f3a); }
.p5 { background:linear-gradient(165deg,#3a5a4a,#2f3a3a); }
.p6 { background:linear-gradient(165deg,#5a4a3a,#3a2f2f); }
.udot { position:absolute; top:7px; right:7px; width:9px; height:9px; border-radius:50%; background:#E5A00D;
box-shadow:0 1px 3px rgba(0,0,0,0.5); }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:64px; background:rgba(31,35,38,0.96);
border-top:0.5px solid #34393D; display:flex; align-items:center; justify-content:space-around; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab .ic { font-size:20px; color:#6B7075; }
.tab .lb { font-size:10px; font-weight:600; color:#6B7075; letter-spacing:0.02em; }
.tab.active .ic, .tab.active .lb { color:#E5A00D; }
</style></head>
<body>
<div class="app">
<div class="topbar">
<div class="serverpill"><span class="sdot"></span><span class="name">Home Media Server</span><span class="chev">▾</span></div>
<div class="brandmark">Plex (iOS)</div>
<div class="topicons"><span>🔍</span><span>⚙</span></div>
</div>
<div class="content">
<p class="sectionhdr">On Deck</p>
<div class="ondeck">
<div class="odtile od1"><div class="playov">▶</div><div class="progtrack"><div class="progfill" style="width:62%;"></div></div></div>
<div class="odtile od2"><div class="playov">▶</div><div class="progtrack"><div class="progfill" style="width:34%;"></div></div></div>
<div class="odtile od3"><div class="playov">▶</div><div class="progtrack"><div class="progfill" style="width:80%;"></div></div></div>
</div>
<div class="odrow odmeta">
<div class="odcol"><p class="odtitle">Nightfall Station</p><p class="odsub">S2 · E5 · 22 min left</p></div>
<div class="odcol"><p class="odtitle">The Long Drive</p><p class="odsub">2023 · 1h 02m left</p></div>
<div class="odcol"><p class="odtitle">Quiet Harbor</p><p class="odsub">S1 · E1 · 8 min left</p></div>
</div>
<div class="libsection">
<p class="sectionhdr">Movies</p>
<div class="postergrid">
<div class="poster p1"><div class="udot"></div></div>
<div class="poster p2"></div>
<div class="poster p3"><div class="udot"></div></div>
<div class="poster p4"></div>
<div class="poster p5"><div class="udot"></div></div>
<div class="poster p6"></div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="ic">⌂</span><span class="lb">HOME</span></div>
<div class="tab"><span class="ic">☰</span><span class="lb">LIBRARY</span></div>
<div class="tab"><span class="ic">✦</span><span class="lb">DISCOVER</span></div>
<div class="tab"><span class="ic">📺</span><span class="lb">LIVE TV</span></div>
<div class="tab"><span class="ic">👤</span><span class="lb">YOU</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #693bf2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #693bf2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b6a1f4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #693bf2; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #693bf2; color: #f5f5f5;
border: 1px solid #7f59f2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b6a1f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #815af4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#293341; box-sizing:border-box;
font-family:Pretendard, "Apple SD Gothic Neo", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:18px; font-weight:700; }
.brand b { color:#693bf2; }
.cta { background:#693bf2; color:#fff; border-radius:6px; padding:7px 14px; font-size:13px; font-weight:500; }
.catrow { display:flex; gap:10px; padding:6px 30px; }
.pill { border-radius:16px; padding:8px 14px; font-size:14px; background:#f6f7f9; color:#293341; }
.pill.active { background:#293341; color:#fff; }
.search { margin:14px 30px 0; background:#f6f7f9; border-radius:8px; padding:12px 14px; color:#aab4bf; font-size:15px; max-width:420px; }
.regionrow { display:flex; gap:8px; padding:12px 30px 0; }
.chip { border-radius:36px; padding:6px 16px; background:#f6f7f9; color:#293341; font-size:13px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px 30px 0; }
.pcard { background:#ffffff; border:1px solid #e0e5eb; border-radius:8px; padding:14px; }
.pcard .top { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.pcard .av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#c8bdfb,#693bf2); }
.pcard h3 { font-size:15px; font-weight:700; margin:0; }
.pcard .rating { font-size:12px; color:#ffc300; }
.pcard .rating b { color:#293341; font-weight:400; margin-left:3px; }
.pcard p { font-size:12px; color:#6a7685; margin:8px 0 0; line-height:1.5; }
.tags { display:flex; gap:6px; margin-top:8px; }
.tag { background:#eff1f5; color:#1c242f; font-size:10.5px; border-radius:6px; padding:3px 7px; }
footer { position:absolute; bottom:0; width:960px; padding:12px 30px; border-top:1px solid #e0e5eb;
display:flex; justify-content:space-between; font-size:11px; color:#aab4bf; }
</style></head>
<body>
<nav>
<p class="brand"><b>Find</b>Soomgo</p>
<span class="cta">Become a Pro</span>
</nav>
<div class="catrow">
<span class="pill active">Cleaning</span><span class="pill">Tutoring</span><span class="pill">Interior</span>
<span class="pill">Events/Photo</span><span class="pill">Legal/Tax</span>
</div>
<div class="search">What service do you need?</div>
<div class="regionrow"><span class="chip">Seoul</span><span class="chip">Gyeonggi</span><span class="chip">Incheon</span></div>
<div class="cards">
<div class="pcard"><div class="top"><div class="av"></div><h3>Jane Kim</h3></div><div class="rating">★★★★★ <b>4.9 (128)</b></div>
<p>Moving cleanup specialist, same-day quotes available.</p><div class="tags"><span class="tag">Move-out</span><span class="tag">Seoul</span></div></div>
<div class="pcard"><div class="top"><div class="av"></div><h3>Mike Park</h3></div><div class="rating">★★★★★ <b>4.8 (74)</b></div>
<p>Middle school math tutoring, online or in-person.</p><div class="tags"><span class="tag">Tutoring</span><span class="tag">Math</span></div></div>
<div class="pcard"><div class="top"><div class="av"></div><h3>Sarah Lee Studio</h3></div><div class="rating">★★★★☆ <b>4.7 (52)</b></div>
<p>Wedding & profile photography, portfolio available.</p><div class="tags"><span class="tag">Photo</span><span class="tag">Wedding</span></div></div>
</div>
<footer>
<span>Find the hidden pro, Soomgo</span>
<span>Request Quote · Find a Pro · More</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6600; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #ffffff;
border: 1px solid #ff6600; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2966d6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171719; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.brand { font-size:18px; font-weight:700; color:#ff6600; margin:0; }
.navlinks { display:flex; gap:8px; }
.navlinks span { font-size:14px; color:#171719; padding:7px 14px; border-radius:8px; }
.auth { color:#0066ff; font-size:14px; padding:7px 14px; }
.search-btn { width:32px; height:32px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#171719; }
.mapwrap { position:relative; height:520px; background:
linear-gradient(#eef0f2 1px, transparent 1px) 0 0/40px 40px,
linear-gradient(90deg,#eef0f2 1px, transparent 1px) 0 0/40px 40px,
#f7f8f9; }
.station-chip { position:absolute; font-size:22px; color:#171719; background:rgba(255,255,255,0.9); border-radius:10px; padding:7px 9px 7px 11px; }
.s1 { top:40px; left:80px; } .s2 { top:200px; left:340px; } .s3 { top:120px; right:120px; }
.rail { position:absolute; top:16px; left:16px; width:320px; display:flex; flex-direction:column; gap:10px; }
.listing-card { background:#ffffff; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.08); padding:12px; display:flex; gap:10px; }
.thumb { width:76px; height:76px; border-radius:8px; flex:none; }
.lc-body { display:flex; flex-direction:column; gap:2px; flex:1; }
.lc-price { font-size:16px; font-weight:700; color:#171719; }
.lc-meta { font-size:12px; color:#333333; }
.bookmark { margin-left:auto; width:24px; height:24px; border-radius:50%; color:#333333; font-size:14px; display:flex; align-items:center; justify-content:center; }
.paginator { position:absolute; bottom:16px; right:16px; display:flex; }
.pg { width:32px; height:32px; background:#ffffff; box-shadow:0 1px 4px rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:center; font-size:14px; color:#333333; }
.pg.prev { border-radius:10px 0 0 10px; }
.pg.next { border-radius:0 10px 10px 0; color:rgba(55,56,60,0.28); }
footer { height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:11px; color:#333333; }
</style></head>
<body>
<header>
<p class="brand">Zigbang</p>
<div class="navlinks"><span>Buy</span><span>Rent</span><span>New Build</span><span>Business Service</span></div>
<div style="display:flex;align-items:center;gap:6px;"><span class="auth">Sign Up / Log In</span><span class="search-btn">⌕</span></div>
</header>
<div class="mapwrap">
<span class="station-chip s1">Central Station</span>
<span class="station-chip s2">Riverside Ave</span>
<span class="station-chip s3">Market St</span>
<div class="rail">
<div class="listing-card">
<span class="thumb" style="background:linear-gradient(160deg,#dce9f7,#a9c9ec);"></span>
<div class="lc-body"><span class="lc-price">$1,850 / mo</span><span class="lc-meta">2 bed · 4th fl · Central Station</span></div>
<span class="bookmark">♡</span>
</div>
<div class="listing-card">
<span class="thumb" style="background:linear-gradient(160deg,#e5e0d5,#c9bfa3);"></span>
<div class="lc-body"><span class="lc-price">$2,400 / mo</span><span class="lc-meta">3 bed · 12th fl · Riverside Ave</span></div>
<span class="bookmark">♥</span>
</div>
<div class="listing-card">
<span class="thumb" style="background:linear-gradient(160deg,#dde7dc,#a9c5a3);"></span>
<div class="lc-body"><span class="lc-price">$1,200 / mo</span><span class="lc-meta">1 bed · 2nd fl · Market St</span></div>
<span class="bookmark">♡</span>
</div>
</div>
<div class="paginator"><span class="pg prev">‹</span><span class="pg next">›</span></div>
</div>
<footer>
<span>© Zigbang</span>
<span>Zigbang · Buy · Rent · Business Service</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.28; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; margin: 0; color: #7a7a7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #2c5234; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #2c5234;
border: 1px solid #2c5234; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f7f6f3; color: #222222;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:'Source Sans Pro',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e4e4e4; }
.brand { font-family:Georgia,serif; font-size:19px; font-weight:600; color:#2c5234; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:500; letter-spacing:.8px; text-transform:uppercase; color:#626263; }
.heritage { background:#f1d600; color:#222; font-family:Georgia,serif; font-size:12px; font-weight:600; padding:5px 12px; letter-spacing:.5px; }
.hero { display:flex; height:280px; }
.hero-img { flex:1.1; background:linear-gradient(135deg,#e8ecdd 0%,#c8d4b8 55%,#2c5234 130%); position:relative; }
.hero-text { flex:1; background:#2c5234; color:#fff; padding:32px; display:flex; flex-direction:column; justify-content:center; }
.hero-text h1 { font-family:Georgia,serif; font-size:30px; font-weight:600; line-height:1.15; margin:0 0 12px; }
.hero-text p { font-size:14px; opacity:.85; margin:0 0 18px; max-width:280px; }
.btn { display:inline-block; background:#fff; color:#2c5234; font-size:13px; font-weight:600; letter-spacing:.3px; padding:11px 22px; width:fit-content; }
.collection-band { background:#f7f6f3; padding:20px 40px; }
.collection-band h2 { font-family:Georgia,serif; font-size:22px; font-weight:600; margin:0 0 4px; }
.collection-band p { font-size:13px; color:#626263; margin:0; max-width:500px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 40px; }
.card { border:1px solid #efefef; border-radius:8px; overflow:hidden; }
.card-img { height:100px; background:#f3f1ec; position:relative; }
.card-img::after { content:''; position:absolute; left:12px; bottom:12px; width:60px; height:16px; border-radius:8px; background:#c9a961; opacity:.55; }
.card-body { padding:12px 14px; }
.card .cat { font-size:11px; color:#7a7a7c; }
.card h3 { font-size:15px; font-weight:600; margin:2px 0 4px; }
.card .price { font-size:15px; font-weight:600; }
.swatches { display:flex; gap:6px; margin-top:8px; }
.sw { width:18px; height:18px; border-radius:4px; border:1px solid #e4e4e4; }
footer { position:absolute; bottom:0; left:0; right:0; height:36px; background:#222; color:#9a9a9a;
display:flex; align-items:center; justify-content:center; font-size:10px; font-family:Georgia,serif; letter-spacing:.4px; }
</style></head>
<body>
<nav>
<p class="brand">Barlow Tyrie</p>
<div class="navlinks"><span>Dining</span><span>Lounge</span><span>Collections</span><span>Dealers</span></div>
<div class="heritage">Est. 1920</div>
</nav>
<section class="hero">
<div class="hero-img"></div>
<div class="hero-text">
<h1>Teak Furniture,<br>Built to Weather Everything</h1>
<p>Award-winning outdoor design for the terrace, the pool, and every English garden lunch in between.</p>
<span class="btn">Explore the Titan Collection</span>
</div>
</section>
<div class="collection-band">
<h2>The Equinox Collection</h2>
<p>Teak dining sets with clean architectural lines, finished by hand in solid grade-A teak.</p>
</div>
<div class="grid">
<div class="card">
<div class="card-img"></div>
<div class="card-body">
<div class="cat">Dining Table</div>
<h3>Titan Table 300</h3>
<div class="price">$4,850</div>
<div class="swatches"><div class="sw" style="background:#8a6d3c"></div><div class="sw" style="background:#c9c9c9"></div></div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="card-body">
<div class="cat">Lounge Chair</div>
<h3>Monaco Reclining Chair</h3>
<div class="price">$1,290</div>
<div class="swatches"><div class="sw" style="background:#8a6d3c"></div><div class="sw" style="background:#3a3a3a"></div></div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="card-body">
<div class="cat">Parasol</div>
<h3>Aura Cantilever Umbrella</h3>
<div class="price">$980</div>
<div class="swatches"><div class="sw" style="background:#2c5234"></div><div class="sw" style="background:#dedad0"></div></div>
</div>
</div>
</div>
<footer>Barlow Tyrie — Award-Winning Outdoor Furniture Since 1920</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa0030; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa0030; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f7879c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c0e13; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa0030; color: #0c0e13;
border: 1px solid #0c0e13; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa0030; color: #f5f5f5;
border: 1px solid #f92750; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f7879c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d4022b; color: #0c0e13;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0c0e13; box-sizing:border-box;
font-family:"Pretendard", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; }
.navlinks span.on { color:#fa0030; }
.enterprise { background:#0b495c; color:#fff; border-radius:6px; padding:8px 14px; font-size:13px; font-weight:700; }
.hero { text-align:center; padding:14px 40px 12px; }
.hero p.eyebrow { font-size:15px; font-weight:700; color:#fa0030; margin:0 0 6px; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 14px; line-height:1.3; }
.blocks { display:flex; gap:14px; padding:0 40px; }
.block { flex:1; border-radius:16px; padding:20px; color:#fff; height:150px; display:flex;
flex-direction:column; justify-content:space-between; }
.b1 { background:#d90b32; } .b2 { background:#0b495c; } .b3 { background:#8723ba; }
.block .tag { font-size:12px; opacity:0.85; }
.block h3 { font-size:18px; font-weight:700; margin:0; }
.tag-row { display:flex; gap:6px; }
.tag-g { background:#f0ffeb; color:#66d417; font-size:10px; font-weight:500; border-radius:4px; padding:0 4px; }
.tag-o { background:#ffeac7; color:#ff7300; font-size:10px; font-weight:500; border-radius:4px; padding:0 4px; }
.redband { margin-top:16px; background:#fa0030; color:#fff; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; }
.redband h2 { font-size:18px; font-weight:700; margin:0; }
.redband .btn { background:#fff; color:#fa0030; border-radius:8px; padding:10px 16px; font-size:14px; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e0e1e5; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#858793; }
</style></head>
<body>
<nav>
<div class="brand">Team Sparta</div>
<div class="navlinks"><span class="on">All Courses</span><span>Career Camp</span><span>Community</span><span>Reviews</span></div>
<div class="enterprise">Enterprise Training</div>
</nav>
<div class="hero">
<p class="eyebrow">Total Career Solution</p>
<h1>Custom AI education for every stage of your IT career</h1>
</div>
<div class="blocks">
<div class="block b1"><span class="tag">AI-Era Job Camp</span><h3>Career Bootcamp</h3><div class="tag-row"><span class="tag-g">Gov Funded</span></div></div>
<div class="block b2"><span class="tag">Beginner Friendly</span><h3>AI Basics</h3><div class="tag-row"><span class="tag-o">NEW</span></div></div>
<div class="block b3"><span class="tag">For Working Professionals</span><h3>Skill-Up</h3><div class="tag-row"><span class="tag-g">Gov Funded</span></div></div>
</div>
<div class="redband">
<h2>Wake up your potential at Team Sparta now</h2>
<div class="btn">Free Enrollment</div>
</div>
<footer><span>© Team Sparta</span><span>Team Sparta · Bootcamp · Community · Events</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5be3d3; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5be3d3; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #327068; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #24cdb9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5be3d3; color: #000000;
border: 1px solid #24cdb9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5be3d3; color: #111111;
border: 1px solid #4fc1b4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #327068; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #52dfcf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#4b4b4b; box-sizing:border-box;
font-family:"Segoe UI", -apple-system, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:600; color:#4b4b4b; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#6d6d6d; }
.pill-primary { background:#5be3d3; color:#4b4b4b; border-radius:50px; padding:11px 22px; font-size:16px; font-weight:700; }
.hero { display:flex; align-items:center; gap:30px; padding:20px 40px 26px; }
.hero .txt { flex:1; }
.hero h1 { font-size:38px; font-weight:600; line-height:1.2; margin:0 0 10px; }
.hero p { font-size:15px; color:#6d6d6d; margin:0 0 16px; max-width:400px; }
.hero .art { width:280px; height:170px; border-radius:20px; background:radial-gradient(circle at 30% 30%, #bbefe9, #5be3d3 70%); position:relative; }
.hero .art::after { content:''; position:absolute; width:60px; height:60px; border-radius:50%; background:#ffcf68; top:20px; right:24px; }
.pills { display:flex; gap:12px; padding:0 40px 22px; }
.fp { background:#24cdb9; color:#fff; border-radius:9999px; padding:8px 18px; font-size:15px; font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px 30px; }
.card { background:#ffffff; border:1px solid #dedede; border-radius:12px; padding:16px; box-shadow:rgba(0,0,0,0.06) 0px 4px 6px 0px; }
.card .dot { width:34px; height:34px; border-radius:50%; margin-bottom:10px; }
.card h3 { font-size:14px; margin:0 0 4px; }
.card p { font-size:12px; color:#9a9a9a; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Cubo Ai</p>
<div class="navlinks"><span>About Us</span><span>Features</span><span>Support</span></div>
<button class="pill-primary">Go to Shop</button>
</nav>
<div class="hero">
<div class="txt">
<h1>Sleep easy, every night</h1>
<p>AI covered-face and rollover detection, true cry detection, and sleep analytics — peace of mind for new parents.</p>
<button class="pill-primary">Go to Shop</button>
</div>
<div class="art"></div>
</div>
<div class="pills">
<span class="fp">Safety</span><span class="fp">Sleep</span><span class="fp">Health</span><span class="fp">Memories</span>
</div>
<div class="cards">
<div class="card"><div class="dot" style="background:#ff8784"></div><h3>Covered-face alert</h3><p>Real-time AI monitoring, day and night.</p></div>
<div class="card"><div class="dot" style="background:#ffb516"></div><h3>Sleep analytics</h3><p>Understand naps and night sleep patterns.</p></div>
<div class="card"><div class="dot" style="background:#4cc3e5"></div><h3>Auto memories</h3><p>The best moments, saved automatically.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #606266; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #409eff; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #ffffff; color: #409eff;
border: 1px solid #409eff; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #303133;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #606266; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.2px; background: #67c23a; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#303133; box-sizing:border-box;
font-family:'MiSans', 'Helvetica Neue', Helvetica, Arial, -apple-system, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #dcdfe6; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#303133; }
.navlinks span:hover, .navlinks .active { color:#409eff; }
.navlinks .active { border-bottom:2px solid #409eff; padding-bottom:20px; margin-bottom:-21px; }
.searchbox { width:150px; height:32px; border:1px solid #dcdfe6; border-radius:4px; background:#f5f7fa; }
main { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.hero { flex:1 1 auto; background:#1a1a1a; color:#ffffff; display:flex; align-items:center; gap:26px;
padding:0 30px; min-height:0; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 40%, rgba(64,158,255,0.12) 100%); }
.hero-copy { position:relative; flex:1; }
.hero-copy h1 { font-size:30px; font-weight:700; margin:0 0 8px; line-height:1.2; }
.hero-copy p { font-size:14px; color:#c0c4cc; margin:0 0 14px; max-width:320px; }
.hero-copy button { background:#409eff; color:#fff; border:none; border-radius:4px; padding:10px 22px; font-size:14px; font-weight:500; }
.printer { position:relative; flex:0 0 260px; height:180px; border-radius:4px;
background:linear-gradient(160deg,#3a3a3a,#101010 70%); border:1px solid #303133; }
.printer::after { content:''; position:absolute; left:18px; right:18px; top:18px; bottom:18px; border:1px solid rgba(64,158,255,0.5);
box-shadow:inset 0 0 30px rgba(64,158,255,0.15); }
.grid { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 30px 18px; }
.card { border:1px solid #e4e7ed; border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:4px; }
.card .thumb { aspect-ratio:1/1; border-radius:4px; margin-bottom:4px; }
.thumb.p1 { background:linear-gradient(150deg,#e4e7ed,#409eff 140%); }
.thumb.p2 { background:linear-gradient(150deg,#e4e7ed,#67c23a 140%); }
.thumb.p3 { background:linear-gradient(150deg,#e4e7ed,#e6a23c 140%); }
.card .name { font-size:16px; font-weight:600; margin:0; }
.card .price { font-size:22px; font-weight:700; margin:2px 0 0; }
.badge { display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.2px; text-transform:uppercase;
padding:2px 6px; border-radius:2px; color:#fff; margin-bottom:2px; }
.badge.new { background:#67c23a; }
.badge.sale { background:#f56c6c; }
footer { flex:0 0 auto; height:52px; background:#1a1a1a; color:#c0c4cc; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Anycubic</p>
<div class="navlinks"><span class="active">Resin Printers</span><span>FDM Printers</span><span>Materials</span><span>Parts</span></div>
<div class="searchbox"></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<h1>For Freedom to Make.</h1>
<p>Precision resin printing with an 8K mono LCD and a print speed that keeps up with your ideas.</p>
<button>Shop the Photon Line</button>
</div>
<div class="printer"></div>
</div>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="thumb p1"></div>
<p class="name">Photon Mono M5s</p><p class="price">$399.00</p></div>
<div class="card"><div class="thumb p2"></div>
<p class="name">Kobra 3 Combo</p><p class="price">$329.00</p></div>
<div class="card"><span class="badge sale">Sale</span><div class="thumb p3"></div>
<p class="name">Wash & Cure 3.0</p><p class="price">$179.00</p></div>
</div>
</main>
<footer>
<span>© Anycubic</span>
<span>Support · Warranty · Community Forum</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #003087; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #003087; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879cc4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0070ba; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003087; color: #ffffff;
border: 1px solid #0070ba; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #003087; color: #f5f5f5;
border: 1px solid #275099; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879cc4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #003a8f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#001435; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
/* left phone-ish wallet column */
.wallet { width:340px; height:640px; background:#FFFFFF; border-right:1px solid #E5E8ED;
display:flex; flex-direction:column; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 18px;
border-bottom:0.5px solid #E5E8ED; flex-shrink:0; }
.pp-mark { font-size:20px; font-weight:800; letter-spacing:-1px; }
.pp-mark .a { color:#0070BA; }
.pp-mark .b { color:#003087; margin-left:-6px; }
.topbar .icons { display:flex; gap:14px; color:#687173; font-size:14px; }
.wallet-scroll { flex:1; overflow:hidden; padding:18px; display:flex; flex-direction:column; gap:16px; }
.balance-card { background:#FFFFFF; border:1px solid #E5E8ED; border-radius:16px; padding:20px;
box-shadow:rgba(0,0,0,0.06) 0 2px 8px; display:flex; flex-direction:column; gap:10px; }
.balance-label { font-size:13px; font-weight:500; color:#687173; }
.balance-amt { font-size:36px; font-weight:700; letter-spacing:-0.5px; font-variant-numeric:tabular-nums; color:#001435; }
.balance-row { display:flex; gap:8px; margin-top:6px; }
.btn-blue { flex:1; background:#003087; color:#fff; border-radius:24px; padding:12px 0;
text-align:center; font-weight:700; font-size:14px; }
.btn-outline { flex:1; background:#fff; color:#003087; border:1.5px solid #003087; border-radius:24px;
padding:11px 0; text-align:center; font-weight:600; font-size:14px; }
.section-header { font-size:16px; font-weight:700; color:#001435; }
.activity-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:0.5px solid #E5E8ED; }
.a-icon { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:14px; font-weight:700; flex-shrink:0; }
.a-icon.sent { background:#003087; }
.a-icon.recv { background:#1C8B43; }
.a-icon.card { background:#0070BA; }
.a-mid { flex:1; min-width:0; }
.a-name { font-size:15px; font-weight:500; color:#001435; }
.a-sub { font-size:12px; color:#687173; margin-top:2px; }
.a-amt { font-size:16px; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.a-amt.pos { color:#1C8B43; }
.tabbar { height:56px; border-top:0.5px solid #E5E8ED; display:flex; align-items:center; justify-content:space-around;
flex-shrink:0; }
.tab { font-size:10px; color:#687173; display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab .dot { width:20px; height:20px; border-radius:6px; background:#EEF1F4; }
.tab.active { color:#003087; }
.tab.active .dot { background:#003087; }
/* right: send money fullscreen */
.send { flex:1; height:640px; background:#F5F7FA; display:flex; flex-direction:column; }
.send-top { height:56px; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:0.5px solid #E5E8ED; background:#fff; flex-shrink:0; }
.send-top .title { font-size:17px; font-weight:500; color:#001435; }
.send-top .cancel { position:absolute; left:20px; font-size:15px; color:#0070BA; font-weight:500; }
.send-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.to-row { font-size:14px; color:#687173; }
.to-row b { color:#001435; font-weight:600; }
.send-amt { font-size:56px; font-weight:700; letter-spacing:-1px; color:#001435; font-variant-numeric:tabular-nums; }
.currency-chip { font-size:13px; font-weight:500; color:#687173; background:#EEF1F4; padding:5px 14px; border-radius:14px; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0 40px 18px; }
.key { text-align:center; padding:12px 0; font-size:22px; font-weight:500; color:#001435; }
.send-cta-wrap { padding:0 24px 22px; }
.send-cta { background:#003087; color:#fff; text-align:center; padding:15px 0; border-radius:24px;
font-weight:700; font-size:17px; }
.badge-pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.05em; background:#E4F5EA; color:#1C8B43; padding:3px 10px; border-radius:4px; }
</style></head>
<body>
<div class="app">
<div class="wallet">
<div class="topbar">
<div class="pp-mark"><span class="a">P</span><span class="b">P</span></div>
<div class="icons">🔔 ?</div>
</div>
<div class="wallet-scroll">
<div class="balance-card">
<div class="balance-label">PayPal (iOS) balance</div>
<div class="balance-amt">$1,247.92</div>
<div class="balance-row">
<div class="btn-blue">Add Money</div>
<div class="btn-outline">Transfer</div>
</div>
</div>
<div class="section-header">Recent activity</div>
<div class="activity-row">
<div class="a-icon recv">↓</div>
<div class="a-mid">
<div class="a-name">Sarah Kim</div>
<div class="a-sub">Yesterday, 3:42 PM · Completed</div>
</div>
<div class="a-amt pos">+$24.50</div>
</div>
<div class="activity-row">
<div class="a-icon sent">↑</div>
<div class="a-mid">
<div class="a-name">Jordan Lee</div>
<div class="a-sub">Mon, 9:12 AM · Completed</div>
</div>
<div class="a-amt">−$60.00</div>
</div>
<div class="activity-row">
<div class="a-icon card">💳</div>
<div class="a-mid">
<div class="a-name">Visa debit ·4242</div>
<div class="a-sub">Sun, 6:03 PM · Completed</div>
</div>
<div class="a-amt">−$18.20</div>
</div>
<div><span class="badge-pill">Received</span></div>
</div>
<div class="tabbar">
<div class="tab active"><div class="dot"></div>Home</div>
<div class="tab"><div class="dot"></div>Send</div>
<div class="tab"><div class="dot"></div>Wallet</div>
<div class="tab"><div class="dot"></div>Activity</div>
<div class="tab"><div class="dot"></div>Finances</div>
</div>
</div>
<div class="send">
<div class="send-top"><span class="cancel">Cancel</span><span class="title">Send Money</span></div>
<div class="send-body">
<div class="to-row">To <b>Sarah Kim</b></div>
<div class="send-amt">$24.50</div>
<div class="currency-chip">USD ⌄</div>
</div>
<div class="keypad">
<div class="key">1</div><div class="key">2</div><div class="key">3</div>
<div class="key">4</div><div class="key">5</div><div class="key">6</div>
<div class="key">7</div><div class="key">8</div><div class="key">9</div>
<div class="key"></div><div class="key">0</div><div class="key">⌫</div>
</div>
<div class="send-cta-wrap"><div class="send-cta">Send $24.50</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #17171c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #17171c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #919193; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17171c; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #17171c; color: #f5f5f5;
border: 1px solid #3b3b3f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919193; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3c3c40; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 44px; border-bottom:1px solid #e5e7eb; }
.brand { font-size:16px; font-weight:600; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:32px; font-size:14px; color:#212121; }
.pill-dark { background:#17171c; color:#fff; border-radius:9999px; padding:9px 20px;
font-size:14px; font-weight:500; white-space:nowrap; }
.hero { padding:56px 44px 32px; display:flex; flex-direction:column; gap:16px; }
.hero h1 { font-size:56px; font-weight:400; letter-spacing:-1.2px; line-height:1.0; margin:0; max-width:640px; }
.hero p { font-size:16px; color:#212121; max-width:460px; margin:0; }
.row { display:flex; gap:12px; margin-top:6px; }
.pill-outline { border:1px solid #17171c; color:#17171c; border-radius:9999px; padding:8px 19px; font-size:14px; font-weight:500; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0 44px 40px; }
.card { border:1px solid #e5e7eb; border-radius:22px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.card .tag { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:#75758a; }
.card h3 { font-size:16px; font-weight:600; margin:0; }
.card p { font-size:13px; color:#212121; margin:0; line-height:1.45; }
footer { border-top:1px solid #e5e7eb; padding:14px 44px; display:flex; justify-content:space-between;
font-size:12px; color:#75758a; }
</style></head>
<body>
<nav>
<p class="brand">Cohere</p>
<div class="navlinks"><span>Products</span><span>Pricing</span><span>Docs</span><span>Careers</span></div>
<button class="pill-dark">Get started</button>
</nav>
<section class="hero">
<h1>Own your AI</h1>
<p>Enterprise-grade models and agentic infrastructure, deployed on your terms — private, secure, and built for scale.</p>
<div class="row">
<button class="pill-dark">Talk to sales</button>
<button class="pill-outline">Read the docs</button>
</div>
</section>
<section class="cards">
<div class="card"><span class="tag">Models</span><h3>Command & Embed</h3><p>Foundation models tuned for retrieval, reasoning, and enterprise search.</p></div>
<div class="card"><span class="tag">Agentic</span><h3>North workplace</h3><p>A turnkey agentic platform that works across your private data.</p></div>
<div class="card"><span class="tag">Deployment</span><h3>Any cloud, any scale</h3><p>Run on your own infrastructure without giving up control.</p></div>
</section>
<footer>
<span>© Cohere</span>
<span>Cohere · Products · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #f07d28; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #ffffff; color: #1a1a1a;
border: 1px solid #f07d28; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; background: #f5f5f5; color: #3a3a3a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:system-ui, -apple-system, 'Inter', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #efefef; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#1a1a1a; font-weight:500; }
.cart { width:28px; height:28px; border-radius:4px; background:#f5f5f5; position:relative; }
.cart::after { content:''; position:absolute; top:-4px; right:-4px; width:12px; height:12px; border-radius:999px; background:#f07d28; }
main { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.hero { flex:1 1 auto; background:#111111; color:#f0f0f0; display:flex; align-items:center; gap:26px;
padding:0 30px; min-height:0; }
.hero-copy { flex:1; }
.hero-copy h1 { font-size:32px; font-weight:700; letter-spacing:-0.4px; margin:0 0 8px; line-height:1.15; }
.hero-copy p { font-size:14px; color:#c8c8c8; margin:0 0 14px; max-width:340px; }
.hero-copy button { background:#f07d28; color:#fff; border:none; border-radius:4px; padding:12px 24px;
font-weight:600; font-size:15px; }
.kb { flex:0 0 300px; height:150px; border-radius:4px; position:relative;
background:linear-gradient(155deg,#2a2a2a,#151515 60%); border:1px solid #333; }
.kb::after { content:''; position:absolute; left:16px; right:16px; top:16px; bottom:16px; border-radius:2px;
background-image:repeating-linear-gradient(90deg, #3a3a3a 0 26px, #202020 26px 30px);
box-shadow:inset 0 0 20px rgba(240,125,40,0.25); }
.rgb-strip { flex:0 0 6px; border-radius:999px; margin:14px 30px 0;
background:linear-gradient(90deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#8b00ff); }
.spec-row { flex:0 0 auto; display:flex; gap:0; padding:14px 30px 18px; }
.spec { flex:1; padding:0 16px; border-left:1px solid #e0e0e0; }
.spec:first-child { border-left:none; padding-left:0; }
.spec .label { font-size:11px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; color:#767676; margin:0 0 4px; }
.spec .value { font-size:13px; margin:0; }
footer { flex:0 0 auto; height:52px; background:#111111; color:#767676; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Anne Pro</p>
<div class="navlinks"><span>Keyboards</span><span>Switches</span><span>Keycaps</span></div>
<div class="cart"></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<h1>60% is the whole point.</h1>
<p>Bluetooth 5.0, hot-swappable switches, and full RGB — packed into a footprint that gives your desk room to breathe.</p>
<button>Add to Cart — $89</button>
</div>
<div class="kb"></div>
</div>
<div class="rgb-strip"></div>
<div class="spec-row">
<div class="spec"><p class="label">Layout</p><p class="value">60% ANSI, 61 keys</p></div>
<div class="spec"><p class="label">Connectivity</p><p class="value">BT 5.0 / 2.4GHz / USB-C</p></div>
<div class="spec"><p class="label">Battery</p><p class="value">1900mAh, ~100hrs</p></div>
<div class="spec"><p class="label">Switches</p><p class="value">Hot-swap, 3-pin/5-pin</p></div>
</div>
</main>
<footer>
<span>© Anne Pro</span>
<span>Firmware · QMK Docs · Community</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #626262; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; background: #2a2a2a; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; background: #ffffff; color: #2a2a2a;
border: 1px solid #2a2a2a; border-radius: 0px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #626262; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1em; background: #f7f7f7; color: #2a2a2a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#ffffff; color:#2a2a2a; box-sizing:border-box; font-family:'DM Sans',system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#282828; color:#fff; font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
display:flex; align-items:center; justify-content:center; }
nav { height:56px; border-bottom:1px solid #dedede; display:flex; align-items:center; justify-content:center; position:relative; padding:0 32px; }
.brand { font-size:14px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; margin:0; }
.navlinks { position:absolute; left:32px; display:flex; gap:20px; font-size:12px; letter-spacing:0.04em; color:#2a2a2a; }
.icons { position:absolute; right:32px; display:flex; gap:16px; font-size:15px; }
.main { display:flex; height:452px; }
.gallery { width:460px; background:#fafafa; display:flex; align-items:center; justify-content:center; position:relative; }
.ring { width:150px; height:150px; border-radius:50%; border:22px solid; border-color:#dfb8a7 #dfb8a7 #2a2a2a #dfb8a7;
transform:rotate(-30deg); box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.label-upper { position:absolute; top:24px; left:24px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#626262; }
.info { flex:1; padding:36px 40px; display:flex; flex-direction:column; gap:12px; }
.info h1 { font-family:'Newsreader',Georgia,serif; font-weight:400; font-size:32px; margin:0; line-height:1.15; }
.material-row { display:flex; gap:8px; }
.material-badge { background:#f7f7f7; border:1px solid #dedede; padding:4px 10px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#2a2a2a; }
.price { font-size:18px; }
.desc { font-size:14px; line-height:1.6; color:#2a2a2a; max-width:400px; }
.swatch-row { display:flex; gap:10px; margin-top:4px; }
.swatch { width:24px; height:24px; border-radius:50%; border:1px solid #dedede; }
.swatch.sel { border:2px solid #121212; }
.btn-primary { margin-top:auto; height:52px; background:#2a2a2a; color:#fff; border:none; font-size:13px; font-weight:500;
letter-spacing:0.08em; text-transform:uppercase; }
.btn-secondary { height:48px; background:#fff; color:#2a2a2a; border:1px solid #2a2a2a; font-size:13px; font-weight:500;
letter-spacing:0.08em; text-transform:uppercase; margin-top:8px; }
</style></head>
<body>
<div class="announce">Complimentary engraving on all rings</div>
<nav>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Earrings</span></div>
<p class="brand">Bagatiba</p>
<div class="icons"><span>🔍</span><span>♡</span><span>🛍</span></div>
</nav>
<div class="main">
<div class="gallery">
<span class="label-upper">14K Gold Vermeil</span>
<div class="ring"></div>
</div>
<div class="info">
<h1>Signet Band Ring</h1>
<div class="material-row">
<span class="material-badge">14K Gold Vermeil</span>
<span class="material-badge">Made to Order</span>
</div>
<span class="price">$185.00</span>
<p class="desc">Cast in solid vermeil and hand-polished to a soft, worn-in finish. A quiet signet form built for daily wear — pairs easily with stacked bands or worn alone.</p>
<div class="swatch-row">
<div class="swatch sel" style="background:#d8bd7a"></div>
<div class="swatch" style="background:#c9c9c9"></div>
<div class="swatch" style="background:#e0b8a0"></div>
</div>
<button class="btn-primary">Add to Bag</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #06c755; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #06c755; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #89e0ad; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #06c755; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #06c755; color: #000000;
border: 1px solid #2cce6f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #89e0ad; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #13b76e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
.tabsbar { height:52px; display:flex; align-items:center; gap:28px; padding:0 24px;
border-bottom:1px solid #e8e8e8; }
.tabsbar .brand { font-size:16px; font-weight:900; margin-right:8px; }
.tab { font-size:14px; color:#000000; padding:16px 2px; border-bottom:2px solid transparent; position:relative; }
.tab.active { border-bottom-color:#06c755; font-weight:700; }
.tab .reddot { position:absolute; top:10px; right:-10px; width:7px; height:7px; border-radius:50%; background:#ff334b; }
.layout { display:flex; height:calc(640px - 52px); }
.chatlist { width:300px; border-right:1px solid #e8e8e8; overflow:hidden; }
.chatlist .row { display:flex; align-items:center; gap:12px; padding:12px 18px; }
.chatlist .row.selected { background:#f5faf6; }
.avatar { width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center;
justify-content:center; color:#ffffff; font-size:14px; font-weight:700; }
.a1 { background:#06c755; } .a2 { background:#638dff; } .a3 { background:#949494; }
.a4 { background:#4cc764; } .a5 { background:#ff334b; }
.chatmeta { flex:1; min-width:0; }
.chatmeta .name { font-size:14px; font-weight:700; color:#000000; }
.chatmeta .last { font-size:13px; color:#949494; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.chatright { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.chatright .time { font-size:11px; color:#949494; }
.unread { background:#06c755; color:#ffffff; font-size:11px; font-weight:700; border-radius:9999px;
min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.convo { flex:1; display:flex; flex-direction:column; }
.convo-head { height:52px; border-bottom:1px solid #e8e8e8; display:flex; align-items:center;
gap:12px; padding:0 20px; }
.convo-head .name { font-size:15px; font-weight:700; }
.convo-head .status { font-size:12px; color:#949494; }
.thread { flex:1; padding:20px 24px; display:flex; flex-direction:column; gap:12px; background:#fafafa; }
.bubblerow { display:flex; }
.bubblerow.mine { justify-content:flex-end; }
.bubble { max-width:280px; padding:10px 14px; font-size:14px; line-height:1.45; border-radius:14px; }
.bubble.theirs { background:#efefef; color:#000000; border-bottom-left-radius:4px; }
.bubble.mine { background:#06c755; color:#ffffff; border-bottom-right-radius:4px; }
.stamp { font-size:11px; color:#949494; align-self:flex-end; margin:0 6px; }
.composer { border-top:1px solid #e8e8e8; padding:14px 20px; display:flex; align-items:center; gap:12px; }
.composer .field { flex:1; border:none; border-bottom:1px solid #949494; padding:8px 2px; font-size:14px; color:#000000; }
.sendbtn { background:#06c755; color:#ffffff; border-radius:5px; height:36px; padding:0 18px;
font-size:14px; font-weight:700; display:flex; align-items:center; }
</style></head>
<body>
<div class="tabsbar">
<span class="brand">LINE</span>
<span class="tab active">Chats</span>
<span class="tab">Calls</span>
<span class="tab">Timeline<span class="reddot"></span></span>
<span class="tab">Wallet</span>
</div>
<div class="layout">
<div class="chatlist">
<div class="row selected">
<div class="avatar a1">MJ</div>
<div class="chatmeta"><div class="name">Minji</div><div class="last">See you at 7, I'll bring snacks 🎒</div></div>
<div class="chatright"><span class="time">2:14</span></div>
</div>
<div class="row">
<div class="avatar a2">Team</div>
<div class="chatmeta"><div class="name">Weekend Hiking Group</div><div class="last">Jihoon: uploaded 4 photos</div></div>
<div class="chatright"><span class="time">1:02</span><span class="unread">3</span></div>
</div>
<div class="row">
<div class="avatar a3">SY</div>
<div class="chatmeta"><div class="name">Soyeon</div><div class="last">sent a sticker</div></div>
<div class="chatright"><span class="time">11:40</span></div>
</div>
<div class="row">
<div class="avatar a4">JW</div>
<div class="chatmeta"><div class="name">Jiwoo</div><div class="last">Thanks for today!</div></div>
<div class="chatright"><span class="time">Yesterday</span></div>
</div>
<div class="row">
<div class="avatar a5">Ops</div>
<div class="chatmeta"><div class="name">Delivery Notice</div><div class="last">Your package has shipped</div></div>
<div class="chatright"><span class="time">Mon</span><span class="unread">1</span></div>
</div>
</div>
<div class="convo">
<div class="convo-head">
<div class="avatar a1" style="width:32px;height:32px;font-size:12px;">MJ</div>
<div><div class="name">Minji</div><div class="status">Active now</div></div>
</div>
<div class="thread">
<div class="bubblerow"><div class="bubble theirs">Are we still on for the hike tomorrow?</div></div>
<div class="bubblerow mine"><div class="bubble mine">Yes! Meeting point is the north gate at 7</div></div>
<div class="bubblerow mine"><div class="bubble mine">I'll bring extra water this time</div></div>
<div class="bubblerow"><div class="bubble theirs">Perfect, see you at 7, I'll bring snacks 🎒</div></div>
<div class="stamp">Read 2:14</div>
</div>
<div class="composer">
<div class="field">Message</div>
<div class="sendbtn">Send</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0098db; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0098db; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cbe9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a6e2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0098db; color: #000000;
border: 1px solid #00a6e2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0098db; color: #f5f5f5;
border: 1px solid #27a7df; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cbe9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #009adc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#16181C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; background:#F4F5F7; }
nav.top { position:absolute; top:0; left:0; right:0; height:60px; background:#FFFFFF;
border-bottom:1px solid #E4E6EA; display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.brand { font-size:20px; font-weight:900; color:#0098DB; letter-spacing:-0.4px; margin:0; }
.segstrip { display:flex; gap:22px; align-items:center; }
.seg { font-size:13px; font-weight:800; color:#9BA1AB; padding-bottom:6px; border-bottom:3px solid transparent; }
.seg.active { color:#0098DB; border-bottom-color:#0098DB; }
.navicons { display:flex; gap:14px; color:#0098DB; font-size:18px; font-weight:700; }
.gridwrap { position:absolute; top:60px; bottom:64px; left:0; right:0; padding:16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; height:100%; }
.card { position:relative; border-radius:16px; overflow:hidden; box-shadow:rgba(22,24,28,0.10) 0 4px 14px; }
.c1 { background:linear-gradient(160deg,#8fd0ee 0%,#a98be8 100%); }
.c2 { background:linear-gradient(160deg,#f2b9c4 0%,#f4d58a 100%); }
.c3 { background:linear-gradient(160deg,#9be0c9 0%,#6fb7e0 100%); }
.online-pill { position:absolute; top:10px; left:10px; background:rgba(0,0,0,0.42); border-radius:999px;
padding:4px 10px; display:flex; align-items:center; gap:5px; }
.online-dot { width:7px; height:7px; border-radius:50%; background:#00C9B7; }
.online-pill span { color:#FFFFFF; font-size:11px; font-weight:700; letter-spacing:0.02em; }
.scrim { position:absolute; left:0; right:0; bottom:0; height:44%;
background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.78));
display:flex; flex-direction:column; justify-content:flex-end; padding:12px; }
.scrim .name { color:#FFFFFF; font-size:16px; font-weight:700; margin:0 0 3px; }
.scrim .meta { color:#FFFFFF; font-size:12px; font-weight:600; opacity:0.95; margin:0; }
.likebtn { position:absolute; right:10px; bottom:10px; width:36px; height:36px; border-radius:50%;
background:#0098DB; display:flex; align-items:center; justify-content:center;
box-shadow:rgba(0,152,219,0.5) 0 6px 16px; color:#fff; font-size:16px; }
nav.bottom { position:absolute; left:0; right:0; bottom:0; height:64px; background:rgba(255,255,255,0.94);
border-top:1px solid #E4E6EA; display:flex; align-items:center; justify-content:space-around; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; }
.tab .ic { font-size:20px; color:#9BA1AB; }
.tab .lb { font-size:10px; font-weight:800; color:#9BA1AB; letter-spacing:0.04em; }
.tab.active .ic, .tab.active .lb { color:#0098DB; }
.badge { position:absolute; top:-4px; right:-10px; background:#FF4F8B; color:#fff; font-size:9px; font-weight:800;
min-width:16px; height:16px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
</style></head>
<body>
<div class="app">
<nav class="top">
<p class="brand">Plenty of Fish (iOS)</p>
<div class="segstrip">
<span class="seg active">Matches</span>
<span class="seg">Meet Me</span>
<span class="seg">Search</span>
</div>
<div class="navicons"><span>⚙</span><span>🔍</span></div>
</nav>
<div class="gridwrap">
<div class="grid">
<div class="card c1">
<div class="online-pill"><span class="online-dot"></span><span>Online</span></div>
<div class="scrim"><p class="name">Sofia, 27</p><p class="meta">3 mi · Active now</p></div>
<div class="likebtn">♡</div>
</div>
<div class="card c2">
<div class="scrim"><p class="name">Maya, 31</p><p class="meta">6 mi · 2h ago</p></div>
<div class="likebtn">♡</div>
</div>
<div class="card c3">
<div class="online-pill"><span class="online-dot"></span><span>Online</span></div>
<div class="scrim"><p class="name">Jordan, 29</p><p class="meta">1 mi · Active now</p></div>
<div class="likebtn">♡</div>
</div>
</div>
</div>
<nav class="bottom">
<div class="tab active"><span class="ic">♡</span><span class="lb">MATCHES</span></div>
<div class="tab"><span class="ic">⚡</span><span class="lb">MEET ME</span></div>
<div class="tab"><span class="ic">🔍</span><span class="lb">SEARCH</span></div>
<div class="tab" style="position:relative;"><span class="ic">💬</span><span class="lb">MESSAGES</span><span class="badge">3</span></div>
<div class="tab"><span class="ic">👤</span><span class="lb">ME</span></div>
</nav>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1868db; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1868db; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92b6e9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff613d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1868db; color: #ffffff;
border: 1px solid #ff613d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1868db; color: #f5f5f5;
border: 1px solid #3b7fdf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92b6e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3d67c2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101214; box-sizing:border-box;
font-family:'Charlie Text',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 62px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.brand { font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:400; color:#292a2e; }
.btn-dark { background:#101214; color:#fff; border:none; border-radius:9999px; height:44px; padding:0 22px; font-size:15px; font-weight:700; }
.hero { flex:0 0 230px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:0 40px; overflow:hidden;
background: radial-gradient(circle at 12% 15%, rgba(255,97,61,0.14), rgba(255,97,61,0) 45%),
radial-gradient(circle at 92% 85%, rgba(191,99,243,0.16), rgba(191,99,243,0) 50%); }
.hero h1 { font-family:'Charlie Display',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:44px; font-weight:700; line-height:1.06; margin:0 0 12px; max-width:620px; }
.hero p { font-size:16px; color:#7d818a; margin:0 0 18px; }
.row { display:flex; gap:12px; }
.btn-primary { background:#1868db; color:#fff; border:none; border-radius:9999px; height:48px; padding:0 24px; font-size:15px; font-weight:700; }
.btn-light { background:#e9f2fe; color:#101214; border:none; border-radius:9999px; height:48px; padding:0 24px; font-size:15px; font-weight:700; }
.cards { flex:1; display:flex; gap:16px; padding:20px 44px 0; }
.card { flex:1; background:#ffffff; border-radius:24px; padding:20px;
box-shadow: rgba(0,0,0,0.03) 0px 4px 6.4px 0px, rgba(0,0,0,0.05) 0px 3px 9.6px 0px;
display:flex; flex-direction:column; gap:8px; }
.card .swatch { width:100%; height:60px; border-radius:16px; }
.card h3 { font-size:16px; font-weight:700; margin:0; }
.card p { font-size:12.5px; color:#7d818a; line-height:1.5; margin:0; }
footer { flex:0 0 66px; background:#e9f2fe; display:flex; align-items:center; justify-content:space-between;
padding:0 44px; font-size:13px; color:#292a2e; }
</style></head>
<body>
<nav>
<p class="brand">Loom</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Resources</span><span>Pricing</span></div>
<button class="btn-dark">Get Loom for free</button>
</nav>
<section class="hero">
<h1>One video is worth a thousand words.</h1>
<p>Record your screen, share a link, keep the meeting out of everyone's calendar.</p>
<div class="row">
<button class="btn-primary">Get started free</button>
<button class="btn-light">Contact sales</button>
</div>
</section>
<section class="cards">
<div class="card"><div class="swatch" style="background:linear-gradient(135deg,#ff613d,#48245d)"></div><h3>Async video</h3><p>Explain in minutes what would take an hour of meetings.</p></div>
<div class="card"><div class="swatch" style="background:linear-gradient(135deg,#1868db,#bf63f3)"></div><h3>Instant sharing</h3><p>A link is ready before the recording even finishes uploading.</p></div>
<div class="card"><div class="swatch" style="background:linear-gradient(135deg,#bf63f3,#ff613d)"></div><h3>AI notes</h3><p>Automatic summaries and action items pulled from every recording.</p></div>
</section>
<footer>
<span>© Loom</span>
<span>Loom · Chrome Extension · Blog</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a75fc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a75fc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9abbf8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a75fc; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a75fc; color: #f5f5f5;
border: 1px solid #4a89fb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9abbf8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2665d7; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:"Pretendard Variable", "Malgun Gothic", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; background:#121212; border-bottom:1px solid #232323; }
.brand { font-size:17px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:14px; color:#ffffff; }
.navlinks span.active { color:#2a75fc; }
.cta { background:#2a75fc; color:#ffffff; border:none; border-radius:0px; padding:9px 14px; font-size:13px; }
.body { display:flex; height:584px; }
.rail { width:130px; padding:22px 16px; border-right:1px solid #232323; }
.rail .lbl { font-size:11px; color:#444e57; text-transform:uppercase; letter-spacing:0.05em; margin:0 0 10px; }
.rail .row { font-size:13px; color:#ffffff; padding:8px 0; opacity:0.75; }
.rail .row.on { color:#2a75fc; opacity:1; font-weight:600; }
.main { flex:1; padding:26px 30px; display:flex; flex-direction:column; }
.headline { font-size:26px; font-weight:600; margin:0 0 4px; }
.sub { font-size:13px; color:#a1a1a1; margin:0 0 20px; }
.scoreRow { display:flex; gap:20px; margin-bottom:20px; }
.scoreCard { background:#1a1a1a; border:1px solid #232323; padding:18px 20px; flex:1; }
.scoreCard .big { font-size:38px; font-weight:600; color:#2a75fc; margin:0; }
.scoreCard .lbl { font-size:12px; color:#888; margin:4px 0 0; }
.wave { height:120px; background:#1a1a1a; border:1px solid #232323; position:relative; margin-bottom:20px; overflow:hidden; }
.bars { display:flex; align-items:flex-end; gap:4px; height:100%; padding:14px 16px; }
.bar { flex:1; background:linear-gradient(180deg,#2a75fc,#118cfd); }
.stageRow { display:flex; gap:14px; margin-top:auto; }
.stagecard { flex:1; background:#1a1a1a; border:1px solid #232323; padding:14px; }
.stagecard .pct { font-size:20px; font-weight:600; margin:0; }
.stagecard .name { font-size:11px; color:#888; margin:2px 0 0; text-transform:uppercase; letter-spacing:0.04em; }
.swatch { width:10px; height:10px; display:inline-block; margin-right:6px; }
</style></head>
<body>
<nav>
<p class="brand">Asleep</p>
<div class="navlinks"><span class="active">Products</span><span>Research</span><span>Company</span><span>FAQ</span></div>
<button class="cta">API Docs</button>
</nav>
<div class="body">
<div class="rail">
<p class="lbl">Reports</p>
<div class="row on">Last night</div>
<div class="row">7-day trend</div>
<div class="row">30-day trend</div>
<p class="lbl" style="margin-top:20px;">Devices</p>
<div class="row">Bedside API</div>
<div class="row">Partner SDK</div>
</div>
<div class="main">
<h1 class="headline">Last night's sleep report</h1>
<p class="sub">Measured from breathing sound alone — no wearable required.</p>
<div class="scoreRow">
<div class="scoreCard"><p class="big">86</p><p class="lbl">Sleep score</p></div>
<div class="scoreCard"><p class="big">7h 12m</p><p class="lbl">Total sleep time</p></div>
<div class="scoreCard"><p class="big">94%</p><p class="lbl">Sleep efficiency</p></div>
</div>
<div class="wave">
<div class="bars">
<div class="bar" style="height:30%"></div><div class="bar" style="height:55%"></div>
<div class="bar" style="height:80%"></div><div class="bar" style="height:65%"></div>
<div class="bar" style="height:90%"></div><div class="bar" style="height:70%"></div>
<div class="bar" style="height:40%"></div><div class="bar" style="height:60%"></div>
<div class="bar" style="height:85%"></div><div class="bar" style="height:50%"></div>
<div class="bar" style="height:75%"></div><div class="bar" style="height:35%"></div>
<div class="bar" style="height:95%"></div><div class="bar" style="height:60%"></div>
<div class="bar" style="height:45%"></div><div class="bar" style="height:80%"></div>
</div>
</div>
<div class="stageRow">
<div class="stagecard"><p class="pct">18%</p><p class="name"><span class="swatch" style="background:#2a75fc"></span>REM</p></div>
<div class="stagecard"><p class="pct">54%</p><p class="name"><span class="swatch" style="background:#118cfd"></span>Light</p></div>
<div class="stagecard"><p class="pct">22%</p><p class="name"><span class="swatch" style="background:#3a61f2"></span>Deep</p></div>
<div class="stagecard"><p class="pct">6%</p><p class="name"><span class="swatch" style="background:#444e57"></span>Awake</p></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d0e12; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d0e12; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd24c; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d0e12; color: #ffd24c;
border: 1px solid #ffd24c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d0e12; color: #f5f5f5;
border: 1px solid #323336; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #342d1b; color: #ffd24c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0D0E12; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:absolute; top:0; left:0; right:0; height:44px; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; background:#0D0E12; }
.wordmark { font-size:18px; font-weight:800; letter-spacing:-0.3px; color:#FFFFFF; margin:0; }
.navicons { display:flex; gap:20px; font-size:18px; color:#FFFFFF; }
.layout { position:absolute; top:44px; bottom:52px; left:0; right:0; display:flex; gap:24px;
padding:14px 36px 6px; overflow:hidden; }
.playercol { flex:1.7; min-width:0; }
.player { position:relative; width:100%; height:210px; border-radius:14px; overflow:hidden;
background:linear-gradient(160deg,#16384A,#08151D); }
.playbtn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px;
border-radius:50%; background:rgba(13,14,18,0.55); border:1.5px solid rgba(255,255,255,0.55);
display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }
.qchip { position:absolute; top:10px; right:10px; font-size:9px; font-weight:700; color:#fff;
border:1px solid rgba(255,255,255,0.5); border-radius:3px; padding:2px 6px; }
.controls { position:absolute; left:0; right:0; bottom:0; height:34px;
background:linear-gradient(to top, rgba(8,21,29,0.85), transparent);
display:flex; align-items:center; gap:8px; padding:0 10px 6px; }
.tc { font-size:11px; font-weight:700; color:#fff; }
.track { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.22); position:relative; }
.fill { position:absolute; left:0; top:0; height:3px; width:38%; border-radius:2px; background:#00ADEF; }
.knob { position:absolute; left:38%; top:50%; transform:translate(-50%,-50%); width:10px; height:10px;
border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.6); }
.meta { margin-top:14px; }
.staffpill { display:inline-flex; align-items:center; gap:4px; background:#FFD24C; color:#04121A;
font-size:10px; font-weight:700; border-radius:999px; padding:3px 8px; margin-bottom:8px; }
.vtitle { font-size:18px; font-weight:700; margin:0 0 3px; }
.vsub { font-size:13px; color:#AEB6C2; margin:0 0 12px; }
.creatorrow { display:flex; align-items:center; gap:10px; }
.cavatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#00ADEF,#8B5CF6); }
.ccol b { font-size:13px; font-weight:600; display:block; }
.ccol span { font-size:11px; color:#6B7280; }
.follow { margin-left:auto; background:#00ADEF; color:#04121A; font-size:12px; font-weight:700;
border-radius:999px; padding:7px 16px; }
.actrow { margin-top:12px; display:flex; gap:22px; font-size:13px; color:#AEB6C2; }
.actrow .on { color:#00ADEF; }
.sidecol { width:280px; flex-shrink:0; overflow:hidden; }
.overline { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#AEB6C2;
text-transform:uppercase; letter-spacing:0.6px; margin:2px 0 12px; }
.overline .star { color:#FFD24C; }
.feedrow { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid #262A34; }
.thumb { position:relative; width:124px; height:70px; border-radius:8px; flex-shrink:0;
background:linear-gradient(150deg,#1F222B,#00ADEF); }
.minigold { position:absolute; top:5px; left:5px; width:16px; height:16px; border-radius:50%;
background:#FFD24C; color:#04121A; font-size:9px; display:flex; align-items:center; justify-content:center; }
.dur { position:absolute; right:4px; bottom:4px; background:rgba(0,0,0,0.7); color:#fff; font-size:9px;
font-weight:700; border-radius:3px; padding:1px 4px; }
.frtitle { font-size:13px; font-weight:600; margin:0 0 3px; }
.frmeta { font-size:11px; color:#6B7280; margin:0; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:52px; background:rgba(13,14,18,0.94);
border-top:0.5px solid #262A34; display:flex; align-items:center; justify-content:space-around;
padding:0 60px; }
.tabicon { font-size:20px; color:#6B7280; }
.tabicon.on { color:#00ADEF; }
.uploadring { width:32px; height:32px; border-radius:50%; background:#00ADEF; color:#04121A;
display:flex; align-items:center; justify-content:center; font-size:16px; }
</style></head>
<body>
<nav>
<p class="wordmark">Vimeo (iOS)</p>
<div class="navicons"><span>🔍</span><span>🔔</span></div>
</nav>
<div class="layout">
<div class="playercol">
<div class="player">
<div class="playbtn">▶</div>
<div class="qchip">HD</div>
<div class="controls">
<span class="tc">6:12</span>
<div class="track"><div class="fill"></div><div class="knob"></div></div>
<span class="tc">16:04</span>
</div>
</div>
<div class="meta">
<div class="staffpill">★ Staff Pick</div>
<p class="vtitle">Notes From a Quiet Coastline</p>
<p class="vsub">48K plays · 2 days ago</p>
<div class="creatorrow">
<div class="cavatar"></div>
<div class="ccol"><b>Halden Reyes</b><span>Staff · 12.4K followers</span></div>
<span class="follow">Follow</span>
</div>
<div class="actrow"><span class="on">♥ 1.2K</span><span>💬 84</span><span>↗ Share</span></div>
</div>
</div>
<div class="sidecol">
<div class="overline"><span class="star">★</span>Staff Picks</div>
<div class="feedrow">
<div class="thumb"><span class="minigold">★</span><span class="dur">4:12</span></div>
<div><p class="frtitle">Glasswork</p><p class="frmeta">by Studio Arlo · 37K plays</p></div>
</div>
<div class="feedrow">
<div class="thumb" style="background:linear-gradient(150deg,#1F222B,#8B5CF6);"><span class="minigold">★</span><span class="dur">2:47</span></div>
<div><p class="frtitle">Between Frames</p><p class="frmeta">by Nadia Kovač · 21K plays</p></div>
</div>
<div class="feedrow" style="border-bottom:none;">
<div class="thumb" style="background:linear-gradient(150deg,#1F222B,#1AB7EA);"><span class="dur">7:30</span></div>
<div><p class="frtitle">Low Tide Diary</p><p class="frmeta">by Renn Okafor · 9.4K plays</p></div>
</div>
</div>
</div>
<div class="tabbar">
<span class="tabicon on">⌂</span>
<span class="tabicon">🔍</span>
<div class="uploadring">▶</div>
<span class="tabicon">✉</span>
<span class="tabicon">👤</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f7; color: #080a0f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f7; color: #080a0f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #080a0f; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #75787f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.3px; background: #00befa; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.3px; background: #f5f5f7; color: #080a0f;
border: 1px solid #00befa; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f5f5f7; color: #1d1d1f;
border: 1px solid #bababd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #75787f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #2c7ed0; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f7; color:#1d1d1f; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#75787f; }
.navlinks .active { color:#1d1d1f; border-bottom:2px solid #00befa; padding-bottom:20px; margin-bottom:-21px; }
.search { width:180px; height:32px; border-radius:8px; background:#f2f2f2; border:1px solid #e2e2e2; }
main { flex:1 1 auto; display:flex; gap:20px; padding:20px 32px; min-height:0; }
.left { flex:1.1; display:flex; flex-direction:column; gap:12px; min-height:0; }
.gallery { flex:1; border-radius:12px; position:relative; min-height:0;
background:linear-gradient(145deg,#e9ecef,#c7d2da 55%,#8f9aa5); border:1px solid #e4e5e6; }
.gallery::after { content:''; position:absolute; left:16px; right:16px; bottom:16px; height:10px; border-radius:4px;
background:rgba(0,0,0,0.15); }
.thumbs { flex:0 0 40px; display:flex; gap:8px; }
.thumbs span { flex:1; border-radius:8px; background:#dfe3e6; border:1px solid #e4e5e6; }
.thumbs span.active { border:2px solid #00befa; }
.right { flex:1; display:flex; flex-direction:column; min-height:0; }
.title { font-size:22px; font-weight:600; margin:0 0 6px; letter-spacing:-0.3px; }
.stars { color:#ff9900; font-size:13px; margin:0 0 10px; }
.price { font-size:22px; font-weight:700; margin:0 0 12px; }
.badges { display:flex; gap:8px; margin-bottom:12px; }
.badge { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; color:#fff; }
.badge.tech { background:#2c7ed0; }
.badge.green { background:#00db84; }
.spectable { flex:1; background:#ffffff; border:1px solid #e4e5e6; border-radius:12px; padding:12px 16px; min-height:0; }
.row { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid #f1f3f5; }
.row span:first-child { color:#75787f; text-transform:uppercase; font-size:11px; letter-spacing:0.3px; }
.row span:last-child { font-family:SFMono-Regular, Consolas, monospace; }
.cta { margin-top:12px; background:#00befa; color:#fff; border:none; border-radius:8px; padding:12px 0;
font-size:16px; font-weight:600; text-align:center; }
footer { flex:0 0 auto; height:48px; background:#080a0f; color:#e2e2e2; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Anker Docking 2</p>
<div class="navlinks"><span>Chargers</span><span class="active">Docking</span><span>Displays</span><span>Cables</span></div>
<div class="search"></div>
</nav>
<main>
<div class="left">
<div class="gallery"></div>
<div class="thumbs"><span class="active"></span><span></span><span></span><span></span></div>
</div>
<div class="right">
<h1 class="title">14-in-1 USB-C Docking Station</h1>
<div class="stars">★★★★★ 4.7 (2,318 ratings)</div>
<div class="badges"><span class="badge tech">100W PD</span><span class="badge green">GaN</span></div>
<div class="price">$129.99</div>
<div class="spectable">
<div class="row"><span>Ports</span><span>14 total</span></div>
<div class="row"><span>Display Out</span><span>Dual 4K@60Hz</span></div>
<div class="row"><span>Data Speed</span><span>10Gbps USB-C</span></div>
<div class="row"><span>Dimensions</span><span>210 × 78 × 20mm</span></div>
</div>
<div class="cta">Add to Cart</div>
</div>
</main>
<footer>
<span>© Anker Docking 2</span>
<span>Free returns within 30 days</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #fcfdff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #fcfdff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.4px; margin: 0; color: #fcfdff; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #a1a4a5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #fcfdff; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #000000; color: #fcfdff;
border: 1px solid #fcfdff; border-radius: 8px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #0a0a0c; color: #fcfdff;
border: 1px solid #3f3f40; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a1a4a5; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; background: #101012; color: rgba(252,253,255,0.86);
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#fcfdff; box-sizing:border-box;
font-family:Georgia, "Times New Roman", Times, serif; }
* { box-sizing:border-box; }
.ui { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid rgba(255,255,255,.06); }
.brand { font-weight:700; font-size:15px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:rgba(252,253,255,.7); }
.btnw { background:#fcfdff; color:#000; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { position:relative; padding:52px 32px 20px; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-120px; left:20%; width:520px; height:340px;
background:radial-gradient(circle, rgba(255,89,0,.22) 0%, transparent 70%); }
.hero::after { content:''; position:absolute; top:-80px; right:5%; width:420px; height:300px;
background:radial-gradient(circle, rgba(0,117,255,.24) 0%, transparent 70%); }
.hero h1 { position:relative; font-size:66px; font-weight:400; line-height:1; letter-spacing:-1.5px; margin:0 0 14px; max-width:640px; }
.hero p { position:relative; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:15px;
color:rgba(252,253,255,.86); margin:0 0 18px; max-width:420px; }
.heroctas { position:relative; display:flex; gap:10px; }
.btnghost { background:#101012; color:#fcfdff; border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:8px 16px;
font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-size:13px; font-weight:500; }
.split { display:grid; grid-template-columns:1.05fr 1fr; gap:18px; padding:6px 32px 18px; }
.codewin { background:#06060a; border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:16px; }
.dots { display:flex; gap:6px; margin-bottom:10px; }
.dot { width:9px; height:9px; border-radius:50%; }
.dot.r{background:#ff2047;} .dot.y{background:#ffc53d;} .dot.g{background:#11ff99;}
pre { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:11.5px; line-height:1.6;
color:rgba(252,253,255,.86); margin:0; }
.tok { color:#3b9eff; }
.emailcard { background:#0a0a0c; border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:16px;
font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.emailcard .from { font-size:11px; color:rgba(252,253,255,.7); margin-bottom:8px; }
.emailcard h3 { font-size:16px; margin:0 0 8px; font-weight:500; letter-spacing:-.3px; font-family:Georgia,serif; }
.emailcard p { font-size:12px; color:rgba(252,253,255,.7); margin:0 0 4px; font-family:-apple-system,sans-serif; }
.badge { display:inline-block; background:#101012; border-radius:999px; padding:3px 9px; font-size:10.5px;
color:rgba(252,253,255,.86); font-family:-apple-system,sans-serif; margin-top:8px; }
footer { display:flex; justify-content:space-between; padding:12px 32px; font-family:-apple-system,sans-serif;
font-size:11px; color:#888e90; border-top:1px solid rgba(255,255,255,.04); }
</style></head>
<body>
<nav class="ui">
<div class="brand">Resend</div>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Docs</span><span>Customers</span></div>
<button class="btnw">Get started</button>
</nav>
<section class="hero">
<h1>Email for<br>developers</h1>
<p>The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.</p>
<div class="heroctas">
<button class="btnw ui">Get started</button>
<button class="btnghost">Read the docs</button>
</div>
</section>
<div class="split">
<div class="codewin">
<div class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></div>
<pre>resend.emails.send({
from: <span class="tok">'[email protected]'</span>,
to: <span class="tok">'[email protected]'</span>,
subject: <span class="tok">'hello world'</span>,
react: EmailTemplate()
});</pre>
</div>
<div class="emailcard">
<div class="from">from: Resend <[email protected]></div>
<h3>Welcome aboard</h3>
<p>Your account is ready. Start sending emails your users actually receive.</p>
<span class="badge">● delivered</span>
</div>
</div>
<footer class="ui">
<span>© Resend</span>
<span>Resend · Docs · Status · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0078d4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0078d4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bde6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #091f2c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0078d4; color: #091f2c;
border: 1px solid #091f2c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0078d4; color: #f5f5f5;
border: 1px solid #278cd9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bde6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #016ab9; color: #091f2c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0e1726; box-sizing:border-box;
font-family:"Segoe UI Variable Text", "Segoe UI", -apple-system, sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"Segoe UI Variable Display", "Segoe UI Variable Text", sans-serif; }
nav { height:54px; display:flex; align-items:center; padding:0 36px; }
.brand { font-size:15px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:0; margin-left:30px; }
.navlinks span { font-size:13px; color:#262626; padding:0 8px; }
.cta-blue { margin-left:auto; background:#0078d4; color:#ffffff; border-radius:8px; height:40px; padding:8px 16px;
display:flex; align-items:center; font-size:15px; font-weight:600; }
.hero { padding:16px 36px 20px; }
.hero h1 { font-size:40px; font-weight:500; line-height:1.17; letter-spacing:-1px; margin:0 0 12px; max-width:520px; }
.hero p { font-size:16px; color:#17253d; line-height:1.5; margin:0 0 16px; max-width:460px; }
.cta-dark { display:inline-flex; background:#091f2c; color:#ffffff; border-radius:8px; height:52px; padding:12px 16px;
align-items:center; font-size:15px; font-weight:600; }
.tabs { display:flex; gap:8px; padding:0 36px 14px; }
.tab { height:40px; border-radius:200px; padding:8px 24px; font-size:16px; font-weight:600; display:flex; align-items:center; color:#0e1726; }
.tab.active { background:#06161f; color:#ffffff; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 36px 20px; }
.card { background:#fefefe; border:1px solid #f2f2f2; border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.card .icon { width:36px; height:36px; border-radius:6px; background:linear-gradient(135deg,#0078d4,#50b0f0); }
.card h3 { font-size:20px; font-weight:600; margin:0; letter-spacing:-0.5px; }
.card p { font-size:14px; color:#17253d; margin:0; line-height:1.4; }
.card .link { font-size:13px; color:#0067b8; }
footer { background:#f2f2f2; padding:10px 36px; display:flex; gap:20px; }
footer span { font-size:11px; color:#616161; }
</style></head>
<body>
<nav>
<p class="brand">Microsoft</p>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Support</span><span>Learn</span></div>
<div class="cta-blue">Sign in</div>
</nav>
<div class="hero">
<h1 class="display">Do more with less effort</h1>
<p>The apps, cloud, and AI tools that help every person and organization achieve more.</p>
<div class="cta-dark">See Microsoft 365 plans</div>
</div>
<div class="tabs">
<div class="tab active">For Home</div>
<div class="tab">For Business</div>
<div class="tab">For Enterprise</div>
</div>
<div class="cards">
<div class="card"><div class="icon"></div><h3>Copilot</h3><p>Your everyday AI companion, built into the apps you already use.</p><span class="link">Learn more ></span></div>
<div class="card"><div class="icon"></div><h3>Microsoft 365</h3><p>Word, Excel, Teams, and cloud storage, together in one subscription.</p><span class="link">View plans ></span></div>
<div class="card"><div class="icon"></div><h3>Azure</h3><p>Build, deploy, and scale applications on a trusted cloud platform.</p><span class="link">Explore Azure ></span></div>
</div>
<footer><span>© Microsoft</span><span>Privacy</span><span>Terms of use</span><span>Trademarks</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4fc3c4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4fc3c4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #2d6162; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #b7e1da; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4fc3c4; color: #000000;
border: 1px solid #b7e1da; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4fc3c4; color: #111111;
border: 1px solid #45a7a7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #2d6162; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #60c8c8; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbf2eb; color:#292929; box-sizing:border-box;
font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f5f4ef; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; box-shadow:0 2px 12px rgba(0,0,0,0.08); position:relative; z-index:2; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:6px; }
.navitem { font-size:13px; font-weight:500; color:#4d4d4d; border-radius:9999px; padding:7px 12px; }
.icon-btn { width:36px; height:36px; border-radius:9999px; background:#ece9df; border:1.5px solid #d9d2bf; }
.dl-btn { background:#b7e1da; color:#292929; border:1.5px solid #2db59e; border-radius:9999px;
padding:8px 16px; font-size:13px; font-weight:500; }
.hero { position:relative; padding:26px 40px 20px; display:flex; align-items:center; gap:36px; }
.herotext { flex:1; }
.h1 { font-family:"Zilla Slab",Georgia,serif; font-size:38px; font-weight:600; line-height:1.08; margin:0 0 10px;
background:linear-gradient(87deg,#8235b8,#974dcb 30%,#ef4967 70%,#ee604d);
-webkit-background-clip:text; background-clip:text; color:transparent; }
.sub { font-size:16px; font-weight:500; color:#4d4d4d; line-height:1.4; margin:0 0 16px; max-width:380px; }
.ctarow { display:flex; gap:12px; }
.cta-primary { background:#4fc3c4; color:#ffffff; border:none; border-radius:9999px; padding:12px 24px;
font-size:14px; font-weight:700; }
.cta-secondary { background:#ffffff; color:#292929; border:1.5px solid #d9d2bf; border-radius:9999px;
padding:12px 24px; font-size:14px; font-weight:500; }
.collage { width:280px; height:180px; position:relative; flex-shrink:0; }
.piece { position:absolute; border-radius:14px; box-shadow:0 0 8px rgba(0,0,0,0.15); }
.pc1 { width:150px; height:110px; background:linear-gradient(135deg,#ffd166,#ffcf3d); left:0; top:10px; transform:rotate(-7deg); }
.pc2 { width:140px; height:100px; background:linear-gradient(135deg,#7ad2c3,#4fc3c4); right:0; top:0; transform:rotate(6deg); }
.pc3 { width:120px; height:90px; background:linear-gradient(135deg,#ff9fb8,#f85482); left:60px; bottom:0; transform:rotate(4deg); }
.features { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
padding:8px 40px 24px; }
.card { background:#ffffff; border:2px solid #e8e4d9; border-radius:16px; padding:16px 18px;
box-shadow:0 0 12px #E8E8E8; display:flex; flex-direction:column; gap:6px; }
.card .tag { font-size:11px; font-weight:700; color:#4fc3c4; text-transform:uppercase; letter-spacing:0.04em; }
.card h3 { font-size:15px; font-weight:700; margin:0; }
.card p { font-size:12px; color:#4d4d4d; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<span class="brand">PicCollage</span>
<div class="navlinks">
<span class="navitem">Templates</span>
<span class="navitem">Stickers</span>
<span class="navitem">Company</span>
</div>
<div style="display:flex; gap:10px; align-items:center;">
<span class="icon-btn"></span>
<button class="dl-btn">Download the App</button>
</div>
</nav>
<section class="hero">
<div class="herotext">
<h1 class="h1">Create & Celebrate</h1>
<p class="sub">The easiest photo & video editing app to add a little magic to your treasured memories.</p>
<div class="ctarow">
<button class="cta-primary">Get PicCollage free</button>
<button class="cta-secondary">See templates</button>
</div>
</div>
<div class="collage">
<div class="piece pc1"></div>
<div class="piece pc2"></div>
<div class="piece pc3"></div>
</div>
</section>
<section class="features">
<div class="card"><span class="tag">Templates</span><h3>A new drop every week</h3><p>Fresh layouts and stickers so you never run out of inspiration.</p></div>
<div class="card"><span class="tag">AI assist</span><h3>Magic that stays out of your way</h3><p>AI tools expand your idea — they never take the creative process out of your hands.</p></div>
<div class="card"><span class="tag">Sharing</span><h3>Made for every small moment</h3><p>Not just birthdays — celebrate the Tuesday photo dump too.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #08090a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #08090a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8a8b8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #08090a; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #08090a; color: #f5f5f5;
border: 1px solid #2e2f30; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a0a0b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#08090A; color:#F7F8F8; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.sidebar { width:220px; flex:0 0 auto; background:#141516; border-right:1px solid #23252A; padding:18px 14px; }
.sbrand { font-size:14px; font-weight:700; margin-bottom:18px; letter-spacing:-0.2px; }
.snav { font-size:13px; color:#8A8F98; padding:7px 8px; border-radius:6px; margin-bottom:2px; }
.snav.on { background:#1C1D1F; color:#F7F8F8; }
.main { flex:1; padding:18px 24px; }
.listhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.listtitle { font-size:15px; font-weight:600; }
.cmdk { background:#1C1D1F; border:1px solid #23252A; border-radius:6px; padding:5px 10px; font-size:11px; color:#8A8F98; }
.row { display:flex; align-items:center; gap:12px; padding:10px 8px; border-bottom:1px solid #23252A; font-size:13px; }
.status { width:14px; height:14px; border-radius:50%; border:1.5px solid #8A8F98; flex:0 0 auto; }
.status.progress { background:conic-gradient(#F2C94C 180deg, transparent 0); border-color:#F2C94C; }
.status.done { background:#5E6AD2; border-color:#5E6AD2; }
.status.review { border-color:#5E6AD2; background:conic-gradient(#5E6AD2 270deg, transparent 0); }
.idcode { color:#8A8F98; font-size:12px; width:64px; flex:0 0 auto; }
.rtitle { flex:1; }
.bars { display:flex; gap:2px; }
.bar { width:3px; height:10px; background:#23252A; border-radius:1px; }
.bar.on { background:#8A8F98; }
.avatar { width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,#5E6AD2,#23252A); }
.cmdoverlay { position:absolute; top:70px; left:50%; transform:translateX(-50%); width:480px; background:#1C1D1F;
border:1px solid #23252A; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.cmdinput { padding:14px 16px; border-bottom:1px solid #23252A; font-size:14px; color:#8A8F98; }
.cmditem { padding:10px 16px; font-size:13px; display:flex; align-items:center; gap:10px; }
.cmditem.focus { background:rgba(94,106,210,0.14); color:#F7F8F8; }
.cmditem span.g { color:#8A8F98; margin-left:auto; }
</style></head>
<body>
<div class="wrap">
<div class="sidebar">
<div class="sbrand">Linear (iOS)</div>
<div class="snav on">◉ Issues</div>
<div class="snav">◯ Cycles</div>
<div class="snav">◯ Projects</div>
<div class="snav">◯ Views</div>
</div>
<div class="main">
<div class="listhead"><span class="listtitle">In Progress</span><span class="cmdk">⌘K</span></div>
<div class="row"><div class="status progress"></div><span class="idcode">ENG-142</span><span class="rtitle">Fix flaky auth token refresh test</span>
<div class="bars"><div class="bar on"></div><div class="bar on"></div><div class="bar"></div></div><div class="avatar"></div></div>
<div class="row"><div class="status review"></div><span class="idcode">ENG-138</span><span class="rtitle">Add keyboard nav to command palette</span>
<div class="bars"><div class="bar on"></div><div class="bar"></div><div class="bar"></div></div><div class="avatar"></div></div>
<div class="row"><div class="status"></div><span class="idcode">ENG-151</span><span class="rtitle">Migrate webhook queue to new worker</span>
<div class="bars"><div class="bar on"></div><div class="bar on"></div><div class="bar on"></div></div><div class="avatar"></div></div>
<div class="row"><div class="status done"></div><span class="idcode">ENG-129</span><span class="rtitle">Ship dark-mode toggle in settings</span>
<div class="bars"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div><div class="avatar"></div></div>
</div>
</div>
<div class="cmdoverlay">
<div class="cmdinput">Search issues, projects, and commands...</div>
<div class="cmditem focus">Create new issue <span class="g">⌘⏎</span></div>
<div class="cmditem">Go to Cycles <span class="g">G C</span></div>
<div class="cmditem">Switch workspace <span class="g">⌘O</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0b0b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0b0b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0b0b; color: #ffffff;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0b0b; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f0f0f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b0b0b; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #212121; }
.brand { font-weight:700; font-size:15px; letter-spacing:-.5px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#b9b9b9; }
.btnred { background:#f36458; color:#fff; border:none; border-radius:9999px; padding:8px 18px; font-size:13px; }
.hero { padding:44px 32px 24px; }
.hero h1 { font-size:80px; font-weight:400; line-height:1; letter-spacing:-3.2px; margin:0 0 14px; max-width:760px; }
.hero p { font-size:15px; color:#b9b9b9; margin:0 0 18px; max-width:440px; }
.heroctas { display:flex; gap:10px; }
.btnghost { background:#212121; color:#b9b9b9; border:none; border-radius:9999px; padding:8px 16px; font-size:13px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 32px 20px; }
.darkcard { background:#212121; border:1px solid #353535; border-radius:6px; padding:18px; }
.darkcard h3 { font-size:16px; margin:0 0 6px; letter-spacing:-.24px; }
.darkcard p { font-size:12.5px; color:#b9b9b9; margin:0; line-height:1.5; }
.tag { display:inline-block; font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:9.5px;
text-transform:uppercase; color:#797979; letter-spacing:.05em; margin-bottom:8px; }
.codebar { margin:0 32px 20px; background:#0b0b0b; border:1px solid #212121; border-radius:6px; padding:14px 18px;
display:flex; align-items:center; gap:10px; }
.codebar .prompt { color:#19d600; }
.codebar span.cmd { color:#b9b9b9; font-size:12px; }
footer { display:flex; justify-content:space-between; padding:12px 32px; font-size:11px; color:#797979;
border-top:1px solid #212121; }
</style></head>
<body>
<nav>
<div class="brand">Sanity</div>
<div class="navlinks"><span>Platform</span><span>Solutions</span><span>Docs</span><span>Pricing</span></div>
<button class="btnred">Get started</button>
</nav>
<section class="hero">
<h1>Content as<br>structured data</h1>
<p>The unified content platform for developers who build with structured content, not documents.</p>
<div class="heroctas">
<button class="btnred">Start building</button>
<button class="btnghost">Read the docs</button>
</div>
</section>
<div class="split">
<div class="darkcard"><span class="tag mono">Sanity Studio</span><h3>A React app you fully own</h3><p>Customize every workflow without fighting your CMS.</p></div>
<div class="darkcard"><span class="tag mono">Content Lake</span><h3>Query content like a database</h3><p>GROQ lets you fetch exactly the shape you need.</p></div>
</div>
<div class="codebar mono">
<span class="prompt">$</span><span class="cmd">npx sanity@latest init --template blog</span>
</div>
<footer>
<span>© Sanity</span>
<span>Sanity · Docs · Community · Status</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0096d6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0096d6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cae7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0073a8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0096d6; color: #000000;
border: 1px solid #0073a8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0096d6; color: #f5f5f5;
border: 1px solid #27a5db; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cae7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0090cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:"Forma DJR UI",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e0e0e0; }
.logo { font-size:20px; font-weight:700; color:#0096d6; }
.search { background:#f7f7f7; border-radius:24px; height:36px; padding:0 16px; font-size:14px; color:#9e9e9e;
display:flex; align-items:center; width:220px; }
.btn-primary { background:#0096d6; color:#ffffff; border-radius:4px; padding:10px 20px; font-size:14px;
font-weight:600; }
.hero { background:#f7f7f7; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:28px 40px; gap:20px; }
.hero h1 { font-size:38px; font-weight:700; line-height:1.17; letter-spacing:-0.5px; margin:0 0 12px; }
.hero p { font-size:16px; color:#595959; margin:0 0 16px; }
.row { display:flex; gap:10px; }
.btn-outline { background:#ffffff; color:#0096d6; border:1.5px solid #0096d6; border-radius:4px;
padding:10px 20px; font-size:14px; font-weight:600; }
.hero-visual { height:200px; background:linear-gradient(135deg,#e6f4fb,#0096d6); border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:24px 40px; }
.card { border:1px solid #e0e0e0; border-radius:8px; padding:16px; }
.card .thumb { height:80px; background:#eeeeee; border-radius:4px; margin-bottom:10px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 6px; }
.card .price { font-size:16px; font-weight:700; }
.card .badge { display:inline-block; background:#e6f4d9; color:#0c7d2f; border-radius:4px; padding:3px 8px;
font-size:11px; font-weight:600; margin-top:6px; }
footer { border-top:1px solid #e0e0e0; padding:14px 40px; text-align:center; font-size:12px; color:#767676; }
</style></head>
<body>
<nav>
<span class="logo">HP</span>
<span class="search">Search products</span>
<span class="btn-primary">Shop laptops</span>
</nav>
<section class="hero">
<div>
<h1>Power through your day</h1>
<p>Discover laptops and printers engineered for the way you work.</p>
<div class="row">
<button class="btn-primary">Shop now</button>
<button class="btn-outline">Learn more</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<div class="grid">
<div class="card"><div class="thumb"></div><h3>Spectre x360</h3><div class="price">$1,399</div><span class="badge">In stock</span></div>
<div class="card"><div class="thumb"></div><h3>OfficeJet Pro</h3><div class="price">$249</div><span class="badge">In stock</span></div>
<div class="card"><div class="thumb"></div><h3>OMEN 16</h3><div class="price">$1,799</div><span class="badge">In stock</span></div>
</div>
<footer>© HP · Keep Reinventing</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff0f3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #fff0f3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fffdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A2E; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#FFFFFF; padding:28px 20px; position:relative;
border-right:1px solid #F3DDE3; }
.greet { font-size:20px; font-weight:700; letter-spacing:-0.3px; margin:6px 0 20px; }
.wheelbox { display:flex; justify-content:center; margin:10px 0 18px; }
.wheel { width:220px; height:220px; border-radius:50%; position:relative;
background: conic-gradient(#FF6B81 0 22%, #FFD9DF 22% 30%, #C5B3E6 30% 46%, #A893D6 46% 50%, #F3DDE3 50% 100%);
display:flex; align-items:center; justify-content:center; }
.wheel::before { content:''; position:absolute; inset:22px; background:#FFFFFF; border-radius:50%; }
.wheelcenter { position:relative; text-align:center; }
.wheelcenter .day { font-size:28px; font-weight:700; }
.wheelcenter .phase { font-size:12px; color:#6E6A82; margin-top:2px; }
.today-dot { position:absolute; width:10px; height:10px; background:#FF6B81; border-radius:50%;
top:8px; left:50%; transform:translateX(-50%); box-shadow:0 0 0 4px rgba(255,107,129,0.25); }
.pill { display:block; margin:0 auto 16px; background:#FF6B81; color:#fff; font-size:13px; font-weight:600;
border-radius:26px; padding:10px 0; text-align:center; width:170px; }
.predcard { background:#FFF0F3; border-radius:20px; padding:16px; }
.predcard .lbl { font-size:11px; font-weight:700; text-transform:uppercase; color:#6E6A82; letter-spacing:0.4px; }
.predcard .em { font-size:19px; font-weight:700; color:#FF6B81; margin:4px 0; }
.predcard .sub { font-size:12px; color:#6E6A82; }
.chipgrid { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chipgrid span { background:#FFF0F3; color:#1A1A2E; font-size:12px; font-weight:600;
padding:8px 12px; border-radius:18px; }
.chipgrid span.sel { background:#FFD9DF; border:1.5px solid #FF6B81; color:#E85870; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:rgba(255,255,255,0.96);
border-top:1px solid #F3DDE3; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#A09CB0; text-align:center; }
.tab.on { color:#FF6B81; font-weight:700; }
.tab .dot { display:block; width:6px; height:6px; border-radius:50%; margin:0 auto 3px; background:currentColor; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0; color:#1A1A2E; }
.brand span { color:#FF6B81; }
.tag { font-size:14px; color:#6E6A82; line-height:1.55; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:12px; border:1px solid #F3DDE3; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6E6A82; text-align:center; }
.typeblock .t1 { font-size:26px; font-weight:700; letter-spacing:-0.4px; }
.typeblock .t2 { font-size:13px; color:#6E6A82; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#FFF0F3; border:1px solid #F3DDE3; color:#6E6A82; }
.footer { margin-top:auto; border-top:1px solid #F3DDE3; padding-top:16px; font-size:11px; color:#A09CB0; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<p class="greet">Good morning, Mia</p>
<div class="wheelbox">
<div class="wheel">
<span class="today-dot"></span>
<div class="wheelcenter"><div class="day">Day 14</div><div class="phase">Follicular phase</div></div>
</div>
</div>
<div class="pill">Log period</div>
<div class="predcard">
<div class="lbl">Next period</div>
<div class="em">In 5 days</div>
<div class="sub">Expected May 19 · 87% confidence</div>
</div>
<div class="chipgrid">
<span class="sel">Cramps</span><span>Mood</span><span>Energy</span><span>Sleep</span><span>Headache</span>
</div>
<div class="tabbar">
<div class="tab on"><span class="dot"></span>Today</div>
<div class="tab"><span class="dot"></span>Calendar</div>
<div class="tab"><span class="dot"></span>Insights</div>
<div class="tab"><span class="dot"></span>Partner</div>
<div class="tab"><span class="dot"></span>More</div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Flo (iOS)<span>.</span></h1>
<p class="tag">A soft blush world built around one circular object — the cycle wheel — where color reassures instead of alarms.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#FF6B81"></div><small>#FF6B81</small></div>
<div class="sw"><div class="chip2" style="background:#C5B3E6"></div><small>#C5B3E6</small></div>
<div class="sw"><div class="chip2" style="background:#FFF0F3"></div><small>#FFF0F3</small></div>
<div class="sw"><div class="chip2" style="background:#7DC9A8"></div><small>#7DC9A8</small></div>
<div class="sw"><div class="chip2" style="background:#F2B36B"></div><small>#F2B36B</small></div>
</div>
<div class="typeblock">
<div class="t1">Period in 5 days</div>
<div class="t2">Inter · 20pt / 700 · reassuring forecast copy, never alarming</div>
</div>
<div class="taglist">
<span>Cycle phase wheel</span><span>Prediction card</span><span>Symptom chip grid</span>
<span>Phase legend</span><span>Gentle motion, no red</span>
</div>
<div class="footer">Pure-white canvas · blush surface #FFF0F3 · coral leads, lavender partners</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2efe4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2efe4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #767570; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #38b569; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2efe4; color: #000000;
border: 1px solid #38b569; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f2efe4; color: #111111;
border: 1px solid #cecbc2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767570; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d4e6d0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#F2EFE4; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.room { width:960px; height:640px; display:flex; flex-direction:column; }
.topbar { height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; }
.chev { color:#B8B2A0; font-size:16px; }
.icons { display:flex; gap:18px; color:#B8B2A0; font-size:16px; }
.clubline { padding:0 26px; display:flex; align-items:center; gap:6px; font-size:12px; color:#B8B2A0; }
.dot { width:6px; height:6px; border-radius:50%; background:#38B569; }
.roomtitle { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:27px;
padding:6px 26px 18px; letter-spacing:-0.2pt; }
.stage { flex:1; padding:0 26px; overflow:hidden; }
.overline { font-size:10.5px; font-weight:700; letter-spacing:1pt; text-transform:uppercase;
color:#837D6D; margin:8px 0 12px; }
.grid { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:8px; }
.speaker { width:74px; text-align:center; }
.circle { width:58px; height:58px; border-radius:50%; margin:0 auto 6px; position:relative;
display:flex; align-items:center; justify-content:center; color:#2A2620; font-size:18px; font-weight:700; }
.peach { background:linear-gradient(135deg,#F4C77B,#E0A24B); }
.sage { background:linear-gradient(135deg,#9FD8B4,#5FB484); }
.lavender { background:linear-gradient(135deg,#C9B6E8,#9C7FD0); }
.coral { background:linear-gradient(135deg,#F2A9A0,#D9776B); }
.sky { background:linear-gradient(135deg,#A9C7E8,#6E9CD0); }
.speaking { box-shadow:0 0 0 3px #38B569, 0 0 0 9px rgba(56,181,105,0.18); }
.hostpin { position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%;
background:#242220; font-size:9px; display:flex; align-items:center; justify-content:center; }
.muted { opacity:0.55; }
.sname { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srole { font-size:10px; color:#837D6D; margin-top:1px; }
.srole.gold { color:#E9C46A; }
.footer { flex:0 0 72px; border-top:0.5px solid #3A372F; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.handpill { display:inline-flex; align-items:center; gap:8px; background:#2E2B27; border-radius:999px;
padding:12px 20px; font-size:15px; font-weight:700; }
.rightctrl { display:flex; align-items:center; gap:14px; }
.pulse { width:9px; height:9px; border-radius:50%; background:#38B569; box-shadow:0 0 0 5px rgba(56,181,105,0.18); }
.mic { font-size:19px; color:#F2EFE4; }
</style></head>
<body>
<div class="room">
<div class="topbar"><span class="chev">︿</span><span class="icons"><span>👤＋</span><span>⋯</span></span></div>
<div class="clubline"><span class="dot"></span> Clubhouse (iOS) Design Mornings · Open</div>
<div class="roomtitle">What we got wrong shipping our first serif ☕️</div>
<div class="stage">
<div class="overline">Speakers</div>
<div class="grid">
<div class="speaker"><div class="circle sage speaking">JC<div class="hostpin">🎙️</div></div>
<div class="sname">Jia Chen</div><div class="srole">Host</div></div>
<div class="speaker"><div class="circle coral">MP</div>
<div class="sname">Marco P.</div><div class="srole gold">Moderator</div></div>
<div class="speaker"><div class="circle lavender muted">RT</div>
<div class="sname">Rina T.</div><div class="srole">Speaker</div></div>
</div>
<div class="overline">Followed by the speakers</div>
<div class="grid">
<div class="speaker"><div class="circle peach">EW</div><div class="sname">Ela W.</div></div>
<div class="speaker"><div class="circle sky">DK</div><div class="sname">Devon K.</div></div>
<div class="speaker"><div class="circle sage">NB</div><div class="sname">Noor B.</div></div>
<div class="speaker"><div class="circle coral">TL</div><div class="sname">Tomas L.</div></div>
</div>
<div class="overline">Others in the room · 218</div>
<div class="grid">
<div class="speaker"><div class="circle lavender">+</div><div class="sname">and 218 others</div></div>
</div>
</div>
<div class="footer">
<div class="handpill">✋ Raise hand</div>
<div class="rightctrl"><div class="pulse"></div><span class="mic">🎙️</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: 0.15px; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 1.2px; background: #fb8077; color: #000000;
border: none; border-radius: 2px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 1.2px; background: transparent; color: #191919;
border: 1px solid #fb8077; border-radius: 2px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #191919;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.3; letter-spacing: 0.4px; background: #fff0ef; color: #e5665d;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:'Alegreya', Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
.abel { font-family:'Abel', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform:uppercase; }
.announce { height:30px; background:#191919; color:#e2e2e2; display:flex; align-items:center; justify-content:center;
font-family:'Abel',sans-serif; text-transform:uppercase; font-size:11px; letter-spacing:1.2px; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eeeeee; }
.logo { font-family:'Abel',sans-serif; text-transform:uppercase; font-size:18px; letter-spacing:2px; }
.navlinks { display:flex; gap:22px; font-family:'Abel',sans-serif; text-transform:uppercase; font-size:12px;
letter-spacing:1.4px; color:#191919; }
.crumb { padding:12px 32px 0; font-family:'Abel',sans-serif; font-size:11px; letter-spacing:0.6px;
text-transform:uppercase; color:#777; }
.crumb b { color:#191919; }
main { display:flex; height:calc(640px - 30px - 56px - 30px); }
.stage { width:430px; background:#f8f8f8; position:relative; display:flex; align-items:center; justify-content:center;
border-right:1px solid #e2e2e2; }
.pot { position:relative; width:190px; }
.pot .rim { width:170px; height:26px; margin:0 auto; background:linear-gradient(180deg,#e8988f,#d97a6d);
border-radius:10px 10px 0 0; }
.pot .body { width:190px; height:170px; background:linear-gradient(160deg,#fb8077 0%,#e5665d 55%,#c85a4f 100%);
border-radius:6px 6px 26px 26px; box-shadow:0 24px 40px rgba(0,0,0,0.14); position:relative; overflow:hidden; }
.pot .body::after { content:''; position:absolute; left:14px; top:10px; width:44px; height:120px;
background:rgba(255,255,255,0.14); border-radius:20px; transform:rotate(6deg); }
.plant { position:absolute; left:50%; top:-70px; transform:translateX(-50%); width:110px; height:80px; }
.leaf { position:absolute; width:16px; height:60px; background:#556b4f; border-radius:50% 50% 50% 0;
bottom:0; transform-origin:bottom center; }
.thumbrow { position:absolute; bottom:22px; left:22px; display:flex; gap:8px; }
.thumb { width:56px; height:56px; background:#fff; border:1px solid #e2e2e2; }
.thumb.active { border-color:#191919; }
.cat-badge { position:absolute; top:22px; left:22px; background:#fff0ef; color:#e5665d; font-family:'Abel',sans-serif;
text-transform:uppercase; font-size:11px; letter-spacing:0.6px; padding:4px 10px; }
.info { flex:1; padding:26px 34px 0; display:flex; flex-direction:column; }
h1 { font-family:'Abel',sans-serif; text-transform:uppercase; font-weight:400; font-size:26px; letter-spacing:0.4px;
margin:0 0 10px; line-height:1.15; }
.price { font-family:'Abel',sans-serif; font-size:18px; letter-spacing:0.3px; color:#191919; margin-bottom:16px; }
p.desc { font-size:15px; line-height:1.65; color:#555; margin:0 0 18px; max-width:420px; }
.opt-label { font-family:'Abel',sans-serif; font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
color:#777; margin-bottom:8px; }
.swatches { display:flex; gap:10px; margin-bottom:20px; }
.sw { width:34px; height:34px; border:1px solid #e2e2e2; }
.sw.active { outline:1px solid #191919; outline-offset:2px; }
.sw1 { background:#d6c3a5; } .sw2 { background:#8a8f83; } .sw3 { background:#3d3a37; } .sw4 { background:#c98a75; }
.size-row { display:flex; gap:10px; margin-bottom:22px; }
.size { border:1px solid #191919; font-family:'Abel',sans-serif; text-transform:uppercase; font-size:12px;
letter-spacing:0.8px; padding:8px 16px; }
.size.active { background:#191919; color:#fff; }
.cta-row { display:flex; gap:10px; margin-top:auto; margin-bottom:16px; }
.btn-primary { background:#fb8077; color:#fff; border:none; font-family:'Abel',sans-serif; text-transform:uppercase;
letter-spacing:1.2px; font-size:14px; padding:14px 30px; }
.btn-secondary { background:transparent; color:#191919; border:1px solid #191919; font-family:'Abel',sans-serif;
text-transform:uppercase; letter-spacing:1.2px; font-size:14px; padding:13px 26px; }
footer { height:30px; border-top:1px solid #eeeeee; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-family:'Abel',sans-serif; font-size:10px; letter-spacing:0.8px; text-transform:uppercase; color:#777; }
</style></head>
<body>
<div class="announce">Free shipping on orders over $85</div>
<nav>
<span class="logo">Anamese</span>
<div class="navlinks"><span>Planters</span><span>Glazes</span><span>Studio</span><span>Journal</span></div>
<span class="abel" style="font-size:12px;letter-spacing:1px;">Cart (1)</span>
</nav>
<div class="crumb">Planters / Tabletop / <b>Kiln Series</b></div>
<main>
<div class="stage">
<div class="cat-badge">Glazed</div>
<div class="pot">
<div class="plant">
<div class="leaf" style="left:20px; transform:rotate(-18deg);"></div>
<div class="leaf" style="left:44px; height:74px; transform:rotate(-4deg);"></div>
<div class="leaf" style="left:66px; transform:rotate(14deg);"></div>
</div>
<div class="rim"></div>
<div class="body"></div>
</div>
<div class="thumbrow"><div class="thumb active"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<h1>Kiln Series Table Planter, No. 4</h1>
<div class="price">$68.00</div>
<p class="desc">Hand-thrown stoneware finished with a reactive terracotta glaze — every piece kilned in small batches, so surface and tone vary slightly, vessel to vessel.</p>
<div class="opt-label">Glaze</div>
<div class="swatches">
<div class="sw sw1 active"></div><div class="sw sw2"></div><div class="sw sw3"></div><div class="sw sw4"></div>
</div>
<div class="opt-label">Size</div>
<div class="size-row">
<span class="size active">4"</span><span class="size">6"</span><span class="size">9"</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Shop Collection</button>
</div>
</div>
</main>
<footer><span>© Anamese</span><span>Made to order · Ships in 5–7 days</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #6366f1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #6366f1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b3b5f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0007cd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6366f1; color: #000000;
border: 1px solid #0007cd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #6366f1; color: #f5f5f5;
border: 1px solid #7a7df2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b3b5f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5357eb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0f0f0f; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.glow { position:absolute; width:520px; height:520px; border-radius:50%; top:-180px; left:220px;
background:radial-gradient(circle, rgba(0,255,255,0.12) 0%, rgba(0,255,255,0) 70%); }
nav { position:relative; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid rgba(255,255,255,0.08); }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; color:rgba(255,255,255,0.6); }
.btn-white { background:#fff; color:#0f0f0f; border-radius:4px; padding:9px 18px; font-size:13px; font-weight:500; }
.hero { position:relative; padding:44px 40px 20px; }
.hero h1 { font-size:52px; font-weight:400; line-height:0.9; letter-spacing:-1px; margin:0 0 14px; max-width:600px; }
.hero p { font-size:16px; color:rgba(255,255,255,0.6); max-width:440px; margin:0 0 18px; }
.row { display:flex; gap:10px; }
.btn-cyan { background:rgba(0,255,255,0.12); border:1px solid #0096ff; color:#fff; border-radius:4px; padding:9px 18px; font-size:13px; font-weight:500; }
.btn-ghost { border:1px solid #2c2c2c; color:#fff; border-radius:4px; padding:9px 18px; font-size:13px; font-weight:500; }
.grid { position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:16px; padding:8px 40px 30px; }
.code { background:#000; border:1px solid rgba(255,255,255,0.10); border-radius:4px; padding:16px;
font-family:"Consolas","Menlo",monospace; font-size:12px; line-height:1.7; color:rgba(255,255,255,0.85);
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.15); }
.code .kw { color:#00ffff; } .code .str { color:#0089ff; }
.side { display:flex; flex-direction:column; gap:10px; }
.stat { background:#000; border:1px solid rgba(255,255,255,0.08); border-radius:4px; padding:14px; }
.stat .num { font-family:"Menlo",monospace; font-size:26px; font-weight:700; }
.stat .lbl { font-size:11px; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.05em; margin-top:4px;}
</style></head>
<body>
<div class="glow"></div>
<nav>
<p class="brand">Composio</p>
<div class="navlinks"><span>Tools</span><span>Agents</span><span>Docs</span><span>Pricing</span></div>
<button class="btn-white">GET STARTED</button>
</nav>
<section class="hero">
<h1>Tool calling for AI agents</h1>
<p>200+ integrations your agent can call — auth handled, latency measured, nothing hidden behind abstraction.</p>
<div class="row">
<button class="btn-cyan">ADD TO MY AGENT</button>
<button class="btn-ghost">TRY IT OUT</button>
</div>
</section>
<section class="grid">
<div class="code">
<span class="kw">from</span> composio <span class="kw">import</span> Composio<br>
client = Composio(api_key=<span class="str">"..."</span>)<br>
tools = client.tools.get(user_id=<span class="str">"u_1"</span>,<br>
toolkits=[<span class="str">"github"</span>, <span class="str">"slack"</span>])<br>
result = agent.run(tools=tools)
</div>
<div class="side">
<div class="stat"><div class="num">200+</div><div class="lbl">Tools & APIs</div></div>
<div class="stat"><div class="num">100K+</div><div class="lbl">Developers</div></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #c9191d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #c9191d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e19294; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d51b1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c9191d; color: #ffffff;
border: 1px solid #d51b1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #c9191d; color: #f5f5f5;
border: 1px solid #d03c40; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e19294; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cb191d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#42434a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { position:relative; display:flex; flex-direction:column; width:960px; height:640px; }
nav { flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:rgba(255,255,255,0.80); border-bottom:1px solid rgba(0,0,0,0.10);
position:relative; z-index:3; }
.logo { font-size:19px; font-weight:700; color:#c9191d; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:24px; font-size:15px; color:#42434a; }
.row { display:flex; gap:10px; }
.btn-solid { background:#c9191d; color:#ffffff; border:none; border-radius:12px;
padding:9px 22px; font-weight:500; font-size:14.5px; white-space:nowrap; cursor:default; }
.btn-ghost { background:transparent; color:#c9191d; border:1px solid #c9191d; border-radius:9px;
padding:8px 20px; font-weight:500; font-size:14.5px; white-space:nowrap; cursor:default; }
.hero { flex:0 0 250px; display:flex; align-items:center; padding:0 40px; gap:40px;
background:linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%); position:relative; z-index:2; }
.hero-copy { flex:1 1 460px; display:flex; flex-direction:column; gap:14px; }
.hero-copy .tag { display:inline-block; background:#f4f4f6; color:#c9191d; border-radius:40px;
padding:4px 14px; font-size:12px; font-weight:500; width:fit-content; }
.hero-copy h1 { font-size:34px; font-weight:700; line-height:1.22; margin:0; color:#292f40; max-width:400px; }
.hero-copy p { font-size:14.5px; color:#42434a; margin:0; max-width:380px; line-height:1.5; }
.qr { flex:0 0 190px; height:190px; display:grid; grid-template-columns:repeat(8,1fr);
grid-template-rows:repeat(8,1fr); gap:4px; padding:14px; background:#f4f4f6; border-radius:20px;
box-shadow: rgba(0,0,0,0.12) 0px 15px 30px -25px; }
.qr span { border-radius:2px; background:#ededf1; }
.qr span.on { background:#c9191d; }
.features { flex:1; display:flex; gap:18px; padding:22px 40px; background:#ffffff; position:relative; z-index:2; }
.fcard { flex:1; background:#f4f4f6; border-radius:16px; padding:20px 18px; display:flex;
flex-direction:column; gap:8px; box-shadow: rgba(0,0,0,0.12) 0px 15px 30px -25px; }
.fcard .ic { width:34px; height:34px; border-radius:10px; background:#c9191d; }
.fcard h4 { font-size:16.5px; font-weight:600; color:#292f40; margin:0; }
.fcard p { font-size:12.5px; color:#42434a; margin:0; line-height:1.5; }
footer { flex:0 0 74px; background:#171718; color:#ffffff; padding:0 40px; display:flex;
align-items:center; justify-content:space-between; position:relative; z-index:2; }
footer .quote { font-size:12px; color:#b7b8c4; max-width:520px; line-height:1.5; }
footer .cop { font-size:11.5px; color:#b7b8c4; white-space:nowrap; }
</style></head>
<body>
<div class="page">
<nav>
<div class="logo">JKOPay</div>
<div class="navlinks">
<span>Pay</span>
<span>Transfer</span>
<span>Rewards</span>
<span>Business</span>
</div>
<div class="row">
<button class="btn-ghost">Log in</button>
<button class="btn-solid">Get JKOPay</button>
</div>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="tag">More than payment</span>
<h1>Unlock every moment of your day.</h1>
<p>From your morning coffee to the MRT to the night market — one barcode, done in seconds.</p>
</div>
<div class="qr">
<span class="on"></span><span></span><span class="on"></span><span></span><span class="on"></span><span></span><span class="on"></span><span></span>
<span></span><span class="on"></span><span></span><span class="on"></span><span></span><span></span><span></span><span class="on"></span>
<span class="on"></span><span></span><span class="on"></span><span class="on"></span><span></span><span class="on"></span><span></span><span></span>
<span></span><span class="on"></span><span></span><span></span><span class="on"></span><span></span><span class="on"></span><span></span>
<span class="on"></span><span></span><span class="on"></span><span></span><span class="on"></span><span></span><span></span><span class="on"></span>
<span></span><span class="on"></span><span></span><span class="on"></span><span></span><span class="on"></span><span class="on"></span><span></span>
<span class="on"></span><span></span><span></span><span></span><span class="on"></span><span></span><span></span><span class="on"></span>
<span></span><span class="on"></span><span class="on"></span><span></span><span></span><span class="on"></span><span></span><span></span>
</div>
</section>
<section class="features">
<div class="fcard">
<span class="ic"></span>
<h4>Tap & pay</h4>
<p>Show your code at the register — checkout completes in seconds, everywhere.</p>
</div>
<div class="fcard">
<span class="ic"></span>
<h4>Split with friends</h4>
<p>Send money instantly to anyone in your circle, no bank visit required.</p>
</div>
<div class="fcard">
<span class="ic"></span>
<h4>Everyday rewards</h4>
<p>Cashback on the stores you already visit, credited automatically.</p>
</div>
</section>
<footer>
<span class="quote">"My regulars just show me the screen. No more counting change at the stall." — Jamie Lee, night market vendor</span>
<span class="cop">© JKOPay</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.38; margin: 0; color: #818181; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.3px; background: #006ce1; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.3px; background: transparent; color: #006ce1;
border: 1px solid #006ce1; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #181818;
border: 1px solid #dcdcdc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #818181; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #f5f5f5; color: #181818;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181818; box-sizing:border-box;
font-family:'TT Norms Pro', Roboto, 'Segoe UI', Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; background:#16151b; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-family:'FF DIN Condensed Bold', Impact, sans-serif; font-size:20px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:500; color:#ffffff; }
.navright { display:flex; align-items:center; gap:14px; }
.search { background:#262626; border-radius:999px; padding:7px 16px; font-size:12px; color:#818181; }
.navicon { font-size:14px; color:#ffffff; }
.subnav { height:40px; background:#ffffff; border-bottom:1px solid #dcdcdc; display:flex; align-items:center;
gap:28px; padding:0 40px; }
.subnav span { font-size:13px; font-weight:500; color:#818181; padding:9px 0; }
.subnav span.active { color:#006ce1; border-bottom:2px solid #006ce1; }
.hero { height:140px; background:linear-gradient(135deg,#7761ff,#2659ff 45%,#37d5ff 75%,#35f5cb);
display:flex; flex-direction:column; justify-content:center; padding:0 44px; gap:5px; color:#ffffff; }
.hero h1 { font-family:'Kairos Sans Condensed Bold', 'FF DIN Condensed Bold', Impact, sans-serif;
font-size:32px; font-weight:700; letter-spacing:-0.3px; text-transform:uppercase; line-height:1.08;
margin:0; max-width:520px; }
.hero p { font-size:13px; margin:0 0 6px; opacity:0.9; max-width:440px; }
.hero button { align-self:flex-start; background:transparent; color:#ffffff; border:1px solid #ffffff;
border-radius:4px; padding:9px 20px; font-size:12px; font-weight:500; letter-spacing:0.3px; cursor:default; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:18px 40px; }
.card { background:#ffffff; border:1px solid #e1e1e1; border-radius:4px; padding:14px; display:flex;
flex-direction:column; gap:6px; }
.thumb { position:relative; width:100%; height:96px; border-radius:4px; background:#f5f5f5;
display:flex; align-items:center; justify-content:center; }
.lap { width:76%; height:52%; border-radius:3px; }
.l1 { background:linear-gradient(160deg,#2a2f3a,#006ce1 70%,#0a1a2a); }
.l2 { background:linear-gradient(160deg,#1c1c22,#7761ff 70%,#100e18); }
.l3 { background:linear-gradient(160deg,#2a2a2a,#cdab82 70%,#141414); }
.badge { position:absolute; top:8px; left:8px; font-size:11px; font-weight:500; letter-spacing:0.2px;
text-transform:uppercase; padding:3px 8px; border-radius:4px; color:#ffffff; }
.badge.new { background:#006ce1; }
.badge.warm { background:#ffb980; color:#181818; }
.badge.gold { background:#cdab82; color:#181818; }
.card .title { font-size:14px; font-weight:500; margin:2px 0 0; line-height:1.3; }
.specs { display:flex; gap:8px; }
.spec { background:#f5f5f5; border-radius:4px; padding:4px 8px; font-size:11px; color:#4d4d4d; }
.row2 { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.price { font-size:18px; font-weight:500; letter-spacing:-0.2px; }
footer { height:84px; background:#16151b; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.footcol span { display:block; font-size:12px; color:#818181; line-height:1.8; }
.footcol .head { font-size:11px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase;
color:#ffffff; margin-bottom:2px; }
</style></head>
<body>
<nav>
<p class="brand">Asus</p>
<div class="navlinks"><span>Laptops</span><span>Gaming</span><span>Components</span><span>Phones</span></div>
<div class="navright"><span class="search">Search products…</span><span class="navicon">👜</span></div>
</nav>
<div class="subnav">
<span class="active">Gaming</span><span>Business</span><span>Creator</span><span>Everyday</span>
</div>
<section class="hero">
<h1>Power Beyond Limits</h1>
<p>Next-gen performance for creators and competitors alike.</p>
<button>Explore Lineup</button>
</section>
<section class="cards">
<div class="card">
<div class="thumb"><div class="lap l1"></div><span class="badge new">New</span></div>
<p class="title">ROG Strix G16</p>
<div class="specs"><span class="spec">16" 240Hz</span><span class="spec">RTX-class GPU</span></div>
<div class="row2"><span class="price">$1,899</span></div>
</div>
<div class="card">
<div class="thumb"><div class="lap l2"></div><span class="badge warm">Sale</span></div>
<p class="title">Zenbook 14 OLED</p>
<div class="specs"><span class="spec">14" OLED</span><span class="spec">1.2 kg</span></div>
<div class="row2"><span class="price">$1,199</span></div>
</div>
<div class="card">
<div class="thumb"><div class="lap l3"></div><span class="badge gold">Premium</span></div>
<p class="title">ProArt Studiobook</p>
<div class="specs"><span class="spec">16" 4K</span><span class="spec">90Wh Battery</span></div>
<div class="row2"><span class="price">$2,499</span></div>
</div>
</section>
<footer>
<div class="footcol"><span class="head">Shop</span><span>Laptops · Gaming</span></div>
<div class="footcol"><span class="head">Support</span><span>Warranty · Drivers</span></div>
<div class="footcol"><span class="head">Company</span><span>About Asus</span></div>
<div class="footcol"><span class="head">Asus</span><span>© Asus</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #797a7a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fafafa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f9fafb; color: #000000;
border: 1px solid #fafafa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f9fafb; color: #111111;
border: 1px solid #d4d5d6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #797a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9fafb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#fafafa; color:#1c1d1d; box-sizing:border-box; font-family:'Open Sans',-apple-system,system-ui,Arial,sans-serif; }
* { box-sizing:border-box; }
.announce { height:36px; background:#108474; color:#fff; font-size:13px; font-weight:600; letter-spacing:0.1px; display:flex; align-items:center; justify-content:center; }
nav { height:60px; background:#fff; border-bottom:1px solid #eeeeee; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; color:#1c1d1d; position:relative; }
.navlinks span.active::after { content:''; position:absolute; bottom:-18px; left:0; right:0; height:2px; background:#108474; }
.main { display:flex; height:396px; }
.dark-hero { width:420px; background:#1c1d1d; display:flex; align-items:center; justify-content:center; position:relative; }
.microwave { width:220px; height:150px; background:linear-gradient(160deg,#2a2b2b,#1c1d1d); border-radius:10px; border:1px solid #3a3a3a; position:relative; }
.microwave::before { content:''; position:absolute; left:16px; top:16px; width:130px; height:118px; background:#0d0d0d; border-radius:6px; border:2px solid #108474; }
.microwave::after { content:''; position:absolute; right:16px; top:16px; bottom:16px; width:36px; background:#333; border-radius:4px; }
.eyebrow { position:absolute; top:24px; left:24px; color:#108474; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; }
.info { flex:1; padding:32px 40px; display:flex; flex-direction:column; gap:10px; }
.info h1 { font-size:32px; font-weight:400; margin:0; letter-spacing:-0.3px; }
.price-display { font-size:22px; font-weight:300; }
.desc { font-size:14px; line-height:1.55; color:#7b7b7b; max-width:420px; }
.btn-add { margin-top:auto; height:52px; background:#108474; color:#fff; border:none; border-radius:4px; font-weight:600; font-size:16px; }
.spec-table { padding:0 32px; }
.spec-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #eeeeee; font-size:13px; }
.spec-row span:first-child { color:#7b7b7b; }
.spec-row span:last-child { font-weight:600; }
</style></head>
<body>
<div class="announce">Free 2-day shipping on all kitchen appliances</div>
<nav>
<p class="brand">Balmuda Microwav 2</p>
<div class="navlinks"><span class="active">Microwaves</span><span>Toasters</span><span>Kettles</span><span>Air Purifiers</span></div>
</nav>
<div class="main">
<div class="dark-hero">
<span class="eyebrow">The Balmuda Range</span>
<div class="microwave"></div>
</div>
<div class="info">
<h1>The Balmuda Range Microwave</h1>
<span class="price-display">$449.00</span>
<p class="desc">A steam-assisted microwave that reheats leftovers and defrosts proteins evenly, without drying them out. Precision electronics translate to a quieter, more considered kitchen.</p>
<button class="btn-add">Add to Cart</button>
</div>
</div>
<div class="spec-table">
<div class="spec-row"><span>Wattage</span><span>1000W Microwave / 1400W Grill</span></div>
<div class="spec-row"><span>Capacity</span><span>0.9 cu ft</span></div>
<div class="spec-row"><span>Dimensions</span><span>20.1" x 16.5" x 12.2"</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.25px; background: #1863dc; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.25px; background: #f0f0f0; color: #1e1e1e;
border: 1px solid #1863dc; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f0f0f0; color: #2a2a2a;
border: 1px solid #bcbcbc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #178087; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f0f0f0; color:#1e1e1e; box-sizing:border-box;
font-family:'Lato','Open Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f0f0f0; border-bottom:1px solid #d0d0d0; }
.brand { font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#555555; }
.navlinks span:first-child { color:#1863dc; }
.cart { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#1e1e1e; }
.cart .dot { width:18px; height:18px; border-radius:4px; background:#1863dc; color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; }
.hero { background:#1e1e1e; color:#fff; padding:26px 32px; display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:26px; font-weight:700; letter-spacing:-.5px; margin:0 0 6px; line-height:1.15; }
.hero p { font-size:13px; color:#949494; margin:0; max-width:360px; line-height:1.4; }
.hero .specbox { display:flex; gap:18px; }
.spec { text-align:center; }
.spec .v { font-size:20px; font-weight:700; color:#178087; }
.spec .l { font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:#949494; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#eeeeee; padding:1px; margin:0 32px; }
.card { background:#ffffff; padding:16px; display:flex; flex-direction:column; gap:6px; }
.imgbox { height:110px; background:linear-gradient(135deg,#2a2a2a,#444444); border-radius:0; position:relative; overflow:hidden; }
.imgbox::before { content:''; position:absolute; left:50%; top:50%; width:44px; height:44px; border-radius:50%;
border:3px solid #d0d0d0; transform:translate(-50%,-50%); }
.imgbox::after { content:''; position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:50%;
background:#178087; transform:translate(-50%,-50%); }
.tag { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#178087; }
.card h3 { font-size:15px; font-weight:700; margin:2px 0 0; }
.price-row { display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
.price { font-size:16px; font-weight:700; }
.badge { background:#00d084; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
padding:2px 7px; border-radius:4px; }
.btnrow { display:flex; gap:8px; margin-top:4px; }
.btn { flex:1; text-align:center; padding:8px; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.btn-primary { background:#1863dc; color:#fff; }
.btn-outline { background:#f0f0f0; color:#1e1e1e; border:2px solid #1e1e1e; }
.spectable { margin:14px 32px 0; border:1px solid #eeeeee; display:grid; grid-template-columns:repeat(4,1fr); }
.stcell { padding:9px 12px; border-right:1px solid #eeeeee; }
.stcell:last-child { border-right:none; }
.stcell .l { font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:#555555; font-weight:700; }
.stcell .v { font-size:15px; font-weight:700; margin-top:2px; }
footer { position:absolute; bottom:0; left:0; right:0; height:38px; background:#1e1e1e; color:#949494;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Barefoot Sound</p>
<div class="navlinks"><span>Monitors</span><span>Amplifiers</span><span>Accessories</span><span>Support</span></div>
<div class="cart">Cart <span class="dot">2</span></div>
</nav>
<section class="hero">
<div>
<h1>Reference Monitors.<br>Engineered for Truth.</h1>
<p>Anodized aluminum enclosures, precision waveguides, zero coloration. Built for the room that demands accuracy.</p>
</div>
<div class="specbox">
<div class="spec"><div class="v">38Hz</div><div class="l">Low End</div></div>
<div class="spec"><div class="v">±1.5dB</div><div class="l">Flatness</div></div>
<div class="spec"><div class="v">150W</div><div class="l">Bi-Amp</div></div>
</div>
</section>
<div class="grid">
<div class="card">
<div class="imgbox"></div>
<span class="tag">Studio Monitor</span>
<h3>MicroMain 27 Gen3</h3>
<div class="price-row"><span class="price">$1,249</span><span class="badge">New</span></div>
<div class="btnrow"><div class="btn btn-primary">Add to Cart</div><div class="btn btn-outline">Specs</div></div>
</div>
<div class="card">
<div class="imgbox"></div>
<span class="tag">Studio Monitor</span>
<h3>Footprint 06 Coaxial</h3>
<div class="price-row"><span class="price">$899</span></div>
<div class="btnrow"><div class="btn btn-primary">Add to Cart</div><div class="btn btn-outline">Specs</div></div>
</div>
<div class="card">
<div class="imgbox"></div>
<span class="tag">Subwoofer</span>
<h3>Depth 12 Sealed Sub</h3>
<div class="price-row"><span class="price">$1,599</span></div>
<div class="btnrow"><div class="btn btn-primary">Add to Cart</div><div class="btn btn-outline">Specs</div></div>
</div>
</div>
<div class="spectable">
<div class="stcell"><div class="l">Driver</div><div class="v">6.5" LF</div></div>
<div class="stcell"><div class="l">Tweeter</div><div class="v">1" Silk</div></div>
<div class="stcell"><div class="l">Freq. Resp.</div><div class="v">38Hz–22kHz</div></div>
<div class="stcell"><div class="l">Finish</div><div class="v">Matte Black</div></div>
</div>
<footer>
<span>© Barefoot Sound</span>
<span>Barefoot Sound · Warranty · Dealer Locator · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #005daa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #005daa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b1d3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0072ce; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005daa; color: #ffffff;
border: 1px solid #0072ce; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #005daa; color: #f5f5f5;
border: 1px solid #2775b6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b1d3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0060b0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1F2937; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; width:960px; height:640px; }
/* ---- left: dashboard w/ calorie ring + macro donut ---- */
.left { width:340px; height:640px; background:#F5F7FA; padding:28px 24px; border-right:1px solid #E5E7EB; }
.brandrow { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.logom { width:32px; height:32px; border-radius:8px; background:#005DAA; color:#fff; font-weight:700;
font-size:16px; display:flex; align-items:center; justify-content:center; font-family:Georgia, serif; }
.brand { font-size:15px; font-weight:700; letter-spacing:-0.2px; }
.ring-wrap { position:relative; width:200px; height:200px; margin:8px auto 6px; }
.ring-track { position:absolute; inset:0; border-radius:50%; border:16px solid #E5E9F0; }
.ring-fill { position:absolute; inset:0; border-radius:50%;
background: conic-gradient(#0072CE 0deg 252deg, transparent 252deg 360deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 16px));
mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 16px));
transform: rotate(-90deg); }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.ring-center .lbl { font-size:11px; font-weight:600; letter-spacing:0.6px; color:#4B5563; text-transform:uppercase; }
.ring-center .num { font-size:44px; font-weight:700; letter-spacing:-1pt; color:#111827; font-variant-numeric:tabular-nums; }
.ring-center .sub { font-size:12px; font-weight:500; color:#4B5563; }
.trio { display:flex; justify-content:space-between; margin:10px 4px 20px; }
.trio div { text-align:center; }
.trio .n { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; color:#111827; }
.trio .l { font-size:10px; font-weight:600; letter-spacing:0.6px; color:#9CA3AF; text-transform:uppercase; }
.macro-card { background:#fff; border:1px solid #E5E7EB; border-radius:16px; padding:14px 16px; display:flex; gap:14px; align-items:center; }
.macro-donut { width:64px; height:64px; border-radius:50%; flex:none;
background: conic-gradient(#FF9F1C 0 40%, #A463F2 40% 70%, #19C37D 70% 100%); position:relative; }
.macro-donut::after { content:''; position:absolute; inset:9px; border-radius:50%; background:#fff; }
.legend { display:flex; flex-direction:column; gap:5px; }
.leg { display:flex; align-items:center; gap:6px; font-size:11px; color:#4B5563; }
.leg .sw { width:8px; height:8px; border-radius:2px; }
/* ---- right: diary ---- */
.right { flex:1; padding:26px 32px; }
.navtitle { font-size:28px; font-weight:700; letter-spacing:-0.4pt; color:#1F2937; margin-bottom:2px; }
.daterow { font-size:14px; font-weight:500; color:#4B5563; margin-bottom:18px; }
.meal { margin-bottom:14px; }
.mealhead { display:flex; justify-content:space-between; align-items:center; height:40px; border-bottom:0.5px solid #E5E7EB; }
.mealhead .name { font-size:17px; font-weight:600; color:#1F2937; }
.mealhead .cal { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:#1F2937; }
.food-row { display:flex; align-items:center; height:52px; border-bottom:0.5px solid #E5E7EB; gap:8px; }
.food-row .fname { font-size:15px; font-weight:500; color:#1F2937; }
.food-row .fsub { font-size:12px; color:#4B5563; margin-top:1px; }
.food-row .spacer { flex:1; }
.food-row .fcal { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:#1F2937; }
.food-row .chev { color:#9CA3AF; font-size:12px; margin-left:10px; }
.addfood { display:flex; align-items:center; gap:8px; height:44px; color:#0072CE; font-size:14px; font-weight:600; }
.addfood .plus { width:18px; height:18px; border-radius:50%; border:2px solid #0072CE; display:flex; align-items:center; justify-content:center; font-size:12px; }
.fab { position:absolute; right:36px; bottom:30px; width:56px; height:56px; border-radius:50%; background:#0072CE;
display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; font-weight:300;
box-shadow: rgba(0,93,170,0.35) 0 6px 16px; }
</style></head>
<body>
<div class="shell">
<div class="left">
<div class="brandrow"><div class="logom">M</div><div class="brand">MyFitnessPal (iOS)</div></div>
<div class="ring-wrap">
<div class="ring-track"></div>
<div class="ring-fill"></div>
<div class="ring-center">
<span class="lbl">Remaining</span>
<span class="num">1,247</span>
<span class="sub">calories</span>
</div>
</div>
<div class="trio">
<div><div class="n">2,000</div><div class="l">Goal</div></div>
<div><div class="n">753</div><div class="l">Food</div></div>
<div><div class="n">0</div><div class="l">Exercise</div></div>
</div>
<div class="macro-card">
<div class="macro-donut"></div>
<div class="legend">
<div class="leg"><span class="sw" style="background:#FF9F1C"></span>Carbs · 187g</div>
<div class="leg"><span class="sw" style="background:#A463F2"></span>Fat · 42g</div>
<div class="leg"><span class="sw" style="background:#19C37D"></span>Protein · 64g</div>
</div>
</div>
</div>
<div class="right" style="position:relative;">
<div class="navtitle">Diary</div>
<div class="daterow">Today, May 14 ⌄</div>
<div class="meal">
<div class="mealhead"><span class="name">Breakfast</span><span class="cal">312</span></div>
<div class="food-row">
<div><div class="fname">Greek Yogurt, Plain, Nonfat</div><div class="fsub">1 cup, 8 oz · Chobani</div></div>
<div class="spacer"></div><div class="fcal">120</div><span class="chev">›</span>
</div>
<div class="food-row">
<div><div class="fname">Blueberries, Raw</div><div class="fsub">1/2 cup</div></div>
<div class="spacer"></div><div class="fcal">42</div><span class="chev">›</span>
</div>
<div class="addfood"><span class="plus">+</span>Add Food</div>
</div>
<div class="meal">
<div class="mealhead"><span class="name">Lunch</span><span class="cal">487</span></div>
<div class="food-row">
<div><div class="fname">Grilled Chicken Salad</div><div class="fsub">1 bowl · Sweetgreen</div></div>
<div class="spacer"></div><div class="fcal">420</div><span class="chev">›</span>
</div>
<div class="addfood"><span class="plus">+</span>Add Food</div>
</div>
<div class="meal">
<div class="mealhead"><span class="name">Snacks</span><span class="cal">120</span></div>
<div class="addfood"><span class="plus">+</span>Add Food</div>
</div>
<div class="fab">＋</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f7; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f7f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0E0F0C; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric: tabular-nums; }
.wrap { width:100%; height:100%; padding:24px 28px; display:flex; flex-direction:column; gap:14px; }
.hdr { height:32px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:18px; font-weight:800; letter-spacing:-0.3px; color:#163300; margin:0; }
.hdr-icons { display:flex; gap:14px; align-items:center; }
.avatar-sm { width:28px; height:28px; border-radius:50%; background:#EAF9DC; border:1.5px solid #163300; }
.main { display:flex; gap:22px; flex:1; min-height:0; }
.lcol { width:360px; display:flex; flex-direction:column; gap:16px; }
.hero { background:#0E2200; border-radius:20px; padding:22px; box-shadow:0 12px 32px rgba(14,34,0,0.25);
display:flex; flex-direction:column; gap:10px; }
.hero .lbl { font-size:11px; font-weight:800; letter-spacing:0.6px; text-transform:uppercase; color:#9FE870; }
.hero .total { font-size:40px; font-weight:800; letter-spacing:-0.6px; color:#FFFFFF; line-height:1.05; }
.hero-row { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.chip { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.08); border-radius:8px; padding:6px 10px; }
.chip .flag { width:18px; height:18px; border-radius:50%; background:#9FE870; }
.chip span { font-size:13px; font-weight:600; color:#FFFFFF; }
.add-money { background:#9FE870; color:#163300; font-size:13px; font-weight:800; border-radius:16px; padding:8px 14px; }
.stack { border:1px solid #E5E5E5; border-radius:16px; overflow:hidden; flex:1; }
.crow { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid #E5E5E5; }
.crow:last-child { border-bottom:none; }
.flagchip { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:800; color:#163300; }
.fc-gbp { background:#EAF9DC; } .fc-eur { background:#F0EFEA; } .fc-usd { background:#EAF9DC; }
.cinfo { margin-left:12px; flex:1; min-width:0; }
.ccode { font-size:16px; font-weight:600; color:#0E0F0C; }
.cname { font-size:12px; color:#6B6F66; }
.cbal { font-size:20px; font-weight:800; color:#0E0F0C; text-align:right; }
.rcol { flex:1; display:flex; flex-direction:column; gap:14px; min-width:0; }
.ticker { display:flex; align-items:center; gap:8px; padding:10px 16px; background:#F7F7F7; border-radius:12px; }
.ticker .dot { width:7px; height:7px; border-radius:50%; background:#2F8F4E; }
.ticker b { font-size:15px; font-weight:600; }
.ticker .g { font-size:11px; color:#6B6F66; margin-left:auto; }
.feecard { background:#FFFFFF; border:1px solid #E5E5E5; border-radius:16px; padding:20px; flex:1;
display:flex; flex-direction:column; gap:0; position:relative; }
.fline { display:flex; justify-content:space-between; align-items:center; padding:9px 0 9px 20px; position:relative; }
.fline::before { content:''; position:absolute; left:4px; top:50%; width:8px; height:8px; border-radius:50%;
background:#D2D2D2; transform:translateY(-50%); }
.fline::after { content:''; position:absolute; left:8px; top:-2px; bottom:-2px; width:1px; background:#E5E5E5; }
.fline:first-child::after { top:50%; }
.fline:last-child::after { bottom:50%; }
.fline .k { font-size:14px; color:#6B6F66; }
.fline .v { font-size:15px; font-weight:600; color:#0E0F0C; }
.fline.final { margin-top:6px; background:#EAF9DC; border-radius:10px; padding:12px 14px 12px 14px; }
.fline.final::before, .fline.final::after { display:none; }
.fline.final .k { font-size:14px; font-weight:700; color:#163300; }
.fline.final .v { font-size:20px; font-weight:800; color:#163300; }
.stepper { display:flex; align-items:center; justify-content:space-between; padding:12px 6px; }
.step { display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; flex:1; }
.step .rail { position:absolute; top:11px; left:calc(-50% + 12px); width:calc(100% - 24px); height:2px; background:#E5E5E5; z-index:0; }
.step:first-child .rail { display:none; }
.step.done .rail { background:#9FE870; }
.dotwrap { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; z-index:1; }
.step.done .dotwrap { background:#9FE870; color:#163300; }
.step.active .dotwrap { background:#163300; color:#FFFFFF; }
.step.todo .dotwrap { background:#E5E5E5; color:#9A9D95; }
.steplbl { font-size:11px; font-weight:600; color:#6B6F66; }
</style></head>
<body>
<div class="wrap">
<div class="hdr">
<p class="brand">Wise (iOS)</p>
<div class="hdr-icons">
<span style="font-size:13px;color:#6B6F66;font-weight:600;">Recipients</span>
<span style="font-size:13px;color:#6B6F66;font-weight:600;">Payments</span>
<div class="avatar-sm"></div>
</div>
</div>
<div class="main">
<div class="lcol">
<div class="hero">
<span class="lbl">Total balance</span>
<div class="total tnum">£12,480.65</div>
<div class="hero-row">
<div class="chip"><div class="flag"></div><span>3 currencies</span></div>
<div class="add-money">+ Add money</div>
</div>
</div>
<div class="stack">
<div class="crow">
<div class="flagchip fc-gbp">GB</div>
<div class="cinfo"><div class="ccode">GBP</div><div class="cname">British Pound</div></div>
<div class="cbal tnum">£9,300.10</div>
</div>
<div class="crow">
<div class="flagchip fc-eur">EU</div>
<div class="cinfo"><div class="ccode">EUR</div><div class="cname">Euro</div></div>
<div class="cbal tnum">€3,180.55</div>
</div>
<div class="crow">
<div class="flagchip fc-usd">US</div>
<div class="cinfo"><div class="ccode">USD</div><div class="cname">US Dollar</div></div>
<div class="cbal tnum">$0.00</div>
</div>
</div>
</div>
<div class="rcol">
<div class="ticker">
<div class="dot"></div>
<b>1 GBP = 1.1632 EUR</b>
<span class="g">Guaranteed for 24h</span>
</div>
<div class="feecard">
<div class="fline"><span class="k">You send</span><span class="v tnum">£1,000.00</span></div>
<div class="fline"><span class="k">Our fee</span><span class="v tnum">£4.31</span></div>
<div class="fline"><span class="k">Amount we convert</span><span class="v tnum">£995.69</span></div>
<div class="fline"><span class="k">Guaranteed rate</span><span class="v tnum">1.1632</span></div>
<div class="fline final"><span class="k">Recipient gets</span><span class="v tnum">€1,158.10</span></div>
</div>
<div class="stepper">
<div class="step done"><div class="dotwrap">✓</div><span class="steplbl">Recipient</span></div>
<div class="step done"><div class="rail"></div><div class="dotwrap">✓</div><span class="steplbl">Amount</span></div>
<div class="step active"><div class="rail"></div><div class="dotwrap">3</div><span class="steplbl">Review</span></div>
<div class="step todo"><div class="rail"></div><div class="dotwrap">4</div><span class="steplbl">Pay</span></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcf4; color: #242527;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcf4; color: #242527;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #242527; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #08c5bc; color: #000000;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fcfcf4; color: #242527;
border: 1px solid #08c5bc; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #242527;
border: 1px solid #c6c6c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #8c564b; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfcf4; color:#242527; box-sizing:border-box;
font-family:'DM Sans', -apple-system, system-ui, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#fcfcf4; border-bottom:1px solid #e5e7eb; }
.brand { font-family:'Petrona', Georgia, serif; font-size:22px; font-weight:600; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:28px; font-size:15px; font-weight:500; color:#4a4a4a; }
.navlinks span:first-child { color:#242527; border-bottom:2px solid #08c5bc; padding-bottom:4px; }
.navicons { display:flex; align-items:center; gap:18px; }
.icn { width:22px; height:22px; border-radius:6px; background:#f2f2ea; position:relative; }
.cart { width:22px; height:22px; border:1.5px solid #242527; border-radius:4px; position:relative; }
.cart::after { content:'2'; position:absolute; top:-8px; right:-8px; width:16px; height:16px; border-radius:999px;
background:#08c5bc; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.hero { display:flex; align-items:center; gap:40px; padding:36px 40px; }
.hero-copy { flex:1.1; }
.eyebrow { display:inline-block; background:#f5f5dc; color:#8c564b; font-size:11px; font-weight:600;
letter-spacing:0.3px; text-transform:uppercase; padding:4px 12px; border-radius:9999px; margin-bottom:14px; }
.hero h1 { font-family:'Petrona', Georgia, serif; font-size:34px; font-weight:600; line-height:1.15;
letter-spacing:-0.5px; margin:0 0 12px; }
.hero p { font-size:15px; color:#4a4a4a; line-height:1.5; margin:0 0 20px; max-width:400px; }
.row { display:flex; gap:12px; align-items:center; }
.btn-primary { background:#08c5bc; color:#fff; border:none; border-radius:9999px; padding:14px 28px;
font-family:'DM Sans'; font-size:15px; font-weight:600; height:48px; }
.btn-secondary { background:#fcfcf4; color:#242527; border:1.5px solid #242527; border-radius:9999px;
padding:13px 27px; font-size:15px; font-weight:600; height:48px; }
.hero-visual { flex:1; height:172px; border-radius:20px; background:linear-gradient(135deg,#f5f5dc,#f2f2ea);
position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:130px; height:130px; border-radius:50%;
background:#dedede; opacity:0.6; right:-30px; bottom:-40px; }
.hero-visual::after { content:''; position:absolute; width:70px; height:70px; border-radius:16px;
background:#08c5bc; opacity:0.14; left:24px; top:24px; }
.section { padding:8px 40px 0; }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.sec-head h2 { font-family:'Petrona', Georgia, serif; font-size:22px; font-weight:500; margin:0; }
.sec-head span { font-size:13px; color:#08c5bc; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#ffffff; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.card .thumb { height:96px; border-radius:12px; position:relative; overflow:hidden; }
.t1 { background:linear-gradient(160deg,#f2f2ea,#dedede); }
.t2 { background:linear-gradient(160deg,#f5f5dc,#f2f2ea); }
.t3 { background:linear-gradient(160deg,#e9ece6,#cfe0dd); }
.badge { position:absolute; top:8px; left:8px; background:#8c564b; color:#fff; font-size:10px; font-weight:600;
letter-spacing:0.3px; text-transform:uppercase; padding:4px 10px; border-radius:9999px; }
.stars { color:#242527; font-size:11px; letter-spacing:1px; }
.rcount { color:#9ca3af; font-size:11px; margin-left:4px; }
.card h3 { font-size:14px; font-weight:600; margin:2px 0 0; }
.card .desc { font-size:12px; color:#777777; margin:0; line-height:1.4; }
.pricerow { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.price { font-size:15px; font-weight:600; }
.addbtn { background:#f2f2ea; color:#08c5bc; border:none; border-radius:9999px; font-size:12px; font-weight:600;
padding:6px 14px; }
footer { border-top:1px solid #e5e7eb; padding:14px 40px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; color:#777777; }
footer a { color:#777777; margin-left:18px; }
</style></head>
<body>
<nav>
<p class="brand">Because</p>
<div class="navlinks"><span>Shop</span><span>Guides</span><span>Our Story</span><span>Help</span></div>
<div class="navicons"><div class="icn"></div><div class="cart"></div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="eyebrow">Because we understand</span>
<h1>Care that respects the whole person</h1>
<p>Thoughtfully designed bathing, incontinence, and comfort essentials — for the people who care for aging bodies, and the ones they love.</p>
<div class="row">
<button class="btn-primary">Take the quiz</button>
<button class="btn-secondary">See details</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Recommended for you</h2><span>View all</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge">Best seller</span></div>
<div class="stars">★★★★★<span class="rcount">(1,204)</span></div>
<h3>Overnight Protective Brief</h3>
<p class="desc">Maximum absorbency, soft cotton-feel liner.</p>
<div class="pricerow"><span class="price">$34.99</span><button class="addbtn">Add to cart</button></div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge">New</span></div>
<div class="stars">★★★★☆<span class="rcount">(388)</span></div>
<h3>Bath Support Handle</h3>
<p class="desc">Suction-mount grip for safer bathing.</p>
<div class="pricerow"><span class="price">$28.00</span><button class="addbtn">Add to cart</button></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="stars">★★★★★<span class="rcount">(902)</span></div>
<h3>Barrier Cream, Fragrance-Free</h3>
<p class="desc">Gentle protection for sensitive skin.</p>
<div class="pricerow"><span class="price">$16.50</span><button class="addbtn">Add to cart</button></div>
</div>
</div>
</section>
<footer>
<span>© Because</span>
<div><a href="#">Help Center</a><a href="#">Caregiver Guides</a><a href="#">Track Order</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dadada; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#ffffff; box-sizing:border-box;
font-family:Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.theater { position:relative; width:960px; height:640px; background:#1A1A1A; }
.topstrip { position:absolute; top:0; left:0; right:0; height:40px; display:flex; align-items:center;
justify-content:space-between; padding:0 20px; z-index:3; }
.rec { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:0.4pt; }
.rec .dot { width:9px; height:9px; border-radius:50%; background:#E02828; }
.timer { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; color:#fff; }
.viewtoggle { font-size:12px; color:#B0B0B0; }
.grid { position:absolute; top:40px; left:0; right:0; bottom:88px; display:grid;
grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:4px; padding:4px; }
.tile { position:relative; border-radius:8px; overflow:hidden; background:#3A3A3A; }
.tile .fill { position:absolute; inset:0; }
.g1 .fill { background:linear-gradient(160deg,#4a6fa5,#2b3f5c); }
.g2 .fill { background:linear-gradient(160deg,#8a6c9e,#4a3a5c); }
.g3 .fill { background:linear-gradient(160deg,#6a9a7a,#2f4a3a); }
.g4 .fill { background:linear-gradient(160deg,#a58a5a,#5c4a2f); }
.g5 .fill { background:#3A3A3A; }
.g6 .fill { background:linear-gradient(160deg,#9a6a6a,#4a2f2f); }
.avatar { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px;
border-radius:50%; background:#555; display:flex; align-items:center; justify-content:center;
font-size:16px; font-weight:700; color:#ddd; }
.namechip { position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,0.45); border-radius:6px;
padding:3px 8px; font-size:13px; font-weight:600; }
.mutebadge { position:absolute; left:8px; bottom:34px; width:22px; height:22px; border-radius:50%;
background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; font-size:11px; color:#E02828; }
.active-speaker { box-shadow: inset 0 0 0 3px #2D8CFF; }
.controlbar { position:absolute; left:12px; right:12px; bottom:12px; height:72px; border-radius:16px;
background:rgba(45,45,45,0.96); border-top:1px solid #3A3A3A; display:flex; align-items:center;
justify-content:space-evenly; z-index:3; }
.ctrl { display:flex; flex-direction:column; align-items:center; gap:4px; width:80px; }
.ctrl .ic { font-size:22px; }
.ctrl .lb { font-size:11px; font-weight:600; }
.ctrl.muted .ic, .ctrl.muted .lb { color:#E02828; }
.ctrl.leave { }
.ctrl.leave .ic, .ctrl.leave .lb { color:#E02828; }
</style></head>
<body>
<div class="theater">
<div class="topstrip">
<div class="rec"><span class="dot"></span>RECORDING</div>
<div class="timer">32:47</div>
<div class="viewtoggle">Gallery · Zoom (iOS)</div>
</div>
<div class="grid">
<div class="tile g1"><div class="fill"></div><div class="namechip">Jihoon</div></div>
<div class="tile g2 active-speaker"><div class="fill"></div><div class="namechip">Minji</div></div>
<div class="tile g3"><div class="fill"></div><div class="namechip">Jordan</div><div class="mutebadge">🎤</div></div>
<div class="tile g4"><div class="fill"></div><div class="namechip">Soyeon</div></div>
<div class="tile g5"><div class="avatar">CV</div><div class="fill"></div><div class="namechip">Camila</div></div>
<div class="tile g6"><div class="fill"></div><div class="namechip">Taemin</div></div>
</div>
<div class="controlbar">
<div class="ctrl muted"><span class="ic">🎤</span><span class="lb">Unmute</span></div>
<div class="ctrl"><span class="ic">📹</span><span class="lb">Stop Video</span></div>
<div class="ctrl"><span class="ic">🖥</span><span class="lb">Share</span></div>
<div class="ctrl"><span class="ic">👥</span><span class="lb">Participants</span></div>
<div class="ctrl"><span class="ic">🙂</span><span class="lb">React</span></div>
<div class="ctrl leave"><span class="ic">☎</span><span class="lb">Leave</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d9373; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d9373; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8dc9ba; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d0d0d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d9373; color: #0d0d0d;
border: 1px solid #0d0d0d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d9373; color: #f5f5f5;
border: 1px solid #32a388; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8dc9ba; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d7e63; color: #0d0d0d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d0d0d; box-sizing:border-box;
font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.glow { position:absolute; z-index:0; left:50%; top:-180px; width:900px; height:420px;
transform:translateX(-50%); border-radius:50%;
background:radial-gradient(closest-side, rgba(24,226,153,0.22), rgba(24,226,153,0.06) 60%, rgba(255,255,255,0) 80%); }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid rgba(0,0,0,0.05); background:rgba(255,255,255,0.7); }
.brand { font-size:16px; font-weight:600; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#0d0d0d; }
.navlinks span { opacity:0.65; }
.btn-primary { background:#0d0d0d; color:#ffffff; border:none; border-radius:9999px;
padding:8px 20px; font-weight:500; font-size:14px; box-shadow:rgba(0,0,0,0.06) 0px 1px 2px; }
.btn-ghost { background:#ffffff; color:#0d0d0d; border:1px solid rgba(0,0,0,0.08); border-radius:9999px;
padding:7px 18px; font-weight:500; font-size:14px; }
.hero { position:relative; z-index:2; padding:34px 32px 20px; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:12px; }
.badge { background:#d4fae8; color:#0fa76e; border-radius:9999px; padding:4px 12px;
font-size:12px; font-weight:500; letter-spacing:0.03em; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-0.9px; line-height:1.1; margin:0; max-width:620px; }
.hero p { font-size:15px; color:#666666; margin:0; max-width:480px; line-height:1.5; }
.row { display:flex; gap:10px; align-items:center; }
.split { position:relative; z-index:2; display:grid; grid-template-columns:260px 1fr; gap:20px;
padding:8px 32px 20px; height:322px; }
.sidebar { border:1px solid rgba(0,0,0,0.05); border-radius:16px; background:#fafafa; padding:18px;
display:flex; flex-direction:column; gap:4px; }
.sidebar .label { font-size:11px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase;
color:#888888; margin:10px 0 6px; }
.sidebar .item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; font-size:13px; font-weight:500; color:#333333; }
.sidebar .item.active { background:#ffffff; color:#0d0d0d; box-shadow:rgba(0,0,0,0.03) 0px 2px 4px; border:1px solid rgba(0,0,0,0.05); }
.dot { width:6px; height:6px; border-radius:50%; background:#18e299; flex-shrink:0; }
.panel { border:1px solid rgba(0,0,0,0.05); border-radius:24px; background:#ffffff; padding:28px;
box-shadow:rgba(0,0,0,0.03) 0px 2px 4px; display:flex; flex-direction:column; gap:14px; }
.panel .kicker { font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:#0fa76e; }
.panel h2 { font-size:22px; font-weight:600; letter-spacing:-0.3px; margin:0; }
.panel p.desc { font-size:14px; color:#666666; margin:0; max-width:520px; line-height:1.5; }
.code { background:#0d0d0d; border-radius:16px; padding:16px 18px; margin-top:auto; }
.code .l { font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size:12px; letter-spacing:0.02em;
color:#8effcf; line-height:1.9; }
.code .l .k { color:#ffffff; opacity:0.5; }
.code .l .g { color:#18e299; }
footer { position:relative; z-index:2; border-top:1px solid rgba(0,0,0,0.05); padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#888888; }
</style></head>
<body>
<div class="glow"></div>
<nav>
<p class="brand">Mintlify</p>
<div class="navlinks"><span>Docs</span><span>Components</span><span>API Reference</span><span>Changelog</span></div>
<div class="row"><button class="btn-ghost">Log in</button><button class="btn-primary">Get started</button></div>
</nav>
<section class="hero">
<span class="badge">New — AI-powered search</span>
<h1>The intelligent knowledge platform</h1>
<p>Beautiful documentation your users will actually read — and your team will actually enjoy writing.</p>
<div class="row">
<button class="btn-primary">Get started</button>
<button class="btn-ghost">Request demo</button>
</div>
</section>
<section class="split">
<div class="sidebar">
<div class="label">Getting Started</div>
<div class="item active"><span class="dot"></span>Quickstart</div>
<div class="item"><span class="dot" style="background:#e5e5e5"></span>Installation</div>
<div class="label">Guides</div>
<div class="item"><span class="dot" style="background:#e5e5e5"></span>Authentication</div>
<div class="item"><span class="dot" style="background:#e5e5e5"></span>Custom domains</div>
<div class="item"><span class="dot" style="background:#e5e5e5"></span>AI Search</div>
</div>
<div class="panel">
<span class="kicker">Quickstart</span>
<h2>Ship docs your team is proud of</h2>
<p class="desc">Write in MDX, preview instantly, and deploy on a custom domain — no infra to manage. Every page ships with built-in AI search out of the box.</p>
<div class="code">
<div class="l"><span class="k">$</span> npx mintlify dev</div>
<div class="l"><span class="g">✓</span> Docs running at localhost:3000</div>
<div class="l"><span class="k">$</span> mintlify deploy --domain docs.acme.dev</div>
</div>
</div>
</section>
<footer>
<span>© Mintlify</span>
<span>Mintlify · Docs · Pricing · Changelog</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0088ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0088ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0050ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0088ff; color: #000000;
border: 1px solid #0050ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0088ff; color: #f5f5f5;
border: 1px solid #2799fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #007fff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background: radial-gradient(circle at 50% 40%, #0088FF 0%, #0050FF 32%, #08090E 100%);
color:#FFFFFF; box-sizing:border-box;
font-family:"Montserrat", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:26px 40px; }
.ic { width:26px; height:26px; border-radius:6px; background:rgba(255,255,255,.85); }
.stage { display:flex; flex-direction:column; align-items:center; justify-content:center; height:420px; position:relative; }
.ring { position:absolute; border:2px solid rgba(255,255,255,.22); border-radius:50%; }
.r1 { width:200px; height:200px; }
.r2 { width:250px; height:250px; opacity:.5; }
.btn { width:150px; height:150px; border-radius:50%;
background: radial-gradient(circle at 38% 32%, #FFFFFF 0%, #E8F0FF 60%, #CFE0FF 100%);
box-shadow: rgba(0,80,255,0.45) 0 16px 48px;
display:flex; align-items:center; justify-content:center; }
.btn .glyph { font-size:56px; color:#0088FF; font-weight:800; }
.prompt { margin-top:26px; font-size:18px; font-weight:700; letter-spacing:.2px; }
.result { position:absolute; right:44px; bottom:44px; width:340px; background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.14); border-radius:20px; padding:18px; display:flex; gap:14px; align-items:center; }
.art { width:78px; height:78px; border-radius:12px; background:linear-gradient(135deg,#ffb199,#ff0844); flex-shrink:0; }
.r-title { font-size:18px; font-weight:700; }
.r-artist { font-size:13px; font-weight:500; color:#B8C4FF; margin-top:2px; }
.pill { margin-top:10px; display:inline-flex; align-items:center; gap:6px; background:#fff; color:#08090E;
font-size:12px; font-weight:700; padding:8px 14px; border-radius:500px; letter-spacing:.3px; }
.sheet { position:absolute; left:0; right:0; bottom:0; height:150px; background:rgba(255,255,255,0.14);
border-radius:24px 24px 0 0; padding:16px 40px; }
.handle { width:36px; height:4px; background:rgba(255,255,255,.4); border-radius:2px; margin:0 auto 14px; }
.sh-title { font-size:15px; font-weight:700; margin-bottom:10px; }
.row { display:flex; align-items:center; gap:12px; padding:6px 0; }
.row .art2 { width:38px; height:38px; border-radius:8px; }
.row .t { font-size:13px; font-weight:700; }
.row .a { font-size:11px; color:#B8C4FF; }
.row .time { margin-left:auto; font-size:11px; color:#B8C4FF; }
</style></head>
<body>
<div class="topbar"><div class="ic"></div><div style="font-size:16px;font-weight:700;">Shazam (iOS)</div><div class="ic"></div></div>
<div class="stage">
<div class="ring r2"></div><div class="ring r1"></div>
<div class="btn"><div class="glyph">S</div></div>
<div class="prompt">Listening for music…</div>
</div>
<div class="result">
<div class="art"></div>
<div>
<div class="r-title">Golden Hour</div>
<div class="r-artist">JVKE</div>
<div class="pill">♫ Open in Apple Music</div>
</div>
</div>
<div class="sheet">
<div class="handle"></div>
<div class="sh-title">Your Shazams</div>
<div class="row"><div class="art2" style="background:linear-gradient(135deg,#a8edea,#fed6e3);"></div><div><div class="t">Flowers</div><div class="a">Miley Cyrus</div></div><div class="time">2h ago</div></div>
<div class="row"><div class="art2" style="background:linear-gradient(135deg,#f6d365,#fda085);"></div><div><div class="t">Anti-Hero</div><div class="a">Taylor Swift</div></div><div class="time">Yesterday</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0071bb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0071bb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87badb; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323746; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0071bb; color: #ffffff;
border: 1px solid #323746; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0071bb; color: #f5f5f5;
border: 1px solid #2786c4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87badb; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0868a8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#323746; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.jpTitle { font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 44px; border-bottom:1px solid #e2e2e6; background:#ffffff; }
.brand { font-size:18px; font-weight:700; margin:0; color:#000000; }
.navlinks { display:flex; gap:30px; font-size:13px; color:#323746; }
main { padding:26px 44px 0; height:522px; }
.kicker { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#0071bb; font-weight:500; }
h1.jpTitle { font-size:34px; font-weight:400; line-height:1.3; margin:8px 0 6px; color:#000000; max-width:640px; }
.lede { font-size:14px; line-height:1.75; color:#323746; max-width:560px; margin:0 0 18px; }
.tabs { display:flex; gap:10px; margin-bottom:20px; }
.tab { background:#dddddd; color:#000000; border-radius:4px; padding:2px 12px; height:38px;
display:flex; align-items:center; font-size:13px; }
.cols { display:flex; gap:32px; }
.colLeft { flex:1; }
.colRight { width:270px; flex:0 0 auto; }
.listRow { display:flex; padding:10px 0 10px 39px; border-bottom:1px solid #f0f0f2; font-size:14px; position:relative; }
.listRow::before { content:''; position:absolute; left:14px; top:16px; width:6px; height:6px; border-radius:50%; background:#0071bb; }
.listTitle { font-weight:500; color:#000000; margin-right:10px; }
.listMeta { color:#767a86; font-size:13px; }
.sectionHead { font-size:20px; font-weight:500; color:#0071bb; margin:22px 0 10px; }
.infoBox { background:#e7f6fd; border-radius:4px; padding:20px 22px; }
.infoBox h3 { font-size:15px; font-weight:700; color:#0071bb; margin:0 0 12px; }
.infoRow { display:flex; justify-content:space-between; font-size:13px; color:#323746; padding:7px 0;
border-bottom:1px solid rgba(0,0,0,.05); }
.infoRow:last-child { border-bottom:none; }
.infoRow b { color:#000000; font-weight:600; }
.plainBtn { margin-top:16px; width:100%; height:38px; border:1px solid #c8ccd4; background:#ffffff; color:#000000;
border-radius:4px; font-size:13px; display:flex; align-items:center; justify-content:center; }
footer { height:32px; border-top:1px solid #e2e2e6; padding:0 44px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#767a86; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">Mynavi</p>
<div class="navlinks"><span>Service Directory</span><span>Company</span><span>Recruit</span><span>Media</span></div>
</nav>
<main>
<span class="kicker">Service Directory</span>
<h1 class="jpTitle">Career Change Support</h1>
<p class="lede">Guidance and listings for people considering a career change, from first exploration to offer comparison. Browse related service categories below.</p>
<div class="tabs">
<div class="tab">Career Change</div>
<div class="tab">Part-time Work</div>
<div class="tab">New Graduate</div>
<div class="tab">Media</div>
</div>
<div class="cols">
<div class="colLeft">
<div class="listRow"><span class="listTitle">Career Change Consultation</span><span class="listMeta">Individual guidance, by appointment</span></div>
<div class="listRow"><span class="listTitle">Resume & Interview Support</span><span class="listMeta">Document review, mock interviews</span></div>
<div class="listRow"><span class="listTitle">Industry Comparison Guides</span><span class="listMeta">Updated monthly</span></div>
<div class="listRow"><span class="listTitle">Employer Information Sessions</span><span class="listMeta">Online and in-person</span></div>
<div class="sectionHead">Related Services</div>
<div class="listRow" style="border-bottom:none;"><span class="listTitle">Part-time & Temporary Listings</span><span class="listMeta">Nationwide coverage</span></div>
</div>
<div class="colRight">
<div class="infoBox">
<h3>Quick Facts</h3>
<div class="infoRow"><span>Support hours</span><b>9:00–18:00</b></div>
<div class="infoRow"><span>Coverage</span><b>Nationwide</b></div>
<div class="infoRow"><span>Format</span><b>Online / In-person</b></div>
<div class="infoRow"><span>Cost</span><b>No charge</b></div>
</div>
<button class="plainBtn">View Full Service Details</button>
</div>
</div>
</main>
<footer>
<span>© Mynavi</span>
<span>Mynavi · Company · Recruit · Media</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #292929;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #292929;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #292929; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #108474; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f9fafb; color: #292929;
border: 1px solid #108474; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #444444;
border: 1px solid #c5c6c6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #a89cc8; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9fafb; color:#292929; box-sizing:border-box;
font-family:'Nunito Sans', -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#f9fafb; border-bottom:1px solid #e9e9e9; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.logo { font-weight:700; font-size:19px; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; }
.navlinks .on { color:#108474; }
.navlinks .off { color:#888888; }
main { display:flex; padding:20px 32px 0; gap:32px; height:472px; }
.card { width:340px; background:#ffffff; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
overflow:hidden; display:flex; flex-direction:column; }
.cardimg { height:260px; position:relative;
background:
radial-gradient(circle at 30% 25%, rgba(251,205,10,0.5), transparent 45%),
linear-gradient(160deg, #108474 0%, #0d6b5e 60%, #292929 130%); }
.cardimg::before { content:''; position:absolute; left:50%; top:50%; width:120px; height:190px;
transform:translate(-50%,-50%); background:linear-gradient(160deg,#bb731b,#8a5514); border-radius:10px; }
.badge-new { position:absolute; top:12px; left:12px; background:#a89cc8; color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:2px 8px; }
.cardfoot { padding:14px 16px; }
.cardfoot .t { font-size:18px; font-weight:600; margin-bottom:4px; }
.cardfoot .p { font-size:16px; color:#444444; }
.thumbrow { display:flex; gap:6px; padding:0 16px 14px; }
.thumbrow div { flex:1; height:44px; border-radius:8px; background:#f2f2f2; }
.thumbrow div:nth-child(1) { background:linear-gradient(160deg,#108474,#bb731b); }
.thumbrow div:nth-child(2) { background:linear-gradient(160deg,#fbcd0a,#108474); }
.thumbrow div:nth-child(3) { background:linear-gradient(160deg,#292929,#0d6b5e); }
.info { flex:1; display:flex; flex-direction:column; }
.eyebrow { font-size:13px; color:#bb731b; font-weight:700; letter-spacing:0.3px; margin-bottom:6px; text-transform:uppercase; }
.name { font-size:24px; font-weight:600; margin:0 0 8px; }
.stars { font-size:16px; color:#fbcd0a; margin-bottom:10px; }
.stars span { color:#888888; font-size:13px; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:22px; font-weight:600; }
.sale { color:#e74c3c; }
.was { font-size:14px; color:#888888; text-decoration:line-through; }
.story { font-family:'Baskerville','Georgia',serif; font-size:15px; line-height:1.6; color:#444444; margin-bottom:16px; max-width:400px; }
.field .lbl { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:#888888; margin-bottom:8px; }
.colors { display:flex; gap:10px; margin-bottom:16px; }
.dot { width:26px; height:26px; border-radius:999px; border:2px solid transparent; }
.dot.a { background:#108474; border-color:#0d6b5e; }
.dot.b { background:#bb731b; }
.dot.c { background:#292929; }
.cta { margin-top:auto; display:flex; gap:10px; }
.btn-add { flex:1; background:#108474; color:#fff; border:none; border-radius:12px; height:48px;
font-size:16px; font-weight:600; }
.btn-ochre { background:#bb731b; color:#fff; border:none; border-radius:12px; height:48px; padding:0 20px; font-size:14px; font-weight:600; }
footer { border-top:none; margin-top:8px; padding:14px 32px; display:flex; justify-content:space-between;
background:#292929; color:#f9fafb; font-size:13px; }
</style></head>
<body>
<nav>
<div class="logo">Alto</div>
<div class="navlinks"><span class="on">Phone Cases</span><span class="off">Card Holders</span><span class="off">Wallets</span><span class="off">Bags</span></div>
</nav>
<main>
<div class="card">
<div class="cardimg"><span class="badge-new">New</span></div>
<div class="cardfoot"><div class="t">Terra Card Holder</div><div class="p">Full-grain leather</div></div>
<div class="thumbrow"><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="eyebrow">Leather Goods</div>
<h1 class="name">Terra Card Holder — Verdant Teal</h1>
<div class="stars">★★★★★ <span>4.9 (863 reviews)</span></div>
<div class="price-row"><span class="price sale">$48.00</span><span class="was">$64.00</span></div>
<p class="story">Cut from full-grain vegetable-tanned leather and finished by hand,
the Terra Card Holder ages into its own patina — a small, considered object built
to hold four cards and fold flat in a pocket.</p>
<div class="field">
<div class="lbl">Color — Verdant Teal</div>
<div class="colors"><span class="dot a"></span><span class="dot b"></span><span class="dot c"></span></div>
</div>
<div class="cta">
<button class="btn-add">Add to Cart</button>
<button class="btn-ochre">Gift Wrap</button>
</div>
</div>
</main>
<footer>
<span>© Alto</span>
<span>Shipping · Returns · Care Guide</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202020; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #202020;
border: 1px solid #202020; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #202020;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#242424; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { position:relative; width:960px; height:640px; display:flex; }
/* sidebar drawer — acrylic, recents grouped */
.side { width:230px; height:640px; background:rgba(243,243,243,0.92); border-right:1px solid #E0E0E0;
display:flex; flex-direction:column; padding:18px 14px; gap:14px; flex-shrink:0; }
.side-newchat { display:flex; align-items:center; gap:8px; background:#0078D4; color:#fff;
border-radius:8px; padding:10px 14px; font-size:14px; font-weight:600; }
.side-search { background:#FFFFFF; border:1px solid #E0E0E0; border-radius:8px; height:36px;
display:flex; align-items:center; padding:0 10px; font-size:13px; color:#616161; }
.side-label { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#919191; margin-top:6px; }
.side-row { height:38px; border-radius:8px; display:flex; align-items:center; gap:10px; padding:0 10px;
font-size:13px; color:#242424; position:relative; }
.side-row.active { background:#F3F3F3; }
.side-row.active::before { content:''; position:absolute; left:-14px; top:6px; bottom:6px; width:3px; background:#0078D4; border-radius:2px; }
.side-dot { width:16px; height:16px; border-radius:4px; background:#E0E0E0; flex-shrink:0; }
/* main conversation column */
.main { flex:1; height:640px; display:flex; flex-direction:column; position:relative; background:#FFFFFF; }
.topbar { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 20px;
border-bottom:1px solid #E0E0E0; }
.topbar-title { font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; }
.flourish { width:20px; height:20px; border-radius:7px;
background:linear-gradient(135deg,#FF6F61,#FFB900); flex-shrink:0; }
.topbar-avatar { width:26px; height:26px; border-radius:50%; background:#E0E0E0; }
.convo { flex:1; padding:22px 40px; display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.turn-user { align-self:flex-end; max-width:70%; background:#0078D4; color:#fff; font-size:14px;
line-height:1.45; padding:10px 14px; border-radius:16px 16px 4px 16px; }
.answer-card { background:#F3F3F3; border-radius:16px; padding:16px; box-shadow:0 2px 10px rgba(36,36,36,0.06);
display:flex; flex-direction:column; gap:8px; }
.answer-head { display:flex; align-items:center; gap:8px; }
.answer-head .flourish { width:22px; height:22px; border-radius:8px; }
.answer-title { font-size:14px; font-weight:600; }
.answer-body { font-size:15px; line-height:1.5; color:#242424; }
.answer-body b { font-weight:600; }
.shimmer-bar { height:3px; width:140px; border-radius:2px; margin-top:2px;
background:linear-gradient(90deg,#FF6F61,#FFB900,#FF6F61); }
.answer-actions { display:flex; gap:12px; margin-top:4px; }
.answer-actions span { width:16px; height:16px; border-radius:4px; background:#D8D8D8; }
.chips-row { display:flex; gap:8px; padding:0 40px 10px; flex-wrap:wrap; }
.chip { background:#F3F3F3; border:1px solid #E0E0E0; border-radius:18px; padding:8px 14px;
font-size:13px; font-weight:600; color:#242424; display:flex; align-items:center; gap:6px; }
.chip .fl { width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,#FF6F61,#FFB900); }
.composer { padding:12px 40px 18px; display:flex; flex-direction:column; gap:10px; }
.tone-track { align-self:center; display:flex; background:#F3F3F3; border-radius:500px; padding:3px; gap:2px; }
.tone-seg { padding:7px 16px; font-size:12px; font-weight:600; border-radius:500px; color:#616161; }
.tone-seg.on { background:#0078D4; color:#fff; }
.prompt-bar { height:52px; background:#F3F3F3; border-radius:24px; display:flex; align-items:center;
padding:0 10px 0 18px; gap:12px; border:1.5px solid #0078D4; }
.prompt-bar .ph { flex:1; font-size:14px; color:#616161; }
.mic { width:22px; height:22px; border-radius:50%; background:#E0E0E0; flex-shrink:0; }
.send { width:36px; height:36px; border-radius:50%; background:#0078D4; flex-shrink:0;
display:flex; align-items:center; justify-content:center; }
.send::before { content:''; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
border-bottom:8px solid #fff; }
</style></head>
<body>
<div class="shell">
<div class="side">
<div class="side-newchat">+ New chat</div>
<div class="side-search">Search chats</div>
<div class="side-label">Today</div>
<div class="side-row active"><span class="side-dot"></span>Quarterly report outline</div>
<div class="side-row"><span class="side-dot"></span>Trip planning to Kyoto</div>
<div class="side-label">Last 7 days</div>
<div class="side-row"><span class="side-dot"></span>Excel formula help</div>
<div class="side-row"><span class="side-dot"></span>Resume rewrite draft</div>
<div class="side-label">Copilot Pages</div>
<div class="side-row"><span class="side-dot"></span>Product launch notes</div>
</div>
<div class="main">
<div class="topbar">
<div class="topbar-title"><span class="flourish"></span>Microsoft Copilot (iOS)</div>
<div class="topbar-avatar"></div>
</div>
<div class="convo">
<div class="turn-user">Can you help me tighten this intro paragraph for our Q3 update?</div>
<div class="answer-card">
<div class="answer-head"><span class="flourish"></span><span class="answer-title">Here's a tighter version</span></div>
<div class="shimmer-bar"></div>
<div class="answer-body">Q3 was our strongest quarter yet: revenue grew <b>18% quarter-over-quarter</b>,
driven mainly by renewals in the enterprise tier. Two things stood out — retention held above 96%,
and the new onboarding flow cut time-to-value nearly in half.</div>
<div class="answer-actions"><span></span><span></span><span></span><span></span></div>
</div>
</div>
<div class="chips-row">
<div class="chip"><span class="fl"></span>Draft an email</div>
<div class="chip"><span class="fl"></span>Summarize this</div>
<div class="chip"><span class="fl"></span>Make an image</div>
</div>
<div class="composer">
<div class="tone-track">
<div class="tone-seg">Creative</div>
<div class="tone-seg on">Balanced</div>
<div class="tone-seg">Precise</div>
</div>
<div class="prompt-bar">
<div class="ph">Message Copilot</div>
<div class="mic"></div>
<div class="send"></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #242424;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #242424;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #242424; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.1px; background: #ea001c; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.1px; background: #0039a6; color: #ffffff;
border: 1px solid #ea001c; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #242424;
border: 1px solid #b9b9b9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fcdbdf; color: #ea001c;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#242424; box-sizing:border-box;
font-family:'Century Gothic', 'Segoe UI', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#0039a6; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#fff; font-size:18px; font-weight:700; margin:0; letter-spacing:0.2px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; }
.find-buy { display:flex; }
.find-buy input { border:none; height:34px; padding:0 14px; font-size:12px; width:150px; color:#383d46; }
.find-buy .go { background:#ea001c; color:#fff; height:34px; width:34px; display:flex; align-items:center; justify-content:center; font-size:13px; }
main { display:flex; height:582px; }
.stage { width:310px; background:#f1f1f1; display:flex; align-items:center; justify-content:center; }
.sheet { width:150px; height:190px; background:#fff; border:1px solid #b9b9b9; position:relative; box-shadow:0 12px 26px rgba(0,0,0,0.1); }
.label-row { position:absolute; left:14px; right:14px; height:24px; border:1px dashed #0039a6; border-radius:2px; }
.r1 { top:20px; } .r2 { top:52px; } .r3 { top:84px; } .r4 { top:116px; } .r5 { top:148px; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:10px; }
.breadcrumb { font-size:11px; color:#6d6d6d; }
h1 { font-size:22px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#383d46; margin:0; max-width:430px; line-height:1.5; }
.filters { display:flex; gap:8px; }
.chip { border:1px solid #b9b9b9; border-radius:999px; padding:6px 14px; font-size:12px; }
.chip.on { background:#0039a6; color:#fff; border-color:#0039a6; }
.stock-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#07a200; font-weight:600; width:fit-content; }
.dot-g { width:8px; height:8px; background:#07a200; border-radius:999px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:24px; font-weight:700; color:#ea001c; }
.actions { display:flex; gap:0; margin-top:4px; }
.btn-primary { background:#ea001c; color:#fff; border-radius:2px 0 0 2px; height:44px; padding:0 22px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#f7f7f7; border:1px solid #b9b9b9; color:#242424; border-radius:0 2px 2px 0;
height:44px; padding:0 18px; display:flex; align-items:center; font-size:12px; border-left:none; }
</style></head>
<body>
<nav>
<p class="brand">Avery</p>
<div class="navlinks"><span>Labels</span><span>Binders</span><span>Cards</span><span>Design & Print</span></div>
<div class="find-buy"><input placeholder="Find your product"><div class="go">→</div></div>
</nav>
<main>
<div class="stage">
<div class="sheet"><div class="label-row r1"></div><div class="label-row r2"></div><div class="label-row r3"></div><div class="label-row r4"></div><div class="label-row r5"></div></div>
</div>
<div class="info">
<p class="breadcrumb">Labels / Shipping Labels / White Matte</p>
<h1>Avery 5163 Shipping Labels, 2" x 4", 250 Pack</h1>
<p class="sub">Permanent adhesive, laser and inkjet compatible, TrueBlock technology hides previously printed text underneath.</p>
<div class="filters"><div class="chip on">2" x 4"</div><div class="chip">1" x 2.63"</div><div class="chip">3.33" x 4"</div></div>
<span class="stock-badge"><span class="dot-g"></span>In Stock — Ships Today</span>
<div class="price-row"><span class="price">$24.99</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Design Online</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #12b886; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #12b886; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fdac3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20c997; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #12b886; color: #000000;
border: 1px solid #20c997; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #12b886; color: #000000;
border: 1px solid #36c298; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fdac3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #14bb89; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f9fa; color:#212529; box-sizing:border-box;
font-family:-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
header { background:#ffffff; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-weight:800; font-size:18px; color:#12b886; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#495057; }
.loginpill { background:#212529; color:#ffffff; border-radius:16px; padding:0 16px; height:32px;
display:flex; align-items:center; font-weight:700; font-size:14px; }
main { padding:28px 100px; }
.feat { display:flex; gap:22px; margin-bottom:22px; }
.fmain { flex:2; background:#ffffff; border-radius:8px; padding:20px; }
.fmain .tag { color:#12b886; font-size:12px; font-weight:700; }
.fmain h1 { font-size:24px; margin:8px 0 6px; line-height:1.3; }
.fmain p { font-size:14px; color:#868e96; margin:0; line-height:1.5; }
.fside { flex:1; background:#ffffff; border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.fside .stitle { font-size:13px; font-weight:700; color:#212529; }
.fside .srow { font-size:13px; color:#495057; border-top:1px solid #e9ecef; padding-top:8px; }
.writebtn { background:#12b886; color:#ffffff; border-radius:6px; padding:8px 18px; font-size:13px;
font-weight:700; align-self:flex-start; }
.list h2 { font-size:15px; color:#495057; margin:0 0 12px; }
.post { display:flex; gap:16px; background:#ffffff; border-radius:8px; padding:16px; margin-bottom:12px; }
.thumb { width:120px; height:76px; border-radius:6px; flex-shrink:0; }
.t1 { background:linear-gradient(135deg,#c3faE8,#12b886); }
.t2 { background:linear-gradient(135deg,#e9ecef,#868e96); }
.t3 { background:linear-gradient(135deg,#96f2d7,#0ca678); }
.post .body h3 { margin:0 0 6px; font-size:16px; }
.post .body p { margin:0 0 6px; font-size:13px; color:#868e96; line-height:1.4; }
.post .meta { font-size:11px; color:#adb5bd; }
</style></head>
<body>
<header>
<span class="brand">velog</span>
<div class="navlinks"><span>Trending</span><span>Recent</span><span>Tags</span></div>
<div class="loginpill">Sign in</div>
</header>
<main>
<section class="feat">
<div class="fmain">
<span class="tag">EDITOR'S PICK</span>
<h1>Writing a React state machine from scratch, in plain hooks</h1>
<p>A calm walkthrough of building predictable state transitions without a library — what breaks, and why.</p>
</div>
<div class="fside">
<span class="stitle">Start writing today</span>
<span class="srow">Markdown editor, code blocks, and instant publish.</span>
<div class="writebtn">Write a post</div>
</div>
</section>
<section class="list">
<h2>Recent posts</h2>
<div class="post"><div class="thumb t1"></div><div class="body">
<h3>Understanding the event loop, once and for all</h3>
<p>Microtasks, macrotasks, and why your promise resolves later than you expect.</p>
<span class="meta">Jisoo Kang · 2026.06.11</span>
</div></div>
<div class="post"><div class="thumb t2"></div><div class="body">
<h3>Migrating a monorepo to pnpm workspaces</h3>
<p>What actually changed after the switch, and the two gotchas we hit.</p>
<span class="meta">Minho Jang · 2026.06.09</span>
</div></div>
<div class="post"><div class="thumb t3"></div><div class="body">
<h3>A minimal design system in 300 lines of CSS</h3>
<p>Tokens, spacing, and a handful of components — nothing more.</p>
<span class="meta">Yuna Park · 2026.06.07</span>
</div></div>
</section>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeefe9; color: #23251d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeefe9; color: #23251d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -0.5px; margin: 0; color: #23251d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; margin: 0; color: #6c6e63; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.5; background: #f7a501; color: #23251d;
border: none; border-radius: 6px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.5; background: #e5e7e0; color: #23251d;
border: 1px solid #f7a501; border-radius: 6px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #23251d;
border: 1px solid #bbbcb6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6e63; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: transparent; color: #4d4f46;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeefe9; color:#23251d; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 크림 캔버스 + 손그림 고슴도치 마스코트가 마진에 흩어진 스케치북 느낌 —
다크테크 장르 관례를 일부러 거부한다. */
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:800; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#4d4f46; font-weight:700; }
.btn { background:#f7a501; color:#23251d; border:none; border-radius:6px; padding:9px 18px; font-weight:800; font-size:13px; }
.wrap { position:relative; padding:10px 40px 0; }
/* 손그림풍 고슴도치 — 원+삼각형 가시로 절제된 라인아트 */
.hog { position:absolute; width:54px; height:40px; }
.hog .body { position:absolute; width:40px; height:28px; background:#4d4f46; border-radius:50% 50% 40% 40%; left:6px; top:10px; }
.hog .spike { position:absolute; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:9px solid #4d4f46; top:2px; }
.hog .face { position:absolute; width:10px; height:8px; background:#f7a501; border-radius:50%; left:0; top:16px; }
.h1 { top:8px; right:70px; } .h1 .spike { left:14px; }
.h2 { top:64px; left:44px; transform:scaleX(-1); } .h2 .spike { left:14px; }
h1 { font-size:32px; font-weight:800; letter-spacing:-0.6px; margin:8px 0 6px; max-width:560px; line-height:1.3; }
.sub { font-size:13px; color:#4d4f46; max-width:480px; line-height:1.43; margin:0 0 18px; }
.row { display:flex; gap:14px; padding:0 40px; }
.codecard { flex:1; background:#ffffff; border:1px solid #bfc1b7; border-radius:6px; padding:14px;
font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:11px; line-height:1.6; color:#33342d; }
.codecard .k { color:#7c44a6; } .codecard .s { color:#2c8c66; }
.chartcard { flex:1; background:#ffffff; border:1px solid #bfc1b7; border-radius:6px; padding:14px; }
.chartcard h5 { font-size:12px; font-weight:700; margin:0 0 10px; color:#23251d; }
.bars { display:flex; align-items:flex-end; gap:6px; height:60px; }
.bar { flex:1; border-radius:3px 3px 0 0; }
.b1 { height:40%; background:#2c84e0; } .b2 { height:70%; background:#f7a501; } .b3 { height:55%; background:#2c8c66; }
.b4 { height:90%; background:#cd4239; } .b5 { height:60%; background:#7c44a6; }
footer { padding:16px 40px; font-size:11px; color:#6c6e63; display:flex; justify-content:space-between; margin-top:auto; }
</style></head>
<body>
<div class="hog h1"><span class="spike"></span><span class="body"></span><span class="face"></span></div>
<div class="hog h2"><span class="spike"></span><span class="body"></span><span class="face"></span></div>
<nav>
<p class="brand">PostHog</p>
<div class="navlinks"><span>Product</span><span>Docs</span><span>Pricing</span></div>
<button class="btn">Get started — free</button>
</nav>
<div class="wrap">
<h1>How developers build successful products</h1>
<p class="sub">Product analytics, session replay, feature flags, and A/B testing — in one platform.</p>
</div>
<div class="row">
<div class="codecard"><span class="k">posthog</span>.capture(<span class="s">'user_signed_up'</span>, {<br> plan: <span class="s">'growth'</span><br>})</div>
<div class="chartcard"><h5>Weekly active users</h5>
<div class="bars"><div class="bar b1"></div><div class="bar b2"></div><div class="bar b3"></div><div class="bar b4"></div><div class="bar b5"></div></div>
</div>
</div>
<footer>
<span>© PostHog</span>
<span>Product · Docs · Pricing · Blog</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #ff0000; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #ffffff; color: #0d0d0d;
border: 1px solid #ff0000; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0d0d0d;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d0d0d; box-sizing:border-box;
font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#ffffff; border-bottom:1px solid #e5e5e5; }
.brand { font-size:17px; font-weight:600; letter-spacing:-0.02em; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#1a1a1a; font-weight:600; }
.search { background:#f5f5f5; border:1px solid #e5e5e5; border-radius:6px; padding:8px 14px; font-size:12px;
color:#666666; width:180px; }
main { display:flex; height:576px; }
.gallery { width:400px; background:#f5f5f5; position:relative; display:flex; align-items:center; justify-content:center; }
.pad { width:230px; height:150px; background:#0d0d0d; border-radius:60px 60px 40px 40px; position:relative;
box-shadow:0 20px 40px rgba(0,0,0,0.2); }
.pad::before { content:''; position:absolute; top:50px; left:40px; width:32px; height:32px;
border-radius:9999px; background:#ff0000; }
.pad::after { content:''; position:absolute; top:50px; right:40px; width:32px; height:32px;
border-radius:9999px; background:#333333; box-shadow:0 0 0 6px #1a1a1a inset; }
.stick-l { position:absolute; top:20px; left:74px; width:36px; height:36px; border-radius:50%; background:#ff0000; }
.badge-custom { position:absolute; top:22px; left:22px; background:#1a1a1a; color:#fff; font-size:10px;
font-weight:700; padding:5px 12px; border-radius:9999px; text-transform:uppercase; }
.info { flex:1; padding:30px 36px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#666666; }
h1 { font-size:22px; font-weight:600; margin:0; line-height:1.28; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; }
.desc { font-size:13px; color:#1a1a1a; line-height:1.5; max-width:340px; }
.step-row { display:flex; flex-direction:column; gap:6px; }
.step { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#1a1a1a; border:1px solid #e5e5e5;
border-radius:8px; padding:9px 12px; background:#f5f5f5; }
.step .n { width:18px; height:18px; border-radius:50%; background:#ff0000; color:#fff; font-size:10px;
font-weight:700; display:flex; align-items:center; justify-content:center; }
.badges2 { display:flex; gap:6px; }
.badge2 { background:#ff0000; color:#fff; font-size:10px; font-weight:700; padding:4px 10px; border-radius:9999px;
text-transform:uppercase; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#ff0000; color:#fff; border:none; border-radius:12px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #0d0d0d; color:#0d0d0d; background:#fff; border-radius:12px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#999999; }
</style></head>
<body>
<nav>
<div class="brand">Aimcontrollers</div>
<div class="navlinks"><span>Xbox</span><span>PS5</span><span>PC</span><span>Configurator</span></div>
<div class="search">Search part...</div>
</nav>
<main>
<div class="gallery">
<span class="badge-custom">Pro Series</span>
<div class="pad"><div class="stick-l"></div></div>
</div>
<div class="info">
<span class="cat">Custom Controller · PS5</span>
<h1>Aim Vantage Custom Controller</h1>
<div class="badges2"><span class="badge2">Pro Series</span><span class="badge2">Custom</span></div>
<div class="price-row"><span class="price">$189.99</span></div>
<p class="desc">Build your own — pick trigger stops, stick tension, and shell finish for zero-recoil, tournament-ready response.</p>
<div class="step-row">
<div class="step"><span class="n">1</span> Shell color: Crimson Red</div>
<div class="step"><span class="n">2</span> Trigger stops: Hair Trigger</div>
</div>
<div class="btn-row">
<button class="btn-primary">Continue Build</button>
<button class="btn-outline">Save Config</button>
</div>
<span class="meta">Ships in 3–5 business days</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #227cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #227cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96bffa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #94fb4d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #227cff; color: #94fb4d;
border: 1px solid #94fb4d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #227cff; color: #f5f5f5;
border: 1px solid #448ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96bffa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3490e3; color: #94fb4d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#090909; color:#f0f0f0; box-sizing:border-box;
font-family:"Euclid Circular B", Arial, sans-serif; font-weight:300; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:300; color:#f0f0f0; }
.navlinks { display:flex; gap:22px; font-size:14px; }
.navlinks span.on { color:#227cff; }
.btn-blue { background:#227cff; color:#2b2b2b; border-radius:30px; height:36px; padding:0 20px; font-size:14px;
display:flex; align-items:center; }
.btn-lime { background:#94fb4d; color:#2b2b2b; border-radius:30px; height:36px; padding:0 20px; font-size:14px;
display:flex; align-items:center; }
.hero { text-align:center; padding:26px 40px; }
.hero .eyebrow { font-size:20px; color:#227cff; margin:0 0 6px; }
.hero h1 { font-size:52px; font-weight:300; letter-spacing:-1.5px; margin:0 0 14px; }
.hero-btns { display:flex; justify-content:center; gap:10px; }
.light { background:#f0f0f0; color:#090909; padding:22px 40px; }
.light .sec-eyebrow { text-align:center; font-size:24px; color:#227cff; margin:0 0 14px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#1c1c1c; color:#f0f0f0; border:1px solid #090909; border-radius:8px; padding:12.8px; }
.card h3 { font-size:16px; font-weight:300; margin:0 0 6px; }
.card p { font-size:13px; color:#909090; margin:0; line-height:1.4; }
footer { position:absolute; bottom:0; left:0; right:0; background:#090909; padding:10px 40px;
display:flex; justify-content:space-between; font-size:12px; color:#6c6c6c; }
</style></head>
<body>
<nav>
<div class="brand">Supertone</div>
<div class="navlinks"><span class="on">Products</span><span>Developers</span><span>Business</span><span>Company</span></div>
<div class="btn-lime">Get Started</div>
</nav>
<div class="hero">
<p class="eyebrow">The Voice Intelligence Platform</p>
<h1>Play</h1>
<div class="hero-btns">
<div class="btn-blue">Learn More</div>
</div>
</div>
<div class="light">
<p class="sec-eyebrow">Solutions</p>
<div class="cards">
<div class="card"><h3>Text-to-speech</h3><p>Natural, controllable voices for every language and platform.</p></div>
<div class="card"><h3>Voice conversion</h3><p>Transform any voice while preserving performance and timing.</p></div>
<div class="card"><h3>Voice design</h3><p>Control pitch, tone, and style with independent parameters.</p></div>
</div>
</div>
<footer><span>© Supertone</span><span>Supertone · Research · Careers · Responsible AI</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00aff0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00aff0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d6f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0078d4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00aff0; color: #000000;
border: 1px solid #0078d4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00aff0; color: #000000;
border: 1px solid #27baf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d6f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00a6ec; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#16161A; color:#F2F2F4; box-sizing:border-box;
font-family:"Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.th-hdr { height:56px; display:flex; align-items:center; gap:12px; padding:0 26px; border-bottom:0.5px solid #34343C; }
.av { width:36px; height:36px; border-radius:50%; position:relative; background:linear-gradient(135deg,#34C3FF,#0078D4); }
.av::after { content:''; position:absolute; bottom:0; right:0; width:9px; height:9px; border-radius:50%; background:#2DC26B; border:2px solid #16161A; }
.th-name { font-size:15px; font-weight:700; }
.th-status { font-size:11px; color:#2DC26B; }
.icons { margin-left:auto; display:flex; gap:20px; color:#00AFF0; font-size:20px; }
.msgs { padding:20px 26px; display:flex; flex-direction:column; gap:6px; }
.bubble { max-width:60%; padding:9px 14px; border-radius:14px; font-size:15px; }
.in { align-self:flex-start; background:#2A2A30; border-bottom-left-radius:4px; }
.out { align-self:flex-end; background:#0078D4; color:#fff; border-bottom-right-radius:4px; }
.callcard { align-self:flex-start; display:flex; gap:10px; align-items:center; background:#2A2A30; border-radius:14px; padding:10px 14px; margin:6px 0; }
.call-ic { width:30px; height:30px; border-radius:50%; background:rgba(45,194,107,.18); color:#2DC26B; display:flex; align-items:center; justify-content:center; font-size:14px; }
.call-title { font-size:13px; font-weight:700; }
.call-sub { font-size:11px; color:#A4A4AE; }
.grid-wrap { padding:16px 26px; }
.grid-hdr { font-size:13px; font-weight:700; margin-bottom:10px; color:#A4A4AE; }
.vgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.tile { position:relative; border-radius:14px; height:130px; overflow:hidden; }
.tile .name { position:absolute; bottom:8px; left:8px; font-size:11px; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.tile .mic { position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.45); }
.ctrl-bar { position:absolute; bottom:20px; left:0; right:0; display:flex; justify-content:center; gap:14px; }
.cbtn { width:52px; height:52px; border-radius:50%; background:#2A2A30; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }
.cbtn.end { background:#E8364F; }
</style></head>
<body>
<div class="th-hdr">
<div class="av"></div>
<div><div class="th-name">Family Group</div><div class="th-status">Active now</div></div>
<div style="margin-left:14px; font-size:11px; font-weight:700; color:#00AFF0; letter-spacing:.3px;">Skype (iOS)</div>
<div class="icons">📞 📹</div>
</div>
<div class="msgs">
<div class="bubble in">did you guys see the photos from the trip?</div>
<div class="bubble out">yes!! sending you the best ones now</div>
<div class="callcard"><div class="call-ic">📹</div><div><div class="call-title">Group video call</div><div class="call-sub">12 min · 3 participants</div></div></div>
<div class="bubble in">that beach shot is incredible 😍</div>
</div>
<div class="grid-wrap">
<div class="grid-hdr">Live · Group video call</div>
<div class="vgrid">
<div class="tile" style="background:linear-gradient(135deg,#34C3FF,#0078D4);"><div class="mic"></div><div class="name">Dana</div></div>
<div class="tile" style="background:linear-gradient(135deg,#8a6fd1,#4a3a8f);"><div class="mic"></div><div class="name">Marek</div></div>
</div>
</div>
<div class="ctrl-bar">
<div class="cbtn">🎤</div><div class="cbtn">📹</div><div class="cbtn end">☎</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0061fd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064ff; color: #ffffff;
border: 1px solid #0061fd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064ff; color: #f5f5f5;
border: 1px solid #277bfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0064ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Pretendard, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:14px; font-weight:700; padding-bottom:16px; }
.navlinks span.active { color:#0064ff; border-bottom:4px solid #0064ff; }
.hero { text-align:center; padding:26px 40px 22px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.eyebrow { font-size:14px; font-weight:700; color:#0064ff; letter-spacing:0.02em; }
h1 { font-size:34px; font-weight:700; margin:0; letter-spacing:-0.5px; line-height:1.25; }
.pill { display:flex; align-items:center; gap:10px; background:#ffffff; border:1px solid #e2e2e2;
border-radius:35px; padding:14px 22px; font-size:14px; color:#000000; margin-top:6px; }
.pill .dot { width:8px; height:8px; border-radius:50%; background:#0064ff; }
.bands { display:flex; gap:16px; padding:6px 40px 30px; }
.panel { flex:1; border-radius:19px; padding:22px; display:flex; flex-direction:column; gap:8px; }
.panel.blue { background:#0061fd; color:#ffffff; }
.panel.grey { background:#f3f5f7; color:#000000; }
.panel.sky { background:linear-gradient(160deg,#f1f8ff,#d3e8ff); color:#000000; }
.panel .t { font-size:17px; font-weight:700; }
.panel .d { font-size:13px; opacity:0.85; line-height:1.4; }
.panel .icon { width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,0.35); margin-bottom:4px; }
.panel.grey .icon, .panel.sky .icon { background:rgba(0,100,255,0.14); }
.dots { display:flex; justify-content:center; gap:6px; padding-bottom:10px; }
.dots span { width:6px; height:6px; border-radius:9999px; background:#e2e2e2; }
.dots span.on { background:#0061fd; width:16px; }
</style></head>
<body>
<nav>
<span class="brand">TMAP Mobility</span>
<div class="navlinks">
<span class="active">Drive</span>
<span style="color:#000">Transit</span>
<span style="color:#000">EV Charge</span>
<span style="color:#000">Business</span>
</div>
<span style="width:40px"></span>
</nav>
<section class="hero">
<span class="eyebrow">TMAP MOBILITY VISION</span>
<h1>The fastest way to where<br>you're actually going</h1>
<div class="pill"><span class="dot"></span>Where to?</div>
</section>
<div class="bands">
<div class="panel blue">
<div class="icon"></div>
<span class="t">Driver service</span>
<span class="d">Real-time routing built on driver-scale data.</span>
</div>
<div class="panel grey">
<div class="icon"></div>
<span class="t">Transit service</span>
<span class="d">Bus and subway arrival, one tap away.</span>
</div>
<div class="panel sky">
<div class="icon"></div>
<span class="t">Business service</span>
<span class="d">Mobility data and APIs for fleet teams.</span>
</div>
</div>
<div class="dots"><span></span><span class="on"></span><span></span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064e0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064e0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4ec; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0082fb; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064e0; color: #ffffff;
border: 1px solid #0082fb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064e0; color: #f5f5f5;
border: 1px solid #277be3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4ec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0069e4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c2b33; box-sizing:border-box;
font-family:"Optimistic Text", -apple-system, "Segoe UI", Helvetica, sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"Optimistic Display", "Optimistic Text", sans-serif; }
nav { height:56px; display:flex; align-items:center; padding:0 36px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:32px; }
.navlinks span { font-size:14px; color:#65676b; }
.cta { margin-left:auto; background:linear-gradient(120deg,#0064e0,#0082fb); color:#ffffff; border-radius:9999px;
height:36px; padding:0 20px; display:flex; align-items:center; font-size:14px; font-weight:600; }
.hero { position:relative; padding:18px 36px 22px; display:flex; align-items:center; gap:30px;
background:linear-gradient(120deg,#0064e0,#0082fb); color:#ffffff; border-radius:0 0 20px 20px; }
.hero-text { flex:1.1; }
.hero h1 { font-size:38px; font-weight:700; line-height:1.1; letter-spacing:-0.5px; margin:0 0 12px; max-width:420px; }
.hero p { font-size:16px; line-height:1.5; margin:0 0 16px; max-width:380px; opacity:0.92; }
.btn-white { display:inline-flex; background:#ffffff; color:#0064e0; border-radius:9999px; height:40px;
padding:0 22px; align-items:center; font-size:14px; font-weight:600; }
.loop { flex:1; height:150px; position:relative; }
.loop::before, .loop::after { content:''; position:absolute; width:110px; height:110px; border-radius:50%;
border:14px solid rgba(255,255,255,0.55); }
.loop::before { left:40px; top:10px; }
.loop::after { left:120px; top:10px; border-color:rgba(255,255,255,0.85); }
.feed { display:flex; gap:16px; padding:18px 36px 20px; background:#f0f2f5; margin-top:14px; }
.card { flex:1; background:#ffffff; border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(28,43,51,0.10); }
.card .avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#0064e0,#0082fb); margin-bottom:10px; }
.card h4 { margin:0 0 6px; font-size:15px; font-weight:600; }
.card p { margin:0; font-size:13px; color:#65676b; line-height:1.45; }
.badge { display:inline-block; margin-top:10px; background:rgba(0,100,224,0.12); color:#0064e0; border-radius:9999px;
padding:3px 10px; font-size:11px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Meta</p>
<div class="navlinks"><span>Technologies</span><span>Impact</span><span>Careers</span><span>News</span></div>
<div class="cta">Get started</div>
</nav>
<div class="hero">
<div class="hero-text">
<h1 class="display">Building the future of connection</h1>
<p>From apps that connect billions to the tools shaping the next computing platform.</p>
<div class="btn-white">Learn more</div>
</div>
<div class="loop"></div>
</div>
<div class="feed">
<div class="card"><div class="avatar"></div><h4>Family & friends</h4><p>Stay close to the people you care about, wherever they are.</p><span class="badge">Social</span></div>
<div class="card"><div class="avatar"></div><h4>Business tools</h4><p>Reach customers and grow with tools built for every size of business.</p><span class="badge">Business</span></div>
<div class="card"><div class="avatar"></div><h4>Reality Labs</h4><p>Explore immersive experiences across headsets and glasses.</p><span class="badge">New</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f5f6; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f5f6; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #5b5b5b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #f4f5f6; color: #1a1a1a;
border: 1px solid #5b5b5b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #bebebf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.18; letter-spacing: 0.2px; background: #c1e9ff; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f5f6; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; }
.brand { font-size:16px; font-weight:500; margin:0; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:500; }
.navlinks .active { color:#1a1a1a; }
.navlinks span:not(.active) { color:#6b6b6b; }
.search { width:180px; height:40px; border-radius:999px; background:#fff; border:1px solid #e8e8e8; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:0 30px; min-height:0; }
.hero { flex:1 1 auto; display:flex; align-items:center; gap:26px; border-radius:12px;
background:linear-gradient(120deg,#e1fcff,#c1e9ff 60%,#eceafb); min-height:0; padding:0 26px; }
.hero-copy { flex:1; }
.hero-copy h1 { font-size:28px; font-weight:500; margin:0 0 8px; }
.hero-copy p { font-size:14px; color:#333333; margin:0 0 14px; max-width:320px; }
.hero-copy button { background:#5b5b5b; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-weight:500; font-size:16px; }
.hero-art { flex:0 0 210px; height:170px; border-radius:12px; background:#ffffff; position:relative; }
.hero-art::after { content:''; position:absolute; inset:20px; border-radius:999px; background:#eceafb; }
.tabs { flex:0 0 auto; display:flex; gap:8px; padding:14px 0; }
.tab { padding:8px 16px; border-radius:999px; font-size:14px; font-weight:500; color:#6b6b6b; }
.tab.active { background:#f0edfe; color:#1a1a1a; }
.grid { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-bottom:18px; }
.card { background:#fff; border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.thumb { aspect-ratio:4/3; border-radius:8px; }
.t1 { background:linear-gradient(150deg,#bde7ff,#5b5b5b 140%); }
.t2 { background:linear-gradient(150deg,#eceafb,#5b5b5b 140%); }
.t3 { background:linear-gradient(150deg,#e1fcff,#5b5b5b 140%); }
.card h3 { font-size:16px; font-weight:500; margin:0; }
.card .price { font-size:18px; font-weight:500; margin:2px 0 0; }
.badge { display:inline-block; background:#c1e9ff; color:#1a1a1a; font-size:11px; font-weight:500; text-transform:uppercase;
letter-spacing:0.2px; padding:2px 8px; border-radius:4px; margin-bottom:2px; align-self:flex-start; }
footer { flex:0 0 auto; height:52px; background:#1a1a1a; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Arena</p>
<div class="navlinks"><span class="active">Equipment</span><span>Classes</span><span>Trainers</span></div>
<div class="search"></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<h1>A gym at 6am, before anyone arrives.</h1>
<p>Studio-quality equipment and class schedules, arranged in clean, accessible rows.</p>
<button>Shop Equipment</button>
</div>
<div class="hero-art"></div>
</div>
<div class="tabs">
<span class="tab active">All</span><span class="tab">Strength</span><span class="tab">Cardio</span><span class="tab">Recovery</span>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb t1"></div><h3>Adjustable Kettlebell</h3><p class="price">$129.00</p></div>
<div class="card"><div class="thumb t2"></div><h3>Foam Roller Pro</h3><p class="price">$38.00</p></div>
<div class="card"><span class="badge">Sale</span><div class="thumb t3"></div><h3>Resistance Band Set</h3><p class="price">$24.00</p></div>
</div>
</main>
<footer>
<span>© Arena</span>
<span>Class Schedule · Trainers · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff7e7; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff7e7; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7871; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6b35; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff7e7; color: #ff6b35;
border: 1px solid #ff6b35; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fff7e7; color: #111111;
border: 1px solid #d9d2c5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7871; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffe1cb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFF7E7; color:#2E1A47; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#FFF7E7; position:relative; overflow:hidden; }
.aurora { height:150px; background:linear-gradient(160deg,#FFB89E,#FFD25C 55%,#FF6B35); padding:24px 20px; }
.greeting { font-size:22px; font-weight:700; }
.subgreet { font-size:13px; opacity:0.85; margin-top:2px; }
.stage { padding:0 20px; }
.spherewrap { display:flex; justify-content:center; margin:-70px 0 14px; }
.sphere { width:170px; height:170px; border-radius:50%;
background:radial-gradient(circle at 30% 28%, #FFB89E 0%, #FF6B35 68%, #E55A2B 100%);
box-shadow:0 10px 30px rgba(46,26,71,0.18); }
.guide { text-align:center; font-size:14px; color:#2E1A47; margin-bottom:6px; }
.timer { text-align:center; font-size:34px; font-weight:700; font-variant-numeric:tabular-nums; margin-bottom:16px; }
.controls { display:flex; justify-content:center; align-items:center; gap:20px; }
.skip { width:40px; height:40px; border-radius:50%; background:#FBF1DA; display:flex; align-items:center; justify-content:center; font-size:14px; }
.play { width:60px; height:60px; border-radius:50%; background:#FF6B35; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:20px; box-shadow:rgba(255,107,53,0.25) 0 6px 16px; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:#FFF7E7; border-top:0.5px solid #E8DFC9;
display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#8E7DA5; text-align:center; }
.tab.on { color:#FF6B35; font-weight:700; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.3px; margin:0; color:#2E1A47; }
.brand span { color:#FF6B35; }
.tag { font-size:14px; color:#594675; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:14px; border:1px solid #E8DFC9; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#594675; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#594675; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#FBF1DA; border:1px solid #E8DFC9; color:#594675; }
.footer { margin-top:auto; border-top:1px solid #E8DFC9; padding-top:16px; font-size:11px; color:#8E7DA5; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="aurora"><div class="greeting">Good morning, Sam</div><div class="subgreet">Today's vibe: Mindful Moment</div></div>
<div class="stage">
<div class="spherewrap"><div class="sphere"></div></div>
<div class="guide">Take a deep breath in…</div>
<div class="timer">10:00</div>
<div class="controls"><div class="skip">⟲15</div><div class="play">▶</div><div class="skip">15⟳</div></div>
</div>
<div class="tabbar"><div class="tab on">Today</div><div class="tab">Meditate</div><div class="tab" style="color:#7E9F4B">Sleep</div><div class="tab">Move</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Headspace (iOS)<span>.</span></h1>
<p class="tag">A hand-drawn morning on butter-cream — a breathing sphere at the center, and warm Ink Brown text that never turns cold black.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#FF6B35"></div><small>#FF6B35</small></div>
<div class="sw"><div class="chip2" style="background:#FFD25C"></div><small>#FFD25C</small></div>
<div class="sw"><div class="chip2" style="background:#7E9F4B"></div><small>#7E9F4B</small></div>
<div class="sw"><div class="chip2" style="background:#2E1A47"></div><small>#2E1A47</small></div>
<div class="sw"><div class="chip2" style="background:#FFF7E7"></div><small>#FFF7E7</small></div>
</div>
<div class="typeblock">
<div class="t1">Take a deep breath in…</div>
<div class="t2">Apercu (Nunito sub) · title case only, never UPPERCASE — Headspace stays gentle</div>
</div>
<div class="taglist">
<span>Breathing sphere</span><span>Aurora gradient</span><span>Illustration companions</span>
<span>Streak ring</span><span>Sage-tinted Sleep tab</span>
</div>
<div class="footer">Butter-cream canvas #FFF7E7 · warm Ink Brown shadows, never true black</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #23569d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #23569d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96adcd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #23569d; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #23569d; color: #f5f5f5;
border: 1px solid #456fab; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96adcd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4671ad; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#17181c; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #8e959f33; }
.brand { font-size:18px; font-weight:700; margin:0; color:#23569d; }
.navlinks { display:flex; gap:24px; font-size:16px; font-weight:500; }
.btn { background:#23569d; color:#fff; border:none; border-radius:8px; height:56px; padding:0 20px; font-size:16px; font-weight:500; }
.hero { background:linear-gradient(160deg,#f1f8fd,#ffffff 60%); padding:26px 40px 20px; }
.hero h1 { font-size:40px; font-weight:500; line-height:1.4; margin:0 0 4px; }
.hero p { font-size:16px; color:#69707a; margin:0; }
.dialog { margin:18px 40px 0; background:#ffffff; border-radius:20px;
box-shadow: rgba(23,24,28,0.12) 0px 2px 4px 0px, rgba(23,24,28,0.09) 0px 4px 28px 0px, rgba(23,24,28,0.1) 0px 20px 32px 0px;
padding:20px; }
.tabs { display:flex; gap:8px; margin-bottom:16px; }
.tab { border-radius:8px; padding:0 12px; height:48px; display:flex; align-items:center; font-size:16px; font-weight:500; color:#69707a; }
.tab.on { background:#ffffff; color:#23569d; border:1px solid #9fd1f1; }
.fields { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:14px; align-items:end; }
.field .l { font-size:12px; color:#69707a; margin-bottom:4px; }
.field .v { font-size:16px; font-weight:500; }
.searchbtn { background:#23569d; color:#fff; border:none; border-radius:8px; height:56px; padding:0 20px; font-size:16px; font-weight:500; }
.chips { display:flex; gap:10px; margin-top:16px; }
.chip { background:#f1f8fd; border:1px solid #9fd1f1; border-radius:40px; padding:6px 14px; font-size:13px; color:#23569d; }
.promo { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:22px 40px; }
.p-card { border-radius:16px; padding:22px; color:#fff; }
.p1 { background:linear-gradient(135deg,#23569d,#1d6dcd); }
.p2 { background:linear-gradient(135deg,#d81159,#a10d43); }
.p-card .t { font-size:18px; font-weight:700; margin-bottom:4px; }
.p-card .s { font-size:13px; opacity:.9; }
</style></head>
<body>
<nav>
<p class="brand">China Airlines</p>
<div class="navlinks"><span>Book</span><span>Membership</span><span>Flight Status</span></div>
<button class="btn">Book Now</button>
</nav>
<section class="hero">
<h1>Fly to the World, Depart with Confidence</h1>
<p>Believe we can always do better — China Airlines flies with you</p>
</section>
<section class="dialog">
<div class="tabs"><span class="tab on">One-way</span><span class="tab">Round-trip</span><span class="tab">Multi-city</span></div>
<div class="fields">
<div class="field"><div class="l">From</div><div class="v">Taipei TPE</div></div>
<div class="field"><div class="l">To</div><div class="v">Seoul ICN</div></div>
<div class="field"><div class="l">Date</div><div class="v">2026-10-05</div></div>
<button class="searchbtn">Search Flights</button>
</div>
<div class="chips"><span class="chip">Mileage Redemption</span><span class="chip">Member-Only Deals</span></div>
</section>
<section class="promo">
<div class="p-card"><div class="t">Early Bird Offer</div><div class="s">Book 90 days ahead and save up to 25%</div></div>
<div class="p-card p2"><div class="t">Taoyuan Fast Track</div><div class="s">Priority check-in and baggage service for members</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c4c4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c4c4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87dfdf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #07abae; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c4c4; color: #000000;
border: 1px solid #07abae; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c4c4; color: #000000;
border: 1px solid #27cccc; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87dfdf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #01c0c0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191f28; box-sizing:border-box;
font-family:Pretendard,-apple-system,Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; box-shadow:0 1px #0000000f; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-weight:700; font-size:18px; color:#00c4c4; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#4e5968; }
.btn { background:#00c4c4; color:#ffffff; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:500; }
.cats { display:flex; gap:10px; padding:14px 32px; }
.chip { background:#e6fafa; color:#00c4c4; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:500; }
.chip.on { background:#00c4c4; color:#ffffff; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:6px 32px 20px; }
.card { background:#ffffff; border-radius:8px; overflow:hidden; }
.thumb { height:100px; border-radius:8px 8px 0 0; position:relative; }
.th1 { background:linear-gradient(135deg,#bef5f5,#00c4c4); }
.th2 { background:linear-gradient(135deg,#fffae1,#fcc500); }
.th3 { background:linear-gradient(135deg,#ecf2ff,#4672f9); }
.th4 { background:linear-gradient(135deg,#fff0f0,#ff5959); }
.badgerow { position:absolute; top:8px; left:8px; display:flex; gap:4px; }
.b { font-size:11px; font-weight:700; border-radius:4px; padding:2px 6px; background:#00c4c4; color:#ffffff; }
.b.red { background:#ff5959; }
.cb { padding:12px 14px; }
.cb .maker { font-size:13px; color:#6b7684; margin:0 0 4px; }
.cb h4 { font-size:15px; margin:0 0 8px; line-height:1.35; }
.fund { display:flex; align-items:baseline; gap:8px; }
.fund .pct { font-size:22px; font-weight:700; color:#00c4c4; }
.fund .cnt { font-size:12px; color:#4e5968; }
.prog { height:4px; border-radius:2px; background:#f2f5f8; margin-top:6px; }
.prog i { display:block; height:4px; border-radius:2px; background:#00c4c4; }
</style></head>
<body>
<nav>
<span class="brand">Wadiz</span>
<div class="navlinks"><span>Reward</span><span>Pre-order</span><span>Business</span><span>Ads</span></div>
<span class="btn">Sign up</span>
</nav>
<div class="cats">
<span class="chip on">Open now</span><span class="chip">Early bird</span><span class="chip">Ending soon</span><span class="chip">Popular</span>
</div>
<div class="grid">
<div class="card"><div class="thumb th1"><div class="badgerow"><span class="b">Open</span></div></div>
<div class="cb"><p class="maker">Studio Nine</p><h4>Modular desk organizer in three finishes</h4>
<div class="fund"><span class="pct">182%</span><span class="cnt">1,204 backers</span></div><div class="prog"><i style="width:100%"></i></div></div></div>
<div class="card"><div class="thumb th2"><div class="badgerow"><span class="b" style="background:#fcc500;">Early bird</span></div></div>
<div class="cb"><p class="maker">Wander Goods</p><h4>Packable travel tote with hidden pockets</h4>
<div class="fund"><span class="pct">64%</span><span class="cnt">340 backers</span></div><div class="prog"><i style="width:64%"></i></div></div></div>
<div class="card"><div class="thumb th3"><div class="badgerow"><span class="b" style="background:#4672f9;">Upcoming</span></div></div>
<div class="cb"><p class="maker">Clay & Co.</p><h4>Hand-thrown ceramic tableware set</h4>
<div class="fund"><span class="pct">—</span><span class="cnt">Opens in 3 days</span></div><div class="prog"><i style="width:0%"></i></div></div></div>
<div class="card"><div class="thumb th4"><div class="badgerow"><span class="b red">Ending soon</span></div></div>
<div class="cb"><p class="maker">Lumen Labs</p><h4>Dimmable desk lamp with wireless charging</h4>
<div class="fund"><span class="pct">312%</span><span class="cnt">2,890 backers</span></div><div class="prog"><i style="width:100%"></i></div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4a154b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4a154b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a890a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4a154b; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4a154b; color: #f5f5f5;
border: 1px solid #653966; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a890a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #673a68; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1D1C1D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:100%; }
.sidebar { width:230px; background:#4A154B; padding:0; display:flex; flex-direction:column; }
.ws-hdr { height:56px; display:flex; align-items:center; gap:10px; padding:0 16px; }
.ws-ic { width:32px; height:32px; border-radius:4px; background:#fff; color:#4A154B; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.ws-name { color:#fff; font-size:17px; font-weight:700; }
.sec-label { color:rgba(207,195,207,.6); font-size:11px; font-weight:700; letter-spacing:.6px; padding:14px 16px 4px; }
.ch-row { display:flex; align-items:center; gap:8px; padding:5px 16px; color:#CFC3CF; font-size:14px; }
.ch-row.active { background:#1164A3; color:#fff; font-weight:700; }
.ch-row.unread { color:#fff; font-weight:700; }
.badge { margin-left:auto; background:#E01E5A; color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:9px; }
.main { flex:1; display:flex; flex-direction:column; }
.ch-hdr { height:52px; display:flex; align-items:center; gap:8px; padding:0 20px; border-bottom:1px solid #DDDDDD; }
.ch-title { font-size:17px; font-weight:700; }
.ch-topic { font-size:12px; color:#616061; margin-left:8px; }
.huddle { background:#1264A3; color:#fff; height:44px; display:flex; align-items:center; gap:10px; padding:0 20px; font-size:14px; font-weight:700; }
.huddle .join { margin-left:auto; background:#fff; color:#1264A3; font-size:12px; font-weight:700; padding:5px 14px; border-radius:4px; }
.msgs { flex:1; padding:14px 20px; }
.msg { display:flex; gap:12px; margin-top:14px; }
.av { width:36px; height:36px; border-radius:4px; }
.mline1 { font-size:15px; }
.uname { font-weight:700; }
.ts { color:#616061; font-size:12px; margin-left:6px; }
.mbody { font-size:15px; margin-top:2px; line-height:1.5; }
.reactions { display:flex; gap:6px; margin-top:8px; }
.chip { background:#F1F1F1; border-radius:500px; padding:4px 8px; font-size:12px; font-weight:600; }
.chip.on { background:#E3F2FC; border:1px solid #1264A3; }
.thread-link { margin-top:8px; font-size:13px; font-weight:600; color:#1264A3; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="ws-hdr"><div class="ws-ic">A</div><div class="ws-name">Acme Design</div><div style="margin-left:auto;font-size:10px;font-weight:700;color:rgba(255,255,255,.5);">Slack (iOS)</div></div>
<div class="sec-label">Channels</div>
<div class="ch-row unread"># design</div>
<div class="ch-row active"># general</div>
<div class="ch-row"># random</div>
<div class="sec-label">Direct messages</div>
<div class="ch-row unread">Sarah Kim<span class="badge">2</span></div>
<div class="ch-row">Marco Diaz</div>
</div>
<div class="main">
<div class="ch-hdr"><div class="ch-title"># general</div><div class="ch-topic">14 members</div></div>
<div class="huddle">🟡🩷🟢🔵 Huddle in progress<div class="join">Join</div></div>
<div class="msgs">
<div class="msg">
<div class="av" style="background:linear-gradient(135deg,#e9a,#c56);"></div>
<div><div class="mline1"><span class="uname">Sarah Kim</span><span class="ts">10:42 AM</span></div>
<div class="mbody">Shipped the new onboarding flow — would love a look before standup!</div>
<div class="reactions"><div class="chip on">👍 4</div><div class="chip">🎉 2</div></div>
<div class="thread-link">💬 5 replies, last reply 3h ago</div>
</div>
</div>
<div class="msg">
<div class="av" style="background:linear-gradient(135deg,#89b,#456);"></div>
<div><div class="mline1"><span class="uname">Marco Diaz</span><span class="ts">10:55 AM</span></div>
<div class="mbody">Looks great! One nit on the empty state copy, left a comment.</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dd006f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dd006f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ea87b9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #dd006f; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #dd006f; color: #f5f5f5;
border: 1px solid #e12784; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ea87b9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c81084; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231815; box-sizing:border-box;
font-family:"PT Serif", "Noto Sans TC", Georgia, serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #cfcfcf; }
.brand { font-weight:700; font-size:19px; color:#231815; }
.search { flex:1; max-width:340px; margin:0 24px; height:45px; border-radius:99px; background:#fff1f5; color:#5e4d48;
display:flex; align-items:center; padding:0 25px; font-size:14px; }
.btn { background:#dd006f; color:#fff; border:1px solid #dd006f; border-radius:99px; padding:10px 22px; font-size:14px; height:45px; display:flex; align-items:center; }
.hero { padding:26px 30px 14px; text-align:center; }
.hero h1 { font-size:26px; margin:0 0 6px; }
.hero p { font-size:14px; color:#5e4d48; margin:0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:16px 30px; }
.card { border:1px solid #cfcfcf; border-radius:8px; overflow:hidden; text-align:center; }
.thumb { height:110px; }
.t1 { background:linear-gradient(150deg,#ffd7e6,#dd006f); }
.t2 { background:linear-gradient(150deg,#ffe6c2,#f0a848); }
.t3 { background:linear-gradient(150deg,#dcecff,#7fb0e6); }
.t4 { background:linear-gradient(150deg,#e6dcff,#b98fe0); }
.name { font-size:13px; padding:10px 8px 2px; }
.price { font-size:14px; color:#dd006f; font-weight:700; padding:0 8px 12px; }
</style></head>
<body>
<nav>
<div class="brand">POYA</div>
<div class="search">Search products, brands</div>
<button class="btn">Member Login</button>
</nav>
<div class="hero">
<h1>Discover Everyday Wonders</h1>
<p>Beauty, Trendy, and Enrichment — skincare & makeup · fashion accessories · lifestyle goods</p>
</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><div class="name">Hydrating Serum</div><div class="price">NT$390</div></div>
<div class="card"><div class="thumb t2"></div><div class="name">Autumn Knit Cardigan</div><div class="price">NT$690</div></div>
<div class="card"><div class="thumb t3"></div><div class="name">Aroma Diffuser</div><div class="price">NT$450</div></div>
<div class="card"><div class="thumb t4"></div><div class="name">Makeup Brush Set</div><div class="price">NT$780</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00cd3c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00cd3c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e3a2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b523; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00cd3c; color: #000000;
border: 1px solid #00b523; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00cd3c; color: #000000;
border: 1px solid #27d35a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e3a2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c938; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Pretendard", "Malgun Gothic", sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; padding:0 28px; border-bottom:1px solid #eeeeee; }
.brand { font-size:16px; font-weight:700; color:#00cd3c; margin:0; }
.navlinks { display:flex; gap:20px; margin-left:26px; }
.navlinks span { font-size:13px; color:#666666; }
.navlinks span.on { color:#00cd3c; }
.search { margin-left:auto; width:220px; height:30px; border:1px solid #eeeeee; display:flex; align-items:center;
padding:0 10px; font-size:12px; color:#999999; }
.login { background:#00d344; color:#ffffff; height:32px; padding:0 16px; display:flex; align-items:center;
font-size:13px; margin-left:12px; }
.chart { display:flex; gap:0; padding:14px 28px 0; }
.chart-col { flex:1; }
h2.title { font-size:14px; font-weight:600; color:#1a1a1a; margin:0 0 8px; }
.row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #f4f4f4; }
.rank { width:20px; font-size:13px; color:#1a1a1a; font-weight:600; }
.thumb { width:36px; height:36px; }
.thumb.a{background:linear-gradient(135deg,#00cd3c,#00b523);} .thumb.b{background:linear-gradient(135deg,#c9c9c9,#8a8a8a);}
.thumb.c{background:linear-gradient(135deg,#ffd76a,#ff8c42);}
.info { flex:1; min-width:0; }
.track { font-size:12px; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artist { font-size:12px; color:#666666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.play { width:20px; height:20px; background:#00cd3c; flex:none; }
.player { position:relative; margin-top:14px; height:64px; background:#f7f7f7; border-top:1px solid #eeeeee;
display:flex; align-items:center; padding:0 28px; gap:14px; }
.player .cover { width:40px; height:40px; background:linear-gradient(135deg,#00cd3c,#00b523); }
.player .meta { flex:none; }
.player .t { font-size:13px; color:#1a1a1a; }
.player .a { font-size:12px; color:#666666; }
.bar { flex:1; height:3px; background:#e5e5e5; position:relative; }
.bar::before { content:''; position:absolute; left:0; top:0; bottom:0; width:38%; background:#00cd3c; }
.ctrl { width:26px; height:26px; background:#00cd3c; flex:none; }
</style></head>
<body>
<nav>
<p class="brand">Melon</p>
<div class="navlinks"><span class="on">Chart</span><span>Latest</span><span>Genre</span><span>MY Music</span></div>
<div class="search">Search songs, artists</div>
<div class="login">Login</div>
</nav>
<div class="chart">
<div class="chart-col">
<h2 class="title">Realtime Chart</h2>
<div class="row"><span class="rank">1</span><div class="thumb a"></div><div class="info"><div class="track">Midnight Drive</div><div class="artist">Nova Kim</div></div><div class="play"></div></div>
<div class="row"><span class="rank">2</span><div class="thumb b"></div><div class="info"><div class="track">Paper Airplane</div><div class="artist">Seoyeon</div></div><div class="play"></div></div>
<div class="row"><span class="rank">3</span><div class="thumb c"></div><div class="info"><div class="track">City Lights (Remix)</div><div class="artist">Haneul & Jiho</div></div><div class="play"></div></div>
<div class="row"><span class="rank">4</span><div class="thumb a"></div><div class="info"><div class="track">Bloom</div><div class="artist">Yerin</div></div><div class="play"></div></div>
</div>
<div class="chart-col">
<h2 class="title">New Releases</h2>
<div class="row"><span class="rank">1</span><div class="thumb b"></div><div class="info"><div class="track">Winter Letter</div><div class="artist">Doyoon</div></div><div class="play"></div></div>
<div class="row"><span class="rank">2</span><div class="thumb c"></div><div class="info"><div class="track">Echoes</div><div class="artist">Minji Band</div></div><div class="play"></div></div>
<div class="row"><span class="rank">3</span><div class="thumb a"></div><div class="info"><div class="track">Neon Sign</div><div class="artist">Taeyang</div></div><div class="play"></div></div>
<div class="row"><span class="rank">4</span><div class="thumb c"></div><div class="info"><div class="track">Slow Rain</div><div class="artist">Areum</div></div><div class="play"></div></div>
</div>
</div>
<div class="player">
<div class="cover"></div>
<div class="meta"><div class="t">Midnight Drive</div><div class="a">Nova Kim</div></div>
<div class="ctrl"></div>
<div class="bar"></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.4px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.71; margin: 0; color: #b2b6bd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #ffffff; color: #000000;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #1f232b; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; background: #15181e; color: #ffffff;
border: 1px solid #404040; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b2b6bd; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #000000; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #252830; }
.brand { font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#b2b6bd; }
.btn-w { background:#fff; color:#000; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; }
.hero { text-align:center; padding:20px 36px 8px; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; color:#b2b6bd; }
.hero h1 { font-size:38px; font-weight:700; letter-spacing:-1px; line-height:1.15; margin:8px 0 6px; }
.hero p { font-size:13px; color:#b2b6bd; margin:0; }
.products { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 36px; }
.pcard { border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:6px; min-height:110px; }
.pcard .name { font-size:14px; font-weight:600; }
.pcard .desc { font-size:10.5px; line-height:1.4; opacity:0.9; }
.terraform { background:#7b42bc; }
.vault { background:#ffcf25; color:#000; }
.vault .desc { color:#000; opacity:0.75; }
.waypoint { background:#14c6cb; color:#000; }
.waypoint .desc { color:#000; opacity:0.75; }
.neutral { background:#15181e; border:1px solid #3b3d45; }
.featurerow { display:flex; gap:12px; padding:0 36px 16px; }
.fcard { flex:1; background:#15181e; border:1px solid #3b3d45; border-radius:12px; padding:16px; }
.fcard h4 { font-size:14px; font-weight:600; margin:0 0 6px; }
.fcard p { font-size:11px; color:#b2b6bd; margin:0; line-height:1.5; }
.pill { display:inline-block; background:#1f232b; color:#b2b6bd; font-size:10px; border-radius:9999px;
padding:3px 8px; margin-bottom:8px; }
footer { margin-top:auto; padding:12px 36px; border-top:1px solid #252830; display:flex; justify-content:space-between;
font-size:11px; color:#656a76; }
</style></head>
<body>
<nav>
<span class="brand">HashiCorp</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Enterprise</span><span>Docs</span></div>
<button class="btn-w">Sign up</button>
</nav>
<section class="hero">
<div class="eyebrow">Infrastructure Cloud</div>
<h1>A unified cloud platform, one workflow</h1>
<p>Provision, secure, connect, and run any infrastructure for any application.</p>
</section>
<div class="products">
<div class="pcard terraform"><span class="name">Terraform</span><span class="desc">Provision infrastructure as code across any cloud.</span></div>
<div class="pcard vault"><span class="name">Vault</span><span class="desc">Secure, store, and tightly control secrets access.</span></div>
<div class="pcard waypoint"><span class="name">Waypoint</span><span class="desc">Ship applications with a consistent workflow.</span></div>
<div class="pcard neutral"><span class="name">Nomad</span><span class="desc">Deploy and manage applications at any scale.</span></div>
</div>
<div class="featurerow">
<div class="fcard"><span class="pill">Terraform</span><h4>Consistent workflow</h4><p>Provision every layer of the stack with a single, declarative language.</p></div>
<div class="fcard"><span class="pill">Vault</span><h4>Secrets, unified</h4><p>Broker and enforce access to secrets and systems with dynamic policy.</p></div>
<div class="fcard"><span class="pill">Waypoint</span><h4>Ship with confidence</h4><p>Build, deploy, and release applications across any platform.</p></div>
</div>
<footer>
<span>© HashiCorp</span>
<span>HashiCorp · Terraform · Vault · Waypoint · Nomad</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #38a034; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #38a034;
border: 1px solid #38a034; border-radius: 9999px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #38a034; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#ffffff; border-bottom:1px solid #e0e0e0; }
.brand { font-size:17px; font-weight:800; color:#38a034; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#333333; font-weight:600; }
.navlinks span.on { color:#38a034; }
.cart { background:#38a034; color:#fff; font-size:12px; font-weight:700; padding:7px 14px; border-radius:9999px; }
main { display:flex; height:578px; }
.gallery { width:400px; background:linear-gradient(180deg,#1a1a1a 0%,#2a2a2a 100%); position:relative;
display:flex; align-items:center; justify-content:center; }
.garden { width:220px; height:150px; background:#333333; border-radius:8px; position:relative; }
.garden .dome { position:absolute; top:-46px; left:20px; right:20px; height:50px;
background:radial-gradient(circle at 50% 0%, #c050d8 0%, transparent 70%); filter:blur(2px); }
.pod { position:absolute; top:14px; width:26px; height:36px; border-radius:6px 6px 12px 12px;
background:linear-gradient(180deg,#38a034,#2a7a28); }
.pod::after { content:''; position:absolute; top:-10px; left:8px; width:10px; height:14px;
background:#7a9e55; border-radius:0 100% 0 100%; }
.pod.p1 { left:34px; } .pod.p2 { left:76px; height:44px; top:6px; } .pod.p3 { left:118px; }
.pod.p4 { left:160px; height:40px; top:10px; }
.badge-glow { position:absolute; top:24px; left:24px; background:#c050d8; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.04em; padding:5px 12px; border-radius:9999px; text-transform:uppercase; }
.info { flex:1; padding:32px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#666666; }
h1 { font-size:23px; font-weight:800; margin:0; line-height:1.28; }
.stars { font-size:12px; color:#f57c00; }
.stars .n { color:#666666; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:800; color:#38a034; }
.price-old { font-size:14px; color:#999999; text-decoration:line-through; }
.desc { font-size:13.5px; color:#333333; line-height:1.55; max-width:340px; }
.feat-row { display:flex; gap:8px; flex-wrap:wrap; }
.feat { background:#f6f6f6; border-radius:8px; padding:6px 12px; font-size:11.5px; font-weight:600; color:#333333; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#38a034; color:#fff; border:none; border-radius:9999px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #38a034; color:#38a034; background:#fff; border-radius:9999px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#e53935; font-weight:700; }
</style></head>
<body>
<nav>
<div class="brand">Aerogarden</div>
<div class="navlinks"><span class="on">Gardens</span><span>Seed Pods</span><span>LED Grow</span><span>Support</span></div>
<div class="cart">Cart · 1</div>
</nav>
<main>
<div class="gallery">
<span class="badge-glow">Full-Spectrum LED</span>
<div class="garden"><div class="dome"></div>
<div class="pod p1"></div><div class="pod p2"></div><div class="pod p3"></div><div class="pod p4"></div>
</div>
</div>
<div class="info">
<span class="cat">Indoor Garden · 6-Pod</span>
<h1>Harvest 360 Smart Indoor Garden</h1>
<div class="stars">★★★★☆ <span class="n">4.3 · 5,610 reviews</span></div>
<div class="price-row"><span class="price">$149.95</span><span class="price-old">$179.95</span></div>
<p class="desc">Grow fresh herbs, salads, and flowers year-round with automated watering, nutrients, and full-spectrum LED grow light.</p>
<div class="feat-row">
<span class="feat">6 Pod Bay</span>
<span class="feat">Wi-Fi App Control</span>
<span class="feat">Auto-Height LED</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Add Seed Kit</button>
</div>
<span class="meta">Limited-time offer — ends soon</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a72e5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a72e5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9abaee; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0957c8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a72e5; color: #000000;
border: 1px solid #0957c8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a72e5; color: #f5f5f5;
border: 1px solid #4a87e8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9abaee; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #256ee0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; background:#ffffff; }
nav { height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e1e1e1; }
.navleft { display:flex; align-items:center; gap:22px; }
.brand { font-size:15px; font-weight:700; color:#262626; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; color:#4c4c4c; }
.navright { display:flex; align-items:center; gap:10px; }
.btn-outline { background:#ffffff; color:#262626; box-shadow:rgb(198,198,198) 0px 0px 0px 1px inset;
border:none; border-radius:8px; padding:0 14px; height:32px; font-size:13px; font-weight:500; }
.btn-cta-dark { background:#262626; color:#ffffff; border:none; border-radius:8px; padding:0 16px; height:32px;
font-size:13px; font-weight:500; }
main { flex:1 1 auto; display:flex; overflow:hidden; }
.files { width:178px; flex:0 0 auto; background:#f7f7f7; border-right:1px solid #e1e1e1; padding:14px 10px;
display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.files .grouplabel { font-size:11px; font-weight:700; color:#a3a3a3; text-transform:uppercase; letter-spacing:0.05em;
padding:4px 8px 6px; }
.fitem { font-size:13px; color:#4c4c4c; padding:6px 8px; border-radius:6px; }
.fitem.on { background:#e1e1e1; color:#262626; font-weight:600; box-shadow:rgb(42,114,229) 3px 0 0 0 inset; }
.editor { flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.toolbar { height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 20px; border-bottom:1px solid #e1e1e1; }
.tabs { display:flex; gap:20px; height:100%; }
.tab { display:flex; align-items:center; font-size:13px; font-weight:500; color:#4c4c4c; height:100%; }
.tab.on { color:#0957c8; box-shadow:#0957c8 0 -2px 0 0 inset; font-weight:600; }
.toolbtns { display:flex; gap:8px; }
.btn-secondary { background:#e1e1e1; color:#262626; border:none; border-radius:8px; padding:0 14px; height:30px;
font-size:13px; font-weight:500; }
.btn-primary { background:#2a72e5; color:#ffffff; border:none; border-radius:8px; padding:0 14px; height:30px;
font-size:13px; font-weight:500; }
.code { flex:1 1 auto; display:flex; padding:16px 0; overflow:hidden; font-family:Menlo,Consolas,monospace;
font-size:13px; line-height:1.9; }
.gutter { width:38px; flex:0 0 auto; text-align:right; padding-right:12px; color:#a3a3a3; }
.lines { flex:1 1 auto; color:#262626; white-space:pre; }
.kw { color:#0043b3; font-weight:700; }
.fn { color:#0957c8; }
.str { color:#058765; }
.cm { color:#a3a3a3; font-style:italic; }
.term { flex:0 0 auto; height:132px; background:#262626; padding:12px 24px; display:flex; flex-direction:column;
gap:8px; overflow:hidden; }
.term-head { display:flex; align-items:center; justify-content:space-between; }
.term-head span { font-size:12px; font-weight:700; color:#a3a3a3; text-transform:uppercase; letter-spacing:0.06em; }
.badges { display:flex; gap:8px; }
.badge { border-radius:9999px; padding:3px 11px; font-size:12px; font-weight:500; }
.badge.info { background:#c6e6ff; color:#0043b3; }
.badge.success { background:#bbecd7; color:#058765; }
.badge.warn { background:#ffd9c8; color:#a3401a; }
.term-lines { font-family:Menlo,Consolas,monospace; font-size:12.5px; color:#e1e1e1; line-height:1.7; }
.term-lines .p { color:#5d5d5d; }
</style></head>
<body>
<div class="page">
<nav>
<div class="navleft">
<p class="brand">goorm</p>
<div class="navlinks"><span>Product</span><span>Docs</span><span>Pricing</span></div>
</div>
<div class="navright">
<button class="btn-outline">View Docs</button>
<button class="btn-cta-dark">Get Started</button>
</div>
</nav>
<main>
<div class="files">
<span class="grouplabel">Project</span>
<div class="fitem">src</div>
<div class="fitem on"> main.ts</div>
<div class="fitem"> server.ts</div>
<div class="fitem"> utils.ts</div>
<div class="fitem">tests</div>
<div class="fitem">package.json</div>
<div class="fitem">README.md</div>
</div>
<div class="editor">
<div class="toolbar">
<div class="tabs"><span class="tab on">Code</span><span class="tab">Preview</span></div>
<div class="toolbtns">
<button class="btn-secondary">Cancel</button>
<button class="btn-primary">Save</button>
</div>
</div>
<div class="code">
<div class="gutter">1<br>2<br>3<br>4<br>5<br>6</div>
<div class="lines"><span class="cm">// greet a new learner</span><br><span class="kw">function</span> <span class="fn">greet</span>(name) {<br> <span class="kw">return</span> <span class="str">`Hello, ${name}! Welcome aboard.`</span>;<br>}<br><br><span class="fn">greet</span>(<span class="str">"Alex"</span>);</div>
</div>
</div>
</main>
<div class="term">
<div class="term-head">
<span>Terminal</span>
<div class="badges">
<span class="badge success">Build passed</span>
<span class="badge info">Deploy queued</span>
<span class="badge warn">1 warning</span>
</div>
</div>
<div class="term-lines">
<span class="p">$</span> npm run build<br>
<span class="p">$</span> compiled 42 modules in 1.8s — ready on port 8080
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f6; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f6; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7978; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faf9f6; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #faf9f6; color: #111111;
border: 1px solid #d5d4d1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7978; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fbfaf7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FAF9F6; color:#221E1F; box-sizing:border-box;
font-family:'Lato', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.neigh { font-size:18px; font-weight:700; display:flex; align-items:center; gap:6px; }
.neigh .chev { color:#6B6864; font-size:12px; }
.navicons { display:flex; gap:16px; color:#6B6864; font-size:16px; }
.chiprow { display:flex; gap:8px; padding:0 24px 12px; }
.chip { padding:7px 16px; border-radius:999px; font-size:13px; font-weight:700; background:#F2F0EB; color:#221E1F; }
.chip.active { background:#00B246; color:#fff; }
.shell { display:flex; gap:16px; padding:0 24px; }
.feed { width:420px; display:flex; flex-direction:column; gap:12px; }
.card { background:#FFFFFF; border:1px solid #E4E2DD; border-radius:16px; padding:16px; box-shadow: rgba(34,30,31,0.06) 0 1px 3px; }
.card-head { display:flex; align-items:center; gap:10px; }
.avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#a7d7b9,#6bb98b); flex:none; }
.cname { font-size:15px; font-weight:700; display:flex; align-items:center; gap:5px; }
.verified { width:12px; height:12px; border-radius:50%; background:#00B246; display:inline-block; }
.cloc { font-size:12px; color:#6B6864; margin-top:1px; }
.cbody { font-size:14px; line-height:1.4; margin:10px 0; color:#221E1F; }
.cfoot { display:flex; gap:18px; border-top:1px solid #E4E2DD; padding-top:8px; font-size:12px; font-weight:700; color:#6B6864; }
.cfoot span.active { color:#00B246; }
.map-panel { flex:1; position:relative; border-radius:16px; overflow:hidden; height:560px;
background: linear-gradient(180deg,#e9ecdf,#dfe6d2); }
.map-panel::before { content:''; position:absolute; inset:0;
background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.03) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0 1px, transparent 1px 40px); }
.pin { position:absolute; width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
display:flex; align-items:center; justify-content:center; box-shadow: rgba(34,30,31,0.25) 0 2px 6px; }
.pin span { transform:rotate(45deg); font-size:11px; font-weight:700; color:#fff; }
.pin.green { background:#00B246; top:90px; left:70px; }
.pin.blue { background:#1B6FB3; top:220px; left:180px; }
.pin.purple { background:#6E4FA3; top:150px; left:280px; }
.pin.amber { background:#E58A00; top:330px; left:110px; }
.pin.sel { background:#00B246; top:260px; left:60px; transform:rotate(-45deg) scale(1.15); border:3px solid #fff; }
.peek { position:absolute; left:16px; right:16px; bottom:16px; background:#fff; border-radius:16px; padding:14px 16px;
box-shadow: rgba(34,30,31,0.15) 0 -6px 20px; }
.peek .t { font-size:14px; font-weight:700; }
.peek .s { font-size:12px; color:#6B6864; margin-top:2px; }
.fab { position:absolute; right:20px; bottom:200px; width:56px; height:56px; border-radius:50%; background:#00B246;
display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; box-shadow: rgba(0,178,70,0.32) 0 6px 18px; }
</style></head>
<body>
<div class="topnav">
<div class="neigh">Nextdoor (iOS) <span class="chev">▾</span></div>
<div class="navicons">🔍 ⚑</div>
</div>
<div class="chiprow">
<div class="chip active">All</div>
<div class="chip">Recommendations</div>
<div class="chip">For Sale & Free</div>
<div class="chip">Events</div>
<div class="chip">Crime & Safety</div>
</div>
<div class="shell">
<div class="feed">
<div class="card">
<div class="card-head">
<div class="avatar"></div>
<div>
<div class="cname">Dana R. <span class="verified"></span></div>
<div class="cloc">0.3 mi · Maple Heights · 2h</div>
</div>
</div>
<div class="cbody">Anyone have a recommendation for a reliable plumber near Maple Heights? Small leak under the kitchen sink.</div>
<div class="cfoot"><span class="active">React · 12</span><span>Reply</span><span>Share</span></div>
</div>
<div class="card">
<div class="card-head">
<div class="avatar" style="background:linear-gradient(135deg,#f2c9a0,#e0955a)"></div>
<div>
<div class="cname">Marcus T. <span class="verified"></span></div>
<div class="cloc">0.6 mi · Maple Heights · 5h</div>
</div>
</div>
<div class="cbody">Free moving boxes on the curb at 214 Birchwood — first come first served!</div>
<div class="cfoot"><span>React · 4</span><span>Reply</span><span>Share</span></div>
</div>
<div class="card">
<div class="card-head">
<div class="avatar" style="background:linear-gradient(135deg,#bcd7f2,#6ea8e0)"></div>
<div>
<div class="cname">Priya S.</div>
<div class="cloc">0.9 mi · Maple Heights · 1d</div>
</div>
</div>
<div class="cbody">Neighborhood cleanup this Saturday at 9am, meeting at the park entrance. Coffee and donuts provided!</div>
<div class="cfoot"><span>React · 21</span><span>Reply</span><span>Share</span></div>
</div>
</div>
<div class="map-panel">
<div class="pin green"><span>$</span></div>
<div class="pin blue"><span>●</span></div>
<div class="pin purple"><span>$</span></div>
<div class="pin amber"><span>!</span></div>
<div class="pin sel"><span>★</span></div>
<div class="peek">
<div class="t">Free moving boxes</div>
<div class="s">214 Birchwood Ave · Posted 5h ago</div>
</div>
<div class="fab">＋</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard Variable",-apple-system,"Apple SD Gothic Neo",sans-serif; }
* { box-sizing:border-box; }
header { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #eeeeee; }
.brand { font-weight:700; font-size:16px; letter-spacing:-0.3px; }
.search { background:#f6f6f6; font-size:13px; color:#999999; padding:8px 16px; width:220px; }
.navlinks { display:flex; gap:18px; font-size:13px; }
.cats { display:flex; gap:24px; padding:12px 28px; font-size:15px; font-weight:600; border-bottom:1px solid #eeeeee; }
.cats span.on { text-decoration:underline; text-underline-offset:6px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0; }
.card { border-right:1px solid #eeeeee; padding:10px; }
.card:nth-child(4n) { border-right:none; }
.img { height:150px; background:#f6f6f6; margin-bottom:8px; position:relative; }
.exclusive { position:absolute; top:0; left:0; background:#000000; color:#ffffff; font-size:11px; font-weight:700; padding:3px 6px; }
.brandname { font-size:14px; font-weight:700; margin:0 0 2px; }
.prodname { font-size:14px; color:#555555; margin:0 0 4px; }
.price { font-size:14px; font-weight:700; }
.sale { color:#ff4600; margin-right:4px; }
.orig { font-size:13px; color:#999999; text-decoration:line-through; margin-left:6px; }
.i1 { background:linear-gradient(160deg,#e8e8e8,#c8c8c8); }
.i2 { background:linear-gradient(160deg,#eee2d8,#d8c0a0); }
.i3 { background:linear-gradient(160deg,#e0e4e2,#a8b8b0); }
.i4 { background:linear-gradient(160deg,#efe8e8,#d8b8b8); }
</style></head>
<body>
<header>
<span class="brand">W Concept</span>
<div class="navlinks"><span>Women</span><span>Men</span><span>Beauty</span><span>Life</span><span>Luxury</span></div>
<div class="search">Brand, product search</div>
</header>
<div class="cats"><span class="on">Featured brands</span><span>New arrivals</span><span>Best</span></div>
<div class="grid">
<div class="card"><div class="img i1"><span class="exclusive">EXCLUSIVE</span></div><p class="brandname">STUDIO NOIR</p><p class="prodname">Wool blend overcoat</p>
<span class="price"><span class="sale">-30%</span>238,000<span class="orig">340,000</span></span></div>
<div class="card"><div class="img i2"></div><p class="brandname">HANRA</p><p class="prodname">Linen wide trousers</p>
<span class="price">128,000</span></div>
<div class="card"><div class="img i3"><span class="exclusive">NEW</span></div><p class="brandname">MUTED FIELD</p><p class="prodname">Cropped knit cardigan</p>
<span class="price"><span class="sale">-15%</span>96,000<span class="orig">112,000</span></span></div>
<div class="card"><div class="img i4"></div><p class="brandname">SEOAN</p><p class="prodname">Leather crossbody bag</p>
<span class="price">168,000</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #8da7b6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #7796a8; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #231f20;
border: 1px solid #7796a8; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #c8c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8da7b6; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff4136; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231f20; box-sizing:border-box;
font-family:'Helvetica Neue', Arial, 'Lucida Grande', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 62px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; background:#ffffff; border-bottom:none; }
.brand { font-family:Georgia,'Times New Roman','Palatino Linotype',serif; font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#231f20; }
.searchbtn { border:1px solid #dedede; border-radius:4px; padding:6px 14px; font-size:12px; color:#8da7b6; background:#ffffff; }
.hero { flex:0 0 116px; background:#f5f5f5; display:flex; flex-direction:column; justify-content:center;
padding:0 30px; gap:6px; }
.hero h1 { font-family:Georgia,'Times New Roman',serif; font-size:24px; font-weight:700; line-height:1.3; margin:0; max-width:640px; letter-spacing:-0.3px; }
.hero p { font-size:13px; color:#444444; margin:0; max-width:560px; line-height:1.5; }
.breadcrumb { flex:0 0 32px; display:flex; align-items:center; gap:6px; padding:0 30px; font-size:12px; color:#8da7b6;
border-bottom:1px solid #dedede; }
.breadcrumb .active { color:#231f20; }
.cards { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:20px 30px; align-content:center; overflow:hidden; }
.card { display:flex; flex-direction:column; gap:8px; }
.card-image { height:150px; background:#f5f5f5; position:relative; display:flex; align-items:flex-end; justify-content:center;
gap:5px; padding:14px 0 0; overflow:hidden; }
.spine { width:18px; border-radius:0; align-self:flex-end; }
.card-badge { position:absolute; top:8px; left:8px; background:#ff4136; color:#ffffff; font-size:10px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; }
.card h3 { font-family:Georgia,'Times New Roman',serif; font-size:15px; font-weight:600; margin:0; line-height:1.3; }
.card .meta { font-size:12px; color:#8da7b6; margin:0; }
.card .price { font-size:14px; color:#444444; margin:0; }
footer { flex:0 0 56px; background:#231f20; color:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:11px; }
footer .link { color:#aec3cf; }
</style></head>
<body>
<nav>
<p class="brand">Attic Books</p>
<div class="navlinks">
<span>Fiction</span><span>Non-Fiction</span><span>Rare & Antiquarian</span><span>Maps & Prints</span><span>Sell Your Books</span>
</div>
<span class="searchbtn">Search</span>
</nav>
<section class="hero">
<h1>First editions. Well-worn pages. Honest prices.</h1>
<p>Browsing our shelves since 1978 — restored, catalogued, and ready for their next reader.</p>
</section>
<div class="breadcrumb">
<span>Home</span><span>/</span><span>Fiction</span><span>/</span><span class="active">Literary Classics</span>
</div>
<section class="cards">
<div class="card">
<div class="card-image">
<span class="card-badge">Rare</span>
<div class="spine" style="height:80px;background:#7796a8;"></div>
<div class="spine" style="height:96px;background:#3d9970;"></div>
<div class="spine" style="height:70px;background:#231f20;"></div>
<div class="spine" style="height:88px;background:#aec3cf;"></div>
</div>
<h3>The Quiet Harbor</h3>
<p class="meta">Margaret Hollis · First Edition, 1978</p>
<p class="price">$48.00</p>
</div>
<div class="card">
<div class="card-image">
<div class="spine" style="height:100px;width:120px;background:linear-gradient(135deg,#8da7b6,#e8e8e8);border-radius:2px;"></div>
</div>
<h3>A City Atlas, 1932</h3>
<p class="meta">Antique Fold-Out Map</p>
<p class="price">$65.00</p>
</div>
<div class="card">
<div class="card-image">
<span class="card-badge">Sale</span>
<div class="spine" style="height:74px;background:#3d9970;"></div>
<div class="spine" style="height:60px;background:#7796a8;"></div>
<div class="spine" style="height:84px;background:#dedede;"></div>
<div class="spine" style="height:66px;background:#231f20;"></div>
<div class="spine" style="height:78px;background:#aec3cf;"></div>
</div>
<h3>Coastal Notebooks, Set of 4</h3>
<p class="meta">Used Paperbacks · Good Condition</p>
<p class="price">$12.00</p>
</div>
</section>
<footer>
<span>© Attic Books</span>
<span><span class="link">Fiction</span> · <span class="link">Rare Books</span> · <span class="link">Sell to Us</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #2d8fce; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #f3f3f3; color: #2d8fce;
border: 1px solid #2d8fce; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #bbbbbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #2d8fce; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f3f3f3; color:#121212; box-sizing:border-box;
font-family:'Assistant','Cabin',-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #e8e8e8; }
.brand { font-family:'Cabin','Assistant',sans-serif; font-size:19px; font-weight:700; color:#2d8fce; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; color:#666; }
.navlinks span.on { color:#2d8fce; border-bottom:2px solid #2d8fce; padding-bottom:18px; }
.search { background:#fff; border:1px solid #dedede; border-radius:999px; padding:6px 16px; font-size:12px; color:#999; }
main { display:grid; grid-template-columns:380px 1fr; height:calc(640px - 60px); gap:0; }
.stage { padding:24px; display:flex; gap:14px; }
.cover { flex:1; border-radius:12px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#2d8fce 0%,#334fb4 100%); box-shadow:0 8px 20px rgba(0,0,0,0.12); }
.cover::before { content:''; position:absolute; left:14px; top:14px; right:14px; bottom:60px; border-radius:8px;
background:linear-gradient(200deg,rgba(255,255,255,0.22),rgba(255,255,255,0.02) 60%); }
.cover .spine { position:absolute; left:0; top:0; bottom:0; width:16px; background:rgba(0,0,0,0.18); }
.cover .label { position:absolute; left:26px; bottom:16px; right:16px; color:#fff; font-family:'Cabin',sans-serif; font-weight:700; font-size:15px; line-height:1.2; }
.thumbcol { display:flex; flex-direction:column; gap:8px; width:56px; }
.thumb { flex:1; border-radius:8px; background:#fff; border:1px solid #e8e8e8; }
.info { padding:24px 30px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.badges { display:flex; gap:6px; }
.badge-preorder { background:#2d8fce; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.badge-exclusive { background:#334fb4; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
h1 { margin:0; font-family:'Cabin','Assistant',sans-serif; font-size:24px; font-weight:600; line-height:1.25; }
.rating { display:flex; align-items:center; gap:8px; font-size:13px; color:#666; }
.stars { color:#2d8fce; font-size:16px; letter-spacing:1px; }
.price { font-size:20px; font-weight:600; }
.desc { font-size:14px; color:#333; line-height:1.55; }
.fmt-row { display:flex; gap:10px; }
.fmt { border:1px solid #dedede; border-radius:8px; padding:8px 14px; font-size:14px; font-weight:600; background:#fff; }
.fmt.on { border:2px solid #2d8fce; color:#2d8fce; }
.qty-row { display:flex; align-items:center; gap:12px; margin-top:auto; }
.qty { display:flex; align-items:center; border:1px solid #dedede; border-radius:8px; overflow:hidden; }
.qty span { width:32px; height:40px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.qty .n { border-left:1px solid #dedede; border-right:1px solid #dedede; }
.btn-primary { flex:1; height:48px; background:#2d8fce; color:#fff; border:none; border-radius:8px; font-size:16px; font-weight:600; }
.rel { display:flex; gap:8px; }
.rel div { flex:1; height:44px; background:#fff; border:1px solid #e8e8e8; border-radius:8px; }
</style></head>
<body>
<nav>
<p class="brand">All The Anime</p>
<div class="navlinks"><span class="on">Blu-ray</span><span>Art Books</span><span>Figures</span><span>Pre-orders</span></div>
<span class="search">Search collection...</span>
</nav>
<main>
<div class="stage">
<div class="cover"><div class="spine"></div><div class="label">Collector's Edition Steelbook</div></div>
<div class="thumbcol"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<div class="badges"><span class="badge-preorder">Pre-order</span><span class="badge-exclusive">Exclusive</span></div>
<h1>Nebula Drifters: Complete Series Blu-ray</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.9 · 318 reviews · Sold by All The Anime</div>
<div class="price">$64.99</div>
<p class="desc">The full 24-episode series plus 40 minutes of unaired footage, in a rigid steelbook case with double-sided art. Ships day-and-date with theatrical release.</p>
<div class="fmt-row">
<span class="fmt on">Blu-ray</span><span class="fmt">Blu-ray + Art Book</span>
</div>
<div class="qty-row">
<div class="qty"><span>−</span><span class="n">1</span><span>+</span></div>
<button class="btn-primary">Add to Cart</button>
</div>
<div class="rel"><div></div><div></div><div></div><div></div></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2e475b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2e475b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #2e475b; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b8a9e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #61afd5; color: #000000;
border: none; border-radius: 6px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #2e475b;
border: 1px solid #61afd5; border-radius: 6px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #2e475b;
border: 1px solid #cbd1d6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b8a9e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #61afd5; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#ffffff; color:#3a5a6e; box-sizing:border-box; font-family:'Inter',-apple-system,system-ui,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; border-bottom:1px solid #e3eaf0; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:700; color:#2e475b; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#6b8a9e; }
.navlinks span.active { color:#61afd5; }
.search-pill { background:#f4f7f9; border:1px solid #d0dce5; border-radius:999px; padding:10px 20px; font-size:13px; color:#6b8a9e; flex:1; max-width:280px; }
.filter-bar { display:flex; gap:8px; padding:12px 32px; border-bottom:1px solid #e3eaf0; }
.chip { background:#f4f7f9; border:1px solid #d0dce5; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600; color:#2e475b; }
.chip.active { background:#61afd5; color:#fff; border-color:#61afd5; }
.main { display:flex; gap:20px; padding:16px 32px; height:340px; }
.gallery { width:340px; background:#f4f7f9; border-radius:10px; display:flex; align-items:center; justify-content:center; position:relative; }
.sleeve { width:220px; height:220px; background:linear-gradient(135deg,#61afd5,#2e475b); border-radius:8px; position:relative; }
.sleeve::before { content:''; position:absolute; inset:0; margin:auto; width:70px; height:70px; border-radius:50%; background:#fff; }
.sleeve::after { content:''; position:absolute; inset:0; margin:auto; width:24px; height:24px; border-radius:50%; background:#2e475b; }
.badge-new { position:absolute; top:16px; left:16px; background:#e8a838; color:#fff; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; padding:2px 8px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:6px; }
.info h1 { font-size:22px; font-weight:600; margin:0; }
.artist { font-size:14px; color:#6b8a9e; }
.format { font-size:11px; color:#9bb3c4; }
.price { font-size:18px; font-weight:600; color:#2e475b; margin-top:2px; }
.desc { font-size:13px; line-height:1.5; color:#3a5a6e; max-width:400px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:40px; background:#61afd5; color:#fff; border:none; border-radius:6px; font-weight:600; font-size:14px; }
.btn-secondary { flex:1; height:40px; background:#fff; color:#2e475b; border:1px solid #d0dce5; border-radius:6px; font-weight:600; font-size:14px; }
.related-header { padding:0 32px; font-size:16px; font-weight:600; color:#2e475b; }
.related { display:flex; gap:14px; padding:8px 32px; }
.rel-card { flex:1; }
.rel-card .rel-img { height:70px; background:#f4f7f9; border-radius:6px; margin-bottom:6px; }
.rel-card span { font-size:11px; font-weight:600; display:block; }
.rel-card small { font-size:10px; color:#9bb3c4; }
</style></head>
<body>
<nav>
<p class="brand">Banquet Records</p>
<div class="navlinks"><span class="active">New Releases</span><span>Vinyl</span><span>CDs</span><span>Events</span></div>
<div class="search-pill">🔍 Search by artist, label, or format</div>
</nav>
<div class="filter-bar">
<span class="chip active">Vinyl 12"</span>
<span class="chip">Vinyl 7"</span>
<span class="chip">CD</span>
<span class="chip">Cassette</span>
</div>
<div class="main">
<div class="gallery">
<span class="badge-new">New Release</span>
<div class="sleeve"></div>
</div>
<div class="info">
<h1>Night Frequencies</h1>
<span class="artist">The Coastline Society</span>
<span class="format">180g Vinyl LP · Gatefold</span>
<span class="price">$28.00</span>
<p class="desc">A hazy, guitar-driven record pressed on heavyweight vinyl with a full-color gatefold sleeve and a printed lyric insert. Limited first pressing of 500.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Pre-Order</button>
</div>
</div>
</div>
<div class="related-header">More from this label</div>
<div class="related">
<div class="rel-card"><div class="rel-img"></div><span>Static Radio</span><small>Halcyon EP · 7"</small></div>
<div class="rel-card"><div class="rel-img"></div><span>Low Season</span><small>Winter Tapes · Cassette</small></div>
<div class="rel-card"><div class="rel-img"></div><span>Marion Hale</span><small>Departures · CD</small></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #197b2e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #197b2e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92be9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #14371b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #197b2e; color: #ffffff;
border: 1px solid #14371b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #197b2e; color: #f5f5f5;
border: 1px solid #3c8f4e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92be9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #18702b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e1e1f; box-sizing:border-box;
font-family:"Pretendard JP Variable","Pretendard JP","Pretendard Variable","Apple SD Gothic Neo",sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia,"Iowan Old Style","Palatino Linotype","Noto Serif KR",serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { font-size:16px; font-weight:700; color:#000000; }
.navlinks { display:flex; gap:26px; font-size:16px; color:#000000; }
.navright { display:flex; align-items:center; gap:10px; }
.btn-outline { background:#ffffff; color:#1e1e1f; border:1px solid rgba(109,109,112,0.24);
border-radius:8px; height:40px; padding:0 18px; font-size:15px; font-weight:500; display:flex; align-items:center; }
.btn-primary { background:#197b2e; color:#ffffff; border-radius:8px; height:40px; padding:0 18px;
font-size:15px; font-weight:500; display:flex; align-items:center; }
.hero { text-align:center; padding:8px 40px 0; }
.hero h1 { font-size:40px; font-weight:400; line-height:1.15; color:#14371b; margin:0 auto 10px; max-width:640px; }
.hero p { font-size:16px; color:rgba(109,109,112,0.8); margin:0 auto 20px; max-width:460px; line-height:1.5; }
.tabsrow { display:flex; justify-content:center; gap:8px; margin-bottom:22px; }
.tab { border-radius:9999px; padding:0 20px; height:40px; display:flex; align-items:center;
font-size:15px; color:#000000; }
.tab.active { background:#edf3ed; font-weight:600; }
.searchbar { max-width:600px; margin:0 auto 24px; background:#f9f9fa; border:1px solid rgba(109,109,112,0.12);
border-radius:8px; height:48px; display:flex; align-items:center; padding:0 18px; gap:10px; }
.searchbar .ph { font-size:15px; color:rgba(109,109,112,0.8); }
.searchbar .gobtn { margin-left:auto; background:#197b2e; color:#ffffff; border-radius:9999px;
width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.cols { display:flex; gap:20px; padding:0 40px; }
.highlights { flex:1.3; display:flex; flex-direction:column; gap:12px; }
.hl-card { background:#f9f9fa; border-radius:12px; padding:16px 18px; }
.hl-card .mark { background:#edf3ed; color:#000000; padding:1px 4px; border-radius:3px; }
.hl-card p { margin:0; font-size:13px; line-height:1.5; color:#1e1e1f; }
.hl-card .src { margin-top:8px; font-size:12px; color:rgba(109,109,112,0.8); display:flex; gap:8px; align-items:center; }
.hl-card .src .dot { width:5px; height:5px; border-radius:50%; background:#197b2e; }
.side { flex:1; display:flex; flex-direction:column; gap:12px; }
.side .card { background:#ffffff; border-radius:12px; padding:18px; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.side .card h3 { font-size:17px; margin:0 0 6px; font-weight:400; }
.side .card p { font-size:13px; color:rgba(109,109,112,0.8); margin:0; line-height:1.45; }
.side .badge { display:inline-block; background:#fe8f16; color:#ffffff; font-size:11px; font-weight:500;
border-radius:9999px; padding:2px 10px; margin-top:10px; }
</style></head>
<body>
<nav>
<span class="brand">Liner</span>
<div class="navlinks"><span>Search</span><span>Research</span><span>Write</span><span>Pricing</span></div>
<div class="navright">
<div class="btn-outline">Start for free</div>
<div class="btn-primary">Get started</div>
</div>
</nav>
<section class="hero">
<h1 class="serif">Grounded answers, backed by real sources</h1>
<p>Search, research, and write with citations you can actually check — built for people who don't have time for guesses.</p>
</section>
<div class="tabsrow">
<div class="tab active">Search</div>
<div class="tab">Research</div>
<div class="tab">Write</div>
</div>
<div class="searchbar">
<span class="ph">Ask about renewable energy storage trends in 2026...</span>
<span class="gobtn">→</span>
</div>
<div class="cols">
<div class="highlights">
<div class="hl-card">
<p>"Grid-scale battery costs fell <span class="mark">18% year over year</span>, driven mainly by lithium iron phosphate adoption."</p>
<div class="src"><span class="dot"></span>Energy Policy Review, 2026</div>
</div>
<div class="hl-card">
<p>Long-duration storage pilots are shifting from lithium to <span class="mark">iron-air and thermal batteries</span> for seasonal balancing.</p>
<div class="src"><span class="dot"></span>Grid Futures Journal</div>
</div>
<div class="hl-card">
<p>Three cited sources agree that permitting timelines, not battery chemistry, are now the primary bottleneck.</p>
<div class="src"><span class="dot"></span>3 sources · saved to Research</div>
</div>
</div>
<div class="side">
<div class="card">
<h3 class="serif">Research report</h3>
<p>12 sources reviewed · draft ready in 2 min · exportable with full citations.</p>
<span class="badge">Save 20%</span>
</div>
<div class="card">
<h3 class="serif">Saved highlights</h3>
<p>14 highlights this week across 6 articles. Connected to your active research thread.</p>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2864f0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2864f0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99b4f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2863ef; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2864f0; color: #ffffff;
border: 1px solid #2863ef; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2864f0; color: #f5f5f5;
border: 1px solid #497bf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99b4f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2864f0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#323232; box-sizing:border-box;
font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e1dcdc; background:#ffffff; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.2px; margin:0; color:#2864f0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#595959; }
.hdr-btn { background:#2864f0; color:#ffffff; border-radius:5px; padding:4px 20px; height:31px;
font-size:14px; font-weight:700; display:flex; align-items:center; white-space:nowrap; }
.hero { padding:36px 36px 26px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.4; margin:0; color:#323232; }
.hero p { font-size:14px; color:#595959; line-height:1.5; margin:0; max-width:480px; }
.hero-row { display:flex; gap:12px; margin-top:8px; }
.btn-primary { background:#2864f0; color:#ffffff; border:2px solid #2864f0; border-radius:8px; padding:0 16px;
height:48px; font-size:16px; font-weight:700; display:flex; align-items:center; white-space:nowrap; }
.btn-outline { background:#ffffff; color:#2864f0; border:2px solid #2864f0; border-radius:8px; padding:0 16px;
height:48px; font-size:16px; font-weight:700; display:flex; align-items:center; white-space:nowrap; }
.section-label { font-size:12px; font-weight:700; color:#595959; letter-spacing:0.04em; text-transform:uppercase;
text-align:center; margin:0 0 14px; }
.segments { padding:8px 36px 20px; }
.seg-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.seg-card { background:#ebf3ff; border-radius:8px; padding:14px; height:82px; display:flex; flex-direction:column;
justify-content:space-between; }
.seg-card .name { font-size:15px; font-weight:700; color:#323232; }
.seg-card .desc { font-size:12px; color:#595959; }
.products { padding:6px 36px 24px; }
.prod-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.prod-card { background:#ffffff; border:1px solid #e1dcdc; border-radius:8px; padding:10px 14px; height:56px;
display:flex; align-items:center; font-size:15px; font-weight:700; color:#2864f0; }
footer { border-top:1px solid #e1dcdc; padding:12px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#595959; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">freee</p>
<div class="navlinks"><span>Accounting</span><span>HR & Payroll</span><span>Invoicing</span><span>Pricing</span></div>
<div class="hdr-btn">Sign up</div>
</nav>
<section class="hero">
<h1>An integrated platform<br>for running your business freely</h1>
<p>Accounting, payroll, and approvals in one place — so small business owners spend less time on back-office work.</p>
<div class="hero-row">
<div class="btn-primary">Start free trial</div>
<div class="btn-outline">View pricing</div>
</div>
</section>
<section class="segments">
<p class="section-label">Choose where to start</p>
<div class="seg-grid">
<div class="seg-card"><span class="name">Accounting</span><span class="desc">Bookkeeping made simple</span></div>
<div class="seg-card"><span class="name">HR</span><span class="desc">Attendance & onboarding</span></div>
<div class="seg-card"><span class="name">Payroll</span><span class="desc">Pay staff on time</span></div>
<div class="seg-card"><span class="name">Invoicing</span><span class="desc">Send & track invoices</span></div>
</div>
</section>
<section class="products">
<p class="section-label">All products</p>
<div class="prod-grid">
<div class="prod-card">Expense management</div>
<div class="prod-card">Tax filing support</div>
<div class="prod-card">Business cards</div>
</div>
</section>
<footer>
<span>© freee</span>
<span>freee · Products · Pricing · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #df1e2e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #df1e2e;
border: 1px solid #df1e2e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #240507; color: #df1e2e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
/* left: class browse */
.browse { width:400px; height:640px; border-right:1px solid #2C2C2E; display:flex; flex-direction:column; }
.header { height:50px; flex-shrink:0; display:flex; align-items:center; padding:0 18px;
font-size:24px; font-weight:900; letter-spacing:-0.6px; }
.pills { display:flex; gap:8px; padding:8px 18px 12px; overflow:hidden; }
.pill { font-size:12px; font-weight:600; padding:7px 15px; border-radius:500px; white-space:nowrap; }
.pill.sel { background:#fff; color:#000; }
.pill.uns { background:#1C1C1E; border:1px solid #2C2C2E; color:#B5B5BA; }
.cards { flex:1; overflow:hidden; padding:0 18px; display:flex; flex-direction:column; gap:18px; }
.card { background:#121212; border:1px solid #2C2C2E; border-radius:14px; overflow:hidden; }
.thumb { height:110px; position:relative; background:linear-gradient(135deg,#3a1418,#121212); }
.thumb.b { background:linear-gradient(135deg,#3a2a10,#121212); }
.live-badge { position:absolute; top:8px; left:8px; background:#DF1E2E; color:#fff; font-size:9px;
font-weight:800; text-transform:uppercase; padding:3px 7px; border-radius:5px; display:flex; align-items:center; gap:4px; }
.live-dot { width:5px; height:5px; border-radius:50%; background:#fff; }
.dur-badge { position:absolute; top:8px; right:8px; background:rgba(0,0,0,0.6); color:#fff; font-size:10px;
font-weight:600; padding:3px 8px; border-radius:5px; }
.card-body { padding:12px 14px; }
.disc { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#FF4B57; }
.ctitle { font-size:16px; font-weight:800; margin-top:3px; }
.instr { font-size:13px; color:#B5B5BA; margin-top:2px; }
.meta { font-size:11px; color:#7A7A80; margin-top:5px; }
.meta .star { color:#F0A030; }
/* right: in-class metrics */
.inclass { flex:1; height:640px; display:flex; flex-direction:column; background:#000; position:relative; }
.video { height:220px; background:linear-gradient(160deg,#241012,#050505); position:relative;
display:flex; align-items:center; justify-content:center; }
.video .cue { color:#B5B5BA; font-size:12px; font-weight:600; letter-spacing:0.4px; }
.live-badge2 { position:absolute; top:12px; left:12px; background:#DF1E2E; color:#fff; font-size:10px;
font-weight:800; text-transform:uppercase; padding:4px 8px; border-radius:5px; display:flex; align-items:center; gap:5px; }
.metrics-panel { flex:1; padding:16px 20px; overflow:hidden; }
.ring-row { display:flex; gap:20px; align-items:center; }
.ring { width:96px; height:96px; border-radius:50%; flex-shrink:0;
background:conic-gradient(#DF1E2E 0deg 250deg, #262629 250deg 360deg);
display:flex; align-items:center; justify-content:center; position:relative; }
.ring::before { content:''; position:absolute; inset:9px; border-radius:50%; background:#000; }
.ring-inner { position:relative; text-align:center; }
.ring-val { font-size:26px; font-weight:900; }
.ring-label { font-size:8px; font-weight:700; text-transform:uppercase; color:#7A7A80; letter-spacing:0.4px; }
.metric-col { flex:1; display:flex; flex-direction:column; }
.metric-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0;
border-bottom:1px solid #2C2C2E; }
.m-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:#B5B5BA; }
.m-val { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.lb-header { font-size:11px; font-weight:700; text-transform:uppercase; color:#B5B5BA; margin:16px 0 8px; }
.lb-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #2C2C2E; }
.lb-rank { font-size:13px; font-weight:800; color:#B5B5BA; width:18px; font-variant-numeric:tabular-nums; }
.lb-rank.me { color:#FF4B57; }
.lb-avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#DF1E2E,#3a1418); }
.lb-name { flex:1; font-size:13px; font-weight:600; }
.lb-out { font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.lb-row.me { background:rgba(223,30,46,0.12); margin:0 -20px; padding:8px 20px; }
.lb-row.me .lb-out { color:#FF4B57; }
.take-cta { position:absolute; left:20px; right:20px; bottom:16px; background:#DF1E2E; color:#fff;
text-align:center; padding:14px 0; border-radius:500px; font-weight:700; font-size:15px; display:none; }
</style></head>
<body>
<div class="app">
<div class="browse">
<div class="header">Peloton (iOS)</div>
<div class="pills">
<div class="pill sel">All</div>
<div class="pill uns">Cycling</div>
<div class="pill uns">Strength</div>
<div class="pill uns">Yoga</div>
<div class="pill uns">Running</div>
</div>
<div class="cards">
<div class="card">
<div class="thumb"><div class="live-badge"><span class="live-dot"></span>LIVE</div><div class="dur-badge">45 min</div></div>
<div class="card-body">
<div class="disc">Power Zone Ride</div>
<div class="ctitle">45 min Power Zone Max</div>
<div class="instr">Olivia Amato</div>
<div class="meta"><span class="star">★</span> 4.9 · 12,408 taken</div>
</div>
</div>
<div class="card">
<div class="thumb b"><div class="dur-badge">30 min</div></div>
<div class="card-body">
<div class="disc">Strength</div>
<div class="ctitle">30 min Full Body</div>
<div class="instr">Callie Gullickson</div>
<div class="meta"><span class="star">★</span> 4.8 · 8,204 taken</div>
</div>
</div>
</div>
</div>
<div class="inclass">
<div class="video"><div class="live-badge2"><span class="live-dot"></span>LIVE</div><span class="cue">Studio feed</span></div>
<div class="metrics-panel">
<div class="ring-row">
<div class="ring"><div class="ring-inner"><div class="ring-val">312</div><div class="ring-label">Total kJ</div></div></div>
<div class="metric-col">
<div class="metric-row"><span class="m-label">Cadence</span><span class="m-val" style="color:#E5402A">94</span></div>
<div class="metric-row"><span class="m-label">Resistance</span><span class="m-val" style="color:#F0A030">52</span></div>
<div class="metric-row"><span class="m-label">Output</span><span class="m-val" style="color:#FF4B57">218 W</span></div>
<div class="metric-row"><span class="m-label">Heart Rate</span><span class="m-val">148</span></div>
</div>
</div>
<div class="lb-header">Leaderboard · 1,284 riders</div>
<div class="lb-row"><span class="lb-rank">4</span><div class="lb-avatar"></div><span class="lb-name">Marcus T.</span><span class="lb-out">241 W</span></div>
<div class="lb-row me"><span class="lb-rank me">5</span><div class="lb-avatar"></div><span class="lb-name">You</span><span class="lb-out">218 W</span></div>
<div class="lb-row"><span class="lb-rank">6</span><div class="lb-avatar"></div><span class="lb-name">Priya S.</span><span class="lb-out">205 W</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 400; line-height: 1.25; margin: 0; color: #1d1d1b; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.6px; background: #cd4c20; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.6px; background: transparent; color: #1d1d1b;
border: 1px solid #cd4c20; border-radius: 0px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1b;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #cd4c20; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d1d1b; box-sizing:border-box;
font-family:'Lato', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'GTUltra', 'GTUltraFine', 'Frank Ruhl Libre', Georgia, serif; }
nav { height:64px; border-bottom:1px solid #eeeeee; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#1d1d1b; }
.navlinks span:first-child { font-weight:600; }
.strip { display:flex; gap:24px; padding:12px 40px; border-bottom:1px solid #eeeeee; font-size:13px; font-weight:700;
text-transform:uppercase; letter-spacing:0.4px; color:#9b9b9b; }
.strip span:first-child { color:#1d1d1b; border-bottom:2px solid #1d1d1b; padding-bottom:10px; }
.hero { padding:30px 40px; display:flex; align-items:center; gap:36px; }
.hero-copy { flex:1.2; }
.eyebrow { color:#cd4c20; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:8px; display:block; }
.hero h1 { font-size:44px; font-weight:400; line-height:1.08; letter-spacing:-0.5px; margin:0 0 12px; max-width:460px; }
.hero p { font-size:15px; color:#222222; margin:0 0 18px; max-width:400px; line-height:1.5; }
.btn-primary { background:#cd4c20; color:#fff; border:none; border-radius:0; padding:16px 30px;
font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; height:48px; }
.btn-secondary { background:transparent; color:#1d1d1b; border:1px solid #1d1d1b; border-radius:0; padding:15px 29px;
font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; height:48px; margin-left:8px; }
.hero-visual { flex:1; height:170px; background:#f7f7f7; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:130px; height:90px; background:#cd4c20; left:40px; top:40px; }
.hero-visual::after { content:''; position:absolute; width:60px; height:60px; background:#1d1d1b; right:60px; bottom:26px; }
.section { padding:20px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:22px; font-weight:400; margin:0; }
.sec-head span { font-size:12px; font-weight:700; color:#cd4c20; letter-spacing:0.5px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card { position:relative; }
.thumb { aspect-ratio:1/1; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(150deg,#f7f7f7,#e2c3ab); }
.t2 { background:linear-gradient(150deg,#f7f7f7,#c9cac8); }
.t3 { background:linear-gradient(150deg,#f7f7f7,#a3a29b); }
.badge { position:absolute; top:8px; left:8px; background:#cd4c20; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:4px 8px; }
.card h3 { font-size:16px; font-weight:600; margin:0 0 2px; }
.card .price { font-size:15px; font-weight:400; margin:0 0 8px; }
.swatches { display:flex; gap:6px; }
.sw { width:16px; height:16px; border-radius:9999px; border:1px solid #d0d1d0; }
.sw.active { border:2px solid #1d1d1b; }
.sw.c1 { background:#cd4c20; } .sw.c2 { background:#1d1d1b; } .sw.c3 { background:#9b9b9b; }
footer { background:#1d1d1b; color:#fff; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#c9c9c9; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand serif">Bellroy</p>
<div class="navlinks"><span>Wallets</span><span>Bags</span><span>Phone Cases</span><span>Accessories</span></div>
</nav>
<div class="strip"><span>Slim Wallets</span><span>Bifolds</span><span>Travel</span><span>Cardholders</span></div>
<section class="hero">
<div class="hero-copy">
<span class="eyebrow">Carry Considered</span>
<h1 class="serif">The wallet, engineered down to the millimeter</h1>
<p>Full-grain leather, RFID-blocking, and a form built for one pocket — nothing extra, nothing missing.</p>
<div>
<button class="btn-primary">Shop Wallets</button>
<button class="btn-secondary">Find In Store</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2 class="serif">New Arrivals</h2><span>Shop All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge">New</span></div>
<h3>Note Sleeve Wallet</h3>
<p class="price">$99</p>
<div class="swatches"><div class="sw c1 active"></div><div class="sw c2"></div><div class="sw c3"></div></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<h3>Venture Sling 6L</h3>
<p class="price">$139</p>
<div class="swatches"><div class="sw c2 active"></div><div class="sw c3"></div></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<h3>Travel Wallet</h3>
<p class="price">$129</p>
<div class="swatches"><div class="sw c3 active"></div><div class="sw c1"></div></div>
</div>
</div>
</section>
<footer>
<span>© Bellroy</span>
<div><a href="#">Shipping</a><a href="#">Warranty</a><a href="#">Our Story</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefaf0; color: #3c2c53;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefaf0; color: #3c2c53;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #3c2c53; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #d74f64; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #fefaf0; color: #3c2c53;
border: 1px solid #d74f64; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefaf0; color: #555555;
border: 1px solid #cec6c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ff29b8; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fefaf0; color:#3c2c53; box-sizing:border-box;
font-family:'Futura ND Book','Futura ND Medium',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #e0e3e5; }
.brand { font-family:'Breno','Futura ND Medium',Georgia,serif; font-size:24px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:#777777; }
.navlinks .on { color:#d74f64; border-bottom:2px solid #d74f64; padding-bottom:4px; }
.icons { display:flex; gap:10px; }
.icircle { width:32px; height:32px; border-radius:9999px; background:#fefaf0; border:1px solid #e0e3e5; }
main { display:flex; gap:26px; padding:18px 28px 0; height:490px; }
.stage { width:360px; border-radius:12px; background:radial-gradient(circle at 30% 20%, #ffe1ea 0%, #fbeee0 45%, #f6f1e2 100%);
position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.blob1 { position:absolute; width:120px; height:120px; border-radius:9999px; background:#a49cfb; opacity:.55; top:-30px; left:-30px; }
.blob2 { position:absolute; width:100px; height:100px; border-radius:9999px; background:#ff580a; opacity:.35; bottom:-20px; right:-20px; }
.blob3 { position:absolute; width:70px; height:70px; border-radius:9999px; background:#ff29b8; opacity:.4; bottom:30px; left:20px; }
.bottle { width:96px; height:230px; position:relative; z-index:2; }
.bottle .cap { width:56px; height:34px; background:linear-gradient(160deg,#322546,#3c2c53); border-radius:8px 8px 4px 4px;
margin:0 auto; }
.bottle .body { width:96px; height:190px; margin-top:-4px; border-radius:20px;
background:linear-gradient(170deg,#d74f64 0%,#a8263a 100%); position:relative; box-shadow:0 14px 28px rgba(60,44,83,.25); }
.bottle .body::before { content:''; position:absolute; left:14px; right:14px; top:44px; bottom:44px;
background:rgba(255,255,255,.85); border-radius:6px; }
.badge-best { position:absolute; top:16px; left:16px; background:#3c2c53; color:#fff; font-size:11px; font-weight:600;
letter-spacing:.5px; text-transform:uppercase; padding:2px 10px; border-radius:9999px; z-index:3; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.eyebrow { font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:#d74f64; font-weight:600; }
h1 { font-family:'Breno','Futura ND Medium',Georgia,serif; font-size:32px; font-weight:700; margin:2px 0 0; line-height:1.12; }
.stars { font-size:13px; color:#d74f64; }
.stars span.n { color:#777777; margin-left:6px; font-family:Helvetica,Arial,sans-serif; }
.price { font-size:22px; font-weight:600; color:#d74f64; margin-top:4px; }
.desc { font-size:14px; color:#555555; line-height:1.55; max-width:480px; }
.sizes { display:flex; gap:8px; margin-top:2px; }
.szpill { border-radius:9999px; border:1px solid #e0e3e5; padding:8px 16px; font-size:12px; font-weight:600;
letter-spacing:.6px; text-transform:uppercase; }
.szpill.sel { background:#d74f64; color:#fff; border-color:#d74f64; }
.ingredients { display:flex; gap:8px; margin-top:2px; flex-wrap:wrap; }
.ing { font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:#3c2c53;
background:#f6f1e2; border-radius:9999px; padding:5px 12px; }
.cta-row { display:flex; gap:10px; margin-top:8px; }
.btn-primary { background:#d74f64; color:#fff; font-size:14px; font-weight:600; letter-spacing:1px;
text-transform:uppercase; border-radius:8px; height:44px; padding:0 26px; display:flex; align-items:center; }
.btn-secondary { background:#fefaf0; color:#3c2c53; border:2px solid #3c2c53; font-size:14px; font-weight:600;
letter-spacing:1px; text-transform:uppercase; border-radius:8px; height:44px; padding:0 24px;
display:flex; align-items:center; }
.faq { margin-top:auto; background:#f6f1e2; border-radius:12px; padding:10px 16px; display:flex;
align-items:center; justify-content:space-between; }
.faq span { font-size:13px; font-weight:600; }
.faq em { font-style:normal; color:#a8263a; font-size:12px; }
footer { position:absolute; bottom:0; left:0; right:0; height:26px; background:#3c2c53; color:#9ca3af;
display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-size:10px; }
</style></head>
<body>
<nav>
<span class="brand">Amika</span>
<div class="navlinks"><span>Hair</span><span class="on">Best Sellers</span><span>Sets</span><span>About</span></div>
<div class="icons"><span class="icircle"></span><span class="icircle"></span></div>
</nav>
<main>
<div class="stage">
<span class="badge-best">Best Seller</span>
<div class="blob1"></div><div class="blob2"></div><div class="blob3"></div>
<div class="bottle"><div class="cap"></div><div class="body"></div></div>
</div>
<div class="info">
<div class="eyebrow">Shampoo & Conditioner Duo</div>
<h1>Dream Routine — Overnight Repair Duo</h1>
<div class="stars">★★★★★ <span class="n">4.7 (2,140 reviews)</span></div>
<div class="price">$46.00</div>
<div class="desc">A silk-smoothing wash-day duo that undoes damage while you sleep. Weightless, plant-derived, and built for hair that wants to be touched.</div>
<div class="sizes">
<span class="szpill">1 oz</span>
<span class="szpill sel">8 oz</span>
<span class="szpill">16 oz</span>
</div>
<div class="ingredients">
<span class="ing">Vegan</span>
<span class="ing">Cruelty-Free</span>
<span class="ing">Color-Safe</span>
<span class="ing">Sulfate-Free</span>
</div>
<div class="cta-row">
<div class="btn-primary">Add to Bag</div>
<div class="btn-secondary">Subscribe & Save</div>
</div>
<div class="faq"><span>Free shipping over $35</span><em>30-day happiness guarantee</em></div>
</div>
</main>
<footer><span>© Amika</span><span>Amika · Hair · Sets · Stockists</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#02060C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.loc-hdr { display:flex; align-items:center; gap:8px; padding:20px 34px 0; }
.pin { color:#FC8019; font-size:18px; }
.loc-title { font-size:17px; font-weight:800; }
.avatar { margin-left:auto; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#FC8019,#D7385E); }
.addr { font-size:12px; color:#686B78; margin-left:26px; }
.search-pill { margin:14px 34px 0; height:46px; border-radius:14px; background:#F4F4F6; display:flex; align-items:center; padding:0 16px; color:#686B78; font-size:14px; gap:10px; }
.search-pill .ic { color:#FC8019; }
.chip-row { display:flex; gap:8px; padding:14px 34px 0; }
.chip { height:32px; border-radius:8px; border:1px solid #E2E2E7; padding:0 14px; display:flex; align-items:center; font-size:12px; font-weight:600; }
.chip.on { background:#ECECEE; border-color:#686B78; }
.rcard { margin:16px 34px 0; }
.photo { height:190px; border-radius:16px; position:relative; overflow:hidden; background:linear-gradient(135deg,#f6a04d,#c9622a); }
.photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,0.78) 100%); }
.offer { position:absolute; bottom:12px; left:14px; z-index:1; color:#fff; }
.offer b { font-size:16px; font-weight:800; display:block; }
.offer span { font-size:11px; font-weight:600; }
.heart { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.4); }
.rname { font-size:18px; font-weight:800; margin-top:10px; }
.rmeta-row { display:flex; align-items:center; gap:8px; margin-top:4px; }
.rating-chip { background:#48C479; color:#fff; font-size:12px; font-weight:700; padding:2px 6px; border-radius:6px; }
.eta { font-size:14px; font-weight:600; color:#686B78; }
.cuisine { font-size:14px; color:#686B78; margin-top:4px; }
.dashed-footer { margin-top:10px; padding-top:10px; border-top:1px dashed #E2E2E7; color:#FC8019; font-size:12px; font-weight:700; }
</style></head>
<body>
<div class="loc-hdr"><span class="pin">📍</span><span class="loc-title">Home ⌄</span><div class="avatar"></div></div>
<div class="addr">123 Cross River Rd, Sector 4</div>
<div class="addr">Swiggy (iOS)</div>
<div class="search-pill"><span class="ic">🔍</span>Search "biryani"</div>
<div class="chip-row">
<div class="chip">☰ Filter</div>
<div class="chip on">Under 30 mins</div>
<div class="chip">Rating 4.0+</div>
<div class="chip">Pure Veg</div>
<div class="chip">Offers</div>
</div>
<div class="rcard">
<div class="photo"><div class="heart"></div><div class="offer"><b>60% OFF</b><span>UPTO ₹120</span></div></div>
<div class="rname">Punjab Grill Express</div>
<div class="rmeta-row"><div class="rating-chip">★ 4.4</div><div class="eta">30–35 mins · 2.1 km</div></div>
<div class="cuisine">North Indian · Tandoor · Biryani</div>
<div class="dashed-footer">⏱ Free delivery on orders above ₹199</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e50914; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e50914; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee8b90; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #b20710; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e50914; color: #ffffff;
border: 1px solid #b20710; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e50914; color: #f5f5f5;
border: 1px solid #e82f38; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee8b90; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dd0913; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141414; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.billboard { position:relative; height:340px; overflow:hidden;
background:
linear-gradient(0deg, #141414 0%, rgba(20,20,20,0) 45%),
linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 55%, transparent 80%),
linear-gradient(135deg, #3a1010 0%, #200a0a 40%, #141414 100%); }
.billboard::after { content:''; position:absolute; right:-80px; top:-40px; width:480px; height:480px; border-radius:50%;
background:radial-gradient(circle, rgba(229,9,20,0.28), transparent 65%); }
nav { position:relative; z-index:4; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { color:#e50914; font-size:26px; font-weight:700; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:13px; color:#e5e5e5; }
.navlinks span.on { color:#fff; font-weight:700; }
.searchicon { width:34px; height:34px; border-radius:4px; border:1px solid rgba(255,255,255,0.3); }
.billtext { position:relative; z-index:3; padding:26px 40px 0; max-width:440px; }
.billtitle { font-size:52px; font-weight:700; line-height:1.02; letter-spacing:-0.01em; margin:0 0 14px; }
.billmeta { display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.match { color:#46d369; font-size:14px; font-weight:700; }
.rating { border:1px solid #666666; background:rgba(51,51,51,0.6); font-size:12px; padding:1px 6px; border-radius:2px; }
.billsyn { font-size:15px; color:#e5e5e5; line-height:1.4; margin:0 0 16px; }
.billbtns { display:flex; gap:10px; }
.btn-play { background:#fff; color:#000; font-size:15px; font-weight:700; border-radius:4px; padding:0 22px; height:38px;
display:flex; align-items:center; gap:8px; }
.btn-play::before { content:'▶'; font-size:13px; }
.btn-info { background:rgba(109,109,110,0.7); color:#fff; font-size:15px; font-weight:700; border-radius:4px;
padding:0 22px; height:38px; display:flex; align-items:center; }
.rows { position:absolute; top:340px; left:0; right:0; bottom:0; padding:16px 0 0; overflow:hidden; }
.row-title { font-size:18px; font-weight:700; margin:0 0 8px; padding:0 40px; }
.row { display:flex; gap:6px; padding:0 40px; margin-bottom:16px; }
.tile { width:150px; height:84px; border-radius:4px; background:#181818; position:relative; overflow:hidden; flex-shrink:0; }
.tile::after { content:''; position:absolute; inset:0;
background:linear-gradient(135deg, rgba(229,9,20,0.18), rgba(255,255,255,0.03)); }
.tile .prog { position:absolute; left:0; right:0; bottom:0; height:3px; background:#404040; }
.tile .prog::after { content:''; position:absolute; left:0; top:0; bottom:0; width:55%; background:#e50914; }
.tile.top10::before { content:'TOP 10'; position:absolute; top:6px; left:6px; background:#e50914; color:#fff;
font-size:8px; font-weight:700; padding:1px 5px; border-radius:2px; z-index:2; }
</style></head>
<body>
<div class="billboard">
<nav>
<span class="brand">Netflix</span>
<div class="navlinks"><span class="on">Home</span><span>TV Shows</span><span>Movies</span><span>New & Popular</span><span>My List</span></div>
<span class="searchicon"></span>
</nav>
<div class="billtext">
<div class="billtitle">Iron Horizon</div>
<div class="billmeta"><span class="match">98% Match</span><span class="rating">TV-MA</span><span style="font-size:13px;color:#b3b3b3;">3 Seasons</span></div>
<p class="billsyn">A convoy of survivors crosses a collapsing empire, racing the last working train south before the border closes for good.</p>
<div class="billbtns"><span class="btn-play">Play</span><span class="btn-info">More Info</span></div>
</div>
</div>
<div class="rows">
<div class="row-title">Continue Watching</div>
<div class="row">
<div class="tile"><div class="prog"></div></div>
<div class="tile"><div class="prog"></div></div>
<div class="tile"><div class="prog"></div></div>
<div class="tile"><div class="prog"></div></div>
<div class="tile"><div class="prog"></div></div>
<div class="tile"><div class="prog"></div></div>
</div>
<div class="row-title">Trending Now</div>
<div class="row">
<div class="tile top10"></div>
<div class="tile top10"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #642fe9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #642fe9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b49cf0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #714fd8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #642fe9; color: #ffffff;
border: 1px solid #714fd8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #642fe9; color: #f5f5f5;
border: 1px solid #7b4feb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b49cf0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6634e6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
.phone-wrap { display:flex; justify-content:center; height:100%; background:#edeef0; padding:20px 0; }
.phone { width:390px; background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.15); }
.topbar { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.brand { font-weight:800; font-size:17px; color:#642fe9; }
.search { flex:1; margin:0 12px; height:34px; border-radius:8px; background:#f2f3f5; }
.nav { display:flex; gap:16px; padding:0 16px 10px; font-size:15px; font-weight:400; }
.nav span:first-child { color:#000; }
.nav span:not(:first-child) { color:#aaafbb; }
.chips { display:flex; gap:8px; padding:0 16px 14px; }
.chip { background:#fff; box-shadow:rgba(27,32,42,0.16) 0px 2px 6px -2px; border-radius:8px; padding:8px 14px; font-size:13px; }
.banner { margin:0 16px 14px; height:110px; border-radius:16px; background:linear-gradient(135deg,#714fd8,#642fe9);
display:flex; align-items:flex-end; padding:12px; position:relative; }
.promo { background:#000; color:#fff; font-size:14px; font-weight:600; border-radius:8px; padding:6px 12px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 16px 20px; }
.prod { background:#fff; border-radius:16px; }
.thumb { height:130px; border-radius:16px; }
.p1 .thumb { background:linear-gradient(150deg,#f0d7e6,#e54d76); }
.p2 .thumb { background:linear-gradient(150deg,#d7e0f0,#642fe9); }
.pname { font-size:13px; padding:8px 4px 2px; }
.price-row { display:flex; align-items:center; gap:6px; padding:0 4px 10px; }
.orig { font-size:11px; color:#aaafbb; text-decoration:line-through; }
.disc { font-size:14px; font-weight:600; color:#714fd8; }
.final { font-size:14px; font-weight:600; }
</style></head>
<body>
<div class="phone-wrap">
<div class="phone">
<div class="topbar"><div class="brand">Queenit</div><div class="search"></div><div>👤</div></div>
<div class="nav"><span>For You</span><span>Life</span><span>Beauty</span><span>Men</span></div>
<div class="chips"><div class="chip">Smart Shopping Tips</div><div class="chip">₩20,000 Coupon</div></div>
<div class="banner"><div class="promo">Jewelry Sale up to 50% off</div></div>
<div class="grid2">
<div class="prod p1"><div class="thumb"></div><div class="pname">Knit Cardigan</div><div class="price-row"><span class="orig">89,000</span><span class="disc">41%</span><span class="final">52,000</span></div></div>
<div class="prod p2"><div class="thumb"></div><div class="pname">Pleated Skirt</div><div class="price-row"><span class="orig">65,000</span><span class="disc">63%</span><span class="final">24,000</span></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #646464; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #025f1d; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #025f1d;
border: 1px solid #025f1d; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #303030;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646464; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #03912c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'brandon-grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:linear-gradient(90deg,#012d0e,#025f1d); }
.brand { font-size:19px; font-weight:700; color:#fff; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#cfe9cf; }
.btn-primary { background:#fff; color:#025f1d; border:none; border-radius:8px; padding:11px 20px; font-size:13px; font-weight:700; }
main { display:flex; height:calc(640px - 66px - 42px); }
.gallery { width:380px; background:#f9f9f9; position:relative; display:flex; align-items:center; justify-content:center; }
.bottle { width:80px; height:210px; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg,#03912c,#025f1d 70%);
position:relative; }
.bottle::before { content:''; position:absolute; top:-22px; left:26px; width:28px; height:26px; border-radius:4px; background:#012d0e; }
.badge-eco { position:absolute; top:20px; left:20px; background:#025f1d; color:#fff; font-size:11px; font-weight:600; padding:4px 10px; border-radius:8px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:12px; color:#646464; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-size:22px; font-weight:700; margin:0; }
.price { font-size:20px; font-weight:700; color:#025f1d; }
.desc { font-family:'Open Sans',Arial,sans-serif; font-size:13px; color:#303030; line-height:1.55; max-width:340px; }
.sizes { display:flex; gap:8px; }
.size { border:1px solid #d1d1d1; border-radius:8px; padding:8px 14px; font-size:12px; }
.size.on { border-color:#025f1d; color:#025f1d; background:#f2f8f2; }
.alert { background:#fdecec; color:#e02b27; font-size:12px; padding:8px 12px; border-radius:8px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#025f1d; color:#fff; border:none; border-radius:8px; padding:14px; font-size:14px; font-weight:700; }
.btn-sec { background:#fff; color:#111; border:1px solid #d1d1d1; border-radius:8px; padding:14px 18px; font-size:13px; font-weight:600; }
.searchpill { background:#f5f5f5; border-radius:9999px; padding:8px 16px; font-size:12px; color:#646464; }
footer { padding:12px 32px; border-top:1px solid #e8e8e8; font-size:11px; color:#646464; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bio Kleen</div>
<div class="navlinks"><span>Marine Care</span><span>Home & Auto</span><span>Concentrates</span></div>
<button class="btn-primary">Shop Now</button>
</nav>
<main>
<div class="gallery"><span class="badge-eco">Biodegradable</span><div class="bottle"></div></div>
<div class="info">
<span class="cat">Enzyme Concentrate Cleaner</span>
<h1>Bio-Kleen Marine Concentrate</h1>
<div class="price">$24.99</div>
<p class="desc">Plant-enzyme formula lifts grease and salt film without harsh solvents — safe for gelcoat, teak, and fabric.</p>
<div class="sizes"><span class="size on">32 oz</span><span class="size">1 gal</span><span class="size">5 gal</span></div>
<div class="alert">Low stock — 6 units left at this size</div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">View Safety Data</button>
</div>
</div>
</main>
<footer><span>© Bio Kleen</span><span>Enzyme-based · Biodegradable · Made in the USA</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00cbd5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00cbd5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096569; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b8c1; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00cbd5; color: #000000;
border: 1px solid #00b8c1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00cbd5; color: #111111;
border: 1px solid #03adb6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096569; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c8d2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202429; box-sizing:border-box;
font-family:Pretendard,-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:26px; color:#000000; }
.navlinks { display:flex; gap:20px; font-size:15px; color:#8e8e8e; }
.navlinks span.on { color:#00cbd5; }
.login { background:#ffffff; color:#00b8c1; border:1px solid #00cbd5; border-radius:8px; height:36px; padding:0 16px;
font-size:14px; font-weight:700; display:flex; align-items:center; }
.hero { position:relative; height:170px; margin:0 32px 18px; border-radius:8px; overflow:hidden;
background:linear-gradient(120deg,#0f2a2c,#124a4d 60%,#00cbd5); display:flex; align-items:flex-end; padding:16px; }
.hero span { color:#ffffff; font-size:20px; font-weight:700; }
.section-title { padding:0 32px; font-size:18px; font-weight:700; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px 18px; }
.card { border:1px solid #e4e4e4; border-radius:4px; overflow:hidden; }
.img { height:90px; }
.im1 { background:linear-gradient(160deg,#0c3a3c,#00cbd5); }
.im2 { background:linear-gradient(160deg,#3a2050,#7a3dff); }
.im3 { background:linear-gradient(160deg,#502030,#f65895); }
.im4 { background:linear-gradient(160deg,#1a3050,#5989fe); }
.cb { padding:10px; }
.cb h4 { font-size:15px; font-weight:800; margin:0 0 6px; }
.cb .price { font-size:13px; font-weight:700; color:#f65895; }
.filters { display:flex; gap:10px; padding:0 32px 14px; }
.fpill { background:#000000; color:#ffffff; border-radius:100px; height:36px; padding:0 16px; font-size:14px;
display:flex; align-items:center; }
.fpill.off { background:transparent; color:#8e8e8e; border:1px solid #e4e4e4; }
</style></head>
<body>
<header>
<span class="brand">Weverse</span>
<div class="navlinks"><span class="on">Home</span><span>Shop</span><span>Magazine</span><span>Live</span></div>
<span class="login">Log in</span>
</header>
<div class="hero"><span>Global Fandom Platform</span></div>
<div class="section-title">Recommended Artist</div>
<div class="filters"><span class="fpill">All artists</span><span class="fpill off">Aurora Six</span><span class="fpill off">Nightbloom</span></div>
<div class="grid">
<div class="card"><div class="img im1"></div><div class="cb"><h4>Aurora Six</h4><span class="price">Album · ₩32,000</span></div></div>
<div class="card"><div class="img im2"></div><div class="cb"><h4>Nightbloom</h4><span class="price">Photobook · ₩28,000</span></div></div>
<div class="card"><div class="img im3"></div><div class="cb"><h4>Echo Line</h4><span class="price">-15% ₩17,000</span></div></div>
<div class="card"><div class="img im4"></div><div class="cb"><h4>Solace Crew</h4><span class="price">Lightstick · ₩45,000</span></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0067ac; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0067ac; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5d4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20c4f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0067ac; color: #20c4f4;
border: 1px solid #20c4f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0067ac; color: #f5f5f5;
border: 1px solid #277eb8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5d4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0576b8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Malgun Gothic", "Noto Sans KR", Arial, sans-serif; }
* { box-sizing:border-box; }
.dawn { position:absolute; right:-90px; top:-90px; width:260px; height:260px; border-radius:50%;
background:conic-gradient(from 200deg, #20c4f4, #0083ca, #0067ac, #20c4f4); opacity:0.16; }
header { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #cccccc; background:#ffffff; }
.brand-mark { display:flex; align-items:center; gap:10px; }
.dawn-badge { width:26px; height:26px; border-radius:50%; background:conic-gradient(from 210deg,#20c4f4,#0083ca,#0067ac,#20c4f4); }
.brand { font-size:18px; font-weight:700; color:#0067ac; margin:0; letter-spacing:-0.2px; }
.toplinks { display:flex; gap:22px; font-size:13px; color:#333333; }
.util-btn { background:#ffffff; color:#000000; border:1px solid #cccccc; border-radius:0px; padding:6px 14px; font-size:12px; }
.hero { position:relative; z-index:2; padding:26px 32px 16px; }
.hero .kicker { font-size:12px; color:#7f7f7f; font-weight:400; }
.hero h1 { font-size:24px; font-weight:700; color:#000000; margin:6px 0 4px; }
.hero p { font-size:13px; color:#333333; margin:0; }
.grid { position:relative; z-index:2; display:grid; grid-template-columns:1.3fr 1fr; gap:16px; padding:6px 32px 14px; }
.balance-card { border:1px solid #cccccc; border-radius:0px; padding:20px; background:#ffffff; }
.balance-card .label { font-size:12px; color:#7f7f7f; }
.balance-card .amount { font-size:30px; font-weight:700; color:#0067ac; margin:6px 0 12px; letter-spacing:-0.4px; }
.acct-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-top:1px solid #dfdfdf; font-size:13px; color:#000000; }
.acct-row:first-of-type { border-top:none; }
.acct-row .num { color:#7f7f7f; font-size:12px; }
.side-card { border:1px solid #cccccc; border-radius:0px; padding:16px; background:#ffffff; display:flex; flex-direction:column; gap:10px; }
.side-card h4 { margin:0; font-size:13px; color:#000000; font-weight:700; }
.field { display:flex; flex-direction:column; gap:4px; }
.field label { font-size:11px; color:#7f7f7f; }
.field .box { border:1px solid #cccccc; border-radius:0px; height:26px; padding:2px 3px 3px; font-size:13px; color:#000000; background:#ffffff; display:flex; align-items:center; }
.transfer-btn { background:#0067ac; color:#ffffff; border:none; border-radius:5px; height:34px; font-size:13px; font-weight:700; margin-top:2px; }
.rate-strip { position:relative; z-index:2; display:flex; gap:0; padding:0 32px; }
.rate-item { flex:1; border:1px solid #cccccc; border-left:none; padding:10px 12px; font-size:11px; color:#333333; }
.rate-item:first-child { border-left:1px solid #cccccc; }
.rate-item b { display:block; font-size:15px; color:#0083ca; margin-top:2px; }
footer { position:relative; z-index:2; border-top:1px solid #cccccc; padding:10px 32px; margin-top:14px;
display:flex; justify-content:space-between; font-size:11px; color:#7f7f7f; }
</style></head>
<body>
<div class="dawn"></div>
<header>
<div class="brand-mark"><span class="dawn-badge"></span><p class="brand">Woori Bank</p></div>
<div class="toplinks"><span>Accounts</span><span>Transfer</span><span>Products</span><span>Support</span></div>
<button class="util-btn">Log In</button>
</header>
<section class="hero">
<span class="kicker">Building tomorrow's value through today's innovation</span>
<h1>See your accounts at a glance</h1>
<p>Woori Bank Internet Banking — from balances to transfers, all in one screen.</p>
</section>
<section class="grid">
<div class="balance-card">
<span class="label">Total Assets</span>
<div class="amount">$12,480.30</div>
<div class="acct-row"><span>Everyday Checking</span><span class="num">110-***-234567</span><span>$8,220.15</span></div>
<div class="acct-row"><span>Term Deposit</span><span class="num">110-***-882301</span><span>$3,000.00</span></div>
<div class="acct-row"><span>Young Adult Savings</span><span class="num">110-***-119042</span><span>$1,260.15</span></div>
</div>
<div class="side-card">
<h4>Quick Transfer</h4>
<div class="field"><label>Recipient account number</label><div class="box">123-456-789012</div></div>
<div class="field"><label>Transfer amount</label><div class="box">$500.00</div></div>
<button class="transfer-btn">Transfer</button>
</div>
</section>
<div class="rate-strip">
<div class="rate-item">Term Deposit Rate<b>3.15% APR</b></div>
<div class="rate-item">Young Adult Savings<b>4.50% APR</b></div>
<div class="rate-item">Mortgage Rate<b>4.02% APR</b></div>
<div class="rate-item">Exchange Rate (USD)<b>1,342.50</b></div>
</div>
<footer>
<span>© Woori Bank</span>
<span>Woori Bank · About · Products · Privacy Policy</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dc4c3e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dc4c3e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #eaa9a3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fafafa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #dc4c3e; color: #fafafa;
border: 1px solid #fafafa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #dc4c3e; color: #f5f5f5;
border: 1px solid #e0675b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #eaa9a3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e1685c; color: #fafafa;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#202020; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.sidebar { width:250px; background:#FAFAFA; padding:22px 16px; }
.sb-user { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.sb-user .av { width:36px; height:36px; border-radius:50%; background:#DC4C3E; }
.sb-item { display:flex; align-items:center; gap:10px; height:36px; font-size:15px; }
.sb-item .cnt { margin-left:auto; color:#808080; font-size:13px; }
.sb-hdr { font-size:12px; letter-spacing:0.6px; text-transform:uppercase; color:#808080; margin:16px 0 4px; }
.dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.main { flex:1; padding:26px 40px; position:relative; }
.maintitle { font-size:34px; font-weight:700; margin:0 0 14px; }
.row { display:flex; align-items:center; gap:12px; height:52px; border-bottom:0.5px solid #EEEEEE; }
.cb { width:22px; height:22px; border-radius:50%; border:1.5px solid #B0B0B0; flex-shrink:0; }
.cb.p1 { border-color:#DC4C3E; background:rgba(220,76,62,0.10); }
.cb.p2 { border-color:#EB8909; background:rgba(235,137,9,0.08); }
.cb.p3 { border-color:#246FE0; background:rgba(36,111,224,0.08); }
.cb.done { background:#DC4C3E; border-color:#DC4C3E; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
.tcontent { flex:1; }
.ttitle { font-size:16px; }
.ttitle.done { color:#B0B0B0; text-decoration:line-through; }
.tmeta { display:flex; gap:10px; margin-top:2px; font-size:13px; }
.date { color:#808080; }
.date.today { color:#058527; }
.date.over { color:#DC4C3E; }
.proj { color:#808080; }
.fab { position:absolute; right:32px; bottom:32px; width:56px; height:56px; border-radius:50%; background:#DC4C3E; color:#fff;
font-size:28px; display:flex; align-items:center; justify-content:center; box-shadow:rgba(220,76,62,0.35) 0 6px 16px; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="sb-user"><div class="av"></div><span style="font-weight:600">Todoist (iOS)</span></div>
<div class="sb-item">📥 Inbox<span class="cnt">4</span></div>
<div class="sb-item">☀ Today<span class="cnt">5</span></div>
<div class="sb-item">📅 Upcoming</div>
<div class="sb-hdr">My Projects</div>
<div class="sb-item"><span class="dot" style="background:#4073FF"></span>Product<span class="cnt">6</span></div>
<div class="sb-item"><span class="dot" style="background:#FF9933"></span>Marketing<span class="cnt">2</span></div>
<div class="sb-item"><span class="dot" style="background:#299438"></span>Personal</div>
</div>
<div class="main">
<div class="maintitle">Today</div>
<div class="row"><div class="cb p1"></div><div class="tcontent"><div class="ttitle">Ship the Todoist (iOS) release notes</div>
<div class="tmeta"><span class="date over">Overdue</span><span class="proj"># Product</span></div></div></div>
<div class="row"><div class="cb done">✓</div><div class="tcontent"><div class="ttitle done">Reply to design feedback</div></div></div>
<div class="row"><div class="cb p2"></div><div class="tcontent"><div class="ttitle">Review pricing page copy</div>
<div class="tmeta"><span class="date today">Today</span><span class="proj"># Marketing</span></div></div></div>
<div class="row"><div class="cb p3"></div><div class="tcontent"><div class="ttitle">Sync with design on icons</div>
<div class="tmeta"><span class="date today">Today 3:00 PM</span></div></div></div>
<div class="row"><div class="cb"></div><div class="tcontent"><div class="ttitle">Buy groceries for the week</div>
<div class="tmeta"><span class="proj"># Personal</span></div></div></div>
<div class="fab">+</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #1a1919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #1a1919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: 400; line-height: 1.3; margin: 0; color: #1a1919; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #bebebe; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.12em; background: #1c274c; color: #f8f8f8;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.12em; background: #f8f8f8; color: #1a1919;
border: 1px solid #1c274c; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f8f8; color: #1a1919;
border: 1px solid #d4d4d4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bebebe; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.14em; background: #c4bdb7; color: #1a1919;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#1a1919; box-sizing:border-box;
font-family:'Bricolage Grotesque', Inter, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.caps { font-family:'Arial', sans-serif; letter-spacing:0.12em; text-transform:uppercase; font-size:12px; }
.serif { font-family:'Times New Roman', Georgia, serif; }
nav { flex:0 0 auto; height:60px; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:1px solid #d4d4d4; }
.brand { font-size:13px; letter-spacing:0.12em; text-transform:uppercase; margin:0; }
.navlinks { position:absolute; left:30px; display:flex; gap:20px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; }
.cart { position:absolute; right:30px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; }
.hero { flex:0 0 auto; min-height:220px; display:flex; align-items:flex-end; padding:20px 30px;
background:linear-gradient(160deg,#1c274c 0%, #303030 55%, #1a1919 100%); color:#f8f8f8; position:relative; }
.hero .eyebrow { font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:#c4bdb7; margin:0 0 8px; }
.hero h1 { font-family:'Times New Roman', serif; font-weight:400; font-size:42px; margin:0; letter-spacing:-0.5px; }
main { flex:1 1 auto; display:flex; padding:18px 30px; gap:18px; min-height:0; }
.card { flex:1; display:flex; flex-direction:column; gap:8px; }
.thumb { flex:1; min-height:0; }
.t1 { background:#c4bdb7; }
.t2 { background:#8b0000; }
.t3 { background:#006400; }
.name { font-size:13px; letter-spacing:0.1em; text-transform:uppercase; margin:0; }
.price { font-family:'Times New Roman', serif; font-size:15px; margin:0; }
.swatches { display:flex; gap:6px; }
.sw { width:18px; height:18px; border-radius:999px; }
.sw.a { background:#c4bdb7; }
.sw.b { background:#dcd7d4; }
.sw.c { background:#8b0000; box-shadow:0 0 0 2px #f8f8f8, 0 0 0 3px #1a1919; }
.sw.d { background:#006400; }
.sw.e { background:#ee9441; }
footer { flex:0 0 auto; height:52px; background:#1a1919; color:#c4bdb7; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:11px; letter-spacing:0.06em; }
</style></head>
<body>
<nav>
<div class="navlinks"><span>Notebooks</span><span>Planners</span></div>
<p class="brand">Appointed</p>
<div class="cart">Cart</div>
</nav>
<div class="hero">
<div>
<p class="eyebrow">American Made Since 2013</p>
<h1>The Daily Planner</h1>
</div>
</div>
<main>
<div class="card">
<div class="thumb t1"></div>
<p class="name">Stone Two-Tone Planner</p>
<p class="price serif">$58.00</p>
<div class="swatches"><span class="sw a"></span><span class="sw c"></span><span class="sw d"></span></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<p class="name">Maroon Notebook, Ruled</p>
<p class="price serif">$34.00</p>
<div class="swatches"><span class="sw c"></span><span class="sw b"></span></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<p class="name">Hunter Field Journal</p>
<p class="price serif">$28.00</p>
<div class="swatches"><span class="sw d"></span><span class="sw e"></span><span class="sw a"></span></div>
</div>
</main>
<footer>
<span>© Appointed</span>
<span>Shipping — Returns — Contact</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e8ff63; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #e8ff63;
border: 1px solid #e8ff63; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #252910; color: #e8ff63;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#000000; color:#FFFFFF; box-sizing:border-box; font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; flex-direction:column; align-items:center; padding:16px 0; }
.topbar { width:400px; display:flex; justify-content:space-between; align-items:center; }
.circbtn { width:34px; height:34px; border-radius:50%; background:#1C1C1E; display:flex; align-items:center; justify-content:center; font-size:15px; }
.screentitle { font-size:22px; font-weight:700; }
.card { width:400px; height:420px; border-radius:28px; margin-top:14px; position:relative; overflow:hidden; background:linear-gradient(150deg,#3a2a4a,#5a2a4a 50%,#2a1a3a); }
.grad { position:absolute; bottom:0; left:0; right:0; height:60%; background:linear-gradient(180deg,transparent,rgba(0,0,0,0.72) 60%,rgba(0,0,0,0.92)); }
.verified { position:absolute; top:20px; right:20px; background:rgba(0,0,0,0.5); backdrop-filter:blur(8px); border-radius:999px; padding:6px 10px; font-size:11px; font-weight:600; display:flex; align-items:center; gap:5px; }
.verified .ck { color:#E8FF63; font-weight:800; }
.cardbody { position:absolute; bottom:22px; left:22px; right:22px; }
.pname { font-size:26px; font-weight:700; letter-spacing:-0.4pt; }
.psub { font-size:14px; color:rgba(255,255,255,0.78); margin-top:4px; }
.chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.chip { padding:9px 15px; border-radius:999px; font-size:12px; font-weight:600; }
.chip.sel { background:#E8FF63; color:#000; }
.chip.unsel { background:#1C1C1E; border:1px solid #2A2A2A; color:#fff; }
.chip.emo { background:rgba(255,92,138,0.16); border:1px solid rgba(255,92,138,0.4); color:#FF5C8A; }
.actionrow { display:flex; align-items:center; gap:22px; margin-top:20px; }
.acbtn { border-radius:50%; display:flex; align-items:center; justify-content:center; }
.pass { width:52px; height:52px; background:#1C1C1E; border:1px solid #2A2A2A; color:#A8A8A8; font-size:22px; }
.like { width:64px; height:64px; background:#E8FF63; color:#000; font-size:28px; box-shadow:0 12px 30px -8px rgba(232,255,99,0.5); }
.wink { width:52px; height:52px; background:#1C1C1E; border:1px solid #2A2A2A; color:#C9B8FF; font-size:22px; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:11px;font-weight:700;letter-spacing:3pt;text-transform:uppercase;color:#E8FF63;margin-bottom:10px">Feeld (iOS)</div>
<div class="topbar"><div class="circbtn">☰</div><div class="screentitle">Discover</div><div class="circbtn">⚙</div></div>
<div class="card">
<div class="grad"></div>
<div class="verified"><span class="ck">✓</span> Verified</div>
<div class="cardbody">
<div class="pname">Robin & Sky</div>
<div class="psub">Couple · 31 & 29 · 2 km away</div>
<div class="chips">
<span class="chip sel">Non-monogamy</span>
<span class="chip unsel">Kink</span>
<span class="chip emo">Exploring</span>
<span class="chip unsel">ENM</span>
</div>
</div>
</div>
<div class="actionrow">
<div class="acbtn pass">✕</div>
<div class="acbtn like">♥</div>
<div class="acbtn wink">★</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a8aab2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 9999px; padding: 11px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: transparent; color: #0a0a0a;
border: 1px solid #0a0a0a; border-radius: 9999px;
padding: 11px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0a0a0a;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8aab2; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.5; background: #e8ffea; color: #1ba673;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #222222; }
.brand { font-size:17px; font-weight:600; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#a8aab2; }
.btn { background:#ffffff; color:#0a0a0a; border:none; border-radius:999px;
padding:9px 20px; font-weight:600; font-size:13px; white-space:nowrap; }
.hero { padding:44px 40px 28px; text-align:center; }
.hero .tag { font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#3daeff; }
.hero h1 { font-size:56px; font-weight:600; letter-spacing:-1.6px; line-height:1.05; margin:10px 0 0; }
.hero p { font-size:15px; color:#8e8e93; margin:14px auto 0; max-width:480px; }
/* MiniMax 의 진짜 신원은 텍스트가 아니라 모델별 그라디언트 카드다 —
coral/magenta/blue/purple 4색을 각각 독립 카드로 노출한다. */
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:20px 40px 36px; }
.card { position:relative; border-radius:18px; padding:18px; height:170px;
display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.card .glow { position:absolute; inset:-30% -30% auto auto; width:140px; height:140px; border-radius:50%;
filter:blur(2px); opacity:0.55; }
.c1 { background:linear-gradient(155deg,#ff5530,#7a1e00); }
.c1 .glow { background:#ffb199; }
.c2 { background:linear-gradient(155deg,#ea5ec1,#5c1049); }
.c2 .glow { background:#ffc2ec; }
.c3 { background:linear-gradient(155deg,#1456f0,#0a1c4d); }
.c3 .glow { background:#8db4ff; }
.c4 { background:linear-gradient(155deg,#a855f7,#3a1263); }
.c4 .glow { background:#dcb8ff; }
.card .k { position:relative; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:rgba(255,255,255,0.75); }
.card h3 { position:relative; font-size:19px; font-weight:600; margin:0; letter-spacing:-0.4px; }
.card p { position:relative; font-size:12px; color:rgba(255,255,255,0.7); margin:0; line-height:1.4; }
footer { border-top:1px solid #222222; padding:14px 40px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#5f5f5f; }
</style></head>
<body>
<nav>
<p class="brand">Minimax</p>
<div class="navlinks"><span>Models</span><span>Docs</span><span>Pricing</span><span>Blog</span></div>
<button class="btn">Get started</button>
</nav>
<section class="hero">
<span class="tag">New release</span>
<h1>Frontier intelligence, deployed</h1>
<p>Premium AI infrastructure for teams who ship at the edge of what models can do.</p>
</section>
<section class="cards">
<div class="card c1"><span class="glow"></span><span class="k">Text</span><h3>MiniMax-M2</h3><p>Reasoning at native speed</p></div>
<div class="card c2"><span class="glow"></span><span class="k">Vision</span><h3>abab-Vision</h3><p>See, read, and reason</p></div>
<div class="card c3"><span class="glow"></span><span class="k">Voice</span><h3>Speech-02</h3><p>Studio-grade synthesis</p></div>
<div class="card c4"><span class="glow"></span><span class="k">Video</span><h3>Hailuo</h3><p>Cinematic generation</p></div>
</section>
<footer>
<span>© Minimax</span>
<span>Models · Developers · Enterprise · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"figmaSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"figmaMono", "SFMono-Regular", Consolas, Menlo, monospace; }
.wrap { display:flex; flex-direction:column; height:640px; }
header { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:1px solid #ebebeb; }
.left { display:flex; align-items:center; gap:20px; }
.wm { font-size:15px; font-weight:600; letter-spacing:-0.2px; }
.segment { display:flex; background:rgba(0,0,0,0.04); border-radius:50px; padding:3px; }
.seg-item { height:36px; padding:0 16px; display:flex; align-items:center; font-size:13px; font-weight:480; color:#000000; border-radius:50px; }
.seg-item.active { background:rgba(0,0,0,0.08); }
.right { display:flex; align-items:center; gap:10px; }
.btn-outline { height:36px; padding:0 16px; display:flex; align-items:center; border-radius:8px; font-size:13px; color:#000000; border:1px solid #ebebeb; }
.btn-indigo { height:36px; padding:0 16px; display:flex; align-items:center; border-radius:8px; font-size:13px; font-weight:480; background:#4d49fc; color:#ffffff; }
main { flex:1; min-height:0; display:flex; background:#f7f7f8; padding:20px 24px; gap:16px; position:relative; }
.canvas { flex:1; background:#ffffff; border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,0.10);
position:relative; overflow:hidden; }
.art { position:absolute; }
.a1 { width:190px; height:150px; left:56px; top:44px; background:#6c5ce7; border-radius:16px; transform:rotate(-4deg); }
.a2 { width:130px; height:130px; left:210px; top:130px; background:#ff6f91; border-radius:9999px; opacity:0.92; }
.a3 { width:220px; height:100px; left:120px; top:238px; background:#00c2a8; border-radius:14px; transform:rotate(3deg); }
.a4 { width:96px; height:96px; right:70px; top:56px; background:#ffd166; border-radius:20px; transform:rotate(10deg); }
.a5 { width:150px; height:150px; right:36px; top:170px; background:#0d99ff; border-radius:9999px; opacity:0.18; }
.frame-label { position:absolute; left:56px; top:22px; font-size:11px; color:#8a8a8a; font-weight:500; }
.cursor-tag { position:absolute; left:250px; top:96px; background:#4d49fc; color:#ffffff; font-size:10px; font-weight:600;
padding:3px 8px; border-radius:4px; }
.toolbar { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); display:flex; gap:2px;
background:#000000; border-radius:12px; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,0.25); }
.tool { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
color:#ffffff; font-size:14px; }
.tool.on { background:rgba(255,255,255,0.16); }
.panel { width:212px; flex:0 0 212px; background:#ffffff; border-radius:12px; border:1px solid #ebebeb; padding:14px; display:flex; flex-direction:column; gap:10px; }
.panel h4 { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#8a8a8a; margin:0; }
.layer { display:flex; align-items:center; gap:8px; font-size:13px; color:#000000; padding:6px 0; }
.layer .sw { width:14px; height:14px; border-radius:4px; flex:0 0 14px; }
.layer.sel { background:rgba(13,153,255,0.08); border-radius:6px; padding:6px 8px; margin:0 -8px; }
.fab { position:absolute; right:20px; bottom:20px; width:40px; height:40px; border-radius:9999px; background:#000000;
color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:18px; }
footer { flex:0 0 36px; border-top:1px solid #ebebeb; padding:0 24px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#8a8a8a; }
</style></head>
<body>
<div class="wrap">
<header>
<div class="left">
<span class="wm">Figma</span>
<div class="segment">
<div class="seg-item active">Design</div>
<div class="seg-item">Dev Mode</div>
<div class="seg-item">Community</div>
</div>
</div>
<div class="right">
<span class="btn-outline">Contact sales</span>
<span class="btn-indigo">Try for free</span>
</div>
</header>
<main>
<div class="canvas">
<span class="frame-label">Frame · Homepage / v3</span>
<div class="art a1"></div>
<div class="art a2"></div>
<div class="art a3"></div>
<div class="art a4"></div>
<div class="art a5"></div>
<span class="cursor-tag">Maya</span>
<div class="toolbar">
<div class="tool on">↖</div>
<div class="tool">▭</div>
<div class="tool">◯</div>
<div class="tool">T</div>
<div class="tool">💬</div>
</div>
</div>
<div class="panel">
<h4>Layers</h4>
<div class="layer sel"><span class="sw" style="background:#6c5ce7"></span>Hero card</div>
<div class="layer"><span class="sw" style="background:#ff6f91"></span>Avatar circle</div>
<div class="layer"><span class="sw" style="background:#00c2a8"></span>Caption bar</div>
<div class="layer"><span class="sw" style="background:#ffd166"></span>Badge</div>
<div class="layer"><span class="sw" style="background:#0d99ff"></span>Glow accent</div>
</div>
</main>
<footer>
<span>© Figma</span>
<span class="mono">AUTOSAVED · 2 ONLINE</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0969da; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0969da; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bb6e9; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d1117; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0969da; color: #0d1117;
border: 1px solid #0d1117; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0969da; color: #f5f5f5;
border: 1px solid #2f7fde; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bb6e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a5bbb; color: #0d1117;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0d1117; color:#e6edf3; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.mono { font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
nav { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
background:#010409; border-bottom:1px solid #30363d; }
.brand { font-size:15px; font-weight:700; color:#e6edf3; margin:0; }
.navlinks { display:flex; gap:18px; font-size:13px; color:#9198a1; }
.search-fake { background:#0d1117; border:1px solid #30363d; border-radius:6px; color:#9198a1; font-size:12px;
padding:0 10px; height:28px; width:220px; display:flex; align-items:center; }
.repohead { padding:16px 24px 10px; border-bottom:1px solid #30363d; }
.crumb { font-size:13px; color:#4493f8; }
.crumb span.cur { color:#9198a1; }
.titlerow { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.repotitle { font-size:22px; font-weight:600; color:#e6edf3; }
.repotitle .pub { font-size:11px; font-weight:400; color:#9198a1; border:1px solid #30363d; border-radius:9999px;
padding:1px 8px; margin-left:8px; vertical-align:2px; }
.btns { display:flex; gap:8px; }
.btn-default { background:#21262d; color:#e6edf3; border:1px solid #30363d; border-radius:6px; height:28px;
padding:0 12px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; }
.btn-primary { background:#238636; color:#ffffff; border:1px solid rgba(240,246,252,0.1); border-radius:6px;
height:28px; padding:0 12px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:4px; }
.desc { font-size:12px; color:#9198a1; margin-top:6px; }
.tabs { display:flex; gap:16px; padding:0 24px; border-bottom:1px solid #30363d; margin-top:8px; }
.tab { font-size:13px; color:#9198a1; padding:8px 2px; border-bottom:2px solid transparent; }
.tab.on { color:#e6edf3; font-weight:600; border-bottom:2px solid #fd8c73; }
.tab .cnt { background:rgba(175,184,193,0.2); color:#e6edf3; border-radius:9999px; font-size:11px; padding:0 6px; margin-left:5px; }
.body { display:flex; gap:14px; padding:14px 24px 0; }
.main { flex:2.3; display:flex; flex-direction:column; gap:12px; }
.rail { flex:1; display:flex; flex-direction:column; gap:10px; }
.box { background:#161b22; border:1px solid #30363d; border-radius:6px; }
.box .hd { padding:8px 14px; border-bottom:1px solid #30363d; font-size:12px; color:#9198a1; display:flex; justify-content:space-between; }
.filerow { display:flex; align-items:center; gap:8px; padding:6px 14px; font-size:13px; border-bottom:1px solid #21262d; }
.filerow:last-child { border-bottom:none; }
.filerow .name { color:#e6edf3; }
.filerow.dir .name { color:#4493f8; }
.filerow .msg { color:#9198a1; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filerow .time { color:#9198a1; font-size:12px; }
.dot { width:8px; height:8px; border-radius:9999px; background:#4493f8; flex-shrink:0; }
.dot.dir { background:transparent; }
.issue { display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:13px; border-bottom:1px solid #21262d; }
.issue:last-child { border-bottom:none; }
.state { border-radius:9999px; padding:2px 8px; font-size:11px; font-weight:600; color:#ffffff; flex-shrink:0; }
.state.open { background:#238636; }
.state.merged { background:#8250df; }
.state.closed { background:#da3633; }
.issue .t { color:#e6edf3; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.issue .meta { color:#9198a1; font-size:11px; }
.rail .h3 { font-size:13px; font-weight:600; color:#e6edf3; margin:0; }
.rail p.d { font-size:12px; color:#9198a1; margin:6px 0 10px; }
.topics { display:flex; flex-wrap:wrap; gap:6px; }
.topic { background:#388bfd26; color:#4493f8; border:1px solid #388bfd4d; border-radius:9999px; font-size:11px;
padding:2px 9px; }
.stat { display:flex; justify-content:space-between; font-size:12px; color:#9198a1; padding:4px 0; }
.stat b { color:#e6edf3; font-weight:600; }
footer { border-top:1px solid #30363d; padding:10px 24px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#9198a1; margin-top:12px; }
</style></head>
<body>
<nav>
<p class="brand">GitHub</p>
<div class="navlinks"><span>Pull requests</span><span>Issues</span><span>Marketplace</span><span>Explore</span></div>
<div class="search-fake">Type / to search</div>
</nav>
<section class="repohead">
<div class="crumb">octobox-labs / <span class="cur">flowline</span> <span style="color:#9198a1; font-weight:400;">Public</span></div>
<div class="titlerow">
<span class="repotitle">flowline</span>
<div class="btns">
<div class="btn-default">★ Star <span style="opacity:0.7;">2.1k</span></div>
<div class="btn-default">⑂ Fork <span style="opacity:0.7;">318</span></div>
<div class="btn-primary">Code ▾</div>
</div>
</div>
<p class="desc">A lightweight workflow engine for background jobs, written in Go.</p>
</section>
<div class="tabs">
<span class="tab on">Code</span>
<span class="tab">Issues <span class="cnt">42</span></span>
<span class="tab">Pull requests <span class="cnt">7</span></span>
<span class="tab">Actions</span>
<span class="tab">Settings</span>
</div>
<section class="body">
<div class="main">
<div class="box">
<div class="hd"><span>main</span><span class="mono">128 commits</span></div>
<div class="filerow dir"><span class="dot dir">📁</span><span class="name">internal</span><span class="msg mono">refactor: split scheduler queue</span><span class="time">2 days ago</span></div>
<div class="filerow dir"><span class="dot dir">📁</span><span class="name">cmd</span><span class="msg mono">feat: add --dry-run flag</span><span class="time">5 days ago</span></div>
<div class="filerow"><span class="dot">●</span><span class="name mono">go.mod</span><span class="msg mono">chore: bump dependencies</span><span class="time">1 week ago</span></div>
<div class="filerow"><span class="dot">●</span><span class="name mono">README.md</span><span class="msg mono">docs: update install steps</span><span class="time">2 weeks ago</span></div>
</div>
<div class="box">
<div class="hd"><span>Recent activity</span><span>3 open</span></div>
<div class="issue"><span class="state open">Open</span><span class="t">Retry backoff should be configurable</span><span class="meta">#412</span></div>
<div class="issue"><span class="state merged">Merged</span><span class="t">Add Prometheus metrics exporter</span><span class="meta">#409</span></div>
<div class="issue"><span class="state closed">Closed</span><span class="t">Panic on empty queue name</span><span class="meta">#405</span></div>
</div>
</div>
<div class="rail">
<div>
<p class="h3">About</p>
<p class="d">A lightweight, dependency-free workflow engine for scheduling and running background jobs.</p>
<div class="topics">
<span class="topic">go</span><span class="topic">workflow</span><span class="topic">queue</span><span class="topic">jobs</span>
</div>
</div>
<div class="box" style="padding:12px 14px;">
<div class="stat"><span>Stars</span><b>2,142</b></div>
<div class="stat"><span>Watching</span><b>64</b></div>
<div class="stat"><span>Forks</span><b>318</b></div>
<div class="stat"><span>Contributors</span><b>29</b></div>
</div>
</div>
</section>
<footer>
<span>© GitHub</span>
<span>GitHub · Code · Issues · Actions</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3478; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3478; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa9ebd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3478; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3478; color: #f5f5f5;
border: 1px solid #fd538c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa9ebd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff548e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
border-bottom:1px solid #dfdfdf; position:relative; z-index:2; }
.brand { font-size:17px; font-weight:700; color:#ff3478; margin:0; }
.acct { border:1px solid #dfdfdf; color:#222; border-radius:2px; padding:0 16px; height:32px; display:flex; align-items:center; font-size:14px; }
.map { position:relative; height:420px; background:
linear-gradient(#eef2f5,#eef2f5) ,
repeating-linear-gradient(0deg, #dfe6ea 0, #dfe6ea 1px, transparent 1px, transparent 44px),
repeating-linear-gradient(90deg, #dfe6ea 0, #dfe6ea 1px, transparent 1px, transparent 44px); }
.searchbar { position:absolute; top:16px; left:16px; background:#fff; border:1px solid #ededed; border-radius:42px;
padding:7px 20px 7px 15px; font-size:14px; color:#222; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.dock { position:absolute; top:16px; right:16px; display:flex; gap:6px; }
.dockbtn { background:#fff; border:1px solid #dfdfdf; border-radius:2px; padding:0 11px 0 11px; height:32px; display:flex; align-items:center; font-size:13px; }
.pin { position:absolute; background:#326cf9; color:#fff; font-size:12px; font-weight:600; border-radius:16px; padding:5px 11px; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
.p1 { top:80px; left:180px; } .p2 { top:150px; left:340px; } .p3 { top:230px; left:520px; }
.p4 { top:110px; left:650px; } .p5 { top:280px; left:220px; } .p6 { top:70px; left:430px; }
.list { display:flex; gap:14px; padding:16px 30px; }
.card { flex:1; background:#fff; border:1px solid #dfdfdf; border-radius:8px; padding:12px; }
.card .price { font-size:15px; font-weight:700; }
.card .type { font-size:12px; color:#767676; margin-top:2px; }
</style></head>
<body>
<nav>
<p class="brand">Dabang</p>
<span class="acct">My Account</span>
</nav>
<div class="map">
<div class="searchbar">Search listings in Yeoksam-dong</div>
<div class="dock"><span class="dockbtn">Map</span><span class="dockbtn">Filters</span></div>
<div class="pin p1">$400/mo, $2,100 dep.</div>
<div class="pin p2">$168,000 lump-sum</div>
<div class="pin p3">$540/mo, $1,400 dep.</div>
<div class="pin p4">$272,000 lump-sum</div>
<div class="pin p5">$330/mo, $2,300 dep.</div>
<div class="pin p6">$144,000 lump-sum</div>
</div>
<div class="list">
<div class="card"><div class="price">$168,800 lump-sum</div><div class="type">2BR · Yeoksam-dong · 5F</div></div>
<div class="card"><div class="price">$400/mo, $2,100 dep.</div><div class="type">Studio · Yeoksam-dong · 3F</div></div>
<div class="card"><div class="price">$540/mo, $1,400 dep.</div><div class="type">Officetel · Yeoksam-dong · 12F</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0075de;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0075de;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #0075de; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #bbb8b1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #5645d4; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #1a1a1a;
border: 1px solid #5645d4; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #bfdcf7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bbb8b1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #5645d4; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 딥 네이비 히어로 밴드 위에 스티키노트 색점 + 워크스페이스 UI 목업 —
그 아래는 데이터베이스 속성처럼 파스텔 카드 그리드. */
.hero { background:linear-gradient(160deg,#0a1530,#1a2a52); height:290px; position:relative; overflow:hidden; }
.dot { position:absolute; width:16px; height:16px; border-radius:4px; }
.d1 { background:#f5d75e; top:40px; left:60px; transform:rotate(12deg); }
.d2 { background:#ff64c8; top:70px; left:120px; transform:rotate(-8deg); }
.d3 { background:#2a9d99; top:36px; right:100px; transform:rotate(6deg); }
.d4 { background:#7b3ff2; top:100px; right:180px; transform:rotate(-10deg); }
.d5 { background:#1aae39; bottom:26px; left:200px; transform:rotate(8deg); }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:600; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; color:rgba(255,255,255,0.72); }
.btn { background:#5645d4; color:#fff; border:none; border-radius:999px; padding:9px 20px; font-weight:600; font-size:13px; }
.herocopy { position:relative; z-index:2; text-align:center; padding-top:6px; }
.herocopy h1 { font-size:42px; font-weight:600; letter-spacing:-1px; margin:0; color:#fff; line-height:1.1; }
.herocopy p { font-size:14px; color:rgba(255,255,255,0.65); margin:10px 0 16px; }
/* 워크스페이스 미니 목업 — 히어로 안쪽에 떠있는 작은 UI 카드 */
.mockup { position:relative; z-index:2; margin:0 auto; width:420px; background:#fff; border-radius:10px;
box-shadow:0 20px 50px rgba(0,0,0,0.35); padding:14px 18px; text-align:left; }
.mockup .mrow { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; color:#37352f; }
.mockup .chip { width:14px; height:14px; border-radius:3px; }
.ch1 { background:#dcecfa; } .ch2 { background:#d9f3e1; } .ch3 { background:#fde0ec; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:22px 40px 30px; }
.card { border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.card.a { background:#ffe8d4; } .card.b { background:#e6e0f5; } .card.c { background:#d9f3e1; } .card.d { background:#dcecfa; }
.card h5 { font-size:13px; font-weight:700; margin:0; color:#1a1a1a; }
.card p { font-size:11px; color:#5d5b54; margin:0; }
</style></head>
<body>
<div class="hero">
<div class="dot d1"></div><div class="dot d2"></div><div class="dot d3"></div><div class="dot d4"></div><div class="dot d5"></div>
<nav>
<p class="brand">Notion</p>
<div class="navlinks"><span>Product</span><span>AI</span><span>Enterprise</span><span>Pricing</span></div>
<button class="btn">Get Notion free</button>
</nav>
<div class="herocopy">
<h1>Your wiki, docs, & projects.<br>Together.</h1>
<p>One workspace, every team.</p>
</div>
<div class="mockup">
<div class="mrow"><span class="chip ch1"></span> Product roadmap</div>
<div class="mrow"><span class="chip ch2"></span> Design sprint notes</div>
<div class="mrow"><span class="chip ch3"></span> Q3 OKRs</div>
</div>
</div>
<div class="cards">
<div class="card a"><h5>Docs</h5><p>Write it down, once</p></div>
<div class="card b"><h5>AI</h5><p>Ask your workspace</p></div>
<div class="card c"><h5>Projects</h5><p>Track what matters</p></div>
<div class="card d"><h5>Wiki</h5><p>One source of truth</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #1174dc; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1174dc;
border: 1px solid #1174dc; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ff9900; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
border-bottom:1px solid #f2f2f2; }
.brand { font-size:17px; font-weight:700; margin:0; color:#111; font-family:Georgia, 'Times New Roman', serif; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#222; }
.cart { background:#1174dc; color:#fff; font-size:12px; font-weight:600; border-radius:6px; padding:8px 14px; }
main { display:flex; height:582px; }
.stage { width:340px; background:#eff5f8; display:flex; align-items:center; justify-content:center; position:relative; }
.desk2 { width:220px; height:130px; position:relative; }
.desktop2 { width:220px; height:12px; background:linear-gradient(180deg,#fff,#e7f0ff); border:1px solid #d0e1fe; border-radius:6px; }
.legw { position:absolute; top:12px; width:10px; height:90px; background:#78b5f5; border-radius:2px; }
.lw-l { left:16px; } .lw-r { right:16px; }
.hub { position:absolute; top:-8px; right:36px; width:30px; height:12px; background:#1174dc; border-radius:3px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; border-radius:4px; padding:3px 9px; color:#fff; }
.b-deal { background:#ff9900; } .b-stock { background:#1ab759; }
h1 { font-family:'Georgia', 'Times New Roman', serif; font-size:25px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#4a4a4a; margin:0; max-width:440px; line-height:1.55; }
.spectable { font-family:'Consolas', 'Courier New', monospace; font-size:11px; color:#333; background:#f5f5f5;
border-radius:6px; padding:10px 12px; margin-top:4px; line-height:1.7; }
.spectable b { color:#1174dc; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-family:Georgia, serif; font-size:26px; font-weight:700; color:#111; }
.actions { display:flex; gap:10px; margin-top:4px; }
.btn-primary { background:#1174dc; color:#fff; border-radius:6px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:600; font-size:13px; }
.btn-secondary { background:#fafafa; border:1px solid #d3d3d3; color:#111; border-radius:6px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav>
<p class="brand">Autonomous AI</p>
<div class="navlinks"><span>Configurator</span><span>Desks</span><span>Accessories</span><span>Specs</span></div>
<span class="cart">Cart · 1</span>
</nav>
<main>
<div class="stage">
<div class="desk2"><div class="hub"></div><div class="desktop2"></div><div class="legw lw-l"></div><div class="legw lw-r"></div></div>
</div>
<div class="info">
<div class="badges"><span class="badge b-deal">Deal Ends 12:04:11</span><span class="badge b-stock">In Stock</span></div>
<h1>Configurable AI Standing Desk Pro</h1>
<p class="sub">Build your desk from motor lift range, top material, and integrated USB-C hub — configured to your workflow.</p>
<div class="spectable">Load Capacity: <b>275 kg</b><br>Height Range: <b>60–125 cm</b><br>Lift Speed: <b>38 mm/s</b><br>Hub: <b>USB-C · 100W PD</b></div>
<div class="price-row"><span class="price">$549</span></div>
<div class="actions">
<div class="btn-primary">Configure & Buy</div>
<div class="btn-secondary">Compare Models</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfd; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfd; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7a7b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbfbfd; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fbfbfd; color: #111111;
border: 1px solid #d6d6d7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d7; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FBFBFD; color:#1A1A1F; box-sizing:border-box;
font-family:'Poppins', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; width:960px; height:640px; }
.main { flex:1; padding:26px 30px 20px; overflow:hidden; }
.greet { font-size:26px; font-weight:700; letter-spacing:-0.3pt; }
.greetsub { font-size:13px; color:#6A6A70; margin-top:2px; margin-bottom:16px; }
.lesson { position:relative; border-radius:20px; padding:20px 22px; overflow:hidden;
background: linear-gradient(135deg, #2A5DF6, #1FC29B); box-shadow: rgba(42,93,246,0.22) 0 10px 26px; }
.lesson::after { content:''; position:absolute; top:-40px; right:-40px; width:130px; height:130px; border-radius:50%;
background: rgba(255,255,255,0.10); }
.eyebrow { position:relative; font-size:11px; font-weight:700; letter-spacing:1pt; color:rgba(255,255,255,0.85); text-transform:uppercase; }
.lesson-title { position:relative; font-size:19px; font-weight:700; color:#fff; margin:6px 0 14px; max-width:80%; line-height:1.3; }
.progtrack { position:relative; height:6px; background:rgba(255,255,255,0.25); border-radius:3px; margin-bottom:8px; }
.progfill { height:100%; width:40%; background:#fff; border-radius:3px; }
.progline { position:relative; display:flex; justify-content:space-between; align-items:center; }
.proglabel { font-size:11px; font-weight:700; color:rgba(255,255,255,0.85); }
.whitepill { background:#fff; color:#2A5DF6; font-size:13px; font-weight:700; padding:9px 16px; border-radius:999px; }
.cards2 { display:flex; gap:14px; margin:16px 0; }
.datacard { flex:1; background:#fff; border:1px solid #E6E7EC; border-radius:18px; padding:16px; box-shadow: rgba(20,27,77,0.06) 0 6px 18px; }
.dc-head { display:flex; justify-content:space-between; font-size:14px; font-weight:700; }
.dc-range { font-size:11px; font-weight:600; color:#6A6A70; }
.dc-hero { font-size:24px; font-weight:800; margin-top:8px; }
.dc-delta { font-size:13px; font-weight:600; color:#1FC29B; margin-left:6px; }
.chartline { margin-top:10px; height:46px; position:relative; }
.chartline svg { width:100%; height:100%; display:block; }
.foodhead { display:flex; justify-content:space-between; font-size:14px; font-weight:700; margin-bottom:8px; }
.foodhead .kcal { font-size:12px; font-weight:600; color:#6A6A70; }
.ratiobar { height:10px; border-radius:5px; overflow:hidden; display:flex; margin-bottom:10px; }
.ratiobar div:nth-child(1) { width:55%; background:#34C759; }
.ratiobar div:nth-child(2) { width:30%; background:#FFC531; }
.ratiobar div:nth-child(3) { width:15%; background:#FF5A52; }
.frow { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #E6E7EC; }
.fdot { width:10px; height:10px; border-radius:50%; flex:none; }
.fname { font-size:14px; font-weight:600; flex:1; }
.fpill { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.fkcal { font-size:13px; font-weight:700; color:#6A6A70; width:44px; text-align:right; }
.side { width:300px; height:640px; background:#F2F3F7; border-left:1px solid #E6E7EC; padding:24px 20px; display:flex; flex-direction:column; gap:16px; }
.streak { display:flex; align-items:center; gap:6px; background:#fff; border-radius:999px; padding:8px 14px; width:fit-content; font-size:13px; font-weight:700; }
.coachcard { background:#fff; border-radius:18px; padding:14px; }
.coach-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.coach-avatar { width:36px; height:36px; border-radius:50%; background:#7B61FF; }
.bubble-in { background:#F2F0FF; border-radius:18px; padding:10px 14px; font-size:13px; margin-bottom:8px; max-width:85%; }
.bubble-out { background:#2A5DF6; color:#fff; border-radius:18px; padding:10px 14px; font-size:13px; margin-left:auto; max-width:75%; }
.ctabtn { margin-top:auto; background:#2A5DF6; color:#fff; border-radius:999px; height:50px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
</style></head>
<body>
<div class="shell">
<div class="main">
<div class="greet">Good morning, Maya</div>
<div class="greetsub">Day 24 · You're building momentum</div>
<div class="lesson">
<div class="eyebrow">Today's Lesson · 4 Min</div>
<div class="lesson-title">Noom (iOS): Why Willpower Is a Myth</div>
<div class="progtrack"><div class="progfill"></div></div>
<div class="progline"><span class="proglabel">2 of 5</span><span class="whitepill">Continue lesson →</span></div>
</div>
<div class="cards2">
<div class="datacard">
<div class="dc-head"><span>Weight</span><span class="dc-range">Last 30 days</span></div>
<div style="display:flex; align-items:baseline;"><span class="dc-hero">164.2 lb</span><span class="dc-delta">▼ 6.8 lb</span></div>
<div class="chartline">
<svg viewBox="0 0 220 46" preserveAspectRatio="none">
<path d="M0,30 C40,26 60,10 100,16 C140,22 160,4 220,8" fill="none" stroke="#2A5DF6" stroke-width="2.5"/>
<path d="M0,20 L220,20" stroke="#1FC29B" stroke-width="1.5" stroke-dasharray="4 4"/>
</svg>
</div>
</div>
<div class="datacard">
<div class="dc-head"><span>Goal</span><span class="dc-range">Weekly</span></div>
<div class="dc-hero" style="font-size:20px;">72%</div>
<div style="font-size:12px; color:#6A6A70; margin-top:6px;">5 of 7 days logged</div>
</div>
</div>
<div class="foodhead"><span>Today's food</span><span class="kcal">1,240 / 1,500 kcal</span></div>
<div class="ratiobar"><div></div><div></div><div></div></div>
<div class="frow">
<span class="fdot" style="background:#34C759"></span>
<span class="fname">Grilled Chicken Salad</span>
<span class="fpill" style="color:#34C759; background:rgba(52,199,89,0.16)">Green</span>
<span class="fkcal">320</span>
</div>
<div class="frow">
<span class="fdot" style="background:#FFC531"></span>
<span class="fname">Whole Grain Toast</span>
<span class="fpill" style="color:#FFC531; background:rgba(255,197,49,0.16)">Yellow</span>
<span class="fkcal">180</span>
</div>
<div class="frow">
<span class="fdot" style="background:#FF5A52"></span>
<span class="fname">Chocolate Croissant</span>
<span class="fpill" style="color:#FF5A52; background:rgba(255,90,82,0.16)">Red</span>
<span class="fkcal">410</span>
</div>
</div>
<div class="side">
<div class="streak"><span>🔥</span>Day 24</div>
<div class="coachcard">
<div class="coach-head"><div class="coach-avatar"></div><span style="font-size:13px; font-weight:700;">Coach Sam</span></div>
<div class="bubble-in">You're on a great streak! How did today's lesson land?</div>
<div class="bubble-out">Honestly it clicked — willpower isn't the whole story.</div>
</div>
<div class="ctabtn">Log Food</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b6e1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b6e1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d9ec; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b6e1; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b6e1; color: #000000;
border: 1px solid #27c0e4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d9ec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #039cc0; color: #111111;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#111111; color:#ffffff; box-sizing:border-box;
font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.rail { width:200px; flex:0 0 200px; height:640px; padding:28px 20px; display:flex; flex-direction:column;
gap:6px; }
.rail-brand { font-size:20px; font-weight:600; margin-bottom:26px; letter-spacing:0.02em; }
.rail-item { font-size:14px; font-weight:400; color:#8a8a8a; padding:10px 8px; border-radius:6px; }
.rail-item.active { color:#ffffff; font-weight:500; background:rgba(255,255,255,0.06); }
.main { flex:1; height:640px; padding:32px 36px 0; position:relative; display:flex; flex-direction:column; }
.now-label { font-size:12px; font-weight:500; color:#00b6e1; letter-spacing:0.08em; margin-bottom:14px; }
.content-row { display:flex; gap:32px; flex:1; }
.art-col { width:300px; flex:0 0 300px; }
.cover { width:300px; height:300px; border-radius:10px;
background: linear-gradient(135deg, #1c4d63 0%, #00b6e1 45%, #0a2530 100%); position:relative; overflow:hidden; }
.cover::after { content:""; position:absolute; inset:0;
background: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.18), transparent 45%); }
.track-title { font-size:34px; font-weight:600; margin:22px 0 6px; line-height:1.15; }
.track-artist { font-size:15px; font-weight:400; color:#9a9a9a; }
.progress-wrap { margin-top:20px; }
.progress-track { width:300px; height:4px; border-radius:9999px; background:#2a2a2a; position:relative; }
.progress-fill { position:absolute; left:0; top:0; height:4px; width:62%; border-radius:9999px; background:#00b6e1; }
.progress-time { display:flex; justify-content:space-between; font-size:12px; color:#7a7a7a; margin-top:8px; }
.queue-col { flex:1; padding-top:4px; }
.queue-title { font-size:14px; font-weight:600; color:#cfcfcf; margin-bottom:16px; letter-spacing:0.02em; }
.queue-item { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #1e1e1e; }
.queue-thumb { width:40px; height:40px; border-radius:6px; flex-shrink:0; }
.queue-thumb.t1 { background:linear-gradient(135deg,#7b5cff,#2a1e5c); }
.queue-thumb.t2 { background:linear-gradient(135deg,#ff5e7e,#5c1e3a); }
.queue-thumb.t3 { background:linear-gradient(135deg,#3fd6a0,#0f4d3a); }
.queue-thumb.t4 { background:linear-gradient(135deg,#ffb84d,#5c3b0f); }
.queue-text .qt { font-size:13px; font-weight:500; color:#e6e6e6; }
.queue-text .qa { font-size:12px; font-weight:400; color:#7a7a7a; margin-top:2px; }
.queue-dur { margin-left:auto; font-size:12px; color:#7a7a7a; }
.now-playing { margin-top:20px; margin-bottom:26px; display:flex; align-items:center; gap:18px;
padding:16px 20px; background:#1a1a1a; border-radius:14px; }
.np-art { width:44px; height:44px; border-radius:8px; flex:0 0 44px;
background: linear-gradient(135deg, #1c4d63 0%, #00b6e1 45%, #0a2530 100%); }
.np-text .npt { font-size:14px; font-weight:600; color:#ffffff; }
.np-text .npa { font-size:12px; font-weight:400; color:#8a8a8a; margin-top:2px; }
.np-controls { margin-left:auto; display:flex; align-items:center; gap:16px; }
.ctl { font-size:14px; color:#b0b0b0; }
.play-pill { width:38px; height:38px; border-radius:9999px; background:#f2f2f2; color:#00b6e1;
display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; }
</style></head>
<body>
<div class="app">
<div class="rail">
<div class="rail-brand">KKBOX</div>
<div class="rail-item active">Home</div>
<div class="rail-item">Discover</div>
<div class="rail-item">Charts</div>
<div class="rail-item">Library</div>
<div class="rail-item">Playlists</div>
</div>
<div class="main">
<div class="now-label">NOW PLAYING</div>
<div class="content-row">
<div class="art-col">
<div class="cover"></div>
<div class="track-title">Midnight Frequency</div>
<div class="track-artist">Alex Rivers</div>
<div class="progress-wrap">
<div class="progress-track"><div class="progress-fill"></div></div>
<div class="progress-time"><span>2:14</span><span>3:36</span></div>
</div>
</div>
<div class="queue-col">
<div class="queue-title">UP NEXT</div>
<div class="queue-item">
<div class="queue-thumb t1"></div>
<div class="queue-text"><div class="qt">Paper Skies</div><div class="qa">Morgan Lane</div></div>
<div class="queue-dur">3:02</div>
</div>
<div class="queue-item">
<div class="queue-thumb t2"></div>
<div class="queue-text"><div class="qt">Glass Harbor</div><div class="qa">Sam Ito</div></div>
<div class="queue-dur">4:11</div>
</div>
<div class="queue-item">
<div class="queue-thumb t3"></div>
<div class="queue-text"><div class="qt">Low Tide</div><div class="qa">Casey Wen</div></div>
<div class="queue-dur">2:48</div>
</div>
<div class="queue-item">
<div class="queue-thumb t4"></div>
<div class="queue-text"><div class="qt">Neon Hallway</div><div class="qa">Taylor Feng</div></div>
<div class="queue-dur">3:29</div>
</div>
</div>
</div>
<div class="now-playing">
<div class="np-art"></div>
<div class="np-text"><div class="npt">Midnight Frequency</div><div class="npa">Alex Rivers</div></div>
<div class="np-controls">
<span class="ctl">⇤</span>
<div class="play-pill">▮▮</div>
<span class="ctl">⇥</span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a00ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a00ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #be87fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7a00ff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7a00ff; color: #f5f5f5;
border: 1px solid #8e27fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #be87fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6600d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #E5E7EB; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:16px; font-weight:700; }
.navlinks span { color:#000000; opacity:0.55; }
.navlinks span.active { color:#7A00FF; opacity:1; }
.btn-outline { background:transparent; color:#000000; border:1px solid #000000; border-radius:8px;
padding:9px 18px; font-size:13px; font-weight:700; white-space:nowrap; cursor:default; }
.head { padding:22px 40px 16px; display:flex; align-items:flex-end; justify-content:space-between; }
.badge { display:inline-block; background:#7A00FF; color:#ffffff; border-radius:999px; padding:4px 12px;
font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px; }
.head h1 { font-size:28px; font-weight:600; letter-spacing:-1.0px; margin:0; }
.head p { font-size:13px; color:#4B5563; margin:6px 0 0; }
.headmeta { text-align:right; font-size:12px; color:#4B5563; }
.grid { padding:0 40px; display:grid; grid-template-columns:180px repeat(3, 1fr); }
.row { display:contents; }
.cell { padding:14px 16px; border-top:1px solid #E5E7EB; font-size:13px; display:flex; align-items:center; }
.row:first-child .cell { border-top:none; }
.rowlabel { color:#4B5563; font-weight:400; }
.colhead { font-weight:700; font-size:14px; justify-content:center; text-align:center; flex-direction:column; gap:2px; padding-top:18px; }
.colhead small { font-weight:400; font-size:11px; color:#4B5563; }
.val { justify-content:center; text-align:center; font-weight:600; }
.featured { background:#7A00FF; color:#ffffff; border-radius:0; }
.featured.colhead small { color:#e8d4ff; }
.featured.val { color:#ffffff; }
.tag-rec { position:absolute; }
.foot { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #E5E7EB;
padding:16px 40px; display:flex; justify-content:space-between; align-items:center; }
.foot .price { font-size:12px; color:#4B5563; }
.foot .price b { color:#000000; font-size:16px; font-weight:700; }
.actions { display:flex; gap:10px; }
.btn-solid { background:#000000; color:#ffffff; border:none; border-radius:0px; padding:11px 22px;
font-size:13px; font-weight:700; }
</style></head>
<body style="position:relative;">
<nav>
<p class="brand">Dr.Cha (Autopedia)</p>
<div class="navlinks">
<span class="active">Dr.Cha</span>
<span>Quantum Mobility</span>
<span>Parts Network</span>
<span>AI Platform</span>
</div>
<button class="btn-outline">Download CI Guide</button>
</nav>
<div class="head">
<div>
<span class="badge">Spec Compare</span>
<h1>Dr.Cha (Autopedia) Mobility Asset Report</h1>
<p>Trim comparison generated from live diagnosis and ownership data</p>
</div>
<div class="headmeta">Registration 236-86-01261<br>Updated today</div>
</div>
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell colhead">Base<br><small>Entry trim</small></div>
<div class="cell colhead featured">Dr.Cha Pro<br><small>Recommended</small></div>
<div class="cell colhead">Premium<br><small>Full option</small></div>
</div>
<div class="row">
<div class="cell rowlabel">Engine</div>
<div class="cell val">2.0L I4</div>
<div class="cell val featured">2.0L Turbo</div>
<div class="cell val">3.0L V6</div>
</div>
<div class="row">
<div class="cell rowlabel">Max Power</div>
<div class="cell val">156 hp</div>
<div class="cell val featured">245 hp</div>
<div class="cell val">299 hp</div>
</div>
<div class="row">
<div class="cell rowlabel">0–100 km/h</div>
<div class="cell val">9.8s</div>
<div class="cell val featured">6.2s</div>
<div class="cell val">5.4s</div>
</div>
<div class="row">
<div class="cell rowlabel">Diagnosis Score</div>
<div class="cell val">B+</div>
<div class="cell val featured">A</div>
<div class="cell val">A+</div>
</div>
<div class="row">
<div class="cell rowlabel">Est. Price</div>
<div class="cell val">32,900,000</div>
<div class="cell val featured">38,400,000</div>
<div class="cell val">45,100,000</div>
</div>
</div>
<div class="foot">
<div class="price">Managed as a mobility asset · <b>Dr.Cha Pro selected</b></div>
<div class="actions">
<button class="btn-outline">Contact partner shop</button>
<button class="btn-solid">View full diagnosis</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ed64; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ed64; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #097436; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001e2b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ed64; color: #001e2b;
border: 1px solid #001e2b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ed64; color: #111111;
border: 1px solid #03ca57; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #097436; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00cc5b; color: #001e2b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Euclid Circular A", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:"MongoDB Value Serif", Georgia, "Times New Roman", serif; }
.mono { font-family:"Source Code Pro", "SFMono-Regular", Consolas, monospace; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e7eeec; background:#ffffff; }
.brand { font-size:18px; font-weight:700; color:#001e2b; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#001e2b; }
.navcta { background:#00ed64; color:#001e2b; border:1px solid #001e2b; border-radius:4px;
padding:11px 22px; font-size:14px; font-weight:500; letter-spacing:0.16px; }
.hero { flex:0 0 auto; background:#001e2b; display:flex; align-items:center; gap:28px; padding:26px 40px; }
.herotext { flex:1; }
.herotext .eyebrow { color:#00684a; background:#e9f9ef; display:inline-block; padding:3px 10px; border-radius:4px;
font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px; }
.herotext h1 { color:#ffffff; font-size:34px; font-weight:400; line-height:1.2; margin:0 0 10px; }
.herotext p { color:#c1c7c5; font-size:13.5px; line-height:1.5; margin:0 0 14px; max-width:340px; }
.herobtn { background:#00ed64; color:#001e2b; border:1px solid #001e2b; border-radius:4px;
padding:11px 22px; font-size:14px; font-weight:500; letter-spacing:0.16px; }
.codepanel { flex:1; background:#112733; border-radius:8px; padding:16px 18px; color:#d7e3e0; font-size:12px;
line-height:1.55; }
.codepanel .cmt { color:#6f8a86; }
.codepanel .key { color:#00ed64; }
.codepanel .str { color:#7fd3ff; }
.codepanel .num { color:#ffb86b; }
.panels { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:20px 40px; align-content:center; }
.panel { background:#ffffff; border:1px solid #e7eeec; border-radius:28px; padding:20px 22px;
box-shadow:rgba(0,0,0,0.1) 0px 2px 4px 0px; }
.panel h3 { font-size:16px; font-weight:700; color:#000000; margin:0 0 6px; }
.panel p { font-size:12.5px; color:#3d4f58; margin:0; line-height:1.45; }
footer { flex:0 0 44px; background:#f9fbfa; border-top:1px solid #e7eeec; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; font-size:12px; color:#3d4f58; }
.pill { background:#f9fbfa; border:1px solid #889397; border-radius:6px; padding:3px 10px; font-size:12px; color:#001e2b; }
</style></head>
<body>
<nav>
<p class="brand">MongoDB</p>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Docs</span><span>Pricing</span></div>
<button class="navcta">Get Started</button>
</nav>
<section class="hero">
<div class="herotext">
<span class="eyebrow">Atlas</span>
<h1 class="serif">Build faster on a<br>flexible document model</h1>
<p>The developer data platform for modern applications — one document model, any workload, any scale.</p>
<button class="herobtn">Get Started</button>
</div>
<div class="codepanel mono">
<div><span class="cmt">// insert a document</span></div>
<div>db.<span class="key">orders</span>.insertOne({</div>
<div> customer: <span class="str">"Alex Kim"</span>,</div>
<div> items: [<span class="str">"sensor-01"</span>, <span class="str">"hub-04"</span>],</div>
<div> total: <span class="num">248.90</span>,</div>
<div> status: <span class="str">"shipped"</span></div>
<div>})</div>
<div style="margin-top:8px;"><span class="cmt">// { acknowledged: true, insertedId: ObjectId(...) }</span></div>
</div>
</section>
<section class="panels">
<div class="panel"><h3>Document Model</h3><p>Store data the way your application already thinks about it — no rigid schema required.</p></div>
<div class="panel"><h3>Elastic Scale</h3><p>Scale horizontally across regions and clouds without rearchitecting your application.</p></div>
<div class="panel"><h3>Built-in Search</h3><p>Run full-text and vector search directly alongside your operational data.</p></div>
</section>
<footer>
<span class="pill">v7.2 · Community Edition</span>
<span>© MongoDB</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f2f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f2f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #757678; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1877f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0f2f5; color: #1877f2;
border: 1px solid #1877f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f0f2f5; color: #111111;
border: 1px solid #ccced1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757678; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cddef5; color: #1877f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#F0F2F5; color:#050505; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:0; }
.topnav { height:56px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid #E4E6EB; }
.flogo { width:32px; height:32px; border-radius:8px; background:#1877F2; color:#fff; font-weight:900; font-size:20px; display:flex; align-items:center; justify-content:center; }
.iconrow { display:flex; gap:10px; }
.icirc { width:36px; height:36px; border-radius:50%; background:#E4E6EB; display:flex; align-items:center; justify-content:center; }
.stories { display:flex; gap:8px; padding:8px; overflow:hidden; }
.story { width:96px; height:150px; border-radius:12px; position:relative; flex-shrink:0; }
.story .ring { position:absolute; top:8px; left:8px; width:28px; height:28px; border-radius:50%; border:3px solid; border-image:linear-gradient(45deg,#C13584,#E1306C,#FD1D1D,#F77737) 1; background:#333; }
.story .nm { position:absolute; bottom:6px; left:6px; color:#fff; font-size:11px; font-weight:600; }
.card { background:#fff; border-radius:8px; margin:8px; padding:12px; }
.pheader { display:flex; align-items:center; gap:10px; }
.avatar { width:40px; height:40px; border-radius:50%; }
.pname { font-size:15px; font-weight:600; }
.ptime { font-size:13px; color:#65676B; }
.pbody { font-size:15px; margin-top:10px; line-height:1.35; }
.reactsum { display:flex; justify-content:space-between; font-size:13px; color:#65676B; margin-top:10px; }
.actionrow { display:flex; justify-content:space-around; border-top:1px solid #E4E6EB; margin-top:8px; padding-top:6px; }
.abtn { font-size:15px; font-weight:600; color:#65676B; }
.abtn.on { color:#1877F2; }
</style>
</head>
<body>
<div class="stage">
<div class="topnav"><div class="flogo">f</div><div style="flex:1;margin-left:10px;font-weight:700;font-size:20px;color:#1877F2">Facebook (iOS)</div><div class="iconrow"><div class="icirc">🔍</div><div class="icirc">💬</div></div></div>
<div class="stories">
<div class="story" style="background:linear-gradient(160deg,#333,#555)"><div class="ring"></div><div class="nm">Create Story</div></div>
<div class="story" style="background:linear-gradient(160deg,#5a3a2a,#8a6a4a)"><div class="ring"></div><div class="nm">Priya</div></div>
<div class="story" style="background:linear-gradient(160deg,#2a4a5a,#4a7a8a)"><div class="ring"></div><div class="nm">Devon</div></div>
<div class="story" style="background:linear-gradient(160deg,#4a2a5a,#7a4a8a)"><div class="ring"></div><div class="nm">Kai</div></div>
</div>
<div class="card">
<div class="pheader"><div class="avatar" style="background:linear-gradient(135deg,#f0a878,#c85a3a)"></div><div><div class="pname">Sarah Johnson</div><div class="ptime">2 hrs · 🌐 Public</div></div></div>
<div class="pbody">Finally finished the community garden fence this weekend! Took way longer than expected but so worth it 🌻</div>
<div class="reactsum"><span>👍❤️😂 You, Priya, and 45 others</span><span>12 comments · 3 shares</span></div>
<div class="actionrow">
<div class="abtn on">👍 Like</div>
<div class="abtn">💬 Comment</div>
<div class="abtn">↗ Share</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0070f3; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #000000;
border: 1px solid #0070f3; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a2e;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #059669; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; border-bottom:1px solid #e5e7eb; background:#ffffff; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; color:#6b7280; }
.navlinks span.active { color:#0070f3; padding-bottom:20px; border-bottom:2px solid #0070f3; }
.btn-primary { background:#0070f3; color:#ffffff; border:none; border-radius:8px;
padding:10px 20px; font-weight:600; font-size:13px; white-space:nowrap; }
.hero { flex:0 0 224px; background:#f9fafb; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; gap:28px; }
.hero-copy { max-width:410px; }
.hero h1 { font-size:32px; font-weight:700; letter-spacing:-0.5px; line-height:1.15; margin:0 0 10px; }
.hero p { font-size:14px; color:#6b7280; line-height:1.55; margin:0 0 16px; }
.hero-actions { display:flex; align-items:center; gap:16px; }
.btn-pill { background:#0070f3; color:#ffffff; border:none; border-radius:9999px;
padding:11px 22px; font-weight:600; font-size:14px; white-space:nowrap; }
.btn-text { background:transparent; color:#0070f3; border:none; font-weight:500; font-size:14px; }
.dash-card { width:300px; background:#ffffff; border:1px solid #f3f4f6; border-radius:12px; padding:18px;
box-shadow:0 4px 12px rgba(0,0,0,0.08); flex-shrink:0; }
.dash-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.dash-head span { font-size:12px; font-weight:600; color:#1a1a2e; }
.badge-green { background:#059669; color:#ffffff; font-size:10px; font-weight:700; letter-spacing:0.3px;
text-transform:uppercase; border-radius:9999px; padding:2px 8px; }
.prow { display:flex; flex-direction:column; gap:9px; }
.pitem { display:flex; flex-direction:column; gap:3px; }
.plabel { display:flex; justify-content:space-between; font-size:11px; color:#6b7280; }
.ptrack { height:8px; border-radius:9999px; background:#f3f4f6; overflow:hidden; }
.pfill { height:100%; border-radius:9999px; background:#0070f3; }
.cards { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:16px 36px; overflow:hidden; }
.pcard { border:1px solid #f3f4f6; border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px;
background:#ffffff; position:relative; }
.pcard.featured { border:2px solid #0070f3; box-shadow:0 8px 24px rgba(0,112,243,0.12); }
.pcard-badge { position:absolute; top:-9px; left:14px; }
.pcard .swatch { height:56px; border-radius:8px; background:linear-gradient(135deg,#e7f0ff,#cfe3ff); position:relative; }
.pcard .swatch::after { content:''; position:absolute; left:50%; top:50%; width:28px; height:28px; border-radius:9999px;
background:#0070f3; transform:translate(-50%,-50%); opacity:0.85; }
.pcard h3 { font-size:14px; font-weight:600; margin:0; }
.pcard .desc { font-size:12px; color:#6b7280; line-height:1.4; margin:0; }
.pcard .price { font-size:18px; font-weight:700; margin-top:auto; }
.pcard .price span { font-size:11px; font-weight:400; color:#9ca3af; }
.badge-outline { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase;
color:#6b7280; border:1px solid #e5e7eb; border-radius:9999px; padding:2px 8px; align-self:flex-start; }
footer { flex:0 0 54px; background:#000000; color:#9ca3af; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; font-size:11px; }
footer .link { color:#9ca3af; }
</style></head>
<body>
<nav>
<p class="brand">Athletic Greens Ag1</p>
<div class="navlinks">
<span class="active">Product</span><span>Science</span><span>Reviews</span><span>Subscribe</span>
</div>
<button class="btn-primary">Shop Now</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Foundational nutrition. Redefined.</h1>
<p>One scoop. 75 vitamins, minerals, and whole-food sourced ingredients — formulated with ongoing clinical research.</p>
<div class="hero-actions">
<button class="btn-pill">Subscribe & Save</button>
<button class="btn-text">See the science →</button>
</div>
</div>
<div class="dash-card">
<div class="dash-head">
<span>Daily Coverage</span>
<span class="badge-green">Verified</span>
</div>
<div class="prow">
<div class="pitem">
<div class="plabel"><span>Vitamins</span><span>92%</span></div>
<div class="ptrack"><div class="pfill" style="width:92%"></div></div>
</div>
<div class="pitem">
<div class="plabel"><span>Minerals</span><span>88%</span></div>
<div class="ptrack"><div class="pfill" style="width:88%"></div></div>
</div>
<div class="pitem">
<div class="plabel"><span>Probiotics & Enzymes</span><span>95%</span></div>
<div class="ptrack"><div class="pfill" style="width:95%"></div></div>
</div>
</div>
</div>
</section>
<section class="cards">
<div class="pcard featured">
<span class="pcard-badge"><span class="badge-green">Bestseller</span></span>
<div class="swatch"></div>
<h3>AG1 Subscription</h3>
<p class="desc">30-day supply, delivered monthly. Cancel anytime.</p>
<div class="price">$79 <span>/ month</span></div>
</div>
<div class="pcard">
<div class="swatch"></div>
<h3>AG1 Starter Kit</h3>
<p class="desc">Includes shaker bottle and travel canister.</p>
<div class="price">$99 <span>one-time</span></div>
</div>
<div class="pcard">
<span class="badge-outline">New</span>
<div class="swatch"></div>
<h3>AG1 Travel Packs</h3>
<p class="desc">30 single-serve sachets for on-the-go.</p>
<div class="price">$45 <span>one-time</span></div>
</div>
</section>
<footer>
<span>© Athletic Greens Ag1</span>
<span><span class="link">Product</span> · <span class="link">Support</span> · <span class="link">Company</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Ssw Fontello', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; border-bottom:1px solid #dedede; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.navlinks span:first-child { border-bottom:2px solid #121212; padding-bottom:20px; }
.navlinks span:not(:first-child) { color:#666666; }
.search { width:150px; height:34px; border:1px solid #dedede; border-radius:8px; font-size:12px; color:#999999;
display:flex; align-items:center; padding-left:14px; }
.collection-header { padding:22px 40px; border-bottom:1px solid #dedede; }
.collection-header h1 { font-size:28px; font-weight:600; margin:0 0 6px; }
.crumb { font-size:13px; color:#666666; }
.crumb b { color:#121212; font-weight:400; }
.section { padding:20px 40px 0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { border:1px solid #e8e8e8; border-radius:8px; overflow:hidden; }
.thumb { aspect-ratio:1/1; position:relative; }
.t1 { background:linear-gradient(150deg,#cc3333,#8a1717); }
.t2 { background:linear-gradient(150deg,#2a6f97,#0d3d57); }
.t3 { background:linear-gradient(150deg,#dedede,#a0a0a0); }
.t4 { background:linear-gradient(150deg,#e0b13e,#a67a1a); }
.badge { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
padding:2px 8px; border-radius:4px; color:#fff; }
.badge.new { background:#121212; }
.badge.sale { background:#cc0000; }
.cbody { padding:8px 14px 14px; }
.card h3 { font-size:16px; font-weight:600; margin:0 0 2px; }
.price { font-size:16px; font-weight:400; margin:0; }
.cta-row { display:flex; gap:10px; padding:20px 40px 0; }
.btn-primary { background:#121212; color:#fff; border:none; border-radius:8px; padding:12px 24px;
font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; height:44px; }
.btn-secondary { background:#fff; color:#121212; border:1px solid #dedede; border-radius:8px; padding:11px 23px;
font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; height:44px; }
footer { background:#f5f5f5; color:#666666; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; border-top:1px solid #dedede; }
footer a { color:#666666; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Bezier Games</p>
<div class="navlinks"><span>Board Games</span><span>Card Games</span><span>Expansions</span><span>Accessories</span></div>
<div class="search">Search…</div>
</nav>
<div class="collection-header">
<h1>Worker Placement</h1>
<div class="crumb">Home / Board Games / <b>Worker Placement</b></div>
</div>
<section class="section">
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<div class="cbody"><h3>Cutthroat Caverns</h3><p class="price">$44.95</p></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<div class="cbody"><h3>Suburbia</h3><p class="price">$54.95</p></div>
</div>
<div class="card">
<div class="thumb t3"><span class="badge sale">Sale</span></div>
<div class="cbody"><h3>Belfort</h3><p class="price">$39.95</p></div>
</div>
<div class="card">
<div class="thumb t4"></div>
<div class="cbody"><h3>Belle of the Ball</h3><p class="price">$29.95</p></div>
</div>
</div>
<div class="cta-row"><button class="btn-primary">Add to Cart</button><button class="btn-secondary">View Details</button></div>
</section>
<footer>
<span>© Bezier Games</span>
<div><a href="#">Support</a><a href="#">Rulebooks</a><a href="#">Retailers</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5452; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5452; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faadac; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5452; color: #f5f5f5;
border: 1px solid #f5f5f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5452; color: #f5f5f5;
border: 1px solid #fd6e6c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faadac; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fd6e6c; color: #f5f5f5;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:Pretendard, -apple-system, sans-serif; }
* { box-sizing:border-box; }
.accbar { background:#31313b; color:#fff; height:22px; display:flex; align-items:center; padding:0 26px; font-size:10px; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
.brand { font-size:20px; font-weight:800; color:#ff5452; }
.search { flex:1; max-width:340px; margin:0 20px; border:1px solid #cfcfcf; height:34px; display:flex; align-items:center; padding:0 12px; font-size:12px; color:#777; }
.navlinks { display:flex; gap:14px; font-size:12px; font-weight:500; }
.pillrow { display:flex; gap:8px; padding:12px 26px 0; }
.pill { border-radius:24px; padding:0 16px; height:40px; display:flex; align-items:center; font-size:14px; color:#777; }
.pill.on { background:#222222; color:#fff; font-weight:700; }
.subtabs { display:flex; padding:8px 26px 0; border-bottom:1px solid #e5e5e5; }
.sub { height:36px; display:flex; align-items:center; padding:0 12px; font-size:13px; color:#666; }
.sub.on { background:#222; color:#fff; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:16px 26px 0; }
.pcard { border:1px solid #e5e5e5; }
.pimg { height:96px; background:linear-gradient(135deg,#f0f0f0,#dcdcdc); position:relative; }
.dbadge { position:absolute; top:6px; left:6px; background:#ff5452; color:#fff; font-size:10px; font-weight:500; padding:2px 6px; }
.pinfo { padding:10px; }
.pinfo .lbl { background:#f5f5f5; color:#222; font-size:9.5px; padding:2px 5px; display:inline-block; margin-bottom:5px; }
.pinfo h4 { font-size:12px; margin:0 0 4px; font-weight:400; }
.pinfo .price { font-size:15px; font-weight:600; }
footer { position:absolute; bottom:0; width:960px; padding:12px 26px; display:flex; justify-content:space-between;
font-size:11px; color:#777; border-top:1px solid #e5e5e5; }
</style></head>
<body>
<div class="accbar">SSG.COM Quick Access Services</div>
<nav>
<p class="brand">SSG.COM</p>
<div class="search">Enter a search term</div>
<div class="navlinks"><span>Log In</span><span>Sign Up</span><span>Customer Center</span></div>
</nav>
<div class="pillrow">
<span class="pill on">Today's Picks</span><span class="pill">Special Deals</span><span class="pill">Closing Sale</span><span class="pill">Dept. Store Sale</span>
</div>
<div class="subtabs">
<span class="sub on">Fashion</span><span class="sub">Beauty</span><span class="sub">Luxury</span><span class="sub">Appliances</span><span class="sub">Food</span>
</div>
<div class="grid">
<div class="pcard"><div class="pimg"><span class="dbadge">30%</span></div><div class="pinfo"><span class="lbl">Free Shipping</span><h4>Spring New Knit Cardigan</h4><div class="price">$39.00</div></div></div>
<div class="pcard"><div class="pimg"><span class="dbadge">15%</span></div><div class="pinfo"><span class="lbl">Ships Today</span><h4>Minimal Leather Tote Bag</h4><div class="price">$128.00</div></div></div>
<div class="pcard"><div class="pimg"></div><div class="pinfo"><span class="lbl">Free Shipping</span><h4>Moisture Cream Set</h4><div class="price">$45.00</div></div></div>
<div class="pcard"><div class="pimg"><span class="dbadge">20%</span></div><div class="pinfo"><span class="lbl">Ships Today</span><h4>Wireless Earbuds</h4><div class="price">$89.00</div></div></div>
</div>
<footer>
<span>The joy of shopping with confidence, SSG.COM</span>
<span>Where to next? · Customer Center · Terms of Service</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0017c1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0017c1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8791de; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00118f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0017c1; color: #ffffff;
border: 1px solid #00118f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0017c1; color: #f5f5f5;
border: 1px solid #273bc9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8791de; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0016b9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Noto Sans JP","Noto Sans",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif; }
* { box-sizing:border-box; }
.topbar { background:#00118f; color:#fff; font-size:11px; padding:5px 32px; display:flex; justify-content:space-between; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #949494; }
.brand { font-size:17px; font-weight:700; color:#1a1a1a; }
.brand small { display:block; font-size:10px; font-weight:400; color:#666; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#00118f; font-weight:500; }
.search { display:flex; }
.search input { border:1px solid #949494; border-radius:8px 0 0 8px; padding:8px 12px; font-size:13px; width:200px; color:#333; }
.search button { background:#0017c1; color:#fff; border:none; border-radius:0 8px 8px 0; padding:8px 14px; font-size:13px; font-weight:700; }
.hero { padding:28px 32px; background:#f2f2f2; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.hero h1 { font-size:28px; font-weight:700; color:#1a1a1a; margin:0 0 8px; line-height:1.4; }
.hero p { font-size:15px; color:#333; margin:0; line-height:1.7; max-width:480px; }
.hero-visual { width:180px; height:110px; background:#e6e6e6; border-radius:16px; border:1px solid #949494;
display:flex; align-items:center; justify-content:center; font-size:11px; color:#767676; flex-shrink:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 32px; }
.card { background:#ffffff; border:1px solid #949494; border-radius:16px; padding:20px; }
.card .icon { width:40px; height:40px; border-radius:8px; background:#e8f1fe; margin-bottom:12px;
display:flex; align-items:center; justify-content:center; color:#0017c1; font-weight:700; font-size:15px; }
.card h3 { font-size:15px; font-weight:700; color:#00118f; margin:0 0 6px; }
.card p { font-size:12.5px; color:#333; margin:0; line-height:1.7; }
.card a { display:inline-block; margin-top:10px; font-size:12.5px; color:#00118f; font-weight:500; }
.banner { margin:0 32px 20px; background:#d9e6ff; border-radius:8px; padding:12px 18px; display:flex;
align-items:center; justify-content:space-between; }
.banner span { font-size:13px; color:#00118f; font-weight:500; }
.banner button { background:#0017c1; color:#fff; border:none; border-radius:8px; padding:8px 18px;
font-size:13px; font-weight:700; }
footer { border-top:1px solid #949494; padding:12px 32px; display:flex; justify-content:space-between;
font-size:11.5px; color:#767676; }
</style></head>
<body>
<div class="topbar"><span>Digital Agency Design System (DADS) — Government Digital Services</span><span>Language: English</span></div>
<nav>
<div class="brand">Digital Agency Design System (DADS)<small>Digital Agency Design System</small></div>
<div class="navlinks"><span>Guidelines</span><span>Components</span><span>Accessibility</span></div>
<div class="search"><input placeholder="Search services" /><button>Search</button></div>
</nav>
<section class="hero">
<div>
<h1>Public services, designed for everyone.</h1>
<p>A shared design language for government digital services — accessible, consistent, and open under CC BY 4.0.</p>
</div>
<div class="hero-visual">Service preview</div>
</section>
<section class="cards">
<div class="card"><div class="icon">A</div><h3>Accessibility Guide</h3><p>WCAG-aligned patterns for forms, contrast, and touch targets across every ministry.</p><a>Read guideline →</a></div>
<div class="card"><div class="icon">B</div><h3>Component Library</h3><p>HTML and React snippets for buttons, tables, and navigation, ready to implement.</p><a>Browse components →</a></div>
<div class="card"><div class="icon">C</div><h3>Figma Resources</h3><p>Official Figma kits shared openly for design teams across the public sector.</p><a>Open Figma →</a></div>
</section>
<div class="banner"><span>This service is available in 12 languages.</span><button>Change language</button></div>
<footer>
<span>© Digital Agency Design System (DADS)</span>
<span>Guidelines · Accessibility · Contact · Privacy</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 1.5px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 3.0px; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 2.5px; background: transparent; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 9999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: transparent; color: #ffffff;
border: 1px solid #404040; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 2px; background: transparent; color: #999999;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; position:relative; z-index:3; }
nav span { font-size:12px; letter-spacing:2px; font-family:ui-monospace, "SF Mono", "Cascadia Mono", monospace; color:#cccccc; }
.wordmark { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:14px;
letter-spacing:6px; font-weight:400; }
.hero { position:relative; height:420px; display:flex; align-items:center; justify-content:center; text-align:center;
background:
radial-gradient(70% 60% at 50% 35%, rgba(255,255,255,0.05), transparent 65%),
linear-gradient(100deg,#050505 0%,#151515 45%,#050505 100%);
overflow:hidden; }
.hero::before { content:''; position:absolute; left:8%; right:8%; bottom:6%; height:60%;
background:linear-gradient(180deg, transparent, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.07) 100%);
border-radius:50% / 18%; }
.heroinner { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:16px; }
.heroinner h1 { font-size:52px; font-weight:400; letter-spacing:4px; text-transform:uppercase; margin:0; line-height:1.15; }
.heroinner .cap { font-family:ui-monospace, "SF Mono", "Cascadia Mono", monospace; font-size:11px; letter-spacing:2px;
text-transform:uppercase; color:#999999; }
.heroinner .btn { border:1px solid #fff; border-radius:999px; padding:13px 30px; font-size:13px;
font-family:ui-monospace, "SF Mono", "Cascadia Mono", monospace; letter-spacing:2px; text-transform:uppercase; margin-top:6px; }
.career { position:absolute; right:36px; top:96px; width:210px; background:#141414; padding:16px; z-index:3; }
.career .thumb { height:60px; background:linear-gradient(120deg,#2a2a2a,#0d0d0d); margin-bottom:10px; }
.career p { font-family:Garamond,"Times New Roman",serif; font-size:13px; line-height:1.4; margin:0 0 8px; color:#e6e6e6; }
.career .lnk { font-family:ui-monospace,"SF Mono",monospace; font-size:10px; letter-spacing:2px; color:#999; text-transform:uppercase; }
footer { height:164px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
footer p { font-family:Garamond,"Times New Roman",serif; font-size:15px; color:#cccccc; max-width:560px; text-align:center; line-height:1.5; margin:0; }
footer .fw { font-size:12px; letter-spacing:6px; margin-top:4px; color:#666; }
</style></head>
<body>
<nav><span>MENU</span><div class="wordmark">Bugatti</div><span>STORE</span></nav>
<div class="hero">
<div class="heroinner">
<div class="cap">HONORING VISIONARY ENGINEERING</div>
<h1>TOURBILLON</h1>
<div class="btn">DISCOVER</div>
</div>
<div class="career">
<div class="thumb"></div>
<p>Are you ready for a new adventure?</p>
<div class="lnk">EXPLORE OUR OPPORTUNITIES</div>
</div>
</div>
<footer>
<p>Form follows perfection. Every line, every surface, considered — nothing added, nothing spared.</p>
<div class="fw">Bugatti</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b9ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b9ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87dafa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #15181e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b9ff; color: #15181e;
border: 1px solid #15181e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b9ff; color: #000000;
border: 1px solid #27c3fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87dafa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #039fdb; color: #15181e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Imweb</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#15181e; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #dbdee3; background:#ffffff; }
.brand { font-size:18px; font-weight:700; color:#15181e; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#15181e; opacity:0.75; }
.nav-right { display:flex; align-items:center; gap:14px; }
.icon-pill { width:28px; height:28px; border-radius:9999px; background:rgba(113,118,128,0.05);
display:flex; align-items:center; justify-content:center; box-shadow:none; }
.icon-pill span { width:9px; height:9px; border:1.4px solid #bcc0c6; border-radius:50%; display:block; }
.btn-ink { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,sans-serif;
background:#15181e; color:#ffffff; border:none; border-radius:8px; height:36px; padding:0 16px;
font-size:13px; font-weight:600; box-shadow:none; white-space:nowrap; }
.hero { padding:26px 40px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.eyebrow { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#ff50da;
margin:0 0 8px; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.0; letter-spacing:normal; color:#15181e; margin:0; }
.dots { display:flex; gap:6px; margin-top:12px; }
.dots span { width:6px; height:6px; border-radius:50%; background:#bcc0c6; }
.dots span.on { background:#15181e; }
.hero p { font-size:14px; line-height:1.5; color:#4b515b; margin:12px 0 0; max-width:420px; }
.hero-cta { display:flex; gap:12px; margin-top:16px; }
.btn-ink-lg { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,sans-serif;
background:#15181e; color:#ffffff; border:none; border-radius:8px; height:40px; padding:0 20px;
font-size:14px; font-weight:600; box-shadow:none; }
.btn-outline { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,sans-serif;
background:#ffffff; color:#4b515b; border:1px solid #dbdee3; border-radius:8px; height:40px; padding:0 20px;
font-size:14px; font-weight:600; box-shadow:none; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 40px 18px; }
.feat-card { background:#ffffff; border-radius:12px; padding:14px; box-shadow:none; }
.feat-swatch { width:32px; height:32px; border-radius:8px; background:#f8f9fb; position:relative; }
.feat-swatch::after { content:''; position:absolute; width:14px; height:14px; border-radius:4px;
top:9px; left:9px; }
.feat-swatch.a::after { background:#00b9ff; }
.feat-swatch.b::after { background:#15181e; }
.feat-swatch.c::after { background:#2dc5ff; }
.feat-card h3 { font-size:16px; font-weight:700; color:#15181e; margin:10px 0 0; }
.feat-card p { font-size:12px; line-height:1.4; color:#717680; margin:6px 0 0; }
.stats { background:#00b9ff; padding:16px 40px; display:flex; align-items:center; justify-content:space-between; }
.stats-left h2 { font-size:20px; font-weight:700; line-height:1.25; color:#ffffff; margin:0; max-width:280px; }
.stats-left span { display:block; font-size:11px; color:#81dcff; margin-top:6px; }
.stat-bars { display:flex; align-items:flex-end; gap:8px; height:64px; position:relative; }
.stat-bars .peak-label { position:absolute; top:-16px; right:0; font-size:10px; font-weight:600; color:#ffffff; }
.sbar { width:18px; border-radius:4px 4px 0 0; background:rgba(255,255,255,0.55); }
.sbar.peak { background:#ffffff; }
footer { height:32px; border-top:1px solid #dbdee3; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
footer span { font-size:11px; color:#9fa3ab; }
</style></head>
<body>
<nav>
<p class="brand">Imweb</p>
<div class="navlinks">
<span>Features</span><span>Templates</span><span>Pricing</span><span>Experts</span><span>Story</span>
</div>
<div class="nav-right">
<div class="icon-pill"><span></span></div>
<button class="btn-ink">Start Free</button>
</div>
</nav>
<section class="hero">
<p class="eyebrow">Built for Your Brand</p>
<h1>Make Sales.</h1>
<div class="dots"><span class="on"></span><span></span><span></span></div>
<p>Design, launch, and grow your brand — no developer needed.</p>
<div class="hero-cta">
<button class="btn-ink-lg">Start Free Today</button>
<button class="btn-outline">See Templates</button>
</div>
</section>
<section class="features">
<div class="feat-card">
<div class="feat-swatch a"></div>
<h3>Design is easy</h3>
<p>Pick a template built by real brands and make it yours in minutes.</p>
</div>
<div class="feat-card">
<div class="feat-swatch b"></div>
<h3>Operations are easy</h3>
<p>Payments, bookings, and inventory run in one connected dashboard.</p>
</div>
<div class="feat-card">
<div class="feat-swatch c"></div>
<h3>Marketing is easy</h3>
<p>Built-in tools help your first customers find you, faster.</p>
</div>
</section>
<section class="stats">
<div class="stats-left">
<h2>The fastest-growing brand builder</h2>
<span>Cumulative sites created, 2021 → 2024</span>
</div>
<div class="stat-bars">
<span class="peak-label">800K+</span>
<div class="sbar" style="height:16px"></div>
<div class="sbar" style="height:26px"></div>
<div class="sbar" style="height:38px"></div>
<div class="sbar peak" style="height:60px"></div>
</div>
</section>
<footer>
<span>© Imweb</span>
<span>Privacy · Terms · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e5fe54; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e5fe54; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #707c2f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d4ed3f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e5fe54; color: #000000;
border: 1px solid #d4ed3f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e5fe54; color: #111111;
border: 1px solid #c3d849; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707c2f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e2fb51; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f5; color:#1c1b17; box-sizing:border-box; font-family:"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:18px; font-size:14px; }
.btn-lime { background:#e5fe54; color:#1c1b17; border:none; border-radius:8px; padding:10px 20px; font-size:14px; font-weight:500; }
.hero { padding:26px 30px 16px; }
.hero h1 { font-family:Georgia,serif; font-size:44px; font-weight:400; margin:0 0 14px; line-height:1.1; letter-spacing:-0.5px; max-width:600px; }
.savings { margin:0 30px 18px; background:#f4fcc9; border:1px solid #e5fe54; border-radius:12px; padding:24px; display:flex; align-items:center; justify-content:space-between; }
.overline { font-size:11px; font-weight:600; letter-spacing:0.08em; color:#56554f; text-transform:uppercase; margin:0 0 4px; }
.amount { font-size:44px; font-weight:500; margin:0; }
.row { display:flex; gap:14px; padding:0 30px 20px; }
.card { flex:1; background:#fff; border:1px solid #e3e1da; border-radius:12px; padding:18px; }
.card h3 { font-size:16px; margin:0 0 6px; }
.card p { font-size:12.5px; color:#56554f; margin:0; }
.dark { background:#1c1b17; color:#fff; }
.dark p { color:rgba(255,255,255,0.7); }
.dark a { color:#e5fe54; font-size:12.5px; }
</style></head>
<body>
<nav>
<div class="brand">Ramp</div>
<div class="navlinks"><span>Product</span><span>Customers</span><span>Pricing</span></div>
<button class="btn-lime">Get a demo</button>
</nav>
<div class="hero">
<h1>Save more. Close faster.</h1>
</div>
<div class="savings">
<div><p class="overline">Total saved</p><h2 class="amount">$1.2M</h2></div>
<button class="btn-lime">Get started</button>
</div>
<div class="row">
<div class="card"><h3>Corporate cards</h3><p>Issue cards instantly with built-in limits and controls.</p></div>
<div class="card dark"><h3>Close books 75% faster</h3><p>Automated receipt matching and reconciliation.</p><a>Learn more →</a></div>
<div class="card"><h3>Ramp Intelligence</h3><p>AI finds savings automatically across every transaction.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc7676; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc7676; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b3e3e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202020; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc7676; color: #202020;
border: 1px solid #202020; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc7676; color: #111111;
border: 1px solid #d66666; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b3e3e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d96868; color: #202020;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202020; box-sizing:border-box;
font-family:"Basier Square", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; }
.navr { display:flex; gap:10px; }
.btn { padding:8px 20px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; border-radius:9999px; }
.btn.dark { background:#202020; color:#fcfcfc; }
.btn.outline { background:#ffffff; color:#202020; border:1px solid #202020; }
.hero { position:relative; height:200px; overflow:hidden; display:flex; align-items:center; justify-content:center;
background:linear-gradient(115deg,#ea2804 0%, #ff3d6e 45%, #ff8fd6 100%); }
.hero h1 { position:relative; z-index:1; color:#fff; font-size:56px; font-weight:700; letter-spacing:-1.5px; margin:0; text-align:center; }
.searchbar { margin:20px 32px 0; display:flex; justify-content:center; }
.glass { background:transparent; border:1px solid #bbbbbb; border-radius:9999px; padding:8px 28px 8px 20px; font-size:14px; color:#202020; width:400px; text-align:left; }
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:22px 32px; }
.model { border:1px solid #202020; border-radius:24px; overflow:hidden; }
.model.featured { border-color:#ea2804; }
.thumb { height:76px; }
.m1 { background:linear-gradient(135deg,#ea2804,#4b0f00); }
.m2 { background:linear-gradient(135deg,#202020,#666); }
.m3 { background:linear-gradient(135deg,#ff8fd6,#a83a7a); }
.m4 { background:linear-gradient(135deg,#24292e,#000); }
.model .info { padding:10px; }
.model .info h4 { font-size:13px; font-weight:600; margin:0 0 4px; }
.model .info p { font-size:11px; color:#646464; margin:0; }
.status { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:#fff; background:#2b9a66; border-radius:9999px; padding:2px 8px; margin-top:6px; }
.manifesto { text-align:center; padding:14px 32px 22px; }
.manifesto h2 { font-size:26px; font-weight:700; margin:0; }
footer { border-top:1px solid #202020; padding:12px 32px; display:flex; justify-content:space-between; font-size:12px; color:#8d8d8d; }
</style></head>
<body>
<nav>
<span class="brand">Replicate</span>
<div class="navlinks"><span>Explore</span><span>Docs</span><span>Pricing</span><span>Blog</span></div>
<div class="navr"><span class="btn outline">Sign in</span><span class="btn dark">Get started</span></div>
</nav>
<section class="hero"><h1>Run AI with an API.</h1></section>
<div class="searchbar"><span class="glass">Search models — "image generation"</span></div>
<div class="gallery">
<div class="model featured"><div class="thumb m1"></div><div class="info"><h4>flux-dreamscape</h4><p>Text-to-image, cinematic</p><span class="status">● Running</span></div></div>
<div class="model"><div class="thumb m2"></div><div class="info"><h4>whisper-fast</h4><p>Speech-to-text</p><span class="status">● Running</span></div></div>
<div class="model"><div class="thumb m3"></div><div class="info"><h4>portrait-upscale</h4><p>Image restoration</p><span class="status">● Running</span></div></div>
<div class="model"><div class="thumb m4"></div><div class="info"><h4>codegen-mini</h4><p>Code generation</p><span class="status">● Running</span></div></div>
</div>
<div class="manifesto"><h2>Imagine what you can build.</h2></div>
<footer>
<span>© Replicate</span>
<span>Explore · Docs · Blog · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5200ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5200ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ac87fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3cffd0; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5200ff; color: #3cffd0;
border: 1px solid #3cffd0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5200ff; color: #f5f5f5;
border: 1px solid #6c27fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ac87fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e29f7; color: #3cffd0;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#131313; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:900; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; }
.navlinks span:hover, .navlinks span.on { color:#3cffd0; }
.sub-btn { background:#5200ff; color:#fff; border-radius:3px; padding:8px 16px; font-size:12px; font-weight:600; }
.grid { display:grid; grid-template-columns:1.4fr 1fr; gap:12px; padding:8px 40px 0; }
.tile-main { background:#5200ff; border-radius:3px; padding:22px; display:flex; flex-direction:column;
justify-content:flex-end; height:300px; }
.tile-main .kicker { font-family:monospace; font-size:11px; letter-spacing:0.06em; color:#fff; opacity:0.85; }
.tile-main h1 { font-size:44px; font-weight:900; line-height:0.98; letter-spacing:-0.02em; margin:8px 0; }
.side { display:flex; flex-direction:column; gap:12px; }
.tile-sm { flex:1; border-radius:3px; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; }
.ts1 { background:#3cffd0; color:#131313; }
.ts2 { background:#2d2d2d; }
.tile-sm .kicker { font-family:monospace; font-size:10px; letter-spacing:0.06em; opacity:0.8; }
.tile-sm h3 { font-size:20px; font-weight:900; margin:6px 0 0; line-height:1.05; }
.rail { display:flex; gap:20px; padding:14px 40px 0; }
.story { display:flex; align-items:center; gap:10px; }
.story .dot { width:8px; height:8px; border-radius:50%; background:#3cffd0; }
.story .txt { font-size:13px; font-weight:700; }
.story .time { font-family:monospace; font-size:10px; color:#949494; letter-spacing:0.06em; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #313131; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#949494; }
</style></head>
<body>
<nav>
<div class="brand">The Verge</div>
<div class="navlinks"><span class="on">Tech</span><span>Science</span><span>Reviews</span><span>Culture</span></div>
<div class="sub-btn">Subscribe</div>
</nav>
<div class="grid">
<div class="tile-main">
<span class="kicker">EXCLUSIVE</span>
<h1>The interface between the present and the future</h1>
</div>
<div class="side">
<div class="tile-sm ts1"><span class="kicker">REVIEW</span><h3>We tried the new AI notebook — verdict inside</h3></div>
<div class="tile-sm ts2"><span class="kicker">TECH</span><h3>Chargers are getting weird again</h3></div>
</div>
</div>
<div class="rail">
<div class="story"><span class="dot"></span><span class="txt">This foldable finally makes sense</span><span class="time">2H AGO</span></div>
<div class="story"><span class="dot"></span><span class="txt">A quick note on the new streaming price hikes</span><span class="time">4H AGO</span></div>
</div>
<footer><span>© The Verge</span><span>The Verge · Reviews · Newsletters</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffcc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffcc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6509; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #efdf00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffcc00; color: #000000;
border: 1px solid #efdf00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffcc00; color: #111111;
border: 1px solid #d9ae03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6509; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fccf00; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Futura", "Century Gothic", Verdana, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #f2f2f2; }
.brand { font-size:15px; font-weight:700; letter-spacing:2px; }
.navlinks { display:flex; gap:26px; font-size:12px; font-weight:700; letter-spacing:1px; }
.search { border:1px solid #d1d1d1; border-radius:9999px; padding:6px 16px; font-size:11px; color:#666; }
.hero { position:relative; height:290px; background:linear-gradient(120deg,#ff3d8f 0%,#7b2ff7 45%,#00c2d1 100%); overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55) 100%); }
.hero-content { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:28px 32px; }
.hero h1 { color:#fff; font-size:44px; font-weight:700; line-height:0.95; margin:0 0 14px; text-transform:uppercase; }
.herobtns { display:flex; gap:10px; }
.btn { height:40px; padding:0 20px; font-size:13px; font-weight:700; display:flex; align-items:center; }
.btn.super { background:#efdf00; color:#000; border:1px solid #efdf00; }
.btn.ghost { background:transparent; color:#fff; border:1px solid #fff; }
.cards { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2px; background:#f2f2f2; }
.card { position:relative; height:210px; padding:18px; display:flex; flex-direction:column; justify-content:flex-end; }
.card::before { content:''; position:absolute; inset:0; }
.c1::before { background:linear-gradient(160deg,#1a1a1a,#3a3a3a); }
.c2 { background:#000; }
.c3::before { background:linear-gradient(160deg,#e63946,#8a1c2b); }
.card h3 { position:relative; z-index:1; color:#fff; font-size:20px; font-weight:700; margin:0 0 6px; text-transform:uppercase; }
.card p { position:relative; z-index:1; color:#e0e0e0; font-size:12px; margin:0 0 10px; }
.card .link { position:relative; z-index:1; color:#fff; font-size:12px; font-weight:700; text-decoration:underline; }
.c2 h3, .c2 p { color:#fff; }
footer { border-top:1px solid #f2f2f2; padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; color:#666; }
</style></head>
<body>
<nav>
<span class="brand">Renault</span>
<div class="navlinks"><span>MODELS</span><span>E-TECH</span><span>SERVICES</span><span>ABOUT</span></div>
<span class="search">Find a dealer</span>
</nav>
<section class="hero">
<div class="hero-content">
<h1>Drive the future</h1>
<div class="herobtns">
<span class="btn super">Discover E-Tech</span>
<span class="btn ghost">Book a test drive</span>
</div>
</div>
</section>
<div class="cards">
<div class="card c1"><h3>Megane E-Tech</h3><p>100% electric, engineered for the city.</p><span class="link">Configure now</span></div>
<div class="card c2"><h3>Technology</h3><p>Fast charging, further range.</p><span class="link">Learn more</span></div>
<div class="card c3"><h3>Clio</h3><p>The icon, reimagined.</p><span class="link">Discover</span></div>
</div>
<footer>
<span>© Renault Group</span>
<span>Models · E-Tech · Dealers · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #767d88; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #767d88; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bcbfc4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7d848e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #767d88; color: #000000;
border: 1px solid #7d848e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #767d88; color: #f5f5f5;
border: 1px solid #8a9099; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bcbfc4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #777e89; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:absolute; top:0; left:0; right:0; z-index:5; height:56px; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; font-weight:400; }
.navlinks { display:flex; gap:20px; font-size:13px; }
.navlinks span:hover { color:#fff; }
.hero { position:relative; height:300px; overflow:hidden;
background:
radial-gradient(ellipse 500px 260px at 75% 30%, rgba(120,90,180,.35), transparent 60%),
radial-gradient(ellipse 460px 300px at 30% 75%, rgba(60,70,110,.4), transparent 60%),
linear-gradient(180deg,#050505,#0e0e12 60%,#000); }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%); }
.herotext { position:absolute; left:32px; bottom:22px; z-index:2; max-width:560px; }
.herotext h1 { font-size:48px; font-weight:400; line-height:1; letter-spacing:-1.2px; margin:0 0 8px; }
.herotext p { font-size:14px; color:#767d88; margin:0; }
.gridwrap { padding:16px 32px; display:grid; grid-template-columns:1.3fr 1fr; gap:14px; }
.bigcard { position:relative; border-radius:8px; overflow:hidden; height:170px;
background:linear-gradient(140deg,#1a1a1a,#2a2a30 50%,#111); }
.bigcard::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.8) 100%); }
.bigcap { position:absolute; left:14px; bottom:12px; z-index:2; font-size:20px; font-weight:400; line-height:1; }
.stack { display:flex; flex-direction:column; gap:14px; }
.smcard { position:relative; border-radius:8px; overflow:hidden; height:78px;
background:linear-gradient(135deg,#2a2226,#151515); }
.smcard.b { background:linear-gradient(135deg,#1c2430,#0e1015); }
.smcard::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.75) 100%); }
.smcap { position:absolute; left:12px; bottom:8px; z-index:2; font-size:13px; }
.trust { padding:14px 32px; display:flex; gap:26px; align-items:center; opacity:.6; font-size:11px; letter-spacing:.35px; text-transform:uppercase; }
.mission { background:#000; text-align:center; padding:26px 32px; }
.mission p { font-size:22px; font-weight:400; line-height:1; letter-spacing:-.7px; margin:0; max-width:640px; margin:0 auto; }
</style></head>
<body>
<div style="position:relative;">
<nav>
<div class="brand">Runway</div>
<div class="navlinks"><span>Product</span><span>Research</span><span>Pricing</span><span>Sign in</span></div>
</nav>
<div class="hero">
<div class="herotext">
<h1>Runway<br>AI Filmmaking</h1>
<p>Tools for the next generation of storytellers.</p>
</div>
</div>
</div>
<div class="gridwrap">
<div class="bigcard"><span class="bigcap">Gen-4: A new frontier</span></div>
<div class="stack">
<div class="smcard"><span class="smcap">Research</span></div>
<div class="smcard b"><span class="smcap">Act-Two</span></div>
</div>
</div>
<div class="trust">TRUSTED BY · LEADING STUDIOS · RESEARCH LABS · CREATIVES</div>
<div class="mission">
<p>We are building AI to simulate the world through imagination, art and aesthetics.</p>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #820ad1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #820ad1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c18be5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9b2be0; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #820ad1; color: #ffffff;
border: 1px solid #9b2be0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #820ad1; color: #f5f5f5;
border: 1px solid #9430d7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c18be5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #860fd3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F4F2F7; color:#1A1523; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:150px; background:linear-gradient(160deg, #820AD1, #9B2BE0 55%, #6A07AD);
padding:22px 40px; display:flex; flex-direction:column; justify-content:space-between; }
.hero-top { display:flex; align-items:center; justify-content:space-between; }
.avatar { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.18);
color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.chrome { display:flex; gap:18px; color:#fff; opacity:0.9; font-size:16px; }
.greet { color:#fff; }
.greet .hi { font-size:14px; font-weight:500; opacity:0.85; display:block; margin-bottom:2px; }
.greet .nm { font-size:24px; font-weight:700; letter-spacing:-0.3px; }
.board { padding:0 40px; margin-top:-30px; display:flex; gap:16px; }
.tile { background:#FFFFFF; border-radius:16px; padding:18px; box-shadow:0 6px 18px -10px rgba(40,12,60,0.22); }
.tile-head { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; margin-bottom:10px; color:#1A1523; }
.tile-head .ic { color:#820AD1; font-size:16px; }
.balance { font-size:28px; font-weight:800; letter-spacing:-0.5px; font-variant-numeric:tabular-nums; }
.sub { font-size:12.5px; font-weight:500; color:#6B6178; margin-top:4px; }
.acct { width:300px; flex-shrink:0; }
.card-tile { flex:1; }
.roxinho { display:flex; align-items:center; gap:10px; margin-bottom:2px; }
.mini-card { width:42px; height:27px; border-radius:5px; background:linear-gradient(120deg,#820AD1,#9B2BE0); }
.invoice-amt { font-size:22px; font-weight:800; letter-spacing:-0.4px; font-variant-numeric:tabular-nums; margin:8px 0 2px; }
.progress { height:6px; border-radius:3px; background:#E6E1EE; margin:10px 0 6px; overflow:hidden; }
.progress .fill { height:100%; width:42%; background:#9B2BE0; border-radius:3px; }
.quick { display:flex; gap:22px; padding:18px 40px 6px; }
.qa { display:flex; flex-direction:column; align-items:center; gap:6px; width:64px; }
.qa .circ { width:52px; height:52px; border-radius:50%; background:#ECE8F2; display:flex;
align-items:center; justify-content:center; font-size:20px; color:#820AD1; }
.qa .cap { font-size:10.5px; font-weight:500; color:#6B6178; text-align:center; }
.activity { padding:8px 40px 0; }
.act-title { font-size:15px; font-weight:700; margin-bottom:6px; }
.arow { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid #E6E1EE; }
.arow .aic { width:36px; height:36px; border-radius:50%; background:#ECE8F2; display:flex;
align-items:center; justify-content:center; font-size:15px; color:#820AD1; flex-shrink:0; }
.arow .info { flex:1; }
.arow .ti { font-size:14px; font-weight:600; }
.arow .me { font-size:11.5px; font-weight:500; color:#6B6178; }
.arow .amt { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.amt.pos { color:#1FB76A; }
</style></head>
<body>
<div class="hero">
<div class="hero-top">
<div class="avatar">S</div>
<div class="chrome">⚙️ 🔔 ❓</div>
</div>
<div class="greet"><span class="hi">Olá,</span><span class="nm">Nubank (iOS)</span></div>
</div>
<div class="board">
<div class="tile acct">
<div class="tile-head"><span class="ic">◎</span> Conta</div>
<div class="balance">R$ 4.812,35</div>
<div class="sub">Saldo disponível</div>
</div>
<div class="tile card-tile">
<div class="roxinho"><span class="mini-card"></span><span class="tile-head" style="margin:0;">Cartão de crédito</span></div>
<div class="invoice-amt">R$ 1.248,90</div>
<div class="sub">Fatura atual · vence 10 jun</div>
<div class="progress"><div class="fill"></div></div>
<div class="sub">Limite disponível R$ 6.751,10</div>
</div>
</div>
<div class="quick">
<div class="qa"><div class="circ">⇄</div><span class="cap">Pix</span></div>
<div class="qa"><div class="circ">🧾</div><span class="cap">Pagar</span></div>
<div class="qa"><div class="circ">💳</div><span class="cap">Cartões</span></div>
<div class="qa"><div class="circ">📈</div><span class="cap">Investir</span></div>
<div class="qa"><div class="circ">💰</div><span class="cap">Empréstimo</span></div>
</div>
<div class="activity">
<div class="act-title">Atividade recente</div>
<div class="arow"><div class="aic">↑</div><div class="info"><div class="ti">Pix enviado — Camila</div><div class="me">Hoje · 14:02</div></div><div class="amt">R$ 120,00</div></div>
<div class="arow"><div class="aic">↓</div><div class="info"><div class="ti">Pix recebido</div><div class="me">Ontem · 09:41</div></div><div class="amt pos">+R$ 2.400,00</div></div>
<div class="arow"><div class="aic">🛒</div><div class="info"><div class="ti">iFood</div><div class="me">Ontem · 20:15</div></div><div class="amt">R$ 58,30</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #131313; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #131313; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3cffd0; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #131313; color: #3cffd0;
border: 1px solid #3cffd0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #131313; color: #f5f5f5;
border: 1px solid #373737; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1a3931; color: #3cffd0;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#131313; color:#ffffff; box-sizing:border-box;
font-family:"Arial Narrow", Impact, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #ffffff; }
.wordmark { font-size:26px; font-weight:900; letter-spacing:-0.5px; text-transform:uppercase; color:#ffffff; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-family:-apple-system,Arial,sans-serif; font-size:12px; font-weight:600; color:#949494; text-transform:uppercase; letter-spacing:.04em; }
.navlinks span.on { color:#3cffd0; }
.masthead { padding:26px 28px 14px; }
.masthead h1 { font-size:74px; line-height:.92; font-weight:900; margin:0; letter-spacing:-1px;
text-transform:uppercase; color:#ffffff; }
.masthead .sub { font-family:-apple-system,Arial,sans-serif; font-size:13px; color:#949494; margin-top:8px; }
.stream { position:relative; padding:6px 28px 20px 54px; display:flex; flex-direction:column; gap:14px; }
.rule { position:absolute; left:36px; top:0; bottom:0; width:0; border-left:2px dashed #3d00bf; }
.tile { position:relative; border-radius:26px; border:1px solid #ffffff; padding:16px 20px; min-height:56px;
display:flex; align-items:center; justify-content:space-between; }
.tile .ts { position:absolute; left:-54px; top:50%; transform:translateY(-50%); font-size:10px; letter-spacing:.06em;
color:#949494; text-transform:uppercase; width:44px; text-align:right; }
.tile h3 { font-family:-apple-system,Arial,sans-serif; font-size:17px; font-weight:800; margin:0; line-height:1.15; max-width:640px; }
.tile .cat { font-family:-apple-system,Arial,sans-serif; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.t-mint { background:#3cffd0; border-color:#309875; color:#131313; }
.t-mint h3 { color:#131313; }
.t-ultra { background:#5200ff; border-color:#3d00bf; color:#ffffff; opacity:.98; }
.t-slate { background:#2d2d2d; border-color:#313131; color:#ffffff; }
.t-white { background:#ffffff; border-color:#ffffff; color:#131313; }
.t-white h3 { color:#000000; }
.arrow { font-size:20px; }
</style></head>
<body>
<nav>
<div class="wordmark">The Verge</div>
<div class="navlinks"><span class="on">Tech</span><span>Reviews</span><span>Science</span><span>Ai</span><span>Video</span></div>
</nav>
<div class="masthead">
<h1>The Verge</h1>
<div class="sub">Technology, science, art, and culture — covered like a control panel.</div>
</div>
<div class="stream">
<div class="rule"></div>
<div class="tile t-mint"><div><span class="ts mono">09:41</span><span class="cat">Ai</span><h3>The chatbot wars just got a new front line</h3></div><span class="arrow">→</span></div>
<div class="tile t-slate"><div><span class="ts mono">08:14</span><span class="cat">Reviews</span><h3>We tested the phone nobody asked for. It's kind of great.</h3></div><span class="arrow">→</span></div>
<div class="tile t-ultra"><div><span class="ts mono">07:02</span><span class="cat">Science</span><h3>A satellite the size of a shoebox just changed forecasting</h3></div><span class="arrow">→</span></div>
<div class="tile t-white"><div><span class="ts mono">06:30</span><span class="cat">Policy</span><h3>Congress is arguing about chips again</h3></div><span class="arrow">→</span></div>
<div class="tile t-slate"><div><span class="ts mono">05:55</span><span class="cat">Video</span><h3>Inside the factory that builds the internet's routers</h3></div><span class="arrow">→</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5865f2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5865f2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aeb4f4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1f22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #1e1f22;
border: 1px solid #1e1f22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5865f2; color: #f5f5f5;
border: 1px solid #717cf2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aeb4f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4f5ad1; color: #1e1f22;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#313338; color:#F2F3F5; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; }
.rail { width:72px; background:#1E1F22; display:flex; flex-direction:column; align-items:center; padding-top:12px; gap:8px; flex-shrink:0; }
.railicon { width:48px; height:48px; border-radius:16px; background:#383A40; display:flex; align-items:center; justify-content:center; font-size:18px; color:#B5BAC1; }
.railicon.home { background:linear-gradient(135deg,#5865F2,#7289DA); color:#fff; border-radius:12px; }
.railicon.active { border-radius:12px; background:#5865F2; color:#fff; position:relative; }
.railicon.active::before { content:''; position:absolute; left:-16px; top:50%; transform:translateY(-50%); width:4px; height:40px; background:#fff; border-radius:0 4px 4px 0; }
.divider48 { width:32px; height:2px; background:#3F4147; margin:4px 0; }
.channels { width:210px; background:#2B2D31; flex-shrink:0; padding:14px 8px; }
.servername { font-size:15px; font-weight:700; padding:6px 10px 14px; }
.section { font-size:11px; font-weight:700; letter-spacing:0.5pt; color:#949BA4; text-transform:uppercase; padding:10px 10px 6px; }
.chrow { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:4px; font-size:15px; color:#949BA4; }
.chrow.active { background:#404249; color:#fff; }
.chat { flex:1; display:flex; flex-direction:column; background:#313338; }
.chattop { height:48px; border-bottom:1px solid #3F4147; display:flex; align-items:center; padding:0 16px; font-size:15px; font-weight:600; gap:8px; }
.msgs { flex:1; padding:16px; overflow:hidden; }
.msg { display:flex; gap:12px; margin-bottom:16px; }
.avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; }
.msgbody .head { display:flex; align-items:baseline; gap:8px; }
.msgbody .name { font-size:16px; font-weight:600; }
.msgbody .time { font-size:12px; color:#949BA4; }
.msgbody .txt { font-size:16px; line-height:1.375; margin-top:2px; max-width:520px; }
.reacts { display:flex; gap:6px; margin-top:8px; }
.react { display:flex; align-items:center; gap:6px; background:#2B2D31; border:1px solid #3F4147; border-radius:8px; padding:2px 8px; font-size:13px; font-weight:500; }
.react.mine { background:#3B4EAF; border-color:#5865F2; }
.compose { margin:0 16px 16px; height:52px; background:#383A40; border-radius:8px; display:flex; align-items:center; padding:0 14px; gap:10px; color:#949BA4; font-size:15px; }
</style>
</head>
<body>
<div class="stage">
<div class="rail">
<div class="railicon home">D</div>
<div class="divider48"></div>
<div class="railicon active">GD</div>
<div class="railicon" style="background:linear-gradient(135deg,#7C5CFF,#1ABCFE)">A</div>
<div class="railicon">W</div>
<div class="railicon" style="color:#23A55A;font-weight:700">+</div>
</div>
<div class="channels">
<div style="font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#949BA4;padding:6px 10px 0;">Discord (iOS)</div>
<div class="servername">Game Devs Guild</div>
<div class="section">Text Channels</div>
<div class="chrow active"># general</div>
<div class="chrow"># showcase</div>
<div class="chrow"># feedback</div>
<div class="section">Voice Channels</div>
<div class="chrow">🔊 lounge</div>
</div>
<div class="chat">
<div class="chattop"># general</div>
<div class="msgs">
<div class="msg">
<div class="avatar" style="background:linear-gradient(135deg,#57F287,#1ABCFE)"></div>
<div class="msgbody">
<div class="head"><span class="name" style="color:#57F287">Mira_Dev</span><span class="time">Today at 2:14 PM</span></div>
<div class="txt">just pushed the new shader pass — check the ``glow.frag`` file, should fix the banding on the terrain</div>
<div class="reacts"><div class="react mine">🔥 3</div><div class="react">👀 1</div></div>
</div>
</div>
<div class="msg">
<div class="avatar" style="background:linear-gradient(135deg,#ED4245,#EB459E)"></div>
<div class="msgbody">
<div class="head"><span class="name" style="color:#ED4245">kestrel.admin</span><span class="time">Today at 2:16 PM</span></div>
<div class="txt">nice!! pulling now, ||spoiler: the boss fight is basically done too||</div>
</div>
</div>
</div>
<div class="compose">Message #general</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f2ed; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f2ed; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.5; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #6e5b4f; color: #fefefe;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: transparent; color: #1a1a1a;
border: 1px solid #6e5b4f; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #fefefe; color: #1a1a1a;
border: 1px solid #bebcb8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.12em; background: #f4f2ed; color: #1a1a1a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f2ed; color:#1a1a1a; box-sizing:border-box;
font-family:'acumin-pro', Lato, 'Century Gothic', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #d2d2d0; background:#f4f2ed; }
.brand { font-family:'Crimson Pro','Crimson Text',Georgia,serif; font-size:20px; font-weight:400; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:500; letter-spacing:0.06em; color:#1a1a1a; }
.navlinks span:first-child { color:#6e5b4f; border-bottom:1px solid #6e5b4f; padding-bottom:4px; }
.navicons { display:flex; gap:16px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#4f4f4f; }
.hero { flex:0 0 auto; padding:22px 40px 18px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.hero-copy { max-width:430px; }
.hero-copy .label { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#757575; margin:0 0 8px; }
.hero-copy h1 { font-family:'Crimson Pro','Crimson Text',Georgia,serif; font-size:34px; font-weight:400; line-height:1.12;
letter-spacing:-0.4px; margin:0 0 8px; }
.hero-copy p { font-family:'Crimson Pro','Crimson Text',Georgia,serif; font-style:italic; font-size:16px; color:#293234; margin:0 0 14px; }
.hero-copy button { background:#6e5b4f; color:#fefefe; border:none; padding:12px 28px; font-size:13px;
font-weight:500; letter-spacing:0.1em; text-transform:uppercase; }
.hero-visual { width:200px; height:120px; background:linear-gradient(150deg,#c4b5ad,#6e5b4f); flex:0 0 auto; }
.editorial { flex:0 0 auto; background:#e1f0ef; padding:14px 40px; display:flex; align-items:center; gap:12px; }
.editorial .label { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#8b9898; white-space:nowrap; }
.editorial p { font-size:13px; color:#293234; margin:0; }
.rowlabel { flex:0 0 auto; padding:14px 40px 8px; font-size:11px; font-weight:600; letter-spacing:0.12em;
text-transform:uppercase; color:#757575; }
.products { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:0 40px 14px; min-height:0; }
.card { display:flex; flex-direction:column; gap:6px; }
.imgwrap { flex:1; min-height:0; position:relative; }
.p1 .imgwrap { background:linear-gradient(160deg,#e1f0ef,#8b9898); }
.p2 .imgwrap { background:linear-gradient(160deg,#efe6da,#6e5b4f); }
.p3 .imgwrap { background:linear-gradient(160deg,#d9d2c4,#4f4f4f); }
.p4 .imgwrap { background:linear-gradient(160deg,#e1f0ef,#293234); }
.cardmeta .cat { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#959595; margin:0 0 3px; }
.cardmeta .title { font-size:14px; font-weight:500; letter-spacing:0.02em; margin:0 0 3px; color:#1a1a1a; }
.cardmeta .price { font-size:13px; color:#4f4f4f; margin:0; }
footer { flex:0 0 auto; background:#293234; color:#e1e1e1; padding:12px 40px; display:flex;
justify-content:space-between; align-items:center; font-size:11px; }
footer .flinks span { margin-left:16px; color:#d2d2d0; }
</style></head>
<body>
<nav>
<p class="brand">Artifact Uprising</p>
<div class="navlinks"><span>Photo Books</span><span>Prints</span><span>Albums</span><span>Cards</span></div>
<div class="navicons"><span>Account</span><span>Bag</span></div>
</nav>
<section class="hero">
<div class="hero-copy">
<p class="label">New Collection</p>
<h1>Bound to be treasured</h1>
<p>Layflat photo books, letterpress cards, and archival prints — made from your best photographs.</p>
<button>Start a Book</button>
</div>
<div class="hero-visual"></div>
</section>
<div class="editorial">
<p class="label">The Process</p>
<p>Every book is press-printed on 100lb archival paper, bound by hand in our Denver studio.</p>
</div>
<p class="rowlabel">Shop Best Sellers</p>
<section class="products">
<div class="card p1">
<div class="imgwrap"></div>
<div class="cardmeta">
<p class="cat">Layflat</p>
<p class="title">The Classic Photo Book</p>
<p class="price">$59</p>
</div>
</div>
<div class="card p2">
<div class="imgwrap"></div>
<div class="cardmeta">
<p class="cat">Softcover</p>
<p class="title">The Everyday Journal</p>
<p class="price">$35</p>
</div>
</div>
<div class="card p3">
<div class="imgwrap"></div>
<div class="cardmeta">
<p class="cat">Square Prints</p>
<p class="title">Set of 20 Prints</p>
<p class="price">$29</p>
</div>
</div>
<div class="card p4">
<div class="imgwrap"></div>
<div class="cardmeta">
<p class="cat">Wood Album</p>
<p class="title">The Heirloom Album</p>
<p class="price">$119</p>
</div>
</div>
</section>
<footer>
<span>© Artifact Uprising</span>
<span class="flinks"><span>Our Story</span><span>Help</span><span>Gifting</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.18; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.14; letter-spacing: 0.4px; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 4px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.14; letter-spacing: 0.4px; background: transparent; color: #1a1a1a;
border: 1px solid #b8964e; border-radius: 4px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 1.2px; background: #b8964e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Helvetica Neue',Helvetica,Arial,-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.navlinks { display:flex; gap:32px; font-size:12px; color:#3d3d3d; }
.navlinks span.on { color:#1a1a1a; border-bottom:1px solid #b8964e; padding-bottom:4px; }
.cart { font-size:12px; color:#3d3d3d; }
.wrap { display:flex; height:512px; padding:0 40px; gap:56px; align-items:center; }
.photo { width:300px; height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.cylinder { width:70px; height:220px; border-radius:14px; background:linear-gradient(100deg,#e8e8e8 0%,#c9a96e 8%,#f5f5f5 20%,#c9a96e 30%,#e8e8e8 55%,#2c2c2c 100%);
box-shadow:0 30px 60px rgba(0,0,0,.12); }
.badge { position:absolute; top:10px; left:10px; font-size:10px; color:#b8964e; border:1px solid #b8964e; padding:4px 10px; border-radius:4px;
text-transform:uppercase; letter-spacing:.08em; }
.info { flex:1; display:flex; flex-direction:column; gap:16px; }
.info .cat { font-size:12px; color:#7a7a7a; letter-spacing:.04em; }
.info h1 { font-size:32px; font-weight:500; margin:0; letter-spacing:-.3px; }
.price { font-size:19px; font-weight:500; }
.color-row { display:flex; gap:10px; }
.colorchip { width:26px; height:26px; border-radius:8px; }
.cc1{background:#2c2c2c}.cc2{background:#c9a96e}.cc3{background:#e8e8e8; border:1px solid #ddd}
.desc { font-size:14px; color:#3d3d3d; line-height:1.65; max-width:420px; }
.buy-row { display:flex; gap:12px; margin-top:auto; }
.btn-buy { flex:1; background:#b8964e; color:#ffffff; border:none; border-radius:4px; padding:15px; font-size:13px; letter-spacing:.04em; }
.btn-wish { border:1px solid #1a1a1a; border-radius:4px; padding:15px 22px; font-size:13px; }
footer { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; color:#7a7a7a; border-top:1px solid #e5e5e5; }
</style></head>
<body>
<nav>
<p class="brand">Aarke Water FI 2</p>
<div class="navlinks"><span>Carbonators</span><span class="on">Water fi 2</span><span>Accessories</span><span>About</span></div>
<span class="cart">Bag</span>
</nav>
<div class="wrap">
<div class="photo"><span class="badge">New</span><div class="cylinder"></div></div>
<div class="info">
<span class="cat">Sparkling Water Maker</span>
<h1>Water fi 2</h1>
<span class="price">$249.00</span>
<div class="color-row">
<div class="colorchip cc1"></div><div class="colorchip cc2"></div><div class="colorchip cc3"></div>
</div>
<p class="desc">Precision-milled from a single piece of stainless steel, with a brushed brass carbonation button — the object is the interface. No plastic, no compromise.</p>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© Aarke Water FI 2</span><span>Cylinder Exchange · Warranty · Shipping</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; background: #ffffff; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: #f5f4f2; color: #767676;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia,'Playfair Display',serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:14px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.navlinks { display:flex; gap:30px; font-size:11px; color:#767676; letter-spacing:.04em; }
.navlinks span.on { color:#1a1a1a; }
.wrap { display:flex; height:524px; padding:0 40px; gap:52px; align-items:center; }
.artwork { width:340px; height:100%; background:#f9f8f6; display:flex; align-items:center; justify-content:center; position:relative; }
.canvas-art { width:240px; height:300px; background:conic-gradient(from 200deg,#dfd8ce,#b7a898,#e8e2d8,#8a7a68); box-shadow:0 30px 60px rgba(0,0,0,.08); }
.info { flex:1; display:flex; flex-direction:column; gap:16px; }
.info .artist { font-size:12px; color:#767676; }
.info h1 { font-family:Georgia,'Playfair Display',serif; font-size:28px; font-weight:400; margin:0; line-height:1.3; letter-spacing:.2px; }
.meta-row { display:flex; gap:10px; }
.chip { border-radius:9999px; border:1px solid #e8e8e8; padding:6px 16px; font-size:11px; color:#767676; }
.desc { font-size:13px; color:#3d3d3d; line-height:1.7; max-width:420px; }
.divider { height:1px; background:#e8e8e8; }
.price-row { display:flex; align-items:baseline; gap:14px; }
.price { font-family:Georgia,serif; font-size:20px; }
.edition-note { font-size:11px; color:#9e9e9e; }
.buy-row { display:flex; gap:12px; margin-top:auto; }
.btn-buy { flex:1; background:#1a1a1a; color:#fff; border:none; padding:14px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.btn-wish { border:1px solid #1a1a1a; padding:14px 20px; font-size:12px; }
footer { height:56px; border-top:1px solid #e8e8e8; display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; color:#767676; }
</style></head>
<body>
<nav>
<p class="brand">Absolut Art</p>
<div class="navlinks"><span>Prints</span><span class="on">Originals</span><span>Artists</span><span>Curated Sets</span></div>
</nav>
<div class="wrap">
<div class="artwork"><div class="canvas-art"></div></div>
<div class="info">
<span class="artist">Sarah Lindqvist · Norway</span>
<h1>Quiet Coastline, Study No. 3</h1>
<div class="meta-row">
<span class="chip">Giclée Print</span>
<span class="chip">70 × 90 cm</span>
</div>
<p class="desc">Loads against an unbroken white — the artwork occupies the frame, pricing surfaces only when you're ready to look closer.</p>
<div class="divider"></div>
<div class="price-row">
<span class="price">$480.00</span>
<span class="edition-note">Edition of 75, hand-signed</span>
</div>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© Absolut Art</span><span>Framing · Shipping · Artist Program</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #262626; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f4f4f6; color: #212121;
border: 1px solid #262626; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f4f6; color: #212121;
border: 1px solid #bfbfc1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #feb7bb; color: #212121;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f4f4f6; color:#212121; box-sizing:border-box; font-family:'Diatype','Chalet',-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f4f4f6; border-bottom:1px solid #e5e5e5; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-family:'Chalet',sans-serif; font-size:14px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:22px; font-family:'Chalet',sans-serif; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:#878787; }
.navlinks span.active { color:#212121; border-bottom:2px solid #262626; padding-bottom:20px; }
.main { display:flex; gap:24px; padding:24px 32px; height:404px; }
.gallery { width:400px; background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.bangle { width:190px; height:190px; border-radius:50%; border:32px solid #feb7bb; }
.badge { position:absolute; top:16px; left:16px; background:#262626; color:#fff; font-family:'Chalet',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-family:'Chalet',sans-serif; font-size:22px; font-weight:700; margin:0; }
.price { font-family:'Chalet',sans-serif; font-size:18px; font-weight:600; }
.desc { font-size:13px; line-height:1.55; color:#454545; max-width:420px; }
.swatch-label { font-size:12px; font-weight:500; color:#454545; margin-top:6px; }
.swatch-row { display:flex; gap:10px; }
.swatch { width:32px; height:32px; border-radius:50%; border:1px solid #dedede; }
.swatch.sel { border:2px solid #212121; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#262626; color:#fff; border:none; border-radius:8px; font-family:'Chalet',sans-serif; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.5px; }
.btn-pink { flex:1; height:48px; background:#feb7bb; color:#212121; border:none; border-radius:8px; font-family:'Chalet',sans-serif; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.5px; }
.accordion { padding:0 32px; }
.acc-item { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #e5e5e5; font-family:'Chalet',sans-serif; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Bala</p>
<div class="navlinks"><span class="active">Bangles</span><span>Kettlebells</span><span>Bala Balls</span><span>Wristbands</span></div>
</nav>
<div class="main">
<div class="gallery">
<div class="badge">Bestseller</div>
<div class="bangle"></div>
</div>
<div class="info">
<h1>The Bala Bangles — 1lb Pair</h1>
<span class="price">$49.00</span>
<p class="desc">Ankle or wrist weights cast in a continuous oval form, wrapped in soft, sweat-resistant neoprene. Add resistance to walks, yoga flows, or strength circuits without breaking stride.</p>
<span class="swatch-label">Finish</span>
<div class="swatch-row">
<div class="swatch sel" style="background:#feb7bb"></div>
<div class="swatch" style="background:#abaf8f"></div>
<div class="swatch" style="background:#dfb8a7"></div>
<div class="swatch" style="background:#272d45"></div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-pink">Shop the Set</button>
</div>
</div>
</div>
<div class="accordion">
<div class="acc-item"><span>Details</span><span>+</span></div>
<div class="acc-item"><span>Shipping & Returns</span><span>+</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #f5f5f5; color: #757575;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#313131; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; }
.brand { color:#ffffff; font-size:18px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#ffffff; opacity:0.82; font-size:14px; font-weight:500; }
.cart { display:flex; align-items:center; gap:8px; color:#ffffff; font-size:13px; }
.cart-dot { width:20px; height:20px; border-radius:999px; background:#ffffff; color:#313131;
display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
main { display:flex; height:576px; }
.cover-col { width:300px; background:#f5f5f5; display:flex; align-items:center; justify-content:center;
border-right:1px solid #e8e8e8; }
.cover { width:190px; height:280px; border-radius:8px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#313131 0%,#4a4a4a 55%,#1a1a1a 100%); box-shadow:0 12px 30px rgba(0,0,0,0.18); }
.cover::before { content:''; position:absolute; left:0; top:0; width:14px; height:100%; background:rgba(255,255,255,0.08); }
.cover .spine-title { position:absolute; top:26px; left:26px; right:20px; color:#fff; font-size:20px; font-weight:700;
line-height:1.2; letter-spacing:-0.3px; }
.cover .spine-author { position:absolute; bottom:26px; left:26px; color:rgba(255,255,255,0.75); font-size:12px; font-weight:500; }
.waveform { display:flex; align-items:flex-end; gap:2px; height:26px; margin-top:14px; }
.waveform i { width:3px; background:#a0a0a0; display:block; border-radius:2px; }
.info-col { flex:1; padding:32px 36px; display:flex; flex-direction:column; gap:14px; }
.badge-row { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
background:#f5f5f5; color:#757575; border-radius:4px; padding:2px 8px; }
.badge-new { background:#2e7d32; color:#fff; }
h1 { font-size:28px; font-weight:700; margin:0; letter-spacing:-0.25px; line-height:1.25; }
.author { font-size:15px; color:#4a4a4a; margin:0; }
.narrator { font-size:13px; color:#757575; margin:0; }
.rating { display:flex; align-items:center; gap:6px; font-size:13px; color:#4a4a4a; }
.stars { color:#313131; font-size:14px; letter-spacing:2px; }
.desc { font-size:14px; color:#4a4a4a; line-height:1.55; max-width:480px; margin:4px 0 0; }
.meta-row { display:flex; gap:24px; font-size:12px; color:#757575; margin-top:2px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:24px; font-weight:700; color:#313131; }
.price-note { font-size:12px; color:#757575; }
.actions { display:flex; gap:12px; margin-top:8px; }
.btn-primary { background:#313131; color:#fff; border:none; border-radius:8px; padding:12px 24px;
font-weight:600; font-size:16px; height:48px; display:flex; align-items:center; }
.btn-secondary { background:#ffffff; color:#313131; border:2px solid #313131; border-radius:8px;
padding:11px 23px; font-weight:600; font-size:16px; height:48px; display:flex; align-items:center; }
.related { border-top:1px solid #e8e8e8; padding:16px 36px; display:flex; gap:16px; align-items:center; }
.related-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#757575; width:110px; }
.mini { display:flex; gap:8px; align-items:center; }
.mini-cover { width:38px; height:56px; border-radius:4px; }
.mc1 { background:linear-gradient(160deg,#5a5a5a,#2a2a2a); }
.mc2 { background:linear-gradient(160deg,#8a8a8a,#4a4a4a); }
.mc3 { background:linear-gradient(160deg,#3a3a3a,#151515); }
.mini-info p { margin:0; font-size:12px; }
.mini-info .t { font-weight:600; color:#313131; }
.mini-info .p { color:#757575; }
</style></head>
<body>
<nav>
<p class="brand">Audiobooks Com</p>
<div class="navlinks"><span>Browse</span><span>Bestsellers</span><span>Originals</span><span>Membership</span></div>
<div class="cart"><div class="cart-dot">3</div><span>Library</span></div>
</nav>
<main>
<div class="cover-col">
<div class="cover">
<div class="spine-title">The Quiet<br>Correspondence</div>
<div class="spine-author">Margaret Colby</div>
</div>
</div>
<div class="info-col">
<div class="badge-row"><span class="badge badge-new">New</span><span class="badge">Fiction</span><span class="badge">Unabridged</span></div>
<h1>The Quiet Correspondence</h1>
<p class="author">by Margaret Colby</p>
<p class="narrator">Narrated by James Whitfield · 11 hr 42 min</p>
<div class="rating"><span class="stars">★★★★☆</span><span>4.3 (2,108 ratings)</span></div>
<p class="desc">A decades-spanning story told through letters never sent — a librarian's quiet inheritance of secrets she never asked to keep.</p>
<div class="meta-row"><span>Audiobook</span><span>English</span><span>Released Mar 2026</span></div>
<div class="price-row"><span class="price">$19.99</span><span class="price-note">or 1 credit</span></div>
<div class="actions">
<div class="btn-primary">Add to Library</div>
<div class="btn-secondary">Free with Trial</div>
</div>
</div>
</main>
<div class="related">
<span class="related-label">You may also like</span>
<div class="mini"><div class="mini-cover mc1"></div><div class="mini-info"><p class="t">Harbor Light</p><p class="p">$17.99</p></div></div>
<div class="mini"><div class="mini-cover mc2"></div><div class="mini-info"><p class="t">The Last Ferry</p><p class="p">$15.49</p></div></div>
<div class="mini"><div class="mini-cover mc3"></div><div class="mini-info"><p class="t">Winter Notation</p><p class="p">$21.00</p></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0f1822;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0f1822;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #0f1822; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676767; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #00bda2; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #0f1822;
border: 1px solid #00bda2; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0f1822;
border: 1px solid #c3c5c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676767; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00bda2; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0f1822; box-sizing:border-box;
font-family:'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e4e4e4; }
.brand { font-size:19px; font-weight:700; letter-spacing:0.5px; margin:0; color:#0f1822; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:500; letter-spacing:0.2px; color:#383838; }
.cart-pill { background:#00bda2; color:#fff; font-size:12px; font-weight:600; border-radius:999px;
padding:6px 14px; }
main { display:flex; height:584px; }
.stage { width:420px; background:#0f1822; display:flex; align-items:center; justify-content:center; position:relative; }
.stage::before { content:'NEW'; position:absolute; top:20px; left:20px; background:#00bda2; color:#fff;
font-size:11px; font-weight:700; letter-spacing:0.5px; padding:3px 10px; border-radius:4px; }
.earbud-case { width:170px; height:130px; border-radius:20px; background:linear-gradient(150deg,#2a3844,#0f1822 70%);
box-shadow:0 0 0 2px rgba(0,189,162,0.35), 0 20px 45px rgba(0,0,0,0.45); position:relative; }
.earbud-case::before { content:''; position:absolute; left:50%; top:14px; transform:translateX(-50%);
width:60%; height:3px; background:rgba(0,189,162,0.6); border-radius:2px; }
.earbud { position:absolute; width:34px; height:44px; border-radius:14px 14px 18px 18px; background:#e7eaec;
bottom:-18px; box-shadow:0 8px 18px rgba(0,0,0,0.4); }
.e1 { left:26px; } .e2 { right:26px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:12px; }
h1 { font-size:24px; font-weight:600; margin:0; letter-spacing:-0.2px; }
.sub { font-size:13px; color:#676767; margin:0; }
.stars { color:#00b097; font-size:14px; letter-spacing:1px; }
.stars span { color:#676767; font-size:12px; letter-spacing:0; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.price { font-size:26px; font-weight:600; color:#0f1822; }
.price-strike { font-size:15px; color:#9e9e9f; text-decoration:line-through; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; border-radius:4px;
padding:3px 8px; color:#fff; }
.b-sale { background:#00bda2; } .b-drop { background:#f15a24; }
.swatches { display:flex; gap:10px; margin-top:4px; }
.sw { width:28px; height:28px; border-radius:999px; border:2px solid transparent; }
.sw.on { border-color:#0f1822; }
.sw1 { background:#0f1822; } .sw2 { background:#e7eaec; border-color:#d1d3d3; } .sw3 { background:#00bda2; }
.actions { display:flex; gap:10px; margin-top:10px; }
.btn-primary { background:#00bda2; color:#fff; border-radius:8px; height:44px; padding:0 24px;
display:flex; align-items:center; font-weight:600; font-size:14px; letter-spacing:0.5px; }
.btn-secondary { background:#fff; color:#0f1822; border:1px solid #d1d3d3; border-radius:8px; height:44px;
padding:0 20px; display:flex; align-items:center; font-weight:500; font-size:13px; }
.applepay { margin-top:6px; font-size:11px; color:#007aff; font-weight:600; }
.specs { border-top:1px solid #e4e4e4; margin-top:auto; padding-top:12px; display:flex; gap:26px; }
.specs div { font-size:11px; color:#676767; }
.specs b { display:block; color:#0f1822; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Aukey</p>
<div class="navlinks"><span>Audio</span><span>Charging</span><span>Smart Home</span><span>Deals</span></div>
<div class="cart-pill">Cart · 2</div>
</nav>
<main>
<div class="stage">
<div class="earbud-case">
<div class="earbud e1"></div>
<div class="earbud e2"></div>
</div>
</div>
<div class="info">
<div class="badges"><span class="badge b-sale">Sale</span><span class="badge b-drop">Price Drop</span></div>
<h1>EP-T27 Wireless Earbuds</h1>
<p class="sub">Active Noise Cancelling · 32H Playtime · IPX5</p>
<div class="stars">★★★★★<span>4.6 (3,912 reviews)</span></div>
<div class="price-row"><span class="price">$39.99</span><span class="price-strike">$59.99</span></div>
<div class="swatches"><div class="sw sw1 on"></div><div class="sw sw2"></div><div class="sw sw3"></div></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Buy Now</div>
</div>
<div class="applepay">Pay with Pay</div>
<div class="specs">
<div><b>32h</b>Battery</div>
<div><b>ANC</b>Noise Cancel</div>
<div><b>IPX5</b>Water Resist</div>
<div><b>USB-C</b>Fast Charge</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4262ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4262ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a4b3fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3652d8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4262ff; color: #ffffff;
border: 1px solid #3652d8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4262ff; color: #f5f5f5;
border: 1px solid #5f7afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a4b3fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #405ff9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.techno { font-family:"Orbitron", "Pretendard", sans-serif; }
.jamsil { font-family:"Jamsil", "Pretendard", sans-serif; }
nav { height:58px; display:flex; align-items:center; padding:0 36px; }
.brand { font-size:15px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:32px; }
.navlinks span { font-size:16px; font-weight:700; color:#8e8e8e; }
.navlinks span.on { color:#111111; }
.cta-primary { margin-left:auto; background:#4262ff; color:#ffffff; border:1px solid #3652d8;
border-radius:8px; height:40px; padding:0 20px; display:flex; align-items:center; font-size:14px; font-weight:700; }
.hero { text-align:center; padding:12px 36px 20px; }
.hero .wordmark { font-size:78px; font-weight:700; line-height:1.0; color:#111111; letter-spacing:1px; }
.hero h2 { font-family:"Pretendard",sans-serif; font-size:28px; font-weight:700; margin:6px 0 8px; color:#111111; }
.hero p { font-size:15px; color:#5b636d; margin:0 0 16px; }
.cta-big { display:inline-flex; align-items:center; background:#4262ff; color:#ffffff; border:1px solid #3652d8;
border-radius:8px; height:46px; padding:0 30px; font-size:16px; font-weight:700; }
.cards { display:flex; gap:16px; padding:14px 36px 20px; }
.card { flex:1; border-radius:20px; border:1px solid #ffffff; background:#111111; padding:30px 18px;
display:flex; flex-direction:column; align-items:flex-start; gap:14px; height:150px; position:relative; overflow:hidden; }
.card::after { content:''; position:absolute; right:-30px; bottom:-30px; width:110px; height:110px; border-radius:50%;
background:rgba(66,98,255,0.25); }
.card .tag { font-size:12px; color:#ff4d4d; font-weight:700; }
.card .t { font-size:16px; color:#ffffff; font-weight:700; line-height:1.3; }
.pill { background:#343434; color:#ffffff; border-radius:9999px; padding:0 14px; height:30px; display:flex;
align-items:center; font-size:12px; font-weight:600; }
.bottom { display:flex; gap:16px; padding:0 36px; }
.surface { flex:1; background:#f2f3f8; border-radius:20px; padding:18px 20px; }
.surface h4 { margin:0 0 6px; font-size:14px; color:#111111; }
.surface p { margin:0; font-size:13px; color:#5b636d; }
</style></head>
<body>
<nav>
<p class="brand">maum.ai (ex-MindsLab)</p>
<div class="navlinks"><span class="on">Physical AI</span><span>Defense</span><span>Foundation Model</span><span>Company</span></div>
<div class="cta-primary">Get Started</div>
</nav>
<div class="hero">
<div class="wordmark techno">MAIED</div>
<h2 class="jamsil">MAUM.AI Foundation Model</h2>
<p>One core model, applied outward into robots, industrial systems, and defense platforms.</p>
<div class="cta-big">Get Started</div>
</div>
<div class="cards">
<div class="card"><span class="tag">ROBOTICS</span><span class="t">JINDO BOT — field-ready autonomy</span><span class="pill">Visit</span></div>
<div class="card"><span class="tag">CONVERSATION</span><span class="t">AIden — voice & language engine</span><span class="pill">Visit</span></div>
<div class="card"><span class="tag">DEFENSE</span><span class="t">Mission-grade physical AI systems</span><span class="pill">Visit</span></div>
</div>
<div class="bottom">
<div class="surface"><h4>Enterprise deployment</h4><p>Bring the foundation model into existing industrial workflows.</p></div>
<div class="surface"><h4>Research-first</h4><p>Built in the open with a dedicated research team.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0ac290; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0ac290; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bdec8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0170b9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0ac290; color: #000000;
border: 1px solid #0170b9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0ac290; color: #000000;
border: 1px solid #30caa0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bdec8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #09b597; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
/* nav */
nav { height:56px; flex:0 0 56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #dfdfdf; background:#ffffff; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.3px; color:#000000; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; color:#000000; }
.navlinks span:first-child { color:#0ac290; }
.cta { background:#0ac290; color:#ffffff; border:none; border-radius:10px; height:34px;
padding:0 22px; font-size:13px; font-weight:700; white-space:nowrap; }
/* hero — dark photographic band, simulated */
.hero { flex:0 0 232px; position:relative; overflow:hidden;
background:
radial-gradient(circle at 15% 20%, rgba(10,194,144,0.28) 0%, rgba(10,194,144,0) 45%),
radial-gradient(circle at 85% 80%, rgba(1,112,185,0.30) 0%, rgba(1,112,185,0) 50%),
linear-gradient(135deg, #181b1e 0%, #101214 100%);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
padding:0 60px; text-align:center; }
.hero .fold { position:absolute; width:420px; height:420px; border-radius:50%;
border:1px solid rgba(255,255,255,0.06); top:-180px; right:-140px; }
.hero .fold2 { position:absolute; width:280px; height:280px; border-radius:50%;
border:1px solid rgba(255,255,255,0.05); bottom:-160px; left:-80px; }
.eyebrow { color:#0ac290; font-size:14px; font-weight:700; letter-spacing:0.02em; position:relative; z-index:1; }
.hero h1 { color:#ffffff; font-size:32px; font-weight:600; line-height:1.2; margin:0; max-width:560px; position:relative; z-index:1; }
.hero p { color:#c7cbce; font-size:14px; font-weight:400; margin:0; max-width:480px; position:relative; z-index:1; }
.hero .row { display:flex; gap:10px; position:relative; z-index:1; margin-top:2px; }
.btn-hero-primary { background:#0ac290; color:#ffffff; border:none; border-radius:10px; height:40px;
padding:0 26px; font-size:14px; font-weight:700; }
.btn-hero-muted { background:#dfdfdf; color:#60646a; border:none; border-radius:10px; height:40px;
padding:0 26px; font-size:14px; font-weight:500; }
/* service section */
.services { flex:0 0 200px; padding:20px 40px 8px; display:flex; flex-direction:column; gap:12px; background:#ffffff; }
.services .sec-eyebrow { color:#0ac290; font-size:13px; font-weight:700; letter-spacing:0.02em; }
.cardrow { display:flex; gap:18px; }
.scard { flex:1; background:#ffffff; border:1px solid #dfdfdf; border-radius:20px; padding:16px 18px;
display:flex; flex-direction:column; gap:6px; }
.scard .chip { width:34px; height:34px; border-radius:10px; }
.scard.c1 .chip { background:#0ac290; }
.scard.c2 .chip { background:#0170b9; }
.scard.c3 .chip { background:#ecebdc; }
.scard h3 { font-size:16px; font-weight:600; margin:6px 0 0; color:#000000; }
.scard p { font-size:12px; color:#4b4b4b; margin:0; line-height:1.5; }
/* stat band */
.stats { flex:0 0 108px; background:#181b1e; display:flex; align-items:center; justify-content:space-around;
padding:0 40px; }
.stat { text-align:center; }
.stat .num { color:#ffffff; font-size:22px; font-weight:700; }
.stat .num span { color:#0ac290; }
.stat .lbl { color:#888c8e; font-size:11px; font-weight:500; margin-top:4px; letter-spacing:0.02em; }
footer { flex:1 1 auto; min-height:44px; border-top:1px solid #dfdfdf; background:#ffffff;
display:flex; align-items:center; justify-content:space-between; padding:0 40px;
font-size:12px; color:#888c8e; }
</style></head>
<body>
<nav>
<p class="brand">LaundryGo</p>
<div class="navlinks"><span>Company</span><span>Business</span><span>Culture</span><span>Careers</span></div>
<button class="cta">Contact Us</button>
</nav>
<section class="hero">
<div class="fold"></div>
<div class="fold2"></div>
<span class="eyebrow">VISION</span>
<h1>Building the innovation of everyday clothing, food, and living.</h1>
<p>Drop your laundry into the collection box before 10pm — get it back clean before noon the next day.</p>
<div class="row">
<button class="btn-hero-primary">See Open Roles</button>
<button class="btn-hero-muted">Visit Website</button>
</div>
</section>
<section class="services">
<span class="sec-eyebrow">OUR BUSINESS</span>
<div class="cardrow">
<div class="scard c1"><div class="chip"></div><h3>LaundryGo Pickup</h3><p>Contactless mobile laundry, collected and delivered on a nightly cycle.</p></div>
<div class="scard c2"><div class="chip"></div><h3>LaundryGo 24</h3><p>Smart self-service laundromats open around the clock in every neighborhood.</p></div>
<div class="scard c3"><div class="chip"></div><h3>Hotel & Business</h3><p>Large-scale linen and laundry infrastructure for premium hotel partners.</p></div>
</div>
</section>
<section class="stats">
<div class="stat"><div class="num"><span>2.4M+</span></div><div class="lbl">MEMBERS</div></div>
<div class="stat"><div class="num"><span>58M+</span></div><div class="lbl">LOADS WASHED</div></div>
<div class="stat"><div class="num"><span>11.2M+</span></div><div class="lbl">TOTAL ORDERS</div></div>
<div class="stat"><div class="num"><span>₩340B+</span></div><div class="lbl">TOTAL INVESTED</div></div>
</section>
<footer>
<span>© LaundryGo</span>
<span>LaundryGo · Business · Culture · Careers</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f6f0; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f6f0; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #607380; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #0f193f; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #f7f6f0; color: #0f193f;
border: 1px solid #0f193f; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #f7f6f0; color: #0d0d0d;
border: 1px solid #bcbcb7; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #607380; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ec2c3e; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f6f0; color:#212121; box-sizing:border-box; position:relative;
font-family:'Lato','Karla',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f7f6f0; }
.brand { font-family:'Karla',sans-serif; font-size:15px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#0f193f; margin:0; }
.navlinks { display:flex; gap:24px; font-family:'Karla',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#607380; }
.navlinks span.active { color:#0f193f; border-bottom:2px solid #0f193f; padding-bottom:4px; }
.search-pill { background:#fff; border-radius:999px; padding:8px 18px; font-size:12px; color:#607380; }
.hero { background:#0f193f; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:20px 32px; height:110px; }
.hero h1 { font-family:'Karla',sans-serif; font-size:26px; font-weight:700; margin:0; letter-spacing:-0.4px; }
.hero p { font-size:13px; margin:4px 0 0; color:#c7cde0; }
.hero-cta { background:#ec2c3e; color:#fff; border:none; border-radius:999px; padding:12px 26px; font-family:'Karla',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.3px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:20px 32px; }
.card { background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.card-img { height:120px; position:relative; display:flex; align-items:center; justify-content:center; }
.card:nth-child(1) .card-img { background:#e87621; }
.card:nth-child(2) .card-img { background:#00b4e1; }
.card:nth-child(3) .card-img { background:#aa5ea3; }
.card:nth-child(4) .card-img { background:#4cbea0; }
.toy-shape { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,0.35); }
.badge-new { position:absolute; top:8px; left:8px; background:#ec2c3e; color:#fff; font-family:'Karla',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.card-body { padding:10px 12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card-body .stars { color:#ffdf00; font-size:11px; }
.card-body h3 { font-family:'Karla',sans-serif; font-size:13px; font-weight:600; margin:0; color:#0d0d0d; }
.card-body .price { font-size:14px; color:#ec2c3e; font-weight:400; }
.age-badge { align-self:flex-start; background:#4cbea0; color:#fff; font-family:'Karla',sans-serif; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.strip { display:flex; gap:12px; padding:0 32px; }
.cat-tab { flex:1; text-align:center; padding:10px; border-radius:999px; font-family:'Karla',sans-serif; font-size:12px; font-weight:600; text-transform:uppercase; }
.cat-tab.active { background:#0f193f; color:#fff; }
.cat-tab:not(.active) { background:#f2f3ee; color:#607380; }
footer { position:absolute; bottom:0; left:0; right:0; background:#0f193f; color:#d1d1db; padding:12px 32px;
display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Baby Einstein</p>
<div class="navlinks"><span class="active">Newborn</span><span>Infant</span><span>Toddler</span><span>Bundles</span></div>
<div class="search-pill">🔍 Search toys</div>
</nav>
<div class="hero">
<div>
<h1>Curiosity starts here</h1>
<p>Wooden blocks, activity gyms, and musical toys built for tiny hands and big eyes.</p>
</div>
<button class="hero-cta">Shop New Arrivals</button>
</div>
<div class="strip">
<div class="cat-tab active">All Toys</div>
<div class="cat-tab">Activity Gyms</div>
<div class="cat-tab">Musical</div>
<div class="cat-tab">Wooden Blocks</div>
<div class="cat-tab">Bath Time</div>
</div>
<div class="grid">
<div class="card">
<div class="card-img"><div class="badge-new">New</div><div class="toy-shape"></div></div>
<div class="card-body"><span class="age-badge">0-6 Months</span><h3>Curiosity Activity Gym</h3><div class="stars">★★★★★</div><span class="price">$59.99</span></div>
</div>
<div class="card">
<div class="card-img"><div class="toy-shape"></div></div>
<div class="card-body"><span class="age-badge">6-12 Months</span><h3>Discover & Play Piano</h3><div class="stars">★★★★☆</div><span class="price">$44.99</span></div>
</div>
<div class="card">
<div class="card-img"><div class="toy-shape"></div></div>
<div class="card-body"><span class="age-badge">12-24 Months</span><h3>Wooden Stacking Blocks</h3><div class="stars">★★★★★</div><span class="price">$32.99</span></div>
</div>
<div class="card">
<div class="card-img"><div class="badge-new">New</div><div class="toy-shape"></div></div>
<div class="card-body"><span class="age-badge">2-4 Years</span><h3>World of Colors Puzzle</h3><div class="stars">★★★★☆</div><span class="price">$27.99</span></div>
</div>
</div>
<footer>
<span>© Baby Einstein</span>
<span>Baby Einstein · Shop · Learn · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f5; color: #141413;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f5; color: #141413;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #141413; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6c6a64; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #cc785c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #faf9f5; color: #141413;
border: 1px solid #cc785c; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #faf9f5; color: #141413;
border: 1px solid #c0c0bc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6a64; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #efe9de; color: #141413;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf9f5; color:#141413; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia, "Times New Roman", Times, serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:500; }
.spike { width:14px; height:14px; position:relative; }
.spike::before, .spike::after { content:''; position:absolute; left:50%; top:50%; width:14px; height:2px;
background:#141413; transform:translate(-50%,-50%) rotate(0deg); }
.spike::after { transform:translate(-50%,-50%) rotate(90deg); }
.navlinks { display:flex; gap:20px; font-size:13px; }
.btnc { background:#cc785c; color:#fff; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:500; }
.hero { display:flex; align-items:center; gap:28px; padding:14px 32px; height:230px; }
.hero .left { flex:1; }
.hero h1 { font-size:38px; font-weight:400; letter-spacing:-1.2px; line-height:1.08; margin:0 0 10px; }
.hero p { font-size:15px; color:#3d3d3a; margin:0 0 16px; max-width:340px; }
.hero .row { display:flex; gap:10px; }
.btn2 { background:#faf9f5; color:#141413; border:1px solid #e6dfd8; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:500; }
.illus { flex:1; height:190px; border-radius:16px; background:#efe9de; position:relative; overflow:hidden; }
.illus svg { position:absolute; inset:0; margin:auto; }
.codewrap { margin:0 32px; background:#181715; border-radius:12px; padding:20px; height:196px; }
.codewrap .bar { display:flex; gap:6px; margin-bottom:12px; }
.dot { width:9px; height:9px; border-radius:50%; }
.d1 { background:#e8907e; } .d2 { background:#e8a55a; } .d3 { background:#5db872; }
.codewrap pre { margin:0; color:#a09d96; font-size:12px; font-family:"Courier New", monospace; line-height:1.7; }
.codewrap .kw { color:#e8a55a; } .codewrap .str { color:#5db8a6; } .codewrap .fn { color:#cc785c; }
.ctaband { margin:16px 32px 0; background:#cc785c; color:#fff; border-radius:12px; padding:22px 32px;
display:flex; align-items:center; justify-content:space-between; }
.ctaband h2 { font-size:22px; font-weight:400; margin:0; }
.ctaband .btn3 { background:#faf9f5; color:#141413; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav>
<div class="brand"><span class="spike"></span>Claude</div>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Research</span><span>Pricing</span></div>
<span class="btnc">Try Claude</span>
</nav>
<div class="hero">
<div class="left">
<h1 class="serif">Meet your<br>thinking partner</h1>
<p>Claude is a family of AI models built by Anthropic to help you think, write, and reason.</p>
<div class="row"><span class="btnc">Try Claude</span><span class="btn2">Learn more</span></div>
</div>
<div class="illus">
<svg width="220" height="150" viewBox="0 0 220 150">
<path d="M10 120 Q60 40 110 90 T210 30" stroke="#cc785c" stroke-width="3" fill="none"/>
<circle cx="110" cy="90" r="6" fill="#181715"/>
<circle cx="10" cy="120" r="4" fill="#181715"/>
<circle cx="210" cy="30" r="4" fill="#181715"/>
</svg>
</div>
</div>
<div class="codewrap">
<div class="bar"><span class="dot d1"></span><span class="dot d2"></span><span class="dot d3"></span></div>
<pre><span class="kw">import</span> anthropic
client = anthropic.Client()
response = client.messages.<span class="fn">create</span>(
model=<span class="str">"claude-opus-4"</span>,
messages=[{ "role": "user", "content": "Hello, Claude" }]
)</pre>
</div>
<div class="ctaband">
<h2 class="serif">Ready to start building?</h2>
<span class="btn3">Get API access</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f8fa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f8fa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F7F8FA; color:#0D0E10; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; display:flex; align-items:center; }
.hero { position:relative; z-index:2; width:460px; padding:0 56px; display:flex; flex-direction:column; gap:16px; }
.grad { background:linear-gradient(135deg,#00C4CC,#7D2AE8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.word { font-size:46px; font-weight:800; letter-spacing:-1pt; line-height:1.05; margin:0; }
.tag { font-size:16px; color:#6F7178; line-height:1.5; max-width:340px; margin:0; }
.search { margin-top:6px; height:46px; border-radius:14px; background:#FFFFFF; border:1pt solid #E6E8EC;
display:flex; align-items:center; padding:0 16px; gap:10px; max-width:340px; }
.search i { width:14px; height:14px; border:2pt solid #6F7178; border-radius:50%; }
.search span { font-size:14px; color:#6F7178; }
.row { display:flex; gap:12px; align-items:center; }
.cta { background:linear-gradient(135deg,#00C4CC,#7D2AE8); color:#FFFFFF; border-radius:999px; padding:13px 26px; font-weight:700; font-size:15px; }
.cta2 { background:transparent; color:#0D0E10; border:1.5pt solid #E6E8EC; border-radius:999px; padding:12px 22px; font-weight:600; font-size:14px; }
.tiles { display:flex; gap:12px; margin-top:8px; }
.tile { display:flex; flex-direction:column; align-items:center; gap:6px; }
.tile i { width:44px; height:44px; border-radius:16px; }
.tile span { font-size:10px; font-weight:600; color:#6F7178; }
.t1 { background:linear-gradient(135deg,#00C4CC,#3B5CFF); }
.t2 { background:linear-gradient(135deg,#7D2AE8,#C13AE0); }
.t3 { background:linear-gradient(135deg,#FF7A59,#FFC24B); }
.t4 { background:linear-gradient(135deg,#1FC77C,#00C4CC); }
.phonewrap { position:relative; z-index:2; width:500px; height:640px; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:296px; height:604px; background:#FFFFFF; border:1pt solid #E6E8EC; border-radius:46px;
box-shadow:0 30px 80px rgba(13,14,16,0.14); padding:0 16px; overflow:hidden; }
.notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#0D0E10; border-radius:12px; z-index:6; }
.pgreet { display:flex; justify-content:space-between; align-items:center; padding:36px 2px 12px; }
.pgreet b { font-size:20px; font-weight:800; letter-spacing:-0.3pt; }
.pavatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#00C4CC,#7D2AE8); }
.psearch { height:42px; border-radius:13px; background:#F7F8FA; display:flex; align-items:center; padding:0 14px; gap:8px; margin-bottom:14px; }
.psearch i { width:12px; height:12px; border:2pt solid #6F7178; border-radius:50%; }
.psearch span { font-size:12px; color:#6F7178; }
.ptiles { display:flex; gap:10px; margin-bottom:16px; }
.ptile { display:flex; flex-direction:column; align-items:center; gap:5px; }
.ptile i { width:40px; height:40px; border-radius:14px; }
.ptile span { font-size:9px; color:#6F7178; font-weight:600; }
.psechead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.psechead b { font-size:14px; font-weight:700; }
.psechead span { font-size:11px; color:#00C4CC; font-weight:600; }
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.pgrid div { position:relative; aspect-ratio:3/4; border-radius:11px; }
.g1 { background:linear-gradient(160deg,#00C4CC,#3B5CFF); }
.g2 { background:linear-gradient(160deg,#7D2AE8,#C13AE0); }
.g3 { background:linear-gradient(160deg,#FF7A59,#FFC24B); }
.pro { position:absolute; top:5px; right:5px; background:#FFC24B; color:#1A1205; font-size:7px; font-weight:800; padding:2px 5px; border-radius:5px; }
.ptabbar { position:absolute; left:0; right:0; bottom:0; height:66px; background:rgba(255,255,255,0.96); border-top:0.5pt solid #E6E8EC;
display:flex; align-items:center; justify-content:space-around; }
.tdot { width:18px; height:18px; border-radius:6px; background:#A4A6AD; }
.tdot.on { background:#0D0E10; }
.fab { width:44px; height:44px; border-radius:16px; background:linear-gradient(135deg,#00C4CC,#7D2AE8);
box-shadow:0 6px 16px rgba(125,42,232,0.4); margin-top:-20px; display:flex; align-items:center; justify-content:center; }
.fab i { width:14px; height:2pt; background:#fff; position:relative; }
.fab i::after { content:''; position:absolute; width:2pt; height:14px; background:#fff; left:6px; top:-6px; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<div style="font-size:12px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:#7D2AE8;margin-bottom:2px;">Canva (iOS)</div>
<h1 class="word">Anyone can <span class="grad">design</span>.</h1>
<p class="tag">A rounded, gradient-forward canvas — templates, drag-and-drop elements, and a create button lifted right into the tab bar.</p>
<div class="search"><i></i><span>Search templates, photos…</span></div>
<div class="row">
<div class="cta">Create a design</div>
<div class="cta2">Browse templates</div>
</div>
<div class="tiles">
<div class="tile"><i class="t1"></i><span>Post</span></div>
<div class="tile"><i class="t2"></i><span>Deck</span></div>
<div class="tile"><i class="t3"></i><span>Doc</span></div>
<div class="tile"><i class="t4"></i><span>Video</span></div>
</div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="notch"></div>
<div class="pgreet"><b>Hi, Mel</b><span class="pavatar"></span></div>
<div class="psearch"><i></i><span>Search templates, photos…</span></div>
<div class="ptiles">
<div class="ptile"><i class="t1"></i><span>Post</span></div>
<div class="ptile"><i class="t2"></i><span>Deck</span></div>
<div class="ptile"><i class="t3"></i><span>Doc</span></div>
<div class="ptile"><i class="t4"></i><span>Video</span></div>
</div>
<div class="psechead"><b>Recommended</b><span>See all</span></div>
<div class="pgrid">
<div class="g1"><span class="pro">PRO</span></div>
<div class="g2"></div>
<div class="g3"><span class="pro">PRO</span></div>
</div>
<div class="ptabbar">
<span class="tdot"></span><span class="tdot on"></span>
<span class="fab"><i></i></span>
<span class="tdot"></span><span class="tdot"></span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff5e1; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff5e1; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c786f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff5e1; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fff5e1; color: #111111;
border: 1px solid #d9d1c0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c786f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fff7e6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFF5E1; color:#451400; box-sizing:border-box;
font-family:'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.caps { font-family:'Archivo', -apple-system, sans-serif; text-transform:uppercase; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 26px;
background:#FFFFFF; border-bottom:1px solid #E8DCC4; }
.loc { font-size:14px; font-weight:700; }
.title { font-family:'Archivo'; font-size:20px; font-weight:800; letter-spacing:0.3px; }
.bagwrap { position:relative; font-size:20px; }
.bagcount { position:absolute; top:-6px; right:-8px; background:#A81612; color:#fff; font-size:10px;
font-weight:800; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; }
.steps { display:flex; gap:4px; padding:10px 26px 0; }
.steps div { flex:1; height:4px; border-radius:4px; background:#E8DCC4; }
.steps div.on { background:#A81612; }
.wrap { display:flex; height:520px; }
.left { width:640px; overflow:hidden; padding:12px 26px 0; }
.sec { margin-bottom:6px; }
.sec h4 { font-family:'Archivo'; font-size:16px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
margin:16px 0 6px; padding-bottom:6px; border-bottom:1px solid #E8DCC4; }
.row { display:flex; align-items:center; padding:9px 0; }
.row.sel { background:#F4E2E1; margin:0 -12px; padding:9px 12px; border-radius:6px; border-left:3px solid #A81612; }
.rname { font-size:15px; font-weight:700; }
.rmeta { font-size:11px; color:#8A6B4F; margin-top:1px; }
.sel-mark { margin-left:auto; width:22px; height:22px; border-radius:50%; border:2px solid #E8DCC4; }
.sel-mark.on { background:#A81612; border-color:#A81612; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:12px; }
.sel-mark.sq { border-radius:6px; }
.right { width:320px; padding:16px 22px 0; border-left:1px solid #E8DCC4; }
.foil { height:110px; border-radius:12px; background:linear-gradient(120deg,#D9D4C9,#A8A296); position:relative;
overflow:hidden; display:flex; align-items:flex-end; padding:12px; margin-bottom:14px; }
.foil .cap { font-family:'Archivo Narrow'; font-size:18px; font-weight:800; letter-spacing:0.3px; }
.rewards { text-align:center; margin-top:6px; }
.ring { width:100px; height:100px; border-radius:50%; margin:0 auto;
background:conic-gradient(#A81612 0deg 280deg, #E8DCC4 280deg 360deg); display:flex; align-items:center; justify-content:center; }
.ring-in { width:78px; height:78px; border-radius:50%; background:#FFF5E1; display:flex; flex-direction:column;
align-items:center; justify-content:center; }
.ring-in .n { font-family:'Archivo'; font-size:22px; font-weight:800; color:#A81612; }
.ring-in .l { font-family:'Archivo'; font-size:9px; font-weight:700; letter-spacing:0.4px; color:#8A6B4F; }
.rewards-note { font-size:11px; color:#8A6B4F; margin-top:8px; }
.footer { position:absolute; bottom:0; left:0; right:0; height:60px; background:#FFFFFF;
border-top:1px solid #E8DCC4; display:flex; align-items:center; padding:0 26px; gap:14px; }
.footer .tot { font-size:14px; font-weight:700; }
.addbtn { margin-left:auto; background:#A81612; color:#fff; font-family:'Archivo'; font-size:15px; font-weight:800;
letter-spacing:0.6px; text-transform:uppercase; border-radius:8px; padding:12px 24px; }
</style></head>
<body>
<div class="topbar">
<div class="loc">Pickup · Downtown ▾</div>
<div class="title caps">Burrito Bowl</div>
<div class="bagwrap">📚<div class="bagcount">3</div></div>
</div>
<div class="steps"><div class="on"></div><div class="on"></div><div></div><div></div><div></div></div>
<div class="wrap">
<div class="left">
<div class="sec">
<h4>Rice</h4>
<div class="row sel"><div><div class="rname">White Rice</div><div class="rmeta">210 Cal</div></div><div class="sel-mark on">✓</div></div>
<div class="row"><div><div class="rname">Brown Rice</div><div class="rmeta">210 Cal</div></div><div class="sel-mark"></div></div>
</div>
<div class="sec">
<h4>Protein</h4>
<div class="row"><div><div class="rname">Chicken</div><div class="rmeta">180 Cal</div></div><div class="sel-mark"></div></div>
<div class="row sel"><div><div class="rname">Steak</div><div class="rmeta">150 Cal · +$2.00</div></div><div class="sel-mark on">✓</div></div>
<div class="row"><div><div class="rname">Sofritas</div><div class="rmeta">150 Cal</div></div><div class="sel-mark"></div></div>
</div>
<div class="sec">
<h4>Toppings</h4>
<div class="row sel"><div><div class="rname">Fajita Veggies</div><div class="rmeta">20 Cal</div></div><div class="sel-mark sq on">✓</div></div>
<div class="row sel"><div><div class="rname">Black Beans</div><div class="rmeta">130 Cal</div></div><div class="sel-mark sq on">✓</div></div>
<div class="row"><div><div class="rname">Cheese</div><div class="rmeta">110 Cal</div></div><div class="sel-mark sq"></div></div>
</div>
</div>
<div class="right">
<div style="font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:#8A6B4F;margin-bottom:6px;">Chipotle (iOS)</div>
<div class="foil"><div class="cap caps">Build your own</div></div>
<div class="rewards">
<div class="ring"><div class="ring-in"><div class="n">1,250</div><div class="l caps">Points</div></div></div>
<div class="rewards-note">1,375 points until your next free entrée</div>
</div>
</div>
</div>
<div class="footer">
<div class="tot">Total · <b>$9.65</b></div>
<div class="addbtn caps">Add to bag</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c64e6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c64e6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb4ee; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbbd41; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c64e6; color: #fbbd41;
border: 1px solid #fbbd41; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c64e6; color: #f5f5f5;
border: 1px solid #317be8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb4ee; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3272cc; color: #fbbd41;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141618; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.band { padding:26px 40px; }
.band.dark { background:#283240; color:#ffffff; }
.band.tint { background:#f3f6ff; }
.band.soft { background:#fafbfc; }
.brand { font-size:20px; font-weight:700; color:#0c64e6; }
.headline { font-size:28px; font-weight:700; margin:10px 0 6px; line-height:1.3; max-width:640px; }
.sub { font-size:15px; color:#606a76; margin:0 0 16px; max-width:560px; }
.band.dark .sub { color:rgba(255,255,255,0.75); }
.cta-row { display:flex; gap:10px; }
.cta { border:none; border-radius:7px; height:52px; font-size:15px; font-weight:500; padding:0 20px; }
.cta-yellow { background:#fbbd41; color:#000000; }
.cta-blue { background:#3e79ff; color:#ffffff; }
.cta-dark { background:#2f3943; color:#ffffff; }
.refund-card { margin-top:-18px; margin-left:40px; margin-right:40px; background:#ffffff; border-radius:16px;
padding:22px 24px; box-shadow:none; border:1px solid #f0f1f2; display:flex; justify-content:space-between; align-items:center; }
.refund-card .lbl { font-size:13px; color:#788391; font-weight:500; }
.refund-card .amt { font-size:36px; font-weight:700; color:#0c64e6; margin-top:4px; }
.refund-card .chip { background:#f0f1f2; color:#788391; border-radius:10px; height:33px; padding:0 12px;
font-size:12px; font-weight:700; display:flex; align-items:center; }
.grid3 { display:flex; gap:16px; padding:18px 40px 0; }
.mini { flex:1; background:#ffffff; border:1px solid #f0f1f2; border-radius:16px; padding:16px; }
.mini .k { font-size:12px; color:#788391; font-weight:700; }
.mini .v { font-size:20px; font-weight:700; margin-top:6px; color:#141618; }
.kakao-row { display:flex; align-items:center; gap:14px; padding:18px 40px 0; }
.kakao-btn { background:#fae100; color:#141618; border-radius:18px; height:56px; padding:0 20px;
font-size:16px; font-weight:700; border:none; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 40px; border-top:1px solid #f0f1f2;
font-size:11px; color:#a4acb4; background:#ffffff; }
</style></head>
<body>
<div class="band">
<span class="brand">3o3</span>
<div class="headline">Find your hidden refund money</div>
<p class="sub">Everyday hidden money, found simply — tax refunds and more, in one place.</p>
<div class="cta-row">
<button class="cta cta-yellow">Check My Refund</button>
<button class="cta cta-blue">File Safely Now</button>
<button class="cta cta-dark">Am I Eligible?</button>
</div>
</div>
<div class="refund-card">
<div><div class="lbl">Your estimated refund</div><div class="amt">₩487,200</div></div>
<span class="chip">How this is calculated</span>
</div>
<div class="grid3">
<div class="mini"><div class="k">Cumulative filers</div><div class="v">7,208,747</div></div>
<div class="mini"><div class="k">Total refunds processed</div><div class="v">₩2 trillion+</div></div>
<div class="mini"><div class="k">Average processing time</div><div class="v">3–5 days</div></div>
</div>
<div class="band dark" style="margin-top:18px;">
<div class="headline" style="font-size:20px;">Find hidden money you didn't know you had</div>
<p class="sub">A simple, honest platform — every claim comes with its basis.</p>
</div>
<div class="kakao-row">
<button class="kakao-btn">Continue with Kakao</button>
<span style="font-size:12px; color:#788391;">The app's single, simple sign-in</span>
</div>
<footer>
(Corp.) Jobis & Villains · CEO on file · Business registration on file · This is not tax consultation
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #224099; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #224099; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96a4cc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0f1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #224099; color: #ffffff;
border: 1px solid #0b0f1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #224099; color: #f5f5f5;
border: 1px solid #445da8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96a4cc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e3885; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0F1C; color:#EDF0F7; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums; }
* { box-sizing:border-box; }
.screen { display:flex; flex-direction:column; width:960px; height:640px; }
main { flex:1; display:grid; grid-template-columns:1fr 320px; min-height:0; }
.nowplaying { position:relative; display:flex; flex-direction:column; align-items:center;
background:linear-gradient(180deg, #5B3A9E 0%, #1A2240 46%, #0B0F1C 82%); padding:18px 24px 22px; }
.np-topbar { width:100%; display:flex; align-items:center; justify-content:space-between; }
.np-chev { font-size:20px; color:#EDF0F7; opacity:0.9; }
.np-station { text-align:center; }
.np-eyebrow { font-size:11px; font-weight:700; letter-spacing:1pt; text-transform:uppercase; color:#9AA3BD; }
.np-name { font-size:13px; font-weight:700; margin-top:1px; }
.np-more { font-size:18px; color:#9AA3BD; letter-spacing:2px; }
.album { width:150px; height:150px; margin-top:14px; border-radius:10px;
background:linear-gradient(135deg,#8f5fd6,#3a2a63); box-shadow:rgba(0,0,0,0.7) 0 24px 50px -16px; }
.track-title { font-size:20px; font-weight:800; margin-top:14px; letter-spacing:-0.3px; text-align:center; }
.track-artist { font-size:14px; font-weight:500; color:#9AA3BD; margin-top:3px; }
.track-album { font-size:12px; font-weight:500; color:#646E8C; margin-top:1px; }
.scrub-wrap { width:78%; margin-top:16px; }
.scrub-track { width:100%; height:4px; background:#1E2538; border-radius:2px; position:relative; }
.scrub-fill { position:absolute; left:0; top:0; height:100%; width:44%; background:#3668FF; border-radius:2px; }
.scrub-knob { position:absolute; left:44%; top:50%; width:12px; height:12px; margin-left:-6px; margin-top:-6px; border-radius:50%; background:#fff; }
.scrub-times { display:flex; justify-content:space-between; font-size:11px; color:#646E8C; margin-top:6px; }
.transport { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:14px; }
.thumb { font-size:22px; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.thumb-up { color:#fff; background:#3668FF; }
.thumb-down { color:#9AA3BD; border:1.5px solid #9AA3BD; background:transparent; }
.skipbtn { font-size:22px; color:#EDF0F7; }
.play-btn { width:58px; height:58px; border-radius:50%; background:#3668FF;
box-shadow:rgba(54,104,255,0.7) 0 10px 26px -8px; display:flex; align-items:center; justify-content:center; }
.play-btn .glyph { width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:15px solid #fff; margin-left:4px; }
.rightcol { background:#141A2B; padding:20px 18px; display:flex; flex-direction:column; overflow:hidden; }
.rc-title { font-size:19px; font-weight:800; letter-spacing:-0.2px; margin-bottom:10px; }
.srow { display:flex; align-items:center; gap:10px; height:58px; border-radius:12px; padding:0 8px; }
.srow.active { background:#1E2538; }
.sart { width:42px; height:42px; border-radius:8px; flex:0 0 42px; }
.sinfo { flex:1; min-width:0; }
.sname { font-size:14px; font-weight:700; }
.ssub { font-size:11px; color:#9AA3BD; margin-top:2px; }
.eq { display:flex; align-items:flex-end; gap:2px; height:16px; }
.eq span { width:3px; background:#3668FF; border-radius:1px; }
.tabbar { flex:0 0 62px; display:flex; align-items:center; justify-content:space-around;
background:#0B0F1C; border-top:0.5px solid #28304A; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab-dot { width:8px; height:8px; border-radius:2px; }
.tab.active .tab-dot { background:#EDF0F7; }
.tab:not(.active) .tab-dot { background:none; border:1.5px solid #646E8C; }
.tab-label { font-size:10px; font-weight:600; }
.tab.active .tab-label { color:#EDF0F7; }
.tab:not(.active) .tab-label { color:#646E8C; }
</style></head>
<body>
<div class="screen">
<main>
<div class="nowplaying">
<div class="np-topbar">
<span class="np-chev">⌄</span>
<div class="np-station">
<div class="np-eyebrow">Station</div>
<div class="np-name">Pandora (iOS) Frequencies Radio</div>
</div>
<span class="np-more">⋯</span>
</div>
<div class="album"></div>
<div class="track-title">Neon Reverie</div>
<div class="track-artist">The Glass Hours</div>
<div class="track-album">Neon Reverie · 2023</div>
<div class="scrub-wrap">
<div class="scrub-track"><div class="scrub-fill"></div><div class="scrub-knob"></div></div>
<div class="scrub-times"><span>1:42</span><span>-2:18</span></div>
</div>
<div class="transport">
<div class="thumb thumb-down">▽</div>
<span class="skipbtn">‹‹</span>
<div class="play-btn"><div class="glyph"></div></div>
<span class="skipbtn">››</span>
<div class="thumb thumb-up">△</div>
</div>
</div>
<div class="rightcol">
<div class="rc-title">My Collection</div>
<div class="srow active">
<div class="sart" style="background:linear-gradient(135deg,#8f5fd6,#3a2a63);"></div>
<div class="sinfo"><div class="sname">Neon Frequencies Radio</div><div class="ssub">Now playing · The Glass Hours</div></div>
<div class="eq"><span style="height:16px;"></span><span style="height:9px;"></span><span style="height:13px;"></span><span style="height:6px;"></span></div>
</div>
<div class="srow">
<div class="sart" style="background:linear-gradient(135deg,#3668FF,#1a2b6b);"></div>
<div class="sinfo"><div class="sname">Indie Folk Roots</div><div class="ssub">Station · 312 thumbs up</div></div>
</div>
<div class="srow">
<div class="sart" style="background:linear-gradient(135deg,#c4784a,#5c2f18);"></div>
<div class="sinfo"><div class="sname">Late Night Jazz Piano</div><div class="ssub">Station · 89 thumbs up</div></div>
</div>
<div class="srow">
<div class="sart" style="background:linear-gradient(135deg,#2f9e6b,#123527);"></div>
<div class="sinfo"><div class="sname">Sunday Morning Acoustic</div><div class="ssub">Station · 204 thumbs up</div></div>
</div>
</div>
</main>
<div class="tabbar">
<div class="tab active"><span class="tab-dot"></span><span class="tab-label">For You</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Browse</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">My Collection</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Recents</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab587; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #024d58; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6700; color: #024d58;
border: 1px solid #024d58; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6700; color: #f5f5f5;
border: 1px solid #fd7e27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab587; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7630e; color: #024d58;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2d3033; box-sizing:border-box;
font-family:"Poppins", "Noto Sans TC", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
.darkbar { background:#1e2022; color:#fff; font-size:11px; text-align:center; padding:6px 0; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:500; }
.navlinks { display:flex; gap:20px; font-size:14px; }
.navlinks span.on { color:#ff6700; }
.right { display:flex; gap:10px; align-items:center; }
.login-pill { color:#2d3033; font-size:13px; }
.hero { text-align:center; padding:16px 40px 14px; }
.hero h1 { font-size:32px; font-weight:500; margin:0 0 16px; }
.tabs { display:flex; justify-content:center; gap:6px; margin-bottom:16px; }
.tab { border-radius:40px; height:40px; padding:0 22px; display:flex; align-items:center; font-size:15px; }
.tab.on { background:#ff6700; color:#fff; }
.tab.off { color:#838d9c; }
.cards { display:flex; gap:14px; padding:0 40px; }
.card { flex:1; background:#e3e7ee; border-radius:20px; height:170px; padding:14px; display:flex;
flex-direction:column; justify-content:flex-end; }
.card .name { font-size:14px; color:#2d3033; margin-bottom:6px; }
.card .price { font-size:16px; color:#ff6700; font-weight:600; }
.band { margin-top:16px; background:#f5f7f8; padding:16px 40px; display:flex; justify-content:space-between; align-items:center; }
.band h2 { font-size:18px; font-weight:500; margin:0 0 4px; }
.band p { font-size:12px; color:#515a68; margin:0; }
.band .badge { background:#ff6700; color:#fff; border-radius:9999px; padding:4px 12px; font-size:12px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #e3e7ee;
padding:10px 40px; display:flex; justify-content:space-between; font-size:11px; color:#838d9c; }
</style></head>
<body>
<div class="darkbar">Open Possible · 5G plans now available nationwide</div>
<nav>
<div class="brand">Taiwan Mobile</div>
<div class="navlinks"><span class="on">Personal</span><span>Family</span><span>Business</span></div>
<div class="right"><span class="login-pill">Log in</span></div>
</nav>
<div class="hero">
<h1>What plan are you looking for today?</h1>
<div class="tabs">
<div class="tab on">Phone Plans</div>
<div class="tab off">Devices</div>
<div class="tab off">Fiber</div>
<div class="tab off">SIM Only</div>
</div>
</div>
<div class="cards">
<div class="card"><span class="name">Video Bundle Plan</span><span class="price">Popular</span></div>
<div class="card"><span class="name">Speed & Value Plan</span><span class="price">Bestseller</span></div>
<div class="card"><span class="name">Exclusive Access Plan</span><span class="price">New</span></div>
</div>
<div class="band">
<div><h2>All of digital life, one monthly plan</h2><p>Streaming, gaming, and roaming bundled together.</p></div>
<div class="badge">Limited offer</div>
</div>
<footer><span>© Taiwan Mobile</span><span>Taiwan Mobile · myfone · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.05em; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; background: #ffc700; color: #3f3f3f;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; background: #2a2a2a; color: #ffffff;
border: 1px solid #ffc700; border-radius: 2px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #d4d4d4; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.05em; background: #fff3cc; color: #7a5a00;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#2a2a2a; border-bottom:3px solid #ffc700; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:600; color:#fff; }
.navlinks span:first-child { color:#ffc700; }
.cart { font-size:12px; font-weight:600; color:#ffc700; }
.toolbar { display:flex; gap:10px; padding:12px 28px; background:#f5f5f5; align-items:center; }
.search { flex:1; height:32px; border:1px solid #d4d4d4; border-radius:2px; background:#fff; display:flex; align-items:center; padding:0 10px; font-size:12px; color:#767676; }
.btnq { background:#ffc700; color:#3f3f3f; font-weight:700; font-size:12px; padding:8px 16px; border-radius:2px; }
.content { display:flex; padding:14px 28px; gap:14px; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; flex:2; }
.card { border:1px solid #d4d4d4; padding:12px; display:flex; gap:10px; }
.thumb { width:64px; height:64px; background:linear-gradient(135deg,#3f3f3f,#1a1a1a); flex-shrink:0; position:relative; }
.thumb::after { content:''; position:absolute; left:50%; top:50%; width:22px; height:22px; border-radius:50%; border:3px solid #ffc700; transform:translate(-50%,-50%); }
.info h3 { font-size:13px; font-weight:600; margin:0 0 4px; }
.part { font-family:'Courier New',monospace; font-size:11px; font-weight:600; letter-spacing:.5px; background:#fff3cc; color:#7a5a00; padding:2px 6px; display:inline-block; margin-bottom:4px; }
.stock { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 6px; color:#fff; display:inline-block; margin-left:4px; }
.stock.in { background:#27ae60; }
.stock.out { background:#c0392b; }
.price { font-size:14px; font-weight:700; margin-top:4px; }
.side { flex:1; background:#2a2a2a; padding:16px; color:#fff; }
.side h4 { font-size:13px; font-weight:700; margin:0 0 10px; color:#ffc700; text-transform:uppercase; letter-spacing:.5px; }
.specrow { display:flex; justify-content:space-between; font-size:11px; padding:6px 0; border-bottom:1px solid #3f3f3f; }
.specrow span:first-child { color:#a0a0a0; }
.strip { background:#ffc700; color:#3f3f3f; padding:14px 28px; display:flex; justify-content:space-between; align-items:center; position:absolute; bottom:0; left:0; right:0; }
.strip h4 { font-size:16px; font-weight:700; margin:0; }
.strip p { font-size:11px; margin:2px 0 0; }
.btnbig { background:#2a2a2a; color:#fff; font-weight:700; font-size:12px; padding:10px 22px; border-radius:2px; }
</style></head>
<body>
<nav>
<p class="brand">Barker Air And Hydraulics</p>
<div class="navlinks"><span>Cylinders</span><span>Valves</span><span>Fittings</span><span>Pneumatics</span></div>
<div class="cart">Quote Cart (3)</div>
</nav>
<div class="toolbar">
<div class="search">Search by part number...</div>
<div class="btnq">Search</div>
</div>
<div class="content">
<div class="grid">
<div class="card">
<div class="thumb"></div>
<div class="info">
<span class="part">HYD-2200-4B</span>
<span class="stock in">In Stock</span>
<h3>2-Stage Hydraulic Cylinder</h3>
<div class="price">$412.00</div>
</div>
</div>
<div class="card">
<div class="thumb"></div>
<div class="info">
<span class="part">PNU-0871-R</span>
<span class="stock in">In Stock</span>
<h3>Rodless Pneumatic Actuator</h3>
<div class="price">$268.50</div>
</div>
</div>
<div class="card">
<div class="thumb"></div>
<div class="info">
<span class="part">VLV-3390-K</span>
<span class="stock out">Backorder</span>
<h3>Directional Control Valve</h3>
<div class="price">$189.00</div>
</div>
</div>
<div class="card">
<div class="thumb"></div>
<div class="info">
<span class="part">FIT-1145-S</span>
<span class="stock in">In Stock</span>
<h3>Stainless Push-to-Connect Fitting</h3>
<div class="price">$14.25</div>
</div>
</div>
</div>
<div class="side">
<h4>Specifications</h4>
<div class="specrow"><span>Bore</span><span>4.00 in</span></div>
<div class="specrow"><span>Stroke</span><span>12.00 in</span></div>
<div class="specrow"><span>Max Pressure</span><span>3000 psi</span></div>
<div class="specrow"><span>Rod Diameter</span><span>1.75 in</span></div>
<div class="specrow"><span>Mount Type</span><span>Trunnion</span></div>
</div>
</div>
<div class="strip">
<div><h4>Need a Custom Configuration?</h4><p>Request an engineering quote for bulk orders.</p></div>
<div class="btnbig">Request Quote</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #1174dc; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #1174dc;
border: 1px solid #1174dc; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1ab759; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
border-bottom:1px solid #f2f2f2; }
.brand { font-family:Georgia, serif; font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#4a4a4a; }
.cart { background:#1174dc; color:#fff; font-size:12px; font-weight:600; border-radius:6px; padding:8px 14px; }
main { display:flex; height:582px; }
.stage { width:330px; background:#eff5f8; display:flex; align-items:center; justify-content:center; }
.chair { width:130px; height:200px; position:relative; }
.back { width:100px; height:120px; background:linear-gradient(160deg,#78b5f5,#1174dc); border-radius:16px 16px 6px 6px; margin:0 auto; }
.seat { width:120px; height:16px; background:#111; border-radius:4px; margin:6px auto 0; }
.leg3 { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:6px; height:60px; background:#4a4a4a; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
.status-row { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; border-radius:4px; padding:3px 9px; color:#fff; }
.b-stock { background:#1ab759; } .b-warn { background:#ff9900; }
h1 { font-family:Georgia, serif; font-size:24px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#555555; margin:0; max-width:440px; line-height:1.55; }
.spectable { font-family:'Consolas','Courier New',monospace; font-size:11px; color:#222; background:#f5f5f5;
border-radius:6px; padding:10px 12px; line-height:1.7; margin-top:4px; }
.spectable b { color:#1174dc; }
.filters { display:flex; gap:8px; margin-top:2px; }
.chip { border:1px solid #d3d3d3; border-radius:999px; padding:6px 14px; font-size:12px; }
.chip.on { background:#1174dc; color:#fff; border-color:#1174dc; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.price { font-family:Georgia, serif; font-size:25px; font-weight:700; }
.actions { display:flex; gap:10px; }
.btn-primary { background:#1174dc; color:#fff; border-radius:8px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:600; font-size:13px; }
.btn-secondary { background:#fafafa; border:1px solid #d3d3d3; color:#111; border-radius:8px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav>
<p class="brand">Autonomous AI Chairs</p>
<div class="navlinks"><span>Chairs</span><span>Desks</span><span>Bundles</span><span>Warranty</span></div>
<span class="cart">Cart · 0</span>
</nav>
<main>
<div class="stage">
<div class="chair"><div class="back"></div><div class="seat"></div><div class="leg3"></div></div>
</div>
<div class="info">
<div class="status-row"><span class="badge b-stock">In Stock</span><span class="badge b-warn">Deal — 6h left</span></div>
<h1>ErgoChair Ultra — Mesh Task Chair</h1>
<p class="sub">Full lumbar articulation and adjustable armrests built for people who treat their home office as infrastructure.</p>
<div class="spectable">Weight Capacity: <b>150 kg</b><br>Lumbar Range: <b>±40 mm</b><br>Seat Depth: <b>460–510 mm</b></div>
<div class="filters"><div class="chip on">Black Mesh</div><div class="chip">Grey Mesh</div><div class="chip">Blue Mesh</div></div>
<div class="price-row"><span class="price">$429</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Compare Chairs</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0f0f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0f0f0f;
border: 1px solid #0f0f0f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #0f0f0f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0F0F0F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { width:100%; height:100%; display:flex; flex-direction:column; }
.topbar { height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.logo { display:flex; align-items:center; gap:8px; }
.logo .mark { width:28px; height:20px; border-radius:6px; background:#FF0000; display:flex; align-items:center; justify-content:center; }
.logo .mark svg { width:11px; height:11px; }
.logo b { font-size:19px; font-weight:700; letter-spacing:-0.2px; }
.topicons { display:flex; align-items:center; gap:18px; }
.topicons svg { width:22px; height:22px; }
.avatar-sm { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#3EA6FF,#0F0F0F); }
.chiprow { height:40px; flex-shrink:0; display:flex; align-items:center; gap:8px; padding:0 16px; }
.chip { height:32px; border-radius:16px; background:#F2F2F2; color:#0F0F0F; font-size:13px; font-weight:500;
padding:0 14px; display:flex; align-items:center; }
.chip.active { background:#0F0F0F; color:#FFFFFF; }
.feed { flex:1; min-height:0; padding:0 16px; display:flex; gap:16px; }
.vcard { flex:1; min-width:0; display:flex; flex-direction:column; }
.thumb { position:relative; width:100%; aspect-ratio:16/9; }
.th1 { background:linear-gradient(135deg,#232526,#414345); }
.th2 { background:linear-gradient(135deg,#485563,#29323c); }
.duration { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,0.75); color:#fff; font-size:11px;
font-weight:500; border-radius:4px; padding:2px 5px; }
.livetag { position:absolute; left:6px; top:6px; background:#FF0000; color:#fff; font-size:11px; font-weight:700;
border-radius:4px; padding:2px 6px; display:flex; align-items:center; gap:4px; }
.livetag .dot { width:5px; height:5px; border-radius:50%; background:#fff; }
.meta { display:flex; padding-top:10px; gap:10px; }
.meta .av { width:28px; height:28px; border-radius:50%; flex-shrink:0; }
.av-a { background:linear-gradient(135deg,#FF6B6B,#556270); }
.av-b { background:linear-gradient(135deg,#43C6AC,#191654); }
.metatext { min-width:0; flex:1; }
.vtitle { font-size:15px; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2;
-webkit-box-orient:vertical; overflow:hidden; }
.vsub { font-size:12px; color:#606060; margin-top:3px; }
.moreicon { color:#606060; font-size:16px; flex-shrink:0; }
.miniplayer { height:72px; flex-shrink:0; display:flex; align-items:center; background:#FFFFFF;
box-shadow:0 2px 8px rgba(0,0,0,0.08); padding:0 12px; gap:12px; }
.mini-thumb { width:112px; height:63px; border-radius:4px; flex-shrink:0;
background:linear-gradient(135deg,#8E2DE2,#4A00E0); }
.mini-text { flex:1; min-width:0; }
.mini-title { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-chan { font-size:12px; color:#606060; margin-top:2px; }
.mini-icons { display:flex; align-items:center; gap:16px; }
.mini-icons svg { width:20px; height:20px; }
.tabbar { height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:space-around;
border-top:1px solid #E5E5E5; }
.tab { display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; }
.tab svg { width:22px; height:22px; }
.tab.active svg, .tab.active span { color:#0F0F0F; }
.tab svg, .tab span { color:#606060; }
.tab span { font-size:9px; font-weight:500; }
.tab .badge { position:absolute; top:-2px; right:-4px; width:7px; height:7px; border-radius:50%; background:#FF0000; }
.createbtn { width:32px; height:24px; border-radius:8px; border:1.6px solid #0F0F0F; display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="wrap">
<div class="topbar">
<div class="logo"><div class="mark"><svg viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg></div><b>YouTube (iOS)</b></div>
<div class="topicons">
<svg viewBox="0 0 24 24" fill="none" stroke="#0F0F0F" stroke-width="1.8"><rect x="2" y="5" width="15" height="11" rx="2"/><path d="M20 8l3-2v12l-3-2"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="#0F0F0F" stroke-width="1.8"><path d="M18 8a6 6 0 00-12 0c0 5-2 6-2 6h16s-2-1-2-6z"/><path d="M9.5 18a2.5 2.5 0 005 0"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="#0F0F0F" stroke-width="1.8"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
<div class="avatar-sm"></div>
</div>
</div>
<div class="chiprow">
<div class="chip active">All</div>
<div class="chip">Music</div>
<div class="chip">Gaming</div>
<div class="chip">Live</div>
<div class="chip">Coding</div>
<div class="chip">Podcasts</div>
</div>
<div class="feed">
<div class="vcard">
<div class="thumb th1">
<div class="livetag"><div class="dot"></div>LIVE</div>
</div>
<div class="meta">
<div class="av av-a"></div>
<div class="metatext">
<div class="vtitle">Designing a resilient sync engine from scratch — live build session</div>
<div class="vsub">Northbound Systems · 4.2K watching · Streaming now</div>
</div>
<div class="moreicon">⋮</div>
</div>
</div>
<div class="vcard">
<div class="thumb th2">
<div class="duration">12:34</div>
</div>
<div class="meta">
<div class="av av-b"></div>
<div class="metatext">
<div class="vtitle">Why every roadmap needs a "no" list (and how to write one)</div>
<div class="vsub">Clearline · 812K views · 3 days ago</div>
</div>
<div class="moreicon">⋮</div>
</div>
</div>
</div>
<div class="miniplayer">
<div class="mini-thumb"></div>
<div class="mini-text">
<div class="mini-title">Building a design system that survives contact with reality</div>
<div class="mini-chan">Field Notes</div>
</div>
<div class="mini-icons">
<svg viewBox="0 0 24 24" fill="#0F0F0F"><path d="M8 5v14l11-7z"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="#606060" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg>
</div>
</div>
<div class="tabbar">
<div class="tab active"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/></svg><span>Home</span></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 7l4 3-4 3z" fill="currentColor" stroke="none"/></svg><span>Shorts</span></div>
<div class="tab"><div class="createbtn">+</div><span>Create</span></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="4" rx="1"/><path d="M4 9v10a1 1 0 001 1h14a1 1 0 001-1V9M10 13h4"/></svg><div class="badge"></div><span>Subs</span></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg><span>You</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3d3d3d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #3d3d3d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a0a0a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard Std", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; gap:22px; padding:0 32px; }
.brand { font-size:19px; font-weight:700; color:#222; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#5d5d5d; }
.navlinks .active { color:#222; font-weight:700; }
.navr { margin-left:auto; display:flex; gap:10px; }
.btn { border-radius:8px; padding:10px 16px; font-size:14px; font-weight:400; }
.btn.primary { background:#3d3d3d; color:#f9f9f9; }
.btn.outline { border:1px solid #d0d0d0; color:#222; }
.chips { display:flex; gap:8px; padding:0 32px 12px; }
.chip { border-radius:9999px; background:#f9f9f9; color:#222; font-size:13px; font-weight:500; padding:6px 14px; }
.chip.active { background:#222222; color:#fff; }
.shelf { padding:0 32px 8px; }
.shelf h2 { font-size:22px; font-weight:700; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.book { display:flex; flex-direction:column; }
.cover { aspect-ratio:2/3; border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08); }
.cv1 { background:linear-gradient(160deg,#3d3d3d,#111); }
.cv2 { background:linear-gradient(160deg,#1f8ce6,#0a3f6b); }
.cv3 { background:linear-gradient(160deg,#03aa5a,#0a4a2a); }
.cv4 { background:linear-gradient(160deg,#f4361e,#7a1a0e); }
.cv5 { background:linear-gradient(160deg,#9d9d9d,#5d5d5d); }
.cv6 { background:linear-gradient(160deg,#222,#5d5d5d); }
.book .t { font-size:13px; font-weight:600; margin:8px 0 2px; color:#222; }
.book .a { font-size:12px; color:#9d9d9d; margin:0; }
.badge { display:inline-block; font-size:11px; border-radius:9999px; padding:1px 8px; margin-top:4px; }
.badge.sub { background:#03aa5a; color:#fff; }
.badge.sale { background:#f4361e; color:#fff; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #f0f0f0; padding:12px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#9d9d9d; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">RIDI</span>
<div class="navlinks"><span class="active">Home</span><span>Webtoon</span><span>Serial</span><span>Ranking</span><span>Subscription</span></div>
<div class="navr"><span class="btn outline">Log In</span><span class="btn primary">Subscribe</span></div>
</nav>
<div class="chips">
<span class="chip active">All</span><span class="chip">Fiction</span><span class="chip">Essay</span><span class="chip">Self-Help</span><span class="chip">Comics</span>
</div>
<div class="shelf">
<h2>This Week's Bestsellers</h2>
<div class="grid">
<div class="book"><div class="cover cv1"></div><p class="t">Sketch of the Night</p><p class="a">John Carter</p><span class="badge sale">30% Off</span></div>
<div class="book"><div class="cover cv2"></div><p class="t">The Blue Mailbox</p><p class="a">Sarah Kim</p><span class="badge sub">Subscribed</span></div>
<div class="book"><div class="cover cv3"></div><p class="t">Summer Warmth</p><p class="a">Alex Park</p></div>
<div class="book"><div class="cover cv4"></div><p class="t">Crimson River</p><p class="a">Mia Choi</p><span class="badge sale">50% Off</span></div>
<div class="book"><div class="cover cv5"></div><p class="t">Gray City</p><p class="a">Jordan Lee</p></div>
<div class="book"><div class="cover cv6"></div><p class="t">Notes of Warmth</p><p class="a">Grace Han</p><span class="badge sub">Subscribed</span></div>
</div>
</div>
<footer>
<span>© RIDI</span>
<span>Home · Webtoon · Serial · Ranking · Subscription</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #111111; color: #f5f5f5;
border: 1px solid #353535; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #373737; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:"Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:14px; font-weight:500; }
.search { width:170px; height:36px; background:#f5f5f5; border-radius:9999px; font-size:13px; color:#8d8d8d;
display:flex; align-items:center; padding:0 16px; }
.hero { position:relative; height:300px; background:#111111; overflow:hidden; padding:0 36px; }
.hero::after { content:''; position:absolute; right:0; top:0; bottom:0; width:44%;
background:linear-gradient(135deg, rgba(216,255,0,0.14), rgba(255,255,255,0.02)); }
.herotext { position:relative; z-index:2; padding-top:40px; max-width:480px; }
.label { color:#d8ff00; font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { color:#fff; font-size:56px; font-weight:700; line-height:0.95; text-transform:uppercase; margin:0 0 18px;
letter-spacing:-0.01em; }
.btnrow { display:flex; gap:12px; }
.btn-inv { background:#ffffff; color:#111111; border-radius:9999px; padding:0 24px; height:48px; display:flex;
align-items:center; font-size:16px; font-weight:500; }
.btn-volt { background:#d8ff00; color:#111111; border-radius:9999px; padding:0 24px; height:48px; display:flex;
align-items:center; font-size:16px; font-weight:700; }
.body { position:absolute; top:360px; left:0; right:0; bottom:0; padding:20px 36px 0; }
.rowhead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.rowhead h2 { font-size:24px; font-weight:500; margin:0; }
.rowhead span { font-size:15px; color:#111111; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.pcard { display:flex; flex-direction:column; gap:6px; }
.pimg { width:100%; aspect-ratio:1/1; background:#f7f7f7; position:relative; }
.pimg::after { content:''; position:absolute; left:14%; right:14%; top:36%; bottom:30%; border-radius:40px;
background:linear-gradient(120deg, rgba(17,17,17,0.08), rgba(17,17,17,0.02)); }
.just-in { font-size:12px; font-weight:700; color:#d43f21; }
.ptitle { font-size:15px; font-weight:500; }
.pcat { font-size:13px; color:#757575; }
.price { font-size:15px; font-weight:500; }
.price .sale { color:#d43f21; }
.price .orig { color:#8d8d8d; text-decoration:line-through; margin-left:6px; }
</style></head>
<body>
<nav>
<span class="brand">Nike</span>
<div class="navlinks"><span>New</span><span>Men</span><span>Women</span><span>SNKRS</span></div>
<span class="search">Search</span>
</nav>
<div class="hero">
<div class="herotext">
<div class="label">Just In</div>
<h1>Move to<br>Zero</h1>
<div class="btnrow">
<span class="btn-inv">Shop Now</span>
<span class="btn-volt">SNKRS Drop</span>
</div>
</div>
</div>
<div class="body">
<div class="rowhead"><h2>Trending</h2><span>Shop All →</span></div>
<div class="grid">
<div class="pcard"><div class="pimg"></div><div class="just-in">Just In</div><div class="ptitle">Air Zoom Ridge</div><div class="pcat">Men's Running Shoes</div><div class="price">$140</div></div>
<div class="pcard"><div class="pimg"></div><div class="ptitle">Court Vantage</div><div class="pcat">Women's Shoes</div><div class="price"><span class="sale">$79.97</span><span class="orig">$110</span></div></div>
<div class="pcard"><div class="pimg"></div><div class="ptitle">Flex Trainer 9</div><div class="pcat">Training Shoes</div><div class="price">$65</div></div>
<div class="pcard"><div class="pimg"></div><div class="ptitle">Windrunner Jacket</div><div class="pcat">Men's Jacket</div><div class="price">$120</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #27ae60; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#313131; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:#fff; }
.navlinks span.active { text-decoration:underline; text-underline-offset:4px; }
.search { background:#fff; border-radius:999px; padding:8px 18px; font-size:12px; color:#757575; width:180px; }
.heading { padding:20px 32px 12px; border-bottom:1px solid #e0e0e0; }
.heading h2 { font-size:24px; font-weight:600; margin:0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:16px 32px; }
.card { border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.08); overflow:hidden; }
.cover { height:130px; background:linear-gradient(160deg,#4a3826,#7a5c3a); position:relative; }
.cover::after { content:''; position:absolute; left:10px; top:10px; right:10px; height:2px; background:rgba(255,255,255,.4); }
.cbody { padding:10px 12px 12px; }
.cbody h3 { font-size:14px; font-weight:600; margin:0 0 4px; }
.cbody .author { font-size:12px; color:#757575; margin:0 0 6px; }
.price { font-size:15px; font-weight:600; }
.event { margin:0 32px; background:#fff; border-left:4px solid #2980b9; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; }
.event h4 { font-size:14px; font-weight:600; margin:0 0 2px; }
.event p { font-size:11px; color:#757575; margin:0; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#313131; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Beacon Hill Books</p>
<div class="navlinks"><span class="active">Featured</span><span>Staff Picks</span><span>Events</span><span>Gift Cards</span></div>
<div class="search">Search books...</div>
</nav>
<div class="heading"><h2>Staff Picks This Week</h2></div>
<div class="grid">
<div class="card">
<div class="cover"></div>
<div class="cbody"><h3>North Woods</h3><p class="author">Daniel Mason</p><div class="price">$28.00</div></div>
</div>
<div class="card">
<div class="cover"></div>
<div class="cbody"><h3>Tom Lake</h3><p class="author">Ann Patchett</p><div class="price">$27.00</div></div>
</div>
<div class="card">
<div class="cover"></div>
<div class="cbody"><h3>The Fraud</h3><p class="author">Zadie Smith</p><div class="price">$29.00</div></div>
</div>
<div class="card">
<div class="cover"></div>
<div class="cbody"><h3>Wandering Stars</h3><p class="author">Tommy Orange</p><div class="price">$27.00</div></div>
</div>
</div>
<div class="event">
<div><h4>Author Reading — Sarah Blake</h4><p>Thursday, 7:00 PM · In-Store</p></div>
<span style="font-size:12px; font-weight:600; color:#2980b9;">RSVP →</span>
</div>
<footer>
<span>© Beacon Hill Books</span>
<span>Beacon Hill Books · Hours · Newsletter · Events</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #cccacc; color: #1b1e21;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #cccacc; color: #1b1e21;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1b1e21; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #545b62; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #dd1d0b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #cccacc; color: #1b1e21;
border: 1px solid #dd1d0b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1b1e21;
border: 1px solid #a09fa1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545b62; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #dd1d0b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#cccacc; color:#1b1e21; box-sizing:border-box;
font-family:'Cabin','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; background:#ffffff; border-bottom:1px solid #d6d8db; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:17px; font-weight:700; color:#1b1e21; }
.navlinks { display:flex; gap:24px; font-size:12px; }
.navlinks span { color:#545b62; }
.navlinks span.on { color:#dd1d0b; border-bottom:2px solid #dd1d0b; padding-bottom:16px; }
.cart { font-size:12px; color:#1b1e21; border:1px solid #d6d8db; padding:6px 14px; border-radius:8px; }
.wrap { display:flex; height:552px; padding:26px 30px; gap:28px; }
.poster { width:260px; height:100%; border-radius:8px; flex-shrink:0; position:relative; overflow:hidden;
background:linear-gradient(160deg,#1b1e21 0%,#383d41 55%,#545b62 100%); }
.poster::before { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px); }
.reel { position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; }
.reel span { width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,.5); }
.poster-title { position:absolute; bottom:18px; left:16px; right:16px; color:#fff; font-size:20px; font-weight:700; line-height:1.15; }
.fmt-badge { position:absolute; top:14px; right:14px; background:#dd1d0b; color:#fff; font-size:10px;
padding:3px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:.05em; }
.info { flex:1; display:flex; flex-direction:column; gap:14px; }
.genre-row { display:flex; gap:8px; }
.genre-row span { font-size:11px; color:#545b62; border:1px solid #d6d8db; border-radius:8px; padding:4px 10px; }
.info h1 { margin:0; font-size:26px; font-weight:700; }
.rating-row { display:flex; align-items:center; gap:10px; font-size:12px; color:#545b62; }
.stars { color:#dd1d0b; letter-spacing:1px; }
.synopsis { font-size:13px; line-height:1.6; color:#383d41; max-width:560px; }
.fmt-select { display:flex; gap:8px; }
.fmt-opt { border:1px solid #d6d8db; border-radius:8px; padding:8px 16px; font-size:12px; background:#fff; }
.fmt-opt.on { border-color:#dd1d0b; color:#dd1d0b; font-weight:700; }
.buy-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.price { font-size:24px; font-weight:700; }
.btn-buy { background:#dd1d0b; color:#fff; border:none; border-radius:8px; padding:12px 28px; font-size:14px; font-weight:700; }
.divider { height:1px; background:#d6d8db; }
.credits { font-size:11px; color:#545b62; display:flex; gap:20px; }
.credits b { color:#1b1e21; display:block; font-size:11px; }
footer { height:36px; background:#ffffff; border-top:1px solid #d6d8db; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:11px; color:#545b62; }
</style></head>
<body>
<nav>
<p class="brand">101 Films</p>
<div class="navlinks"><span>Horror</span><span class="on">Cult</span><span>Documentary</span><span>Box Sets</span></div>
<span class="cart">Cart (0)</span>
</nav>
<div class="wrap">
<div class="poster">
<div class="reel"><span></span><span></span></div>
<span class="fmt-badge">4K UHD</span>
<div class="poster-title">The Quiet Reel</div>
</div>
<div class="info">
<div class="genre-row"><span>Cult</span><span>1978</span><span>Region B</span></div>
<h1>The Quiet Reel</h1>
<div class="rating-row"><span class="stars">★★★★☆</span><span>4.2 · 318 reviews</span></div>
<p class="synopsis">A restored 4K scan of the 1978 regional cult favorite, struck from the original camera negative. Includes a new commentary track and the never-before-seen workprint cut.</p>
<div class="fmt-select">
<span class="fmt-opt">DVD — $14.99</span>
<span class="fmt-opt on">Blu-ray — $22.99</span>
<span class="fmt-opt">4K UHD — $29.99</span>
</div>
<div class="divider"></div>
<div class="credits">
<div><b>Director</b>Jordan Whitfield</div>
<div><b>Runtime</b>96 min</div>
<div><b>Extras</b>Commentary, Workprint</div>
</div>
<div class="buy-row">
<span class="price">$22.99</span>
<button class="btn-buy">Add to Cart</button>
</div>
</div>
</div>
<footer><span>© 101 Films — restorations from the archive shelf</span><span>Shipping · Region Info · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; background: #000000; color: #ffffff;
border: none; border-radius: 100px; padding: 14px 30px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; background: transparent; color: #0a1317;
border: 1px solid #0064e0; border-radius: 100px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.16px; background: #ffffff; color: #1c1e21;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: #f7b928; color: #0a1317;
border-radius: 100px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1e21; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.promo { background:#0a1317; color:#fff; text-align:center; font-size:11px; font-weight:700; padding:6px; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #dee3e9; }
.brand { font-size:15px; font-weight:700; }
.pills { display:flex; gap:8px; }
.pilltab { border:1px solid #ced0d4; border-radius:100px; padding:6px 14px; font-size:12px; font-weight:700; }
.pilltab.active { background:#0a1317; color:#fff; border:none; }
.searchpill { background:#f1f4f7; border-radius:100px; padding:7px 16px; font-size:12px; color:#5d6c7b; }
.hero { position:relative; margin:14px 36px 0; border-radius:32px; overflow:hidden; height:210px;
background:linear-gradient(120deg,#0a1317,#1c1e21 60%,#0064e0 140%); display:flex; align-items:flex-end; padding:20px 26px; }
.hero h1 { color:#fff; font-size:32px; font-weight:500; line-height:1.16; margin:0 0 6px; max-width:420px; }
.hero .sub { color:#dee3e9; font-size:12px; margin-bottom:10px; }
.herobtns { display:flex; gap:8px; }
.btn-black { background:#000; color:#fff; border:none; border-radius:100px; padding:9px 18px; font-size:12px; font-weight:700; }
.btn-ghostw { background:transparent; color:#fff; border:2px solid #fff; border-radius:100px; padding:7px 18px; font-size:12px; font-weight:700; }
.featurerow { display:flex; gap:14px; padding:16px 36px; }
.fcard { flex:1; background:#fff; border:1px solid #dee3e9; border-radius:16px; padding:16px; text-align:center; }
.fcard .ic { width:28px; height:28px; margin:0 auto 8px; background:#f1f4f7; border-radius:50%; }
.fcard h4 { font-size:13px; font-weight:700; margin:0 0 4px; }
.fcard p { font-size:10.5px; color:#5d6c7b; margin:0; }
.promostrip { margin:0 36px 14px; background:#0a1317; color:#fff; border-radius:32px; padding:18px 24px;
display:flex; align-items:center; justify-content:space-between; }
.promostrip h3 { font-size:19px; font-weight:500; margin:0; max-width:360px; line-height:1.2; }
footer { margin-top:auto; padding:12px 36px; border-top:1px solid #dee3e9; display:flex; justify-content:space-between;
font-size:11px; color:#5d6c7b; }
</style></head>
<body>
<div class="promo">Get 25% off the #1 selling AI glasses</div>
<nav>
<span class="brand">Meta</span>
<div class="pills"><span class="pilltab active">Glasses</span><span class="pilltab">Quest</span><span class="pilltab">Apps</span></div>
<span class="searchpill">⌕ Search</span>
</nav>
<div class="hero">
<div>
<h1>Built for prescriptions.<br>Made for comfort.</h1>
<div class="sub">AI glasses that see, hear, and help — all day long.</div>
<div class="herobtns"><button class="btn-black">Shop now</button><button class="btn-ghostw">Learn more</button></div>
</div>
</div>
<div class="featurerow">
<div class="fcard"><div class="ic"></div><h4>Free 2-day delivery</h4><p>On every order, every time.</p></div>
<div class="fcard"><div class="ic"></div><h4>Free 30-day returns</h4><p>Try it risk-free at home.</p></div>
<div class="fcard"><div class="ic"></div><h4>Worry-free warranty</h4><p>One year of coverage included.</p></div>
<div class="fcard"><div class="ic"></div><h4>Buy now, pay later</h4><p>Flexible financing available.</p></div>
</div>
<div class="promostrip">
<h3>Meta Quest brings the magic of virtual reality to everyone.</h3>
<button class="btn-black" style="background:#fff;color:#0a1317">Shop Quest</button>
</div>
<footer>
<span>© Meta</span>
<span>Meta · Glasses · Quest · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2b96ed; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2b96ed; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9acaf1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b96ed; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2b96ed; color: #f5f5f5;
border: 1px solid #4ba5ee; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9acaf1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4da7f0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#495056; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#ffffff; }
.brand { font-size:19px; font-weight:700; margin:0; color:#101418; }
.searchPill { flex:1; max-width:360px; height:40px; background:#f5f6f7; display:flex; align-items:center;
padding:0 16px; color:#495056; font-size:14px; margin:0 24px; }
.navRight { display:flex; align-items:center; gap:12px; }
.localeTab { background:#101418; color:#ffffff; border-radius:16px; padding:6px 10px; height:32px;
display:flex; align-items:center; font-size:15px; font-weight:700; }
.headerAction { background:#2b96ed; color:#ffffff; border-radius:12px; padding:0 24px; height:40px;
display:flex; align-items:center; font-size:14px; font-weight:600; white-space:nowrap; }
.hero { height:210px; position:relative; overflow:hidden;
background:linear-gradient(180deg,#bfe3ff 0%,#eaf6ff 55%,#ffffff 100%); }
.hero .hill1 { position:absolute; left:-40px; bottom:-30px; width:340px; height:150px; border-radius:50%;
background:#8fc7a0; }
.hero .hill2 { position:absolute; right:-60px; bottom:-50px; width:420px; height:180px; border-radius:50%;
background:#6fae86; }
.hero .sun { position:absolute; right:90px; top:34px; width:56px; height:56px; border-radius:50%; background:#ffd77a; }
.hero .tag { position:absolute; left:36px; bottom:18px; background:#101418; color:#fff; font-size:12px;
font-weight:700; padding:6px 12px; border-radius:16px; }
main { display:flex; gap:32px; padding:22px 36px 0; height:296px; }
.colLeft { flex:1; }
.place { font-size:22px; font-weight:700; color:#101418; margin:0 0 4px; }
.metaLine { font-size:13px; color:#666d75; margin-bottom:10px; }
.metaLine b { color:#2b96ed; }
.desc { font-size:14px; line-height:1.5; color:#495056; max-width:440px; margin:0 0 14px; }
.highlights { display:flex; gap:8px; flex-wrap:wrap; }
.hchip { border:1px solid #ced4da; border-radius:9999px; height:30px; padding:0 14px; display:flex;
align-items:center; font-size:12px; color:#495056; }
.colRight { width:270px; flex:0 0 auto; }
.bookCard { background:#f5f6f7; padding:20px; }
.priceRow { display:flex; align-items:baseline; gap:6px; margin-bottom:14px; }
.priceRow .amount { font-size:24px; font-weight:700; color:#101418; }
.priceRow .unit { font-size:12px; color:#666d75; }
.field { background:#ffffff; border:1px solid #ced4da; height:40px; display:flex; align-items:center;
padding:0 12px; font-size:13px; color:#495056; margin-bottom:8px; }
.reserveBtn { background:#2b96ed; color:#ffffff; border-radius:12px; height:40px; width:100%;
display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; margin-top:6px; }
.finePrint { font-size:11px; color:#666d75; margin-top:10px; text-align:center; }
footer { height:32px; border-top:1px solid #e5e5e5; padding:0 36px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#666d75; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">MyRealTrip</p>
<div class="searchPill">Search tours, hotels, activities…</div>
<div class="navRight">
<div class="localeTab">GLOBAL</div>
<div class="headerAction">Sign In</div>
</div>
</nav>
<div class="hero">
<div class="hill1"></div>
<div class="hill2"></div>
<div class="sun"></div>
<div class="tag">Local Guide Included</div>
</div>
<main>
<div class="colLeft">
<h1 class="place">Half-Day Old Town Walking Tour</h1>
<div class="metaLine"><b>4.9</b> · 2,140 traveler reviews · Guided in English</div>
<p class="desc">Explore hidden alleyways, historic markets, and rooftop viewpoints with a local storyteller. Small groups only, with flexible morning and afternoon departures.</p>
<div class="highlights">
<div class="hchip">Small Group</div>
<div class="hchip">Free Cancellation</div>
<div class="hchip">Instant Confirmation</div>
<div class="hchip">Local Host</div>
</div>
</div>
<div class="colRight">
<div class="bookCard">
<div class="priceRow"><span class="amount">$42</span><span class="unit">/ person</span></div>
<div class="field">Select date</div>
<div class="field">2 travelers</div>
<div class="reserveBtn">Reserve</div>
<div class="finePrint">Free cancellation up to 24h before</div>
</div>
</div>
</main>
<footer>
<span>© MyRealTrip</span>
<span>MyRealTrip · Tours · Hotels · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0056b3; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0056b3; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87add7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f9f9f9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0056b3; color: #f9f9f9;
border: 1px solid #f9f9f9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0056b3; color: #f5f5f5;
border: 1px solid #276fbe; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87add7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2870be; color: #f9f9f9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f9f9; color:#212529; box-sizing:border-box;
font-family:"Microsoft JhengHei", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e3e3e3; }
.brand { font-size:16px; font-weight:700; color:#212529; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#212529; }
.login { color:#0056b3; font-size:14px; }
.band { padding:16px 40px; }
.band h1 { font-size:18px; font-weight:700; margin:0 0 4px; }
.band p { font-size:14px; color:#212529; margin:0 0 14px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.card { background:transparent; border:1px solid #e3e3e3; padding:14px; height:150px; }
.card .tag { font-size:12px; color:#0056b3; }
.card h3 { font-size:15px; font-weight:700; margin:8px 0 6px; }
.card p { font-size:12px; color:#212529; line-height:1.5; margin:0; }
.card .link { color:#0056b3; font-size:12px; margin-top:8px; display:inline-block; }
.personal { padding:16px 40px 0; }
.personal h2 { font-size:16px; font-weight:700; margin:0 0 10px; }
.row { display:flex; gap:0; }
.item { flex:1; background:#fff; border:1px solid #e3e3e3; padding:12px 14px; font-size:13px; }
.item .label { color:#0056b3; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e3e3e3; background:#fff;
padding:10px 40px; display:flex; justify-content:space-between; font-size:11px; color:#212529; }
</style></head>
<body>
<nav>
<div class="brand">Taishin Bank</div>
<div class="navlinks"><span>Personal</span><span>Corporate</span><span>Wealth Management</span><span>Digital Finance</span></div>
<span class="login">Log in</span>
</nav>
<div class="band">
<h1>Investment products</h1>
<p>Fund and market information for personal banking customers.</p>
<div class="cards">
<div class="card"><span class="tag">Fund</span><h3>Global Balanced Fund</h3><p>Diversified allocation across equities and bonds.</p><span class="link">View details</span></div>
<div class="card"><span class="tag">Fund</span><h3>Asia Growth Fund</h3><p>Regional growth exposure for long-term investors.</p><span class="link">View details</span></div>
<div class="card"><span class="tag">Fund</span><h3>Fixed Income Fund</h3><p>Stable income allocation for conservative portfolios.</p><span class="link">View details</span></div>
</div>
</div>
<div class="personal">
<h2>Personal banking</h2>
<div class="row">
<div class="item"><span class="label">Deposits</span><br>Savings and time deposit accounts</div>
<div class="item"><span class="label">Loans</span><br>Mortgage and personal loan services</div>
<div class="item"><span class="label">Cards</span><br>Credit and debit card products</div>
</div>
</div>
<footer><span>© Taishin Bank</span><span>Taishin Bank · About · Fair Treatment · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #120a0e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #120a0e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8b8d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c6002b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #120a0e; color: #c6002b;
border: 1px solid #c6002b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #120a0e; color: #f5f5f5;
border: 1px solid #363033; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8b8d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2f0813; color: #c6002b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#120A0E; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:20px 32px 0; }
.brand { margin:0; font-size:14px; font-weight:900; letter-spacing:0.06em; color:#B8A0A8; text-transform:uppercase; }
.k { font-size:12px; color:#B8A0A8; }
.player { width:420px; margin:26px auto 0; display:flex; flex-direction:column; align-items:center; gap:22px; }
.tile { width:260px; height:260px; border-radius:28px; position:relative; overflow:hidden;
background:radial-gradient(circle at 50% 40%, #E40A5D 0%, #C6002B 55%, #2A171D 100%);
display:flex; align-items:center; justify-content:center; box-shadow:0 20px 50px rgba(198,0,43,0.25); }
.heart { font-size:96px; color:#fff; opacity:0.92; }
.freqchip { position:absolute; bottom:14px; right:14px; background:rgba(18,10,14,0.55); backdrop-filter:blur(4px);
border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; }
.live { position:absolute; top:14px; left:14px; background:#F23A2F; border-radius:999px; padding:4px 10px 4px 8px;
display:flex; align-items:center; gap:6px; font-size:11px; font-weight:900; letter-spacing:0.06em; }
.live i { width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,0.35); }
.stationname { font-size:26px; font-weight:800; letter-spacing:-0.4px; margin:0; text-align:center; }
.nowairing { font-size:14px; color:#B8A0A8; margin:4px 0 0; text-align:center; }
.scanwrap { width:100%; }
.scanrail { width:100%; height:4px; background:#2A171D; border-radius:99px; overflow:hidden; position:relative; }
.scansweep { position:absolute; left:-30%; width:30%; height:100%; background:linear-gradient(90deg, transparent, #F23A2F, transparent); }
.scanlabel { text-align:center; font-size:11px; color:#7C6168; margin-top:8px; letter-spacing:0.04em; text-transform:uppercase; }
.transport { display:flex; align-items:center; gap:34px; }
.skip { font-size:22px; color:#B8A0A8; }
.stopbtn { width:68px; height:68px; border-radius:50%; background:#C6002B; display:flex; align-items:center; justify-content:center;
box-shadow:0 10px 26px rgba(198,0,43,0.4); }
.stopbtn i { width:20px; height:20px; background:#fff; border-radius:3px; }
.foryou { margin:30px 40px 0; }
.foryou h4 { font-size:13px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:#B8A0A8; margin:0 0 12px; }
.shelf { display:flex; gap:14px; }
.card { width:120px; }
.cart { width:120px; height:120px; border-radius:16px; background:linear-gradient(135deg,#C6002B,#E40A5D); }
.cn { font-size:12px; font-weight:700; margin-top:8px; }
</style></head>
<body>
<div class="topbar"><p class="brand">iHeartRadio</p><span class="k">For You</span></div>
<div class="player">
<div class="tile"><span class="live"><i></i>LIVE</span><span class="heart">♡</span><span class="freqchip">101.3 FM</span></div>
<div>
<h2 class="stationname">iHeartRadio (iOS)</h2>
<p class="nowairing">Now airing · Midnight Drive — The Weekend Set</p>
</div>
<div class="scanwrap">
<div class="scanrail"><div class="scansweep"></div></div>
<div class="scanlabel">Streaming Live</div>
</div>
<div class="transport">
<span class="skip">⏮</span>
<div class="stopbtn"><i></i></div>
<span class="skip">⏭</span>
</div>
</div>
<div class="foryou">
<h4>Recently Played</h4>
<div class="shelf">
<div class="card"><div class="cart"></div><div class="cn">Sunset Hits</div></div>
<div class="card"><div class="cart" style="background:linear-gradient(135deg,#7C6168,#2A171D)"></div><div class="cn">True Crime Weekly</div></div>
<div class="card"><div class="cart" style="background:linear-gradient(135deg,#F23A2F,#C6002B)"></div><div class="cn">Morning Zoo</div></div>
<div class="card"><div class="cart" style="background:linear-gradient(135deg,#E40A5D,#341C24)"></div><div class="cn">Latin Beats</div></div>
<div class="card"><div class="cart" style="background:linear-gradient(135deg,#341C24,#120A0E)"></div><div class="cn">Chart Toppers</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa4065; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa4065; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f7a4b4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d62952; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa4065; color: #000000;
border: 1px solid #d62952; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa4065; color: #f5f5f5;
border: 1px solid #f95d7c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f7a4b4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f43c62; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#444444; box-sizing:border-box;
font-family:"Dotum", "돋움", -apple-system, sans-serif; }
* { box-sizing: border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #eef1f4; background:#ffffff; }
.brand { font-size:19px; font-weight:700; color:#fa4065; margin:0; }
.gnb { display:flex; gap:22px; font-size:15px; font-weight:700; color:#27282d; }
.gnb span.on { color:#fa4065; border-bottom:2px solid #fa4065; padding-bottom:15px; }
.nav-right { display:flex; align-items:center; gap:12px; }
.util { font-size:12px; color:#8b8b8b; }
.search { border:1px solid #d2d2d2; border-radius:4px; padding:1px 8px; height:26px; font-size:12px;
color:#969697; width:150px; display:flex; align-items:center; }
.main { display:flex; gap:16px; padding:16px 28px 14px; }
.chart { flex:2; background:#ffffff; border:1px solid #eef1f4; border-radius:8px; box-shadow:rgba(0,0,0,0.06) 0px 1px 3px; }
.chart-head { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid #eef1f4; }
.chart-title { font-size:14px; font-weight:700; color:#27282d; }
.tabs { display:flex; gap:14px; }
.tabs span { font-size:12px; font-weight:400; color:#8b8b8b; padding:0 8px; }
.tabs span.on { color:#0096ff; font-weight:700; }
.row { display:flex; align-items:center; gap:10px; padding:7px 16px; border-bottom:1px solid #eef1f4; }
.rank { width:16px; font-size:11px; color:#969697; text-align:right; }
.thumb { width:32px; height:32px; border-radius:4px; background:linear-gradient(135deg,#f7f8f9,#eef1f4); flex-shrink:0; }
.meta { display:flex; flex-direction:column; flex:1; min-width:0; }
.title { font-size:12px; color:#27282d; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artist { font-size:11px; color:#969697; }
.ghost { border:1px solid #d2d2d2; color:#444444; border-radius:4px; padding:0 10px; height:22px; font-size:11px;
display:flex; align-items:center; }
.play { background:#fa4065; color:#ffffff; border-radius:4px; padding:0 12px; height:24px; font-size:11px;
font-weight:700; display:flex; align-items:center; }
.row.now .title { color:#fa4065; font-weight:700; }
.side { flex:1; display:flex; flex-direction:column; gap:12px; }
.card { background:#ffffff; border:1px solid #eef1f4; border-radius:8px; box-shadow:rgba(0,0,0,0.06) 0px 1px 3px; padding:12px 14px; }
.card .h { font-size:13px; font-weight:700; color:#27282d; margin:0 0 10px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:#434354; color:#ffffff; border-radius:13px; padding:0 12px; height:25px; font-size:12px;
font-weight:700; display:flex; align-items:center; }
.now-card .art { width:100%; height:70px; border-radius:8px; background:linear-gradient(135deg,#fa4065,#434354); margin-bottom:8px; }
.now-card .t { font-size:12px; font-weight:700; color:#27282d; }
.now-card .a { font-size:11px; color:#969697; }
footer { border-top:1px solid #eef1f4; padding:10px 28px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#969697; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">Genie Music</p>
<div class="gnb"><span class="on">Chart</span><span>New Music</span><span>Radio</span><span>Magazine</span></div>
<div class="nav-right">
<span class="util">Log in</span>
<div class="search">Search songs</div>
</div>
</nav>
<section class="main">
<div class="chart">
<div class="chart-head">
<span class="chart-title">Realtime Chart</span>
<div class="tabs"><span class="on">Total</span><span>Domestic</span><span>International</span></div>
</div>
<div class="row now">
<span class="rank">1</span><div class="thumb"></div>
<div class="meta"><span class="title">Midnight Glow</span><span class="artist">Soyeon</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
<div class="row">
<span class="rank">2</span><div class="thumb"></div>
<div class="meta"><span class="title">Paper Boats</span><span class="artist">Jihoon</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
<div class="row">
<span class="rank">3</span><div class="thumb"></div>
<div class="meta"><span class="title">Neon Rain</span><span class="artist">Minji & Camila</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
<div class="row">
<span class="rank">4</span><div class="thumb"></div>
<div class="meta"><span class="title">Slow City</span><span class="artist">Jordan</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
<div class="row">
<span class="rank">5</span><div class="thumb"></div>
<div class="meta"><span class="title">Blue Hour</span><span class="artist">Priya</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
<div class="row" style="border-bottom:none;">
<span class="rank">6</span><div class="thumb"></div>
<div class="meta"><span class="title">After the Rain</span><span class="artist">Alex</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
</div>
<div class="side">
<div class="card">
<p class="h">Realtime Search</p>
<div class="chips">
<div class="chip">Midnight Glow</div><div class="chip">Soyeon</div><div class="chip">Paper Boats</div>
<div class="chip">Neon Rain</div><div class="chip">Jordan</div>
</div>
</div>
<div class="card now-card">
<div class="art"></div>
<div class="t">Midnight Glow</div>
<div class="a">Soyeon</div>
</div>
</div>
</section>
<footer>
<span>© Genie Music</span>
<span>Genie Music · Chart · New Music · Radio</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf0d9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf0d9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a756b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbf0d9; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fbf0d9; color: #111111;
border: 1px solid #d6ccb9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a756b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7ceba; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FBF0D9; color:#5F4B32; box-sizing:border-box;
font-family:Georgia, "Bitter", "Times New Roman", serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.reader { flex:1; padding:36px 56px; display:flex; flex-direction:column; }
.eyebrow { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#8a6f47; text-align:center; margin-bottom:14px; }
.chaptitle { font-size:24px; text-align:center; margin:0 0 22px; font-weight:400; }
.dropcap { float:left; font-size:56px; line-height:0.8; padding:6px 8px 0 0; font-weight:700; }
.body { font-size:15.5px; line-height:1.72; text-align:justify; }
.body p { margin:0 0 14px; }
.footer { margin-top:auto; display:flex; justify-content:space-between; font-size:11px; color:#8a6f47; padding-top:14px; }
.toolbar { position:absolute; left:0; right:0; bottom:0; background:rgba(251,240,217,0.96); border-top:1px solid #e4d9bb;
padding:14px 40px; display:flex; align-items:center; justify-content:center; gap:22px; }
.swatch { width:26px; height:26px; border-radius:50%; border:2px solid transparent; }
.swatch.active { border-color:#FF9900; }
.aabtn { font-family:-apple-system, sans-serif; font-size:20px; font-weight:800; color:#1A1A1A; margin-right:20px; }
.lib { width:280px; flex:0 0 auto; background:#FFFFFF; padding:20px; font-family:-apple-system, sans-serif; color:#1A1A1A; }
.libh { font-size:18px; font-weight:700; margin-bottom:14px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cover { aspect-ratio:2/3; border-radius:4px; position:relative; overflow:hidden; }
.c1 { background:linear-gradient(160deg,#2b3a67,#101a33); }
.c2 { background:linear-gradient(160deg,#7a3d28,#3d1f14); }
.c3 { background:linear-gradient(160deg,#3d5a3d,#182818); }
.c4 { background:linear-gradient(160deg,#5a3d5a,#281828); }
.c5 { background:linear-gradient(160deg,#8a6f10,#3d3208); }
.c6 { background:linear-gradient(160deg,#3d5a6f,#182430); }
.cprog { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.25); }
.cprog i { display:block; height:3px; background:#FF9900; }
</style></head>
<body>
<div class="wrap">
<div class="reader">
<div class="eyebrow">Chapter Seven</div>
<h1 class="chaptitle">Kindle (iOS)</h1>
<div class="body">
<p><span class="dropcap">T</span>he morning light came in low and gold across the harbor, and for a moment she forgot why she had come. The letters were still in her coat pocket, unopened, waiting for a courage she wasn't sure she had.</p>
<p>She had read once that the sea remembers everything — every ship, every storm, every name whispered to it in the dark. She hoped, standing there, that it remembered him too.</p>
</div>
<div class="footer"><span>38% · 14 min left in chapter</span><span>Loc 2,481 of 6,204</span></div>
</div>
<div class="lib">
<div class="libh">Library</div>
<div class="grid3">
<div class="cover c1"><div class="cprog"><i style="width:64%"></i></div></div>
<div class="cover c2"><div class="cprog"><i style="width:20%"></i></div></div>
<div class="cover c3"><div class="cprog"><i style="width:88%"></i></div></div>
<div class="cover c4"></div>
<div class="cover c5"><div class="cprog"><i style="width:45%"></i></div></div>
<div class="cover c6"></div>
</div>
</div>
</div>
<div class="toolbar">
<span class="aabtn">Aa</span>
<div class="swatch" style="background:#FFFFFF;border:1px solid #ddd;"></div>
<div class="swatch active" style="background:#FBF0D9;"></div>
<div class="swatch" style="background:#C5E1C5;"></div>
<div class="swatch" style="background:#2A2A2A;"></div>
<div class="swatch" style="background:#000000;"></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242424; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: 1px solid #242424; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c1c1c; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#F5F5F5; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.hdr { padding:22px 34px 0; display:flex; align-items:center; }
.wtitle { font-size:26px; font-weight:800; }
.finish { margin-left:auto; background:#2F80ED; color:#fff; font-size:13px; font-weight:700; padding:8px 16px; border-radius:8px; }
.stats-row { display:flex; gap:10px; padding:14px 34px 0; }
.pill { background:#2E2E2E; border-radius:7px; padding:5px 10px; font-size:12px; }
.pill span { color:#9A9A9A; font-weight:600; } .pill b { color:#2F80ED; font-weight:700; }
hr.hdr-div { border:none; border-top:1px solid #333333; margin:16px 0 0; }
.card { margin:14px 34px 0; background:#242424; border-radius:14px; padding:14px; }
.ex-hdr { display:flex; align-items:center; gap:10px; }
.thumb { width:34px; height:34px; border-radius:9px; background:#383838; color:#2F80ED; display:flex; align-items:center; justify-content:center; font-size:14px; }
.ex-name { color:#2F80ED; font-size:18px; font-weight:700; }
.cols { display:grid; grid-template-columns:36px 1fr 1fr 1fr 30px; gap:6px; padding:10px 0 4px; font-size:11px; font-weight:700; text-transform:uppercase; color:#9A9A9A; }
.set-row { display:grid; grid-template-columns:36px 1fr 1fr 1fr 30px; gap:6px; align-items:center; padding:6px 0; }
.idx { font-size:14px; font-weight:700; color:#9A9A9A; }
.prev { font-size:12px; color:#636363; }
.cell { height:34px; border-radius:7px; background:#2E2E2E; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.check { width:24px; height:24px; border-radius:6px; border:1.5px solid #333333; }
.check.on { background:#27AE60; border:none; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }
.set-row.done .cell { background:rgba(39,174,96,0.18); }
.addset { margin-top:8px; height:34px; border-radius:8px; background:#2E2E2E; color:#2F80ED; font-size:13px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.pr-flag { margin:12px 34px 0; background:rgba(242,201,76,0.18); color:#F2C94C; font-size:10px; font-weight:800;
text-transform:uppercase; padding:6px 12px; border-radius:8px; display:inline-block; }
</style></head>
<body>
<div class="hdr"><div class="wtitle">Push Day</div><div class="finish">Finish</div></div>
<div class="stats-row">
<div class="pill"><span>Time</span> <b>42:18</b></div>
<div class="pill"><span>Volume</span> <b>8,420 kg</b></div>
<div class="pill"><span>Sets</span> <b>14</b></div>
<div class="pill"><span>App</span> <b>Strong (iOS)</b></div>
</div>
<hr class="hdr-div">
<div class="card">
<div class="ex-hdr"><div class="thumb">🏋</div><div class="ex-name">Bench Press</div></div>
<div class="cols"><div>Set</div><div>Previous</div><div>kg</div><div>Reps</div><div></div></div>
<div class="set-row done"><div class="idx">1</div><div class="prev">95 × 5</div><div class="cell">100</div><div class="cell">5</div><div class="check on">✓</div></div>
<div class="set-row done"><div class="idx">2</div><div class="prev">95 × 5</div><div class="cell">100</div><div class="cell">5</div><div class="check on">✓</div></div>
<div class="set-row"><div class="idx">3</div><div class="prev">95 × 5</div><div class="cell">100</div><div class="cell">4</div><div class="check"></div></div>
<div class="addset">+ Add Set</div>
</div>
<div class="pr-flag">▲ PR · Est. 1RM 117 kg</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1f1ef; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f1f1ef; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#37352F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
/* 사이드바 — 워크스페이스 + Teamspaces/Shared/Private */
.sidebar { width:220px; height:640px; background:#F7F6F3; border-right:1px solid #EAECEC;
display:flex; flex-direction:column; padding:14px 8px; flex-shrink:0; }
.ws { display:flex; align-items:center; gap:8px; padding:6px 8px 14px; }
.ws-icon { width:22px; height:22px; border-radius:6px; background:#37352F; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.ws-name { font-size:14px; font-weight:600; }
.sb-section { font-size:11px; font-weight:600; color:#9B9A97; text-transform:uppercase;
letter-spacing:0.04em; margin:14px 8px 4px; }
.sb-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:5px; font-size:14px; font-weight:500; }
.sb-row.active { background:#EFEEE9; }
.sb-row .ic { font-size:14px; width:16px; text-align:center; }
/* 페이지 본문 */
.page { flex:1; display:flex; flex-direction:column; position:relative; height:640px; }
.cover { height:96px; background:linear-gradient(120deg, #E7F3F8, #F6F3F9 55%, #FAF1F5); }
.head { padding:0 40px; position:relative; }
.emoji { font-size:46px; margin-top:-28px; margin-bottom:6px; display:block; }
.title { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0 0 10px; }
.subactions { display:flex; gap:14px; margin-bottom:18px; }
.subactions span { font-size:12px; color:#9B9A97; font-weight:400; }
.body { padding:0 40px 24px; flex:1; overflow:hidden; }
.h2 { font-size:18px; font-weight:700; letter-spacing:-0.2px; margin:14px 0 5px; }
.p { font-size:14px; line-height:1.5; margin:0 0 6px; color:#37352F; }
.p .mention { display:inline-flex; align-items:center; gap:3px; background:#2E75CC1A; color:#2E75CC;
font-weight:500; border-radius:3px; padding:1px 5px 1px 3px; }
.p .mention .av { width:13px; height:13px; border-radius:50%; background:#2E75CC; display:inline-block; }
.toggle { display:flex; gap:6px; align-items:flex-start; margin:8px 0; }
.toggle .chev { color:#9B9A97; font-size:11px; margin-top:2px; }
.toggle .tx { font-size:14px; font-weight:500; }
.toggle .child { margin-left:20px; margin-top:4px; font-size:13px; color:#37352F; line-height:1.5; }
.callout { display:flex; gap:10px; background:#FBF3DB; border-radius:4px; padding:12px 14px; margin:10px 0; }
.callout .em { font-size:17px; }
.callout p { margin:0; font-size:13.5px; color:#DFAB01; line-height:1.45; font-weight:500; }
.quote { border-left:3px solid #37352F; padding:2px 0 2px 12px; margin:10px 0; }
.quote p { font-style:italic; font-size:14px; margin:0; }
.code { background:#F7F6F3; border-radius:4px; padding:12px 14px; margin:10px 0; position:relative; }
.code .lang { position:absolute; top:8px; right:12px; font-size:10px; color:#9B9A97; }
.code pre { margin:0; font-family:"SFMono-Regular", Consolas, "IBM Plex Mono", monospace; font-size:12px; color:#37352F; }
.dbblock { border-top:1px solid #EAECEC; margin-top:14px; padding-top:10px; }
.dbtabs { display:flex; gap:16px; margin-bottom:8px; }
.dbtabs span { font-size:12px; color:#9B9A97; padding-bottom:5px; }
.dbtabs span.on { color:#37352F; font-weight:600; border-bottom:2px solid #37352F; }
.dbrow { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #EAECEC; font-size:12.5px; }
.dbrow .chip { font-size:10.5px; padding:2px 8px; border-radius:3px; font-weight:600; }
.chip.g { background:#EDF3EC; color:#0F7B6C; }
.chip.o { background:#FAEBDD; color:#D9730D; }
.chip.b { background:#E7F3F8; color:#0B6E99; }
.dbrow .nm { flex:1; font-weight:500; }
.dbrow .who { color:#9B9A97; }
/* / 커맨드 팔레트 — 문서 위에 뜨는 플로팅 패널 */
.palette { position:absolute; right:36px; bottom:26px; width:230px; background:#FFFFFF;
border:1px solid #EAECEC; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.08); overflow:hidden; }
.palette .hd { font-size:10.5px; color:#9B9A97; padding:8px 12px 4px; }
.prow { display:flex; align-items:center; gap:8px; padding:7px 12px; }
.prow.sel { background:#EFEEE9; }
.prow .ico { width:18px; height:18px; border-radius:4px; background:#F1F1EF; display:flex;
align-items:center; justify-content:center; font-size:11px; }
.prow .tt { font-size:12.5px; font-weight:500; }
.prow .st { font-size:10.5px; color:#9B9A97; display:block; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="ws"><div class="ws-icon">B</div><span class="ws-name">Notion (iOS)</span></div>
<div class="sb-row active"><span class="ic">🏠</span> Home</div>
<div class="sb-row"><span class="ic">🔍</span> Search</div>
<div class="sb-section">Teamspaces</div>
<div class="sb-row"><span class="ic">📈</span> Product</div>
<div class="sb-row"><span class="ic">🎨</span> Design</div>
<div class="sb-section">Private</div>
<div class="sb-row"><span class="ic">📔</span> Journal</div>
<div class="sb-row"><span class="ic">✅</span> Tasks Q3</div>
</div>
<div class="page">
<div class="cover"></div>
<div class="head">
<span class="emoji">🗺️</span>
<h1 class="title">Project Roadmap</h1>
<div class="subactions"><span>Add icon</span><span>Add comment</span><span>Add link</span></div>
</div>
<div class="body">
<div class="h2">Q3 Objectives</div>
<p class="p">Owner is <span class="mention"><span class="av"></span>Jihoon</span> — ship the onboarding rewrite before the offsite.</p>
<div class="toggle"><span class="chev">▾</span><span class="tx">Launch checklist</span></div>
<div class="child">Design review · Copy pass · Analytics events wired up</div>
<div class="callout"><span class="em">💡</span><p>Blocks are the atom here — drag the handle to reorder anything.</p></div>
<div class="quote"><p>"A tool for thought, not a form to fill out."</p></div>
<div class="code"><span class="lang">JSON</span><pre>{ "status": "in_progress" }</pre></div>
<div class="dbblock">
<div class="dbtabs"><span class="on">Table</span><span>Board</span><span>Timeline</span><span>Calendar</span></div>
<div class="dbrow"><span class="chip g">Done</span><span class="nm">Auth flow</span><span class="who">Minji</span></div>
<div class="dbrow"><span class="chip o">Doing</span><span class="nm">Empty states</span><span class="who">Jihoon</span></div>
<div class="dbrow"><span class="chip b">Next</span><span class="nm">Localize KR</span><span class="who">Soyeon</span></div>
</div>
</div>
<div class="palette">
<div class="hd">BASIC BLOCKS</div>
<div class="prow sel"><span class="ico">H</span><div><span class="tt">Heading 2</span><span class="st">Section heading</span></div></div>
<div class="prow"><span class="ico">▸</span><div><span class="tt">Toggle list</span><span class="st">Collapsible content</span></div></div>
<div class="prow"><span class="ico">🖼</span><div><span class="tt">Image</span><span class="st">Upload or embed</span></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c1b22; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c1b22; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c9396; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c1b22; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c1b22; color: #f5f5f5;
border: 1px solid #313e44; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c9396; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d1a1f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0C1B22; color:#FFFFFF; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#081218; border-bottom:1px solid #234653; }
.brand { font-size:16px; font-weight:800; margin:0; letter-spacing:-0.2px; }
.navtabs { display:flex; gap:22px; font-size:12px; font-weight:600; color:#6B8693; }
.navtabs span.on { color:#25D1DA; }
.player { display:flex; height:592px;
background:linear-gradient(180deg,#1C4A57 0%,#163A45 22%,#0F2730 55%,#0C1B22 100%); }
.left { width:300px; display:flex; flex-direction:column; align-items:center; padding-top:26px; }
.art { width:186px; height:186px; border-radius:6px; background:linear-gradient(135deg,#25D1DA,#0C1B22 70%);
box-shadow:0 18px 44px -16px rgba(0,0,0,0.65); }
.tname { font-size:20px; font-weight:700; margin-top:16px; text-align:center; }
.artist { font-size:13px; color:#9FB6BF; margin-top:4px; }
.scrub { width:220px; margin-top:16px; }
.track { height:4px; border-radius:2px; background:rgba(255,255,255,0.16); position:relative; }
.fill { position:absolute; left:0; top:0; height:4px; width:38%; border-radius:2px; background:#00A8E1; }
.thumb { position:absolute; left:38%; top:-4px; width:12px; height:12px; border-radius:50%; background:#00A8E1;
box-shadow:0 0 0 4px rgba(0,168,225,0.2); margin-left:-6px; }
.times { display:flex; justify-content:space-between; font-size:10px; color:#9FB6BF; margin-top:6px; }
.controls { display:flex; align-items:center; gap:22px; margin-top:16px; }
.ic2 { font-size:20px; color:#9FB6BF; }
.play { width:52px; height:52px; border-radius:50%; background:#00A8E1; display:flex; align-items:center;
justify-content:center; font-size:20px; color:#fff; box-shadow:0 8px 22px -6px rgba(0,168,225,0.55); }
.right { flex:1; padding:24px 30px 0; }
.eyebrow2 { font-size:10px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#9FB6BF; }
.xray { margin-top:10px; background:rgba(0,168,225,0.07); border:1px solid rgba(37,209,218,0.22);
border-radius:10px; padding:14px 16px; }
.xhead { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.xbadge { background:#25D1DA; color:#042730; font-size:9px; font-weight:800; letter-spacing:0.5px;
border-radius:4px; padding:2px 6px; }
.xlabel { font-size:10px; font-weight:700; letter-spacing:0.6px; color:#9FB6BF; text-transform:uppercase; }
.lyric { font-size:15px; font-weight:600; line-height:1.6; }
.lyric.now { color:#25D1DA; }
.lyric.next { color:#9FB6BF; }
.lyric.dim { color:#6B8693; }
.shelftitle { font-size:15px; font-weight:700; margin-top:20px; }
.shelf { display:flex; gap:12px; margin-top:10px; }
.card2 { width:100px; }
.cardart { width:100px; height:100px; border-radius:6px; }
.cardtitle { font-size:11px; font-weight:600; margin-top:6px; }
.cardsub { font-size:10px; color:#9FB6BF; }
</style></head>
<body>
<nav>
<p class="brand">Amazon Music (iOS)</p>
<div class="navtabs"><span class="on">Home</span><span>Find</span><span>Podcasts</span><span>Library</span></div>
<span style="font-size:12px; color:#25D1DA; font-weight:700;">HD</span>
</nav>
<div class="player">
<div class="left">
<div class="art"></div>
<div class="tname">Ocean Static</div>
<div class="artist">Coastline Radio</div>
<div class="scrub">
<div class="track"><div class="fill"></div><div class="thumb"></div></div>
<div class="times"><span>1:24</span><span>-2:11</span></div>
</div>
<div class="controls">
<span class="ic2">⏮</span>
<div class="play">▶</div>
<span class="ic2">⏭</span>
</div>
</div>
<div class="right">
<div class="eyebrow2">Playing From Playlist</div>
<div class="xray">
<div class="xhead"><span class="xbadge">X-RAY</span><span class="xlabel">Lyrics</span></div>
<div class="lyric dim">Every tide comes back around</div>
<div class="lyric next">Waiting on the harbor light</div>
<div class="lyric now">We were never lost, just drifting slow</div>
<div class="lyric next">Holding on to what we know</div>
<div class="lyric dim">Ocean static in the dark</div>
</div>
<div class="shelftitle">Recently played</div>
<div class="shelf">
<div class="card2"><div class="cardart" style="background:linear-gradient(135deg,#25D1DA,#0C1B22)"></div><div class="cardtitle">Your Soundtrack</div><div class="cardsub">Mix</div></div>
<div class="card2"><div class="cardart" style="background:linear-gradient(135deg,#00A8E1,#122A33)"></div><div class="cardtitle">Deep Focus</div><div class="cardsub">Station</div></div>
<div class="card2"><div class="cardart" style="background:linear-gradient(135deg,#16404C,#0C1B22)"></div><div class="cardtitle">Late Night Drive</div><div class="cardsub">Playlist</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f4f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4f4f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#1F1F1F; box-sizing:border-box; font-family:'Archivo','Helvetica Neue',-apple-system,BlinkMacSystemFont,'SF Pro Text',Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:26px 40px; }
.topnav { display:flex; justify-content:space-between; align-items:center; }
.storesel { font-size:15px; font-weight:700; }
.carticon { width:40px; height:40px; border-radius:8px; background:#F4F4F4; display:flex; align-items:center; justify-content:center; font-size:18px; position:relative; }
.badge { position:absolute; top:-4px; right:-4px; background:#E31837; color:#fff; font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.tracker { margin-top:18px; background:#fff; border-radius:12px; padding:20px; box-shadow:0 4px 14px rgba(31,31,31,0.12); }
.tracker h2 { font-size:22px; font-weight:700; margin:0; }
.eta { font-size:13px; color:#6E6E6E; margin-top:4px; }
.rail { display:flex; align-items:flex-start; margin-top:22px; }
.node-wrap { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; }
.node { width:24px; height:24px; border-radius:50%; z-index:2; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; }
.node.done { background:#006491; }
.node.active { background:#E31837; }
.node.up { background:#fff; border:2px solid #E2E2E2; }
.linebar { position:absolute; top:12px; left:-50%; width:100%; height:4px; z-index:1; }
.linebar.done { background:#006491; }
.linebar.active { background:linear-gradient(90deg,#006491 50%,#E31837 50%); }
.linebar.up { background:#E2E2E2; }
.nlabel { font-size:11px; font-weight:700; margin-top:10px; text-align:center; color:#9A9A9A; }
.nlabel.on { color:#E31837; }
.nlabel.done-lbl { color:#1F1F1F; }
.build { display:flex; gap:32px; margin-top:26px; }
.pizza { width:190px; height:190px; border-radius:50%; position:relative; flex-shrink:0;
background: radial-gradient(circle at 50% 50%, #f0c56a 0%, #e0a838 55%, #c8901f 100%);
box-shadow: inset 0 0 0 10px #d9b45a;
}
.pizza::before { content:''; position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle,#d84a3a 0%,#b8331f 100%); }
.pep { position:absolute; width:16px; height:16px; border-radius:50%; background:#8a1c14; }
.opts { flex:1; }
.optrow { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #E2E2E2; font-size:14px; font-weight:700; }
.optval { color:#6E6E6E; font-weight:400; font-size:13px; }
</style>
</head>
<body>
<div class="stage">
<div class="topnav">
<div class="storesel">Carryout ▾ · Store #4821</div>
<div style="font-size:15px;font-weight:800;letter-spacing:0.2pt;">Domino's (iOS)</div>
<div class="carticon">🛒<div class="badge">2</div></div>
</div>
<div class="tracker">
<h2>Your pizza is in the oven!</h2>
<div class="eta">Estimated delivery 7:45 PM</div>
<div class="rail">
<div class="node-wrap"><div class="node done">✓</div><div class="nlabel done-lbl">Prep</div></div>
<div class="node-wrap"><div class="linebar active"></div><div class="node active">●</div><div class="nlabel on">Bake</div></div>
<div class="node-wrap"><div class="linebar up"></div><div class="node up"></div><div class="nlabel">Box</div></div>
<div class="node-wrap"><div class="linebar up"></div><div class="node up"></div><div class="nlabel">Quality Check</div></div>
<div class="node-wrap"><div class="linebar up"></div><div class="node up"></div><div class="nlabel">Out for delivery</div></div>
</div>
</div>
<div class="build">
<div class="pizza">
<div class="pep" style="top:30%;left:30%"></div>
<div class="pep" style="top:40%;left:65%"></div>
<div class="pep" style="top:62%;left:38%"></div>
<div class="pep" style="top:58%;left:60%"></div>
<div class="pep" style="top:35%;left:50%"></div>
</div>
<div class="opts">
<div class="optrow">Size <span class="optval">Medium (12")</span></div>
<div class="optrow">Crust <span class="optval">Hand Tossed</span></div>
<div class="optrow">Sauce <span class="optval">Robust Tomato</span></div>
<div class="optrow">Cheese <span class="optval">Extra</span></div>
<div class="optrow">Toppings <span class="optval">Pepperoni, Mushroom</span></div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #82dc28; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #82dc28; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #446c1b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #82dc28; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #82dc28; color: #111111;
border: 1px solid #70bc24; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #446c1b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #96e24a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#131518; box-sizing:border-box;
font-family:"Montserrat", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #ebebeb; }
.brand { font-size:19px; font-weight:700; color:#82dc28; letter-spacing:-0.2px; }
.search { width:294px; height:38px; border:1px solid #ebebeb; border-radius:5px; padding:0 14px 0 14px;
font-size:14px; color:#131518; display:flex; align-items:center; }
.navlinks { display:flex; gap:18px; font-size:13.3px; font-weight:700; color:#131518; }
.promo { padding:16px 32px 0; }
.carousel { height:140px; background:linear-gradient(120deg, #eafccc, #f4fff0); border-radius:8px;
position:relative; display:flex; align-items:center; padding:0 24px; }
.carousel h2 { font-size:22px; font-weight:700; color:#131518; margin:0; }
.carousel p { font-size:14px; color:#666666; margin:4px 0 0; }
.dots { position:absolute; right:20px; bottom:14px; display:flex; gap:6px; }
.dot { width:24px; height:24px; border-radius:12px; background:transparent; color:#888888; font-size:11px;
display:flex; align-items:center; justify-content:center; }
.dot.on { background:#2f3030; color:#fff; }
.section { padding:18px 32px 0; }
.sectitle { font-size:16px; font-weight:700; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.card { display:flex; flex-direction:column; gap:6px; position:relative; }
.thumb { width:100%; aspect-ratio:1/1; background:#f6f6f6; border-radius:0px; position:relative; }
.zzim { position:absolute; top:6px; right:6px; width:26px; height:26px; background:#ffffff; border:1px solid #ebebeb; }
.ptitle { font-size:13px; color:#131518; }
.pprice { font-size:14px; font-weight:700; color:#131518; }
.porig { font-size:12px; color:#888888; text-decoration:line-through; margin-left:4px; }
</style></head>
<body>
<nav>
<span class="brand">Olive Young</span>
<div class="search">Search brand, product</div>
<div class="navlinks"><span>Skincare</span><span>Makeup</span><span>Wellness</span></div>
</nav>
<div class="promo">
<div class="carousel">
<div><h2>New season skincare picks</h2><p>Curated routines for every skin type</p></div>
<div class="dots"><span class="dot on">1</span><span class="dot">2</span><span class="dot">3</span></div>
</div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="zzim"></span></div><div class="ptitle">Green Tea Toner 200ml</div><div class="pprice">₩18,900<span class="porig">₩22,000</span></div></div>
<div class="card"><div class="thumb"><span class="zzim"></span></div><div class="ptitle">Vitamin C Serum</div><div class="pprice">₩24,500</div></div>
<div class="card"><div class="thumb"><span class="zzim"></span></div><div class="ptitle">Cushion Foundation</div><div class="pprice">₩32,000</div></div>
<div class="card"><div class="thumb"><span class="zzim"></span></div><div class="ptitle">Sleeping Mask 100ml</div><div class="pprice">₩15,900</div></div>
<div class="card"><div class="thumb"><span class="zzim"></span></div><div class="ptitle">Collagen Powder Stick</div><div class="pprice">₩29,000</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #07080a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #07080a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8a8a8b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d0d0d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #07080a; color: #ffffff;
border: 1px solid #0d0d0d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #07080a; color: #f5f5f5;
border: 1px solid #2d2e30; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #08090a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#07080a; color:#f4f4f6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 마케팅 페이지가 곧 제품 화면 그 자체 — 순수 다크 캔버스에 헤어라인 보더,
커맨드 팔레트 스타일 카드. 채도는 확장 카테고리 4색으로만 제한. */
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #242728; }
.brand { font-size:15px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#9c9c9d; }
.btn { background:#ffffff; color:#18191a; border:none; border-radius:8px; padding:8px 18px; font-weight:500; font-size:13px; }
.wrap { padding:30px 40px 0; text-align:center; }
.wrap h1 { font-size:34px; font-weight:600; letter-spacing:0.1px; margin:0; }
.wrap p { font-size:13px; color:#cdcdcd; margin:8px 0 0; }
/* 커맨드 팔레트 목업 */
.palette { margin:22px auto 0; width:520px; background:#121212; border:1px solid #242728; border-radius:10px; overflow:hidden; }
.pinput { padding:12px 16px; border-bottom:1px solid #242728; font-size:13px; color:#6a6b6c; text-align:left; }
.pinput .cursor { color:#f4f4f6; }
.prow { display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:12.5px; text-align:left; }
.prow.sel { background:#1a1b1c; }
.icon { width:20px; height:20px; border-radius:5px; flex-shrink:0; }
.ic-y { background:rgba(255,197,51,0.2); border:1px solid #ffc533; }
.ic-r { background:rgba(255,97,97,0.2); border:1px solid #ff6161; }
.ic-g { background:rgba(89,212,153,0.2); border:1px solid #59d499; }
.ic-b { background:rgba(87,193,255,0.2); border:1px solid #57c1ff; }
.prow .name { color:#f4f4f6; }
.prow .hint { margin-left:auto; color:#6a6b6c; font-size:11px; }
.cats { display:flex; gap:12px; padding:22px 40px 0; }
.cat { flex:1; border:1px solid #242728; border-radius:8px; padding:14px; }
.cat h5 { font-size:12.5px; font-weight:500; margin:0 0 4px; }
.cat p { font-size:11px; color:#9c9c9d; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Raycast</p>
<div class="navlinks"><span>Store</span><span>Pro</span><span>API</span><span>Manual</span></div>
<button class="btn">Download</button>
</nav>
<div class="wrap">
<h1>Your shortcut to everything</h1>
<p>A collection of powerful productivity tools, all within an extendable launcher.</p>
<div class="palette">
<div class="pinput">Search for apps and commands<span class="cursor">|</span></div>
<div class="prow sel"><span class="icon ic-b"></span><span class="name">Clipboard History</span><span class="hint">↵</span></div>
<div class="prow"><span class="icon ic-y"></span><span class="name">Window Management</span><span class="hint">⌘K</span></div>
<div class="prow"><span class="icon ic-g"></span><span class="name">Cloudinary Sync</span><span class="hint">⌘K</span></div>
<div class="prow"><span class="icon ic-r"></span><span class="name">GitHub Pull Requests</span><span class="hint">⌘K</span></div>
</div>
</div>
<div class="cats">
<div class="cat"><h5>Developer</h5><p>Search repos, review PRs</p></div>
<div class="cat"><h5>Productivity</h5><p>Clipboard, snippets, notes</p></div>
<div class="cat"><h5>Design</h5><p>Colors, fonts, assets</p></div>
<div class="cat"><h5>AI</h5><p>Chat, translate, summarize</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60012; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60012; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee878f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #484848; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60012; color: #ffffff;
border: 1px solid #484848; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60012; color: #f5f5f5;
border: 1px solid #e82736; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee878f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cd0c1b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#484848; box-sizing:border-box;
font-family:"Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
nav { flex:0 0 60px; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e0e0e0; background:#ffffff; }
.brand { display:flex; align-items:center; gap:8px; }
.brand .mark { width:22px; height:22px; border-radius:6px; background:#e60012; }
.brand .word { font-size:17px; font-weight:600; letter-spacing:-0.2px; color:#484848; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:600; color:#484848; }
.navlinks span.active { color:#e60012; }
.utils { display:flex; gap:8px; align-items:center; }
.pill { background:#f8f8f8; color:#484848; border-radius:20px; height:32px; padding:0 14px;
font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.pill .dot { width:6px; height:6px; border-radius:50%; background:#727272; }
.hero { flex:0 0 208px; position:relative; margin:20px 32px 0; border-radius:12px; overflow:hidden;
background:linear-gradient(120deg,#27455c 0%, #4b5cce 45%, #468254 100%); display:flex; align-items:center; }
.hero::after { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 78% 30%, rgba(255,255,255,0.16), transparent 55%); }
.hero .content { position:relative; z-index:1; padding:0 40px; display:flex; flex-direction:column; gap:12px; max-width:520px; }
.badge { align-self:flex-start; background:#e60012; color:#ffffff; border-radius:999px; padding:4px 12px;
font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; }
.hero h1 { margin:0; font-size:30px; font-weight:600; line-height:1.15; color:#ffffff; letter-spacing:-0.4px; }
.hero p { margin:0; font-size:13px; color:rgba(255,255,255,0.85); line-height:1.4; max-width:400px; }
.hero .row { display:flex; gap:10px; margin-top:4px; }
.btn-primary { background:#e60012; color:#ffffff; border:none; border-radius:8px; height:38px;
padding:0 20px; font-weight:600; font-size:14px; white-space:nowrap; font-family:inherit; }
.btn-ghost { background:rgba(255,255,255,0.12); color:#ffffff; border:1.5px solid rgba(255,255,255,0.7);
border-radius:8px; height:38px; padding:0 20px; font-weight:600; font-size:14px; white-space:nowrap; font-family:inherit; }
.section-label { flex:0 0 auto; margin:18px 32px 0; font-size:14px; font-weight:600; color:#484848; }
.cards { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:10px 32px 0; min-height:0; }
.card { position:relative; background:#ffffff; border:1px solid #e0e0e0; border-radius:12px; overflow:hidden;
display:flex; flex-direction:column; box-shadow:rgba(0,0,0,0.07) 0px 2px 8px 0px; }
.art { height:56%; position:relative; }
.art.a1 { background:linear-gradient(160deg,#dceeb1,#468254); }
.art.a2 { background:linear-gradient(160deg,#c5b0f4,#27455c); }
.art.a3 { background:linear-gradient(160deg,#efd4d4,#e60012); }
.art .ring { position:absolute; width:70px; height:70px; border-radius:50%; border:6px solid rgba(255,255,255,0.35); }
.art.a1 .ring { top:-16px; right:-16px; }
.art.a2 .ring { bottom:-20px; left:-14px; }
.art.a3 .ring { top:20px; left:60%; }
.card-body { flex:1; padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-height:0; }
.card-body h3 { margin:0; font-size:15px; font-weight:600; color:#484848; }
.card-body p { margin:0; font-size:11.5px; color:#727272; line-height:1.35; }
.play { align-self:flex-start; margin-top:auto; background:#e60012; color:#ffffff; border-radius:999px;
height:26px; padding:0 14px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:5px; }
footer { flex:0 0 46px; border-top:1px solid #e0e0e0; padding:0 32px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#727272; background:#ffffff; }
</style></head>
<body>
<div class="page">
<nav>
<div class="brand"><span class="mark"></span><span class="word">Nintendo</span></div>
<div class="navlinks"><span class="active">Explore</span><span>Shop</span><span>Support</span></div>
<div class="utils">
<span class="pill"><span class="dot"></span>Search</span>
<span class="pill">Wish List</span>
<span class="pill">Cart</span>
</div>
</nav>
<div class="hero">
<div class="content">
<span class="badge">New</span>
<h1>Adventure awaits on every screen</h1>
<p>Play at home or on the go. Discover the latest worlds built for the whole family.</p>
<div class="row">
<button class="btn-primary">Learn more</button>
<button class="btn-ghost">Start shopping</button>
</div>
</div>
</div>
<div class="section-label">Trending topics</div>
<div class="cards">
<div class="card">
<div class="art a1"><span class="ring"></span></div>
<div class="card-body">
<h3>Meadow Kingdom Quest</h3>
<p>An all-new co-op adventure across floating islands.</p>
<span class="play">▶ Play</span>
</div>
</div>
<div class="card">
<div class="art a2"><span class="ring"></span></div>
<div class="card-body">
<h3>Starlight Grand Prix</h3>
<p>Race with friends across twelve galaxies of tracks.</p>
<span class="play">▶ Play</span>
</div>
</div>
<div class="card">
<div class="art a3"><span class="ring"></span></div>
<div class="card-body">
<h3>Puzzle Garden Deluxe</h3>
<p>A cozy puzzler for players of every age.</p>
<span class="play">▶ Play</span>
</div>
</div>
</div>
<footer>
<span>© Nintendo</span>
<span>Nintendo · Games · Hardware · Support</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body {
display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.announce { flex:0 0 28px; background:#111111; color:#ffffff; display:flex; align-items:center; gap:10px; padding:0 32px; font-size:12px; font-weight:700; }
.newbadge { background:#ff4d00; color:#000000; border-radius:18px; padding:2px 10px; font-size:10px; font-weight:700; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #eeeeee; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:18px; font-size:13px; font-weight:700; }
.navbtns { display:flex; gap:10px; }
.btn-outline { background:#ffffff; color:#111111; border:1px solid #111111; border-radius:8px; padding:8px 14px; font-size:12px; font-weight:700; }
.btn-solid { background:#111111; color:#ffffff; border:none; border-radius:8px; padding:8px 14px; font-size:12px; font-weight:700; }
main { flex:1 1 auto; display:flex; overflow:hidden; }
.panel-dark { flex:0 0 380px; background:#000000; color:#ffffff; padding:36px 32px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.panel-dark h1 { font-size:36px; font-weight:700; line-height:1.05; margin:0; letter-spacing:-0.5px; }
.panel-dark p { font-size:14px; color:rgba(255,255,255,.72); line-height:1.5; margin:0; max-width:280px; }
.cta-lime { background:#00ff44; color:#111111; border:none; border-radius:24px; padding:12px 26px; font-size:14px; font-weight:700; width:fit-content; margin-top:6px; }
.panel-light { flex:1 1 auto; padding:28px 32px; display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.ph-row { display:flex; justify-content:space-between; align-items:center; }
.ph-row h2 { font-size:16px; font-weight:700; margin:0; }
.ph-row span { font-size:11px; color:rgba(17,17,17,.55); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.orgcards { display:flex; gap:12px; }
.orgcard { flex:1; border:1px solid #eeeeee; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.avatar { width:32px; height:32px; border-radius:9px; }
.orgcard b { font-size:13px; }
.orgcard span { font-size:11px; color:rgba(17,17,17,.55); }
.tag-connected { background:#eafce9; color:#0a7d2e; font-size:10px; font-weight:700; border-radius:9999px; padding:2px 8px; width:fit-content; }
.metrics { display:flex; gap:12px; margin-top:auto; }
.metric { flex:1; background:#f6f6f6; border-radius:12px; padding:14px; }
.metric h3 { font-size:22px; font-weight:700; margin:0 0 2px; }
.metric span { font-size:11px; color:rgba(17,17,17,.55); font-weight:600; }
</style></head>
<body>
<div class="announce"><span class="newbadge">NEW</span> flex launches Relations Driven AX for HR teams</div>
<nav>
<p class="brand">flex</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span></div>
<div class="navbtns"><button class="btn-outline">Sign in</button><button class="btn-solid">Request a demo</button></div>
</nav>
<main>
<div class="panel-dark">
<h1>Every decision, in context.</h1>
<p>flex connects HR data across your organization so leaders act on relationships, not spreadsheets.</p>
<button class="cta-lime">Request a demo</button>
</div>
<div class="panel-light">
<div class="ph-row"><h2>Org overview</h2><span>Live sync</span></div>
<div class="orgcards">
<div class="orgcard"><span class="avatar" style="background:#00ff44"></span><b>Hong Gil-dong</b><span>People Ops Lead</span><span class="tag-connected">● Connected</span></div>
<div class="orgcard"><span class="avatar" style="background:#111111"></span><b>Kim Cheol-su</b><span>Payroll Manager</span><span class="tag-connected">● Connected</span></div>
<div class="orgcard"><span class="avatar" style="background:#eeeeee"></span><b>Lee Yeong-hee</b><span>Team Lead, R&D</span><span class="tag-connected">● Connected</span></div>
</div>
<div class="ph-row"><h2>Payroll & headcount</h2><span>This quarter</span></div>
<div class="metrics">
<div class="metric"><h3>842</h3><span>Employees</span></div>
<div class="metric"><h3>3.4 yrs</h3><span>Avg. tenure</span></div>
<div class="metric"><h3>12</h3><span>Open roles</span></div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf9f4; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf9f4; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #5f6368; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #006fcf; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fbf9f4; color: #231f20;
border: 1px solid #006fcf; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fbf9f4; color: #231f20;
border: 1px solid #c5c2bf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6368; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #6bbbae; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#fbf9f4; color:#242833; box-sizing:border-box; font-family:'Maven Pro','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:center; position:relative; padding:0 32px; }
.brand { font-size:20px; font-weight:700; margin:0; color:#006fcf; }
.navlinks { position:absolute; left:32px; display:flex; gap:20px; font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; color:#231f20; }
.search-pill { position:absolute; right:32px; background:#fff; border:1px solid #dedede; border-radius:999px; padding:10px 20px; font-size:13px; color:#5f6368; }
.main { display:flex; gap:20px; padding:12px 32px; height:388px; }
.gallery { width:400px; background:#fff; border-radius:24px; display:flex; align-items:center; justify-content:center; position:relative; }
.diaper-shape { width:200px; height:130px; background:linear-gradient(160deg,#f48120,#006fcf); border-radius:999px; }
.badge-eco { position:absolute; top:20px; left:20px; background:#6bbbae; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 10px; border-radius:999px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:24px; font-weight:600; margin:0; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:22px; font-weight:600; }
.price-sale { color:#f48120; }
.desc { font-size:14px; line-height:1.5; color:#5f6368; max-width:420px; }
.tag-row { display:flex; gap:8px; margin-top:2px; }
.cat-tag { background:#f1f1f1; color:#5f6368; font-size:12px; padding:6px 14px; border-radius:999px; }
.cat-tag.active { background:#006fcf; color:#fff; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#006fcf; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:15px; }
.btn-secondary { flex:1; height:44px; background:#fbf9f4; color:#231f20; border:2px solid #006fcf; border-radius:8px; font-weight:600; font-size:15px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#f1f1f1; padding:14px 32px; display:flex; justify-content:space-between; font-size:12px; color:#242833; }
</style></head>
<body>
<nav>
<div class="navlinks"><span>Diapers</span><span>Wipes</span><span>Bath</span></div>
<p class="brand">Bambo Nature</p>
<div class="search-pill">🔍 Search</div>
</nav>
<div class="main">
<div class="gallery">
<span class="badge-eco">Eco Certified</span>
<div class="diaper-shape"></div>
</div>
<div class="info">
<h1>Premium Eco Diapers, Size 3</h1>
<div class="price-row">
<span class="price price-sale">$21.99</span>
</div>
<p class="desc">Made with FSC-certified sustainable wood pulp and free from chlorine bleaching, lotions, and fragrances — soft next-to-skin comfort for sensitive newborn skin.</p>
<div class="tag-row">
<span class="cat-tag active">Newborn</span>
<span class="cat-tag">Size 1</span>
<span class="cat-tag">Size 2</span>
<span class="cat-tag">Size 3</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Subscribe & Save</button>
</div>
</div>
</div>
<footer>
<span>© Bambo Nature</span>
<span>Bambo Nature · Sustainability · Support · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a2a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a2a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b9a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7408ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a2a; color: #7408ff;
border: 1px solid #7408ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a2a; color: #f5f5f5;
border: 1px solid #30304a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b9a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1b0a4c; color: #7408ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A2A; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:44px; display:flex; align-items:center; padding:0 24px; }
.grad { background:linear-gradient(135deg,#7408FF,#FF00FF); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900; font-size:22px; }
.hero { margin:8px 24px; height:230px; border-radius:18px; position:relative; overflow:hidden;
background:linear-gradient(155deg,#3a1a55,#0a0a2a 70%); }
.heroscrim { position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,10,42,0.95) 100%); }
.oribadge { position:absolute; top:16px; left:16px; background:linear-gradient(135deg,#7408FF,#FF00FF); font-size:9px; font-weight:800; padding:4px 10px; border-radius:4px; letter-spacing:0.6px; }
.herotitle { position:absolute; left:16px; bottom:70px; font-size:32px; font-weight:900; letter-spacing:-0.6px; }
.herometa { position:absolute; left:16px; bottom:52px; font-size:11px; color:#B9B9D6; }
.herobtns { position:absolute; left:16px; bottom:16px; display:flex; gap:10px; }
.playfree { background:#fff; color:#0A0A2A; font-weight:800; font-size:14px; padding:10px 22px; border-radius:8px; }
.plusbtn { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center; }
.row { padding:0 24px; margin-top:14px; }
.rowhead { font-size:19px; font-weight:800; margin-bottom:8px; }
.posters { display:flex; gap:10px; }
.poster { width:100px; height:150px; border-radius:10px; position:relative; flex-shrink:0; }
.p1 { background:linear-gradient(160deg,#553355,#15153D); }
.p2 { background:linear-gradient(160deg,#335555,#15153D); }
.p3 { background:linear-gradient(160deg,#553333,#15153D); }
.p4 { background:linear-gradient(160deg,#335533,#15153D); }
.p5 { background:linear-gradient(160deg,#555533,#15153D); }
.freetag { position:absolute; top:6px; left:6px; background:#FFD400; color:#1A0A2A; font-size:8px; font-weight:900; padding:2px 5px; border-radius:3px; }
.prog { position:absolute; left:6px; right:6px; bottom:6px; height:4px; background:rgba(255,255,255,0.16); border-radius:2px; }
.prog i { display:block; height:100%; width:60%; background:linear-gradient(90deg,#7408FF,#FF00FF); border-radius:2px; }
</style></head>
<body>
<div class="topbar"><span class="grad">Tubi (iOS)</span></div>
<div class="hero">
<div class="heroscrim"></div>
<span class="oribadge">Tubi (iOS) ORIGINAL</span>
<div class="herotitle">Midnight Frequency</div>
<div class="herometa">2024 · Thriller · 1h 52m · TV-MA</div>
<div class="herobtns"><div class="playfree">▶ Play Free</div><div class="plusbtn">+</div></div>
</div>
<div class="row">
<div class="rowhead">Continue Watching</div>
<div class="posters">
<div class="poster p1"><div class="prog"><i></i></div></div>
<div class="poster p2"><span class="freetag">FREE</span></div>
<div class="poster p3"><span class="freetag">FREE</span></div>
<div class="poster p4"><span class="freetag">FREE</span></div>
<div class="poster p5"><span class="freetag">FREE</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6719; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6719; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab592; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4a6fe3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6719; color: #000000;
border: 1px solid #4a6fe3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6719; color: #f5f5f5;
border: 1px solid #fd7e3c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab592; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e26839; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1F1F1F; box-sizing:border-box;
font-family:"Source Serif 4", Georgia, "Times New Roman", serif; }
* { box-sizing:border-box; }
.sans { font-family:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; }
.wrap { max-width:600px; margin:0 auto; padding:26px 30px; }
.pub-row { display:flex; align-items:center; gap:10px; }
.logo-tile { width:34px; height:34px; border-radius:6px; background:linear-gradient(135deg,#FF6719,#e5560e); }
.pub-name { font-size:14px; font-weight:600; }
.pub-sub { font-size:12px; color:#8A8A8A; }
.p-title { font-size:26px; font-weight:700; margin-top:14px; letter-spacing:-.3px; line-height:1.22; }
.dek { font-size:17px; font-style:italic; color:#57534E; margin-top:8px; line-height:1.4; }
.byline-row { display:flex; align-items:center; gap:10px; margin-top:14px; padding-bottom:14px; border-bottom:0.5px solid #ECECEC; }
.b-av { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#89b,#456); }
.b-meta { font-size:13px; color:#8A8A8A; }
.body-p { font-size:18px; line-height:1.65; margin-top:18px; }
.pull { font-size:21px; font-weight:600; font-style:italic; border-left:3px solid #FF6719; padding-left:18px; margin:18px 0; }
.sub-card { margin-top:20px; background:#FFF7F2; border:1px solid #FFD9C2; border-radius:10px; padding:14px; text-align:center; }
.sub-hdr { font-size:15px; font-weight:700; }
.sub-sub { font-size:12px; color:#8A8A8A; margin-top:4px; }
.sub-btn { margin-top:10px; height:42px; border-radius:6px; background:#FF6719; color:#fff; font-size:15px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.price-line { font-size:11px; color:#A0A0A0; margin-top:8px; }
.action-bar { display:flex; gap:22px; margin-top:16px; font-size:13px; font-weight:600; color:#57534E; }
.action-bar .like { color:#FF6719; }
</style></head>
<body>
<div class="wrap">
<div class="pub-sub sans">Substack (iOS)</div>
<div class="pub-row"><div class="logo-tile"></div><div><div class="pub-name sans">The Generalist</div><div class="pub-sub sans">312,400 subscribers</div></div></div>
<div class="p-title">The Quiet Compounding of Small Bets</div>
<div class="dek">Why the best portfolios are built one unglamorous decision at a time</div>
<div class="byline-row"><div class="b-av"></div><span class="b-meta sans">Mario Gabriele · May 14 · 18 min read</span></div>
<div class="body-p">Every year a handful of investors quietly outperform, and almost none of them do it with a single dramatic call. What separates them is a discipline that never gets a headline.</div>
<div class="pull">"The compounding always happens quietly, in the background, while everyone is watching something louder."</div>
<div class="body-p">Keep reading with a subscription to see the full framework and three case studies.</div>
<div class="sub-card sans">
<div class="sub-hdr">Keep reading with a subscription</div>
<div class="sub-sub">Unlock this post and the full archive</div>
<div class="sub-btn">Subscribe</div>
<div class="price-line">$8/month · $80/year · cancel anytime</div>
</div>
<div class="action-bar sans"><span class="like">♥ 842</span><span>💬 63</span><span>↻ Restack</span><span>↗ Share</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #06c167; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #06c167; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7f5e7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { padding:16px 30px 8px; }
.addr { font-size:16px; font-weight:700; }
.searchbar { height:48px; background:#F3F3F3; border-radius:12px; margin-top:10px; display:flex; align-items:center; padding:0 16px; color:#6B6B6B; font-size:15px; }
.pills { display:flex; gap:10px; padding:12px 30px; }
.pill { height:40px; background:#F3F3F3; border-radius:999px; display:flex; align-items:center; padding:0 16px; font-size:14px; font-weight:500; gap:6px; }
.pill.on { background:#06C167; color:#fff; }
.cards { display:flex; gap:20px; padding:0 30px; }
.card { flex:1; }
.photo { height:150px; border-radius:12px; position:relative; }
.p1 { background:linear-gradient(150deg,#e8c98a,#a05a2a); }
.p2 { background:linear-gradient(150deg,#c9dfae,#4a7a3a); }
.ribbon { position:absolute; top:8px; left:8px; background:#fff; color:#06C167; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; }
.heart { position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; }
.rname { font-size:17px; font-weight:700; margin-top:10px; }
.rmeta { font-size:14px; color:#6B6B6B; margin-top:4px; }
.rmeta .free { color:#06C167; }
.cartbar { position:absolute; left:24px; right:24px; bottom:76px; height:56px; background:#06C167; border-radius:12px; display:flex; align-items:center; padding:0 18px; box-shadow:rgba(0,0,0,0.12) 0 -2px 12px; }
.cartcount { width:26px; height:26px; border-radius:50%; background:#fff; color:#06C167; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.cartmid { margin-left:14px; font-weight:700; font-size:16px; color:#fff; }
.carttotal { margin-left:auto; font-weight:700; font-size:16px; color:#fff; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:52px; background:rgba(255,255,255,0.96); border-top:1px solid #E8E8E8; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:10px; color:#A6A6A6; text-align:center; }
.tab.on { color:#000; }
</style></head>
<body>
<div class="topbar"><div class="addr">Deliver to · Uber Eats (iOS) ▾</div><div class="searchbar">Search Uber Eats</div></div>
<div class="pills">
<div class="pill on">🍔 Burgers</div>
<div class="pill">🍕 Pizza</div>
<div class="pill">🥗 Healthy</div>
<div class="pill">🍜 Asian</div>
</div>
<div class="cards">
<div class="card">
<div class="photo p1"><span class="ribbon">$0 Delivery Fee</span><span class="heart">♡</span></div>
<div class="rname">Sunrise Diner</div>
<div class="rmeta">★ 4.8 · 25 min · <span class="free">$0 Delivery Fee</span></div>
</div>
<div class="card">
<div class="photo p2"><span class="heart">♡</span></div>
<div class="rname">Green Bowl Co.</div>
<div class="rmeta">★ 4.6 · 18 min · $0.99 Delivery Fee</div>
</div>
</div>
<div class="cartbar"><div class="cartcount">3</div><div class="cartmid">View cart</div><div class="carttotal">$28.40</div></div>
<div class="tabbar">
<div class="tab on">Home</div><div class="tab">Browse</div><div class="tab">Search</div><div class="tab">Cart</div><div class="tab">Account</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffdfc; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffdfc; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ff5601; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #fffdfc; color: #121212;
border: 1px solid #ff5601; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fffdfc; color: #121212;
border: 1px solid #c4c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff5601; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffdfc; color:#121212; box-sizing:border-box;
font-family:'DM Sans','Sofia Pro',sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:0; font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
.navlinks span { padding:0 14px; }
.navlinks span.active { color:#121212; background:#f8f3ec; border-radius:999px; padding:6px 16px; }
.cart { width:44px; height:44px; border-radius:999px; background:#f8f3ec; display:flex; align-items:center; justify-content:center; }
.hero { display:flex; align-items:center; gap:20px; padding:6px 36px 18px; }
.heroimg { flex:1; height:180px; border-radius:12px; background:linear-gradient(135deg,#333333,#ff5601); position:relative; }
.herotext { flex:1; }
.herotext h1 { font-size:32px; font-weight:700; margin:0 0 8px; letter-spacing:-.5px; }
.herotext p { font-size:13px; color:#666666; margin:0 0 14px; max-width:300px; }
.btn { display:inline-block; background:#ff5601; color:#fff; font-size:15px; font-weight:600; padding:14px 30px; border-radius:999px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 36px; }
.card { background:#fff; border-radius:12px; overflow:hidden; }
.card-img { height:96px; background:#f8f3ec; position:relative; }
.card-img::after { content:''; position:absolute; left:50%; top:50%; width:50px; height:60px; background:linear-gradient(180deg,#333,#121212); border-radius:8px 8px 20px 20px; transform:translate(-50%,-50%); }
.badgep { position:absolute; top:8px; left:8px; background:#ff5601; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 10px; border-radius:999px; }
.cbody { padding:10px 12px; }
.cbody h3 { font-size:13px; font-weight:500; margin:0 0 6px; }
.stars { color:#ffd45d; font-size:11px; font-weight:600; }
.price { font-size:18px; font-weight:600; margin-top:4px; }
footer { position:absolute; bottom:0; left:0; right:0; height:52px; background:#121212; color:#999999;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Beast Health</p>
<div class="navlinks"><span class="active">Blenders</span><span>Accessories</span><span>Recipes</span></div>
<div class="cart">🛒</div>
</nav>
<section class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Performance-Driven Blending</h1>
<p>Industrial power meets culinary science — every blend engineered for texture and speed.</p>
<span class="btn">Shop Blenders</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badgep">Best Seller</span></div>
<div class="cbody"><h3>Beast Blender B10</h3><div class="stars">★★★★★ 4.9</div><div class="price">$799</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Travel Blender Cup</h3><div class="stars">★★★★☆ 4.6</div><div class="price">$59</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Ceramic Blade Upgrade</h3><div class="stars">★★★★★ 4.8</div><div class="price">$89</div></div>
</div>
</div>
<footer>
<span>© Beast Health</span>
<span>Beast Health · Warranty · Recipes · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #b1b1b1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #f9fafb; color: #1a1a1a;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #1a1a1a;
border: 1px solid #c1c2c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b1b1b1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; background: #108474; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f9fafb; color:#1a1a1a; box-sizing:border-box; font-family:'Plus Jakarta Sans',inherit,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#f9fafb; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; letter-spacing:0.2px; color:#7b7b7b; }
.navlinks span.active { color:#1a1a1a; border-bottom:2px solid #108474; padding-bottom:4px; }
.search-pill { background:#f5f2ee; border-radius:999px; padding:10px 20px; font-size:13px; color:#b1b1b1; }
.main { display:flex; gap:24px; padding:16px 32px; height:400px; }
.gallery { width:400px; background:#f5f2ee; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; }
.riser { width:220px; height:60px; background:linear-gradient(90deg,#cbc0ac,#efece6); border-radius:8px; position:relative; }
.riser::before { content:''; position:absolute; left:20px; bottom:-40px; width:20px; height:40px; background:#cbc0ac; border-radius:4px; }
.riser::after { content:''; position:absolute; right:20px; bottom:-40px; width:20px; height:40px; background:#cbc0ac; border-radius:4px; }
.badge-pill { position:absolute; top:16px; left:16px; background:#108474; color:#fff; font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; }
.rating-pill { position:absolute; bottom:16px; right:16px; background:#fff; border:1px solid #dedede; font-size:11px; font-weight:600; padding:4px 12px; border-radius:999px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:24px; font-weight:600; margin:0; }
.price { font-size:18px; font-weight:500; color:#7b7b7b; }
.desc { font-size:14px; line-height:1.5; color:#7b7b7b; max-width:420px; }
.wood-row { display:flex; gap:8px; margin-top:4px; }
.wood-chip { background:#efece6; color:#1a1a1a; font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#108474; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:15px; }
.btn-secondary { flex:1; height:44px; background:#f9fafb; color:#1a1a1a; border:1px solid #dedede; border-radius:8px; font-weight:600; font-size:15px; }
.section-header { padding:0 32px; font-size:18px; font-weight:500; }
.related { display:flex; gap:16px; padding:10px 32px; }
.rel-card { flex:1; background:#fff; border:1px solid #dedede; border-radius:8px; padding:10px; }
.rel-card .rel-img { height:60px; background:#f5f2ee; border-radius:8px; margin-bottom:6px; }
.rel-card span { font-size:12px; font-weight:500; }
</style></head>
<body>
<nav>
<p class="brand">Balolo</p>
<div class="navlinks"><span class="active">Monitor Stands</span><span>Desk Organizers</span><span>Workspace</span></div>
<div class="search-pill">🔍 Search workspace</div>
</nav>
<div class="main">
<div class="gallery">
<span class="badge-pill">Best Seller</span>
<div class="riser"></div>
<span class="rating-pill">★ 4.8</span>
</div>
<div class="info">
<h1>Walnut Monitor Stand Riser</h1>
<span class="price">$89.00</span>
<p class="desc">Solid walnut riser lifts your monitor to eye level while opening a shelf for a keyboard or notebook beneath. Precision-joined, hand-finished, built to outlast the desk.</p>
<div class="wood-row">
<span class="wood-chip">Walnut</span>
<span class="wood-chip">Oak</span>
<span class="wood-chip">Ash</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Read Reviews</button>
</div>
</div>
</div>
<div class="section-header">You may also like</div>
<div class="related">
<div class="rel-card"><div class="rel-img"></div><span>Oak Desk Organizer</span></div>
<div class="rel-card"><div class="rel-img"></div><span>Walnut Laptop Stand</span></div>
<div class="rel-card"><div class="rel-img"></div><span>Ash Cable Tray</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #009fd9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #009fd9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87cee8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #009fd9; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #009fd9; color: #f5f5f5;
border: 1px solid #27addd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87cee8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e96dd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2f3033; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.shell { display:flex; height:640px; }
.side { width:210px; flex-shrink:0; background:#fafbfb; border-right:1px solid #e9eced;
padding:22px 18px; display:flex; flex-direction:column; gap:22px; }
.side .brand { font-size:16px; font-weight:700; letter-spacing:-0.2px; }
.side .brand span { color:#009fd9; }
.side nav { display:flex; flex-direction:column; gap:2px; }
.side nav a { font-size:13px; color:#676d73; padding:7px 10px; border-radius:4px; }
.side nav a.active { background:#e9eced; color:#2f3033; font-weight:600; }
.side .grp { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:#8b95a1;
margin:6px 0 -8px 10px; font-weight:700; }
.main { flex:1; padding:34px 44px; overflow:hidden; }
.crumb { font-size:11px; color:#676d73; margin-bottom:10px; }
h1 { font-size:32px; font-weight:700; margin:0 0 8px; letter-spacing:-0.4px; }
.lead { font-size:15px; color:#676d73; margin:0 0 26px; max-width:520px; line-height:1.5; }
.row { display:flex; gap:28px; align-items:flex-start; }
.spec-card { background:#ffffff; border:1px solid #e9eced; border-radius:4px; padding:26px;
display:flex; flex-direction:column; align-items:center; gap:16px; width:300px; }
.spec-card .label { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:#8b95a1; font-weight:700; align-self:flex-start; }
.doc-btn { background:#07344a; color:#7cdcfd; border:none; border-radius:9999px; padding:0 24px;
height:48px; font-size:16px; font-weight:700; white-space:nowrap; }
.doc-btn.disabled { background:#f5f6f6; color:#b9bbbf; }
.swatchrow { display:flex; gap:10px; }
.sw { width:34px; height:34px; border-radius:4px; }
.list { flex:1; display:flex; flex-direction:column; }
.list-item { border-top:1px solid #e9eced; padding:22px 0; display:flex; justify-content:space-between; align-items:center; }
.list-item:first-child { border-top:none; }
.list-item .t { font-size:16px; font-weight:400; }
.list-item .meta { font-size:13px; color:#676d73; }
.search { margin-top:24px; display:flex; align-items:center; gap:8px; background:#fafbfb;
border:1px solid #e9eced; border-radius:4px; height:38px; padding:9px 16px 9px 12px; width:280px; }
.search .icon { width:14px; height:14px; border:1.5px solid #8b95a1; border-radius:50%; position:relative; }
.search .icon::after { content:''; position:absolute; width:6px; height:1.5px; background:#8b95a1; right:-5px; bottom:1px; transform:rotate(45deg); }
.search span { font-size:14px; color:#8b95a1; }
</style></head>
<body>
<div class="shell">
<div class="side">
<div class="brand">Thumbtack Thumbprint<span>.</span></div>
<nav>
<div class="grp">Foundations</div>
<a href="#">Colors</a>
<a href="#">Typography</a>
<a href="#">Spacing</a>
<div class="grp">Components</div>
<a href="#" class="active">Button</a>
<a href="#">Text Field</a>
<a href="#">List</a>
<a href="#">Badge</a>
</nav>
<div class="search">
<div class="icon"></div>
<span>Search docs</span>
</div>
</div>
<div class="main">
<div class="crumb">Components / Button / v2 / React</div>
<h1>Button</h1>
<p class="lead">A single, consistent action control used across documentation and product surfaces. Default and disabled states shown below.</p>
<div class="row">
<div class="spec-card">
<span class="label">Default</span>
<button class="doc-btn">Get started</button>
</div>
<div class="spec-card">
<span class="label">Disabled</span>
<button class="doc-btn disabled">Get started</button>
</div>
<div class="spec-card">
<span class="label">Palette</span>
<div class="swatchrow">
<div class="sw" style="background:#009fd9"></div>
<div class="sw" style="background:#2f3033"></div>
<div class="sw" style="background:#676d73"></div>
<div class="sw" style="background:#e9eced;border:1px solid #e9eced"></div>
</div>
</div>
</div>
<div class="list">
<div class="list-item"><span class="t">Radius</span><span class="meta">9999px pill</span></div>
<div class="list-item"><span class="t">Padding</span><span class="meta">0px 24px</span></div>
<div class="list-item"><span class="t">Height</span><span class="meta">48px</span></div>
<div class="list-item"><span class="t">Font</span><span class="meta">16px / 700 / Rise</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21252b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #21252b;
border: 1px solid #21252b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdcdd; color: #21252b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#21252B; color:#E8EAED; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif-italic { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
main { display:flex; height:640px; }
/* pane 1: tag sidebar — Bear has no folders, only hashtags */
.sidebar { width:190px; background:#282C34; padding:20px 0 0; flex:0 0 auto; }
.sbrand { font-size:15px; font-weight:700; padding:0 18px 16px; }
.filt { padding:8px 18px; font-size:12px; color:#9DA3AD; }
.filt.active { color:#E8EAED; background:#2F343D; }
.tagrow { display:flex; align-items:center; gap:8px; padding:7px 18px; font-size:13px; font-weight:500; }
.tagrow .dot { width:6px; height:6px; border-radius:50%; background:#E0566F; }
.tagrow.nest { padding-left:34px; color:#9DA3AD; font-size:12px; }
.tagrow.nest .dot { background:#5AAFEF; }
/* pane 2: note list */
.notelist { width:230px; background:#282C34; border-left:1px solid #353A42; border-right:1px solid #353A42;
padding-top:20px; flex:0 0 auto; }
.lsection { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:#E0566F; padding:0 16px 8px; }
.lrow { padding:10px 16px; border-bottom:1px solid #353A42; }
.lrow.sel { background:#2F343D; border-left:3px solid #E0566F; padding-left:13px; }
.lrow .lt { font-size:14px; font-weight:600; margin-bottom:3px; }
.lrow .lp { font-size:11px; color:#9DA3AD; line-height:1.4; }
.lrow .ld { font-size:10px; color:#6B7280; margin-top:4px; }
/* pane 3: editor — the actual product */
.editor { flex:1; padding:26px 34px 0; position:relative; }
.h1 { font-size:22px; font-weight:700; margin:0 0 14px; }
.p1 { font-size:14px; line-height:1.6; margin:0 0 12px; }
.h2 { font-size:16px; font-weight:700; margin:16px 0 8px; }
.tag-inline { color:#E0566F; font-weight:500; }
.quote { border-left:3px solid #FF8A65; padding:2px 0 2px 14px; margin:12px 0; }
.quote span { font-size:14px; color:#9DA3AD; }
.cbrow { display:flex; align-items:center; gap:10px; margin:6px 0; font-size:14px; }
.cb { width:16px; height:16px; border-radius:4px; border:2px solid #6B7280; flex:0 0 auto; }
.cb.done { background:linear-gradient(135deg,#E0566F,#FF8A65); border:none; position:relative; }
.cb.done::after { content:'✓'; position:absolute; inset:0; color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; }
.strike { text-decoration:line-through; color:#6B7280; }
.code { background:#282C34; border-radius:5px; padding:2px 6px; font-size:13px; }
.infobar { position:absolute; left:0; right:0; bottom:0; height:38px; border-top:0.5px solid #353A42;
background:rgba(40,44,52,0.9); display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.infobar span { font-size:11px; color:#6B7280; }
.infobar .acts { color:#FF8A65; font-size:13px; letter-spacing:6px; }
.fab { position:absolute; right:26px; bottom:56px; width:46px; height:46px; border-radius:50%;
background:linear-gradient(135deg,#E0566F,#FF8A65); color:#fff; font-size:20px; font-weight:300;
display:flex; align-items:center; justify-content:center; box-shadow:rgba(224,86,111,0.35) 0 6px 16px; }
</style></head>
<body>
<main>
<div class="sidebar">
<p class="sbrand">Bear (iOS)</p>
<div class="filt active">☰ Notes</div>
<div class="filt">◷ Today</div>
<div class="filt">☐ Todo</div>
<div class="tagrow" style="margin-top:10px"><span class="dot"></span>#work</div>
<div class="tagrow nest"><span class="dot"></span>#work/sprint</div>
<div class="tagrow"><span class="dot"></span>#reading</div>
<div class="tagrow"><span class="dot"></span>#journal</div>
</div>
<div class="notelist">
<p class="lsection">#work/sprint</p>
<div class="lrow sel">
<div class="lt">Sprint 42 retro notes</div>
<div class="lp">Went well: shipped the onboarding flow a day early. Needs work: QA...</div>
<div class="ld">Edited 2h ago</div>
</div>
<div class="lrow">
<div class="lt">API migration checklist</div>
<div class="lp">- [ ] Freeze old endpoints - [x] Notify partners...</div>
<div class="ld">Edited yesterday</div>
</div>
<div class="lrow">
<div class="lt">Standup talking points</div>
<div class="lp">Blocked on design review, otherwise on track for Friday.</div>
<div class="ld">Edited Mon</div>
</div>
</div>
<div class="editor">
<p class="h1"># Sprint 42 retro notes</p>
<p class="p1">Overall a strong sprint. Shipped the onboarding redesign a day early and closed out the <span class="tag-inline">#work/sprint</span> backlog.</p>
<p class="h2">## What went well</p>
<div class="cbrow"><div class="cb done"></div><span class="strike">Onboarding flow shipped early</span></div>
<div class="cbrow"><div class="cb done"></div><span class="strike">Zero P1 bugs this cycle</span></div>
<div class="cbrow"><div class="cb"></div><span>Write up the migration doc for <span class="code">v2-api</span></span></div>
<div class="quote"><span class="serif-italic">"Slower is smoother, and smoother is faster." — keep this for next planning.</span></div>
<p class="p1">Tagged for follow-up: <span class="tag-inline">#reading/process</span></p>
<div class="infobar">
<span>248 words · 1,492 chars</span>
<span class="acts">⤴ ⧉ ⓘ</span>
</div>
<div class="fab">+</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e23744; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #e23744;
border: 1px solid #e23744; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fadfe1; color: #e23744;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1C1C1C; box-sizing:border-box;
font-family:Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; }
.left { width:960px; display:flex; }
.detail { width:560px; display:flex; flex-direction:column; border-right:1px solid #E8E8E8; }
.hero { position:relative; height:150px; flex:none;
background:linear-gradient(160deg,#7a4b2e 0%, #b5773f 45%, #e3a45c 100%); }
.hero .scrim { position:absolute; top:14px; left:16px; right:16px; display:flex; justify-content:space-between; }
.hero .navcirc { width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,0.4);
display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }
.infocard { margin-top:-22px; border-radius:22px 22px 0 0; background:#fff; position:relative; z-index:2;
padding:18px 24px 0; flex:none; }
.infocard h1 { font-size:22px; font-weight:800; margin:0 0 4px; letter-spacing:-0.3px; }
.metaline { font-size:12px; color:#696969; margin:0 0 12px; }
.ratrow { display:flex; gap:22px; margin-bottom:14px; }
.ratpillwrap { text-align:center; }
.ratpill { display:inline-flex; align-items:center; gap:4px; background:#267E3E; color:#fff; font-weight:800;
font-size:13px; padding:4px 9px; border-radius:7px; }
.ratpillwrap p { font-size:10px; color:#696969; margin:5px 0 0; text-decoration:underline; }
.toggle { display:flex; background:#F4F4F5; border-radius:999px; padding:4px; margin-bottom:14px; }
.toggle span { flex:1; text-align:center; font-size:12px; font-weight:700; padding:8px 0; border-radius:999px; color:#696969; }
.toggle span.active { background:#E23744; color:#fff; }
.menu { flex:1; overflow:hidden; padding:0 24px; }
.catname { font-size:15px; font-weight:800; margin:14px 0 8px; }
.item { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #E8E8E8; gap:12px; }
.iteminfo { flex:1; }
.vegmark { width:14px; height:14px; border:1.4px solid #267E3E; border-radius:3px; display:inline-flex;
align-items:center; justify-content:center; margin-right:6px; vertical-align:middle; }
.vegmark .dot { width:6px; height:6px; border-radius:50%; background:#267E3E; }
.nonveg { border-color:#B91C1C; }
.nonveg .tri { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
border-bottom:7px solid #B91C1C; }
.best { font-size:10px; font-weight:800; color:#DB7C38; display:block; margin-bottom:2px; }
.iname { font-size:14px; font-weight:700; margin:0 0 3px; }
.iprice { font-size:13px; font-weight:700; margin:0 0 3px; }
.irating { font-size:11px; color:#696969; }
.irating .g { color:#267E3E; font-weight:700; }
.thumbwrap { position:relative; width:80px; flex:none; }
.thumb { width:80px; height:64px; border-radius:12px; }
.th1 { background:linear-gradient(135deg,#e3a45c,#c26b2c); }
.th2 { background:linear-gradient(135deg,#f2c17a,#d98a3d); }
.th3 { background:linear-gradient(135deg,#e0895a,#b5502a); }
.addbtn { position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); background:#fff;
border:1px solid #E23744; color:#E23744; font-size:11px; font-weight:800; letter-spacing:0.3px;
padding:4px 12px; border-radius:10px; box-shadow:0 3px 8px rgba(0,0,0,0.12); white-space:nowrap; }
.right { width:400px; padding:22px 24px; background:#F4F4F5; overflow:hidden; }
.right h2 { font-size:16px; font-weight:800; margin:0 0 4px; }
.right .sub { font-size:12px; color:#696969; margin:0 0 16px; }
.bagrow { display:flex; justify-content:space-between; background:#fff; border-radius:12px; padding:10px 14px;
margin-bottom:10px; align-items:center; }
.bagrow .bname { font-size:13px; font-weight:700; }
.bagrow .bprice { font-size:12px; color:#696969; }
.stepper { display:flex; align-items:center; gap:10px; border:1px solid #E23744; border-radius:10px; padding:3px 8px; }
.stepper span { color:#E23744; font-weight:800; font-size:14px; }
.billline { display:flex; justify-content:space-between; font-size:13px; color:#696969; margin:10px 0; }
.billline.total { color:#1C1C1C; font-weight:800; font-size:14px; }
.paybtn { width:100%; background:#E23744; color:#fff; border-radius:12px; height:50px; display:flex;
align-items:center; justify-content:center; font-weight:800; font-size:15px; margin-top:12px; }
.gold { margin-top:16px; background:linear-gradient(135deg,#FCEBB8,#EFC75E); border-radius:12px; padding:12px 14px;
font-size:12px; font-weight:700; color:#6b4e10; }
</style></head>
<body>
<div class="app">
<div class="left">
<div class="detail">
<div class="hero">
<div class="scrim"><div class="navcirc">‹</div><div class="navcirc">♡</div></div>
</div>
<div class="infocard">
<h1>Old Town Kebab House</h1>
<p class="metaline">North Indian, Kebabs · Hanam-dong · 2.4 km</p>
<div class="ratrow">
<div class="ratpillwrap"><div class="ratpill">★ 4.3</div><p>12.4K Delivery</p></div>
<div class="ratpillwrap"><div class="ratpill">★ 4.1</div><p>3.2K Dining</p></div>
</div>
<div class="toggle"><span class="active">Delivery</span><span>Dining Out</span></div>
</div>
<div class="menu">
<div class="catname">Kebabs & Starters</div>
<div class="item">
<div class="iteminfo">
<span class="best">★ Bestseller</span>
<p class="iname"><span class="vegmark nonveg"><span class="tri"></span></span>Seekh Kebab (6 pcs)</p>
<p class="iprice">₩14,500</p>
<p class="irating"><span class="g">★ 4.5</span> (218)</p>
</div>
<div class="thumbwrap"><div class="thumb th1"></div><div class="addbtn">ADD</div></div>
</div>
<div class="item">
<div class="iteminfo">
<p class="iname"><span class="vegmark"><span class="dot"></span></span>Paneer Tikka</p>
<p class="iprice">₩11,000</p>
<p class="irating"><span class="g">★ 4.2</span> (96)</p>
</div>
<div class="thumbwrap"><div class="thumb th2"></div><div class="addbtn">ADD</div></div>
</div>
<div class="item">
<div class="iteminfo">
<p class="iname"><span class="vegmark nonveg"><span class="tri"></span></span>Butter Chicken</p>
<p class="iprice">₩16,000</p>
<p class="irating"><span class="g">★ 4.6</span> (341)</p>
</div>
<div class="thumbwrap"><div class="thumb th3"></div><div class="addbtn">ADD</div></div>
</div>
</div>
</div>
<div class="right">
<h2>My Cart</h2>
<p class="sub">Old Town Kebab House</p>
<div class="bagrow">
<div><p class="bname">Seekh Kebab (6 pcs)</p><p class="bprice">₩14,500</p></div>
<div class="stepper"><span>−</span>1<span>+</span></div>
</div>
<div class="bagrow">
<div><p class="bname">Butter Chicken</p><p class="bprice">₩16,000</p></div>
<div class="stepper"><span>−</span>1<span>+</span></div>
</div>
<div class="billline"><span>Subtotal</span><span>₩30,500</span></div>
<div class="billline"><span>Delivery fee</span><span>₩2,000</span></div>
<div class="billline total"><span>Total</span><span>₩32,500</span></div>
<div class="paybtn">Proceed to Pay · ₩32,500</div>
<div class="gold">👑 Get free delivery with Zomato (iOS) Gold</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #060606;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #060606;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #060606; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9396a5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #990000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #060606;
border: 1px solid #990000; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #060606;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9396a5; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #e32e00; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#060606; box-sizing:border-box;
font-family:'Archivo','Cabin',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #dedede; }
.brand { font-size:20px; font-weight:700; color:#990000; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:500; color:#6b6f81; }
.btn-primary { background:#990000; color:#fff; border:none; border-radius:4px; padding:11px 22px; font-size:13px;
font-weight:600; letter-spacing:0.2px; }
main { display:flex; height:calc(640px - 80px - 46px); }
.gallery { width:420px; background:#ededed; position:relative; display:flex; align-items:center; justify-content:center; }
.tent { width:260px; height:150px; border-radius:12px;
background:linear-gradient(135deg,#990000 0%,#4d0000 100%); position:relative; }
.tent::before { content:''; position:absolute; left:50%; top:-40px; transform:translateX(-50%);
width:0; height:0; border-left:130px solid transparent; border-right:130px solid transparent; border-bottom:60px solid #990000; }
.badge-new { position:absolute; top:18px; left:18px; background:#00529c; color:#fff; font-size:11px; font-weight:600;
padding:3px 9px; border-radius:4px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:12px; color:#9396a5; font-weight:500; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-size:23px; font-weight:600; margin:0; }
.stock { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#1b6109; font-weight:600; }
.dot { width:7px; height:7px; border-radius:9999px; background:#1b6109; }
.price-row { font-size:20px; font-weight:700; }
.swatches { display:flex; gap:8px; align-items:center; }
.sw { width:26px; height:26px; border-radius:4px; border:2px solid transparent; }
.sw.on { border-color:#060606; }
.sw1 { background:#990000; } .sw2 { background:#00529c; } .sw3 { background:#6b6f81; } .sw4 { background:#ffcb67; }
.specs { display:flex; gap:22px; font-size:12px; color:#6b6f81; }
.specs b { color:#060606; display:block; font-size:14px; }
.progress { display:flex; gap:4px; }
.seg { flex:1; height:4px; background:#efefef; border-radius:2px; }
.seg.on { background:#ffcb67; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#990000; color:#fff; border:none; border-radius:4px; padding:13px; font-size:14px; font-weight:600; }
.btn-sec { background:#fff; color:#060606; border:1px solid #060606; border-radius:4px; padding:13px 18px; font-size:14px; font-weight:600; }
footer { padding:12px 34px; border-top:1px solid #dedede; font-size:11px; color:#9396a5; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Big Agnes</div>
<div class="navlinks"><span>Tents</span><span>Sleeping Bags</span><span>Pads</span><span>Backpacks</span><span>Apparel</span></div>
<button class="btn-primary">Shop Now</button>
</nav>
<main>
<div class="gallery"><span class="badge-new">New for Spring</span><div class="tent"></div></div>
<div class="info">
<span class="cat">3-Season Backpacking Tent</span>
<h1>Copper Spur HV UL3</h1>
<span class="stock"><span class="dot"></span>In stock — ships in 2 days</span>
<div class="price-row">$549.95</div>
<div class="swatches"><span class="sw sw1 on"></span><span class="sw sw2"></span><span class="sw sw3"></span><span class="sw sw4"></span></div>
<div class="specs">
<div><b>2 lb 12 oz</b>Trail weight</div>
<div><b>34.7 ft²</b>Floor area</div>
<div><b>3</b>Person capacity</div>
</div>
<div class="progress"><div class="seg on"></div><div class="seg on"></div><div class="seg"></div></div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">Compare</button>
</div>
</div>
</main>
<footer><span>© Big Agnes</span><span>Warranty · Dealers · Gear Guide</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #292827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #292827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 460; line-height: 1.1; letter-spacing: -0.315px; margin: 0; color: #292827; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 460; line-height: 1.5; margin: 0; color: #73706d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-size: 12px; font-weight:700; background: #1b1938; color: #ffffff;
border: none; border-radius: 999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.0; background: #ffffff; color: #292827;
border: 1px solid #1b1938; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 460; line-height: 1.5; background: #ffffff; color: #292827;
border: 1px solid #cac9c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #73706d; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dfdfe3; color: #1b1938;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292827; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; height:250px; background:#1b1938; overflow:hidden;
background:
radial-gradient(ellipse 500px 280px at 78% 20%, rgba(201,180,250,.45), transparent 60%),
radial-gradient(ellipse 460px 300px at 95% 60%, rgba(120,160,220,.3), transparent 60%),
#1b1938; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#fff; font-weight:460; font-size:15px; }
.navlinks { display:flex; gap:20px; font-size:13px; color:rgba(255,255,255,.75); }
.pillviolet { background:#c9b4fa; color:#1b1938; border:none; border-radius:9999px; padding:9px 18px; font-size:13px; font-weight:700; }
.herotext { position:relative; z-index:2; padding:14px 32px; max-width:440px; }
.herotext h1 { color:#fff; font-size:44px; font-weight:540; line-height:.98; margin:0 0 12px; }
.portrait { position:absolute; right:60px; top:30px; width:120px; height:170px; border-radius:50% 50% 45% 45%/55% 55% 45% 45%;
background:radial-gradient(circle at 40% 30%, #d9b98a, #7a5a45 75%); z-index:1; opacity:.9; }
.featrow { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:16px 32px; background:#fafaf8; }
.tab { text-align:center; font-size:12px; font-weight:600; padding:8px; border-radius:9999px; background:#fff; margin:0 4px; }
.cardgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 32px; }
.card { background:#fff; border:1px solid #e8e4dd; border-radius:12px; padding:16px; }
.card h3 { font-size:15px; margin:0 0 6px; font-weight:460; letter-spacing:-.3px; }
.card p { font-size:11.5px; color:#73706d; margin:0; line-height:1.4; }
.tealband { background:#0e3030; color:#fff; text-align:center; padding:26px 32px; }
.tealband h2 { font-size:26px; font-weight:540; margin:0 0 14px; letter-spacing:-.5px; }
.btnwhite { background:#fff; color:#0e3030; border:none; border-radius:8px; padding:11px 22px; font-size:14px; font-weight:700; }
footer { padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; color:#73706d; }
</style></head>
<body>
<div class="hero">
<nav>
<div class="brand">Superhuman</div>
<div class="navlinks"><span>Product</span><span>Company</span><span>Pricing</span></div>
<button class="pillviolet">Get Started</button>
</nav>
<div class="herotext">
<h1>The fastest<br>email experience</h1>
</div>
<div class="portrait"></div>
</div>
<div class="featrow">
<div class="tab">Mail</div><div class="tab">Channels</div><div class="tab">AI</div><div class="tab">Calendar</div>
</div>
<div class="cardgrid">
<div class="card"><h3>Split Inbox</h3><p>Focus on what matters — the rest waits quietly.</p></div>
<div class="card"><h3>Instant Everything</h3><p>Every action feels instant, every time.</p></div>
<div class="card"><h3>AI Triage</h3><p>Let AI clear your inbox before you open it.</p></div>
</div>
<div class="tealband">
<h2>Ready to become superhuman?</h2>
<button class="btnwhite">Try it free</button>
</div>
<footer>
<span>© Superhuman</span>
<span>Superhuman · Company · Careers · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #1878b9; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #fafafa; color: #121212;
border: 1px solid #1878b9; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #121212;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #e22120; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#121212; box-sizing:border-box;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fafafa; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #e8e8e8; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; letter-spacing:0.2px; text-transform:uppercase; color:#333; }
.navlinks span.on { color:#1878b9; border-bottom:2px solid #1878b9; padding-bottom:20px; }
main { display:grid; grid-template-columns:440px 1fr; height:calc(640px - 64px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; border-right:1px solid #e8e8e8; }
.frame { flex:1; border-radius:8px; background:#f2f2f2; position:relative; overflow:hidden; }
.frame svg { position:absolute; inset:0; }
.thumbs { display:flex; gap:8px; }
.thumb { width:56px; height:56px; background:#fff; border:1px solid #dedede; border-radius:4px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:12px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; color:#1878b9; }
h1 { margin:0; font-size:24px; font-weight:600; letter-spacing:-0.2px; line-height:1.25; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:600; }
.badge-new { background:#1878b9; color:#fff; font-size:11px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.desc { font-size:14px; color:#333; line-height:1.55; }
.opt-row { display:flex; gap:8px; }
.opt-chip { border:1px solid #dedede; border-radius:4px; padding:8px 14px; font-size:13px; font-weight:600; background:#fff; }
.opt-chip.on { border:1px solid #1878b9; color:#1878b9; }
.spec-table { border:1px solid #e8e8e8; border-radius:8px; overflow:hidden; }
.spec-row { display:flex; justify-content:space-between; padding:7px 12px; font-size:13px; border-bottom:1px solid #e8e8e8; }
.spec-row:last-child { border-bottom:none; }
.spec-row .l { color:#666; }
.spec-row .v { font-weight:600; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#1878b9; color:#fff; border:none; border-radius:4px; font-size:15px; font-weight:600; letter-spacing:0.2px; }
.btn-secondary { width:140px; height:44px; background:#fafafa; border:1px solid #dedede; color:#121212; border-radius:4px; font-size:15px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Allied Cycle Works</p>
<div class="navlinks"><span class="on">Road</span><span>Gravel</span><span>Mountain</span><span>Framesets</span></div>
</nav>
<main>
<div class="stage">
<div class="frame">
<svg viewBox="0 0 440 340" width="100%" height="100%">
<polygon points="70,250 150,110 260,110 340,250" fill="none" stroke="#1878b9" stroke-width="5"/>
<line x1="150" y1="110" x2="340" y2="250" stroke="#1878b9" stroke-width="5"/>
<line x1="150" y1="110" x2="150" y2="110" stroke="#1878b9" stroke-width="5"/>
<circle cx="70" cy="250" r="52" fill="none" stroke="#999" stroke-width="6"/>
<circle cx="340" cy="250" r="52" fill="none" stroke="#999" stroke-width="6"/>
<line x1="260" y1="110" x2="300" y2="70" stroke="#121212" stroke-width="5"/>
</svg>
</div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Allied Cycle Works · Allroad Series</span>
<h1>Echo Carbon Gravel Frameset</h1>
<div class="price-row"><span class="price">$2,850.00</span><span class="badge-new">New Geometry</span></div>
<p class="desc">Monocoque carbon frame tuned for mixed-surface speed — tire clearance to 45mm, three bottle mounts, and a T47 threaded bottom bracket built to last through gravel seasons.</p>
<div class="opt-row">
<span class="opt-chip">51cm</span><span class="opt-chip on">54cm</span><span class="opt-chip">57cm</span><span class="opt-chip">60cm</span>
</div>
<div class="spec-table">
<div class="spec-row"><span class="l">Frame Material</span><span class="v">T800 Carbon</span></div>
<div class="spec-row"><span class="l">Tire Clearance</span><span class="v">45mm</span></div>
<div class="spec-row"><span class="l">Weight</span><span class="v">1,050g (54cm)</span></div>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Geometry</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 28px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; color: #7d8187; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #ffffff; color: #0a0a0a;
border: none; border-radius: 9999px; padding: {spacing.xs} {spacing.md};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #0a0a0a; color: #ffffff;
border: 1px solid #212327; border-radius: 9999px;
padding: {spacing.sm} {spacing.lg}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; background: #1a1c20; color: #ffffff;
border: 1px solid #212327; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d8187; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #2c2c2c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
.page { position:relative; height:640px; overflow:hidden; }
.cosmic { position:absolute; left:50%; top:-60px; transform:translateX(-50%); width:900px; height:420px; z-index:0;
background:
radial-gradient(260px 200px at 30% 30%, rgba(124,58,237,.20), transparent 70%),
radial-gradient(260px 200px at 70% 20%, rgba(255,122,23,.16), transparent 70%),
radial-gradient(300px 220px at 50% 60%, rgba(196,181,253,.10), transparent 70%);
filter:blur(10px); }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; font-weight:400; letter-spacing:.02em; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#dadbdf; }
.pillw { border:1px solid #ffffff; border-radius:999px; padding:8px 18px; font-size:13px; color:#ffffff; }
.hero { position:relative; z-index:2; text-align:center; padding:60px 32px 30px; }
.eyebrow { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:#7d8187; margin-bottom:16px; }
.hero h1 { font-size:48px; font-weight:400; line-height:1.08; margin:0 auto 16px; max-width:600px; letter-spacing:-.2px; }
.hero p { font-size:14px; color:#dadbdf; margin:0 auto 24px; max-width:440px; }
.btnrow { display:flex; gap:12px; justify-content:center; }
.pillw2 { border:1px solid #ffffff; border-radius:999px; padding:10px 22px; font-size:13px; color:#ffffff; }
.pillfill { border:1px solid #ffffff; background:#ffffff; color:#0a0a0a; border-radius:999px; padding:10px 22px; font-size:13px; font-weight:600; }
.cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:6px 32px 30px; }
.card { border:1px solid #212327; border-radius:10px; padding:18px; background:#191919; }
.card .tag { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:10px; letter-spacing:.1em;
text-transform:uppercase; color:#7d8187; }
.card h3 { font-size:16px; font-weight:400; margin:10px 0 6px; color:#ffffff; }
.card p { font-size:12px; color:#7d8187; margin:0; line-height:1.4; }
</style></head>
<body>
<div class="page">
<div class="cosmic"></div>
<nav>
<div class="brand">xAI</div>
<div class="navlinks"><span>Grok</span><span>API</span><span>Research</span><span>Company</span></div>
<div class="pillw">Try Grok</div>
</nav>
<div class="hero">
<div class="eyebrow">Grok · xAI</div>
<h1>Understand the universe</h1>
<p>xAI's mission is to advance our collective understanding of the universe.</p>
<div class="btnrow"><button class="pillfill">Try Grok</button><button class="pillw2">Read the API docs</button></div>
</div>
<div class="cards">
<div class="card"><div class="tag">Model</div><h3>Grok 4</h3><p>Frontier reasoning across code, math, and language.</p></div>
<div class="card"><div class="tag">Platform</div><h3>xAI API</h3><p>Build with the same models that power Grok.</p></div>
<div class="card"><div class="tag">Lab</div><h3>Research</h3><p>Papers and progress from the team building AGI.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4f00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4f00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faaa87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4f00; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4f00; color: #f5f5f5;
border: 1px solid #fd6a27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faaa87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e45327; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffefb; color:#201515; box-sizing:border-box;
font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #eceae3; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#605d52; }
.navlinks span.active { color:#201515; font-weight:600; }
.headerbtns { display:flex; gap:10px; align-items:center; }
.signin { font-size:14px; color:#605d52; font-weight:600; }
.signup { background:#ff4f00; color:#fffefb; border-radius:18px; padding:6px 16px; height:36px;
display:flex; align-items:center; font-size:14px; font-weight:600; }
.hero { padding:30px 40px 8px; text-align:center; }
.hero h1 { font-family:"Degular Display", Georgia, serif; font-size:38px; font-weight:500; line-height:1.05;
margin:0 0 10px; letter-spacing:-0.5px; }
.hero p { font-size:15px; color:#605d52; margin:0; }
.flowzone { position:relative; margin:22px 40px 0; height:296px; background:#f8f4f0; border-radius:8px;
border:1px solid #eceae3; padding:26px 32px; }
.flowrow { display:flex; align-items:center; gap:0; }
.node { flex:1; background:#fffefb; border:1px solid #eceae3; border-radius:8px; padding:14px 16px;
display:flex; flex-direction:column; gap:6px; }
.node .kind { font-size:11px; font-weight:600; color:#c5c0b1; text-transform:uppercase; letter-spacing:0.06em; }
.node .icon { width:32px; height:32px; border-radius:8px; margin-bottom:2px; }
.n1 .icon { background:linear-gradient(135deg,#ffb37a,#ff4f00); }
.n2 .icon { background:linear-gradient(135deg,#8fc7ff,#3f6fe0); }
.n3 .icon { background:linear-gradient(135deg,#9adfc4,#1fa878); }
.n4 .icon { background:linear-gradient(135deg,#e0a3ff,#a44fd6); }
.node .title { font-size:14px; font-weight:600; color:#201515; }
.node .sub { font-size:12px; color:#605d52; }
.connector { width:36px; height:2px; background:#c5c0b1; position:relative; flex:0 0 36px; }
.connector::after { content:''; position:absolute; right:-1px; top:-3px; width:0; height:0;
border-left:6px solid #c5c0b1; border-top:4px solid transparent; border-bottom:4px solid transparent; }
.flowlabel { position:absolute; top:-11px; left:32px; background:#ff4f00; color:#fffefb; font-size:11px;
font-weight:600; padding:3px 10px; border-radius:4px; }
.statsrow { display:flex; gap:18px; margin-top:20px; }
.stat { flex:1; text-align:center; }
.stat .num { font-family:"Degular Display", Georgia, serif; font-size:24px; font-weight:500; color:#201515; }
.stat .lbl { font-size:12px; color:#605d52; margin-top:2px; }
.footerbar { position:absolute; left:0; right:0; bottom:0; height:70px; border-top:1px solid #eceae3;
display:flex; align-items:center; justify-content:center; gap:14px; }
.cta1 { background:#ff4f00; color:#fffefb; border-radius:4px; padding:12px 24px; height:48px;
display:flex; align-items:center; font-size:18px; font-weight:600; }
.cta2 { background:#201515; color:#fffefb; border-radius:4px; padding:12px 24px; height:48px;
display:flex; align-items:center; font-size:18px; font-weight:600; }
</style></head>
<body>
<div class="app">
<nav>
<span class="brand">Zapier</span>
<div class="navlinks">
<span class="active">Product</span>
<span>Solutions</span>
<span>Pricing</span>
<span>Resources</span>
</div>
<div class="headerbtns">
<span class="signin">Sign in</span>
<span class="signup">Sign up</span>
</div>
</nav>
<div class="hero">
<h1>Automate the work between your apps</h1>
<p>Connect your tools, move your data, and let the workflow run itself.</p>
</div>
<div class="flowzone">
<span class="flowlabel">Live workflow</span>
<div class="flowrow">
<div class="node n1"><span class="kind">Trigger</span><div class="icon"></div><span class="title">New form submission</span><span class="sub">Forms</span></div>
<div class="connector"></div>
<div class="node n2"><span class="kind">Action</span><div class="icon"></div><span class="title">Create record</span><span class="sub">Database</span></div>
<div class="connector"></div>
<div class="node n3"><span class="kind">Action</span><div class="icon"></div><span class="title">Send notification</span><span class="sub">Messaging</span></div>
<div class="connector"></div>
<div class="node n4"><span class="kind">Action</span><div class="icon"></div><span class="title">Update spreadsheet</span><span class="sub">Sheets</span></div>
</div>
<div class="statsrow">
<div class="stat"><div class="num">6,000+</div><div class="lbl">connected apps</div></div>
<div class="stat"><div class="num">1.2M</div><div class="lbl">tasks run daily</div></div>
<div class="stat"><div class="num">0</div><div class="lbl">lines of code</div></div>
</div>
</div>
<div class="footerbar">
<span class="cta1">Start free with Zapier</span>
<span class="cta2">See how it works</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a88f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a88f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d2c7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2332c4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a88f; color: #2332c4;
border: 1px solid #2332c4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a88f; color: #f5f5f5;
border: 1px solid #27b49f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d2c7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #069597; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#192325; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.warn { background:#fdf7c9; color:#502e00; font-size:13px; padding:8px 40px; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; }
.signin { background:#e7ebeb; border-radius:26px; padding:2px 8px 2px 16px; height:40px; display:flex;
align-items:center; font-size:16px; font-weight:600; }
.hero { padding:14px 40px 20px; }
h1 { font-size:26px; font-weight:700; margin:0 0 16px; }
.form { background:#ffffff; border:1px solid #d0d4d5; border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:0; }
.stationrow { background:#f2f4f4; height:56px; display:flex; align-items:center; padding:16px 16px 16px 20px; font-size:16px; color:#5b6466; }
.stationrow.top { border-radius:4px 4px 0 0; border-bottom:1px solid #ffffff; }
.stationrow.bottom { border-radius:0 0 4px 4px; }
.formrow { display:flex; gap:10px; margin-top:10px; }
.datebtn { flex:1; background:#f2f4f4; height:56px; border-radius:4px; display:flex; align-items:center; padding:16px; font-size:16px; font-weight:600; color:#192325; }
.findbtn { background:#00a88f; color:#ffffff; border-radius:4px; padding:10px 12px; height:48px; font-size:16px; font-weight:600; width:180px; text-align:center; display:flex; align-items:center; justify-content:center; margin-top:10px; }
.cards { display:flex; gap:16px; padding:18px 40px 0; }
.card { flex:1; background:#ffffff; border:1px solid #d0d4d5; border-radius:4px; padding:18px; }
.card .t { font-size:18px; font-weight:700; margin-bottom:6px; }
.card .d { font-size:13px; color:#3f4b4e; margin-bottom:12px; }
.outline { background:#ffffff; color:#192325; border:1px solid #d0d4d5; border-radius:4px; padding:8px 16px; font-size:14px; font-weight:700; }
</style></head>
<body>
<div class="warn">Some services may be affected by planned engineering works this weekend.</div>
<nav>
<span class="brand">Trainline</span>
<div class="navlinks"><span>Railcards</span><span>Business</span><span>My Bookings</span></div>
<span class="signin">Sign in</span>
</nav>
<section class="hero">
<h1>Buy train tickets for travel in the UK and Europe</h1>
<div class="form">
<div class="stationrow top">Departure station</div>
<div class="stationrow bottom">Arrival station</div>
<div class="formrow">
<div class="datebtn">Today, 09:15</div>
<div class="datebtn">1 adult</div>
</div>
<div class="findbtn">Find cheap tickets</div>
</div>
</section>
<div class="cards">
<div class="card"><div class="t">Save 1/3 with a Season Ticket</div><div class="d">Buy in advance and save on regular journeys.</div><button class="outline">Buy now</button></div>
<div class="card"><div class="t">Spend less, travel more</div><div class="d">Compare every operator and fare in one place.</div><button class="outline">Buy your Railcard</button></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #2f3192; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #f6f6f6; color: #2f3192;
border: 1px solid #2f3192; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #454545;
border: 1px solid #c1c1c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #ffdb7e; color: #222222;
border-radius: 6px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#222222; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#2f3192; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#fff; font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; }
.searchpill { background:#fff; border-radius:999px; height:30px; padding:0 16px; display:flex; align-items:center; font-size:12px; color:#aaaaaa; }
main { display:flex; height:582px; }
.stage { width:330px; background:#ececec; display:flex; align-items:center; justify-content:center; position:relative; }
.live-badge { position:absolute; top:20px; left:20px; background:#00c31e; color:#fff; font-size:11px; font-weight:700;
border-radius:4px; padding:4px 9px; display:flex; align-items:center; gap:5px; }
.live-dot { width:6px; height:6px; background:#fff; border-radius:999px; }
.capture-box { width:170px; height:110px; background:linear-gradient(160deg,#3a3a5a,#2f3192); border-radius:6px; position:relative; }
.capture-box::before { content:''; position:absolute; top:14px; left:14px; right:14px; height:12px; background:#5a91cb; border-radius:2px; }
.capture-box::after { content:''; position:absolute; bottom:14px; right:14px; width:24px; height:8px; background:#00c31e; border-radius:2px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
.tagline { font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; color:#2f3192; margin:0; }
h1 { font-size:23px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#454545; margin:0; max-width:440px; line-height:1.5; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:700; border-radius:4px; padding:3px 9px; }
.b-new { background:#ffdb7e; color:#5a4400; } .b-sale { background:#ff5b5b; color:#fff; }
.rating { font-size:13px; color:#e0b252; }
.rating span { color:#777777; font-size:12px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.price { font-size:24px; font-weight:700; }
.actions { display:flex; gap:10px; }
.btn-primary { background:#2f3192; color:#fff; border-radius:12px; height:44px; padding:0 24px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #d8d8d8; color:#222; border-radius:12px; height:44px;
padding:0 18px; display:flex; align-items:center; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Avermedia</p>
<div class="navlinks"><span>Capture Cards</span><span>Streaming</span><span>Webcams</span><span>Support</span></div>
<div class="searchpill">Search products…</div>
</nav>
<main>
<div class="stage">
<span class="live-badge"><span class="live-dot"></span>LIVE</span>
<div class="capture-box"></div>
</div>
<div class="info">
<p class="tagline">AI.STREAMING</p>
<h1>Live Gamer BOLT — 4K Capture Card</h1>
<p class="sub">Ultra-low latency HDMI passthrough capture with AI scene detection for one-click highlight clips.</p>
<div class="badges"><span class="badge b-new">New</span><span class="badge b-sale">Sale</span></div>
<div class="rating">★★★★★ <span>4.7 (1,204 reviews)</span></div>
<div class="price-row"><span class="price">$249.99</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Watch Demo</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #494fdf; color: #191c1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #494fdf; color: #191c1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #191c1f; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #505a63; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0.24px; background: #ffffff; color: #000000;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0.24px; background: #ffffff; color: #191c1f;
border: 1px solid #494fdf; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.24px; background: #ffffff; color: #191c1f;
border: 1px solid #3d42af; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #505a63; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background: #f4f4f4; color: #191c1f;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:500; font-size:16px; letter-spacing:-.3px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; letter-spacing:.2px; }
.btnwhite { background:#fff; color:#000; border:none; border-radius:999px; padding:9px 18px; font-size:13px; font-weight:600; }
.hero { padding:26px 32px 30px; text-align:center; }
.hero h1 { font-size:58px; font-weight:500; line-height:1; letter-spacing:-1.4px; margin:0 0 14px; }
.hero p { font-size:14px; color:rgba(255,255,255,.72); margin:0 0 18px; }
.heroctas { display:flex; gap:10px; justify-content:center; }
.btnout { background:transparent; color:#fff; border:1px solid #fff; border-radius:999px; padding:11px 22px; font-size:13px; font-weight:600; }
.mockup { margin:0 32px; height:150px; border-radius:28px; background:
linear-gradient(135deg,#494fdf 0%,#3a40c4 45%,#0a0a0a 100%);
display:flex; align-items:center; justify-content:center; gap:22px; position:relative; overflow:hidden; }
.card3d { width:110px; height:70px; border-radius:12px; background:linear-gradient(135deg,#16181a,#22242a);
border:1px solid rgba(255,255,255,.14); position:relative; }
.card3d::after { content:''; position:absolute; left:10px; bottom:10px; width:36px; height:8px; border-radius:3px; background:rgba(255,255,255,.5); }
.card3d.violet { background:linear-gradient(135deg,#4f55f1,#3a40c4); transform:translateY(-8px) rotate(-3deg); }
.plans { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:20px 32px; }
.plan { background:#16181a; border-radius:20px; padding:16px; }
.plan.featured { background:#494fdf; }
.plan h4 { font-size:15px; font-weight:500; margin:0 0 6px; }
.plan .price { font-size:22px; font-weight:500; letter-spacing:-.3px; margin:0 0 4px; }
.plan .desc { font-size:10.5px; color:rgba(255,255,255,.72); }
.plan.featured .desc { color:rgba(255,255,255,.85); }
footer { display:flex; justify-content:space-between; padding:14px 32px; font-size:11px; color:rgba(255,255,255,.72);
border-top:1px solid rgba(255,255,255,.12); }
</style></head>
<body>
<nav>
<div class="brand">Revolut</div>
<div class="navlinks"><span>Personal</span><span>Business</span><span>Company</span></div>
<button class="btnwhite">Get the app</button>
</nav>
<section class="hero">
<h1>Banking & Beyond</h1>
<p>Join the millions using Revolut for spending, saving, and investing.</p>
<div class="heroctas">
<button class="btnwhite">Choose your subscription</button>
<button class="btnout">Get the app</button>
</div>
</section>
<div class="mockup">
<div class="card3d violet"></div>
<div class="card3d"></div>
</div>
<div class="plans">
<div class="plan"><h4>Standard</h4><div class="price">Free</div><div class="desc">Everyday spending, no fees</div></div>
<div class="plan"><h4>Plus</h4><div class="price">$3.99</div><div class="desc">Extra protection abroad</div></div>
<div class="plan featured"><h4>Premium</h4><div class="price">$9.99</div><div class="desc">Priority support, insurance</div></div>
<div class="plan"><h4>Metal</h4><div class="price">$16.99</div><div class="desc">Cashback, concierge</div></div>
</div>
<footer>
<span>© Revolut</span>
<span>Revolut · Legal · Privacy · Careers</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff385c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff385c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa0b0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5a5f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff385c; color: #000000;
border: 1px solid #ff5a5f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff385c; color: #f5f5f5;
border: 1px solid #fd5674; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa0b0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff3d5c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#484848; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:20px; font-weight:800; color:#FF385C; margin:0; letter-spacing:-0.3px; }
.navtabs { display:flex; gap:30px; font-size:15px; font-weight:800; color:#484848; }
.navtabs span { opacity:0.45; }
.navtabs span.on { opacity:1; border-bottom:2px solid #222222; padding-bottom:4px; }
.avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#767676,#484848); }
.search { margin:0 36px 14px; height:52px; border-radius:999px; border:0.5px solid #EBEBEB;
box-shadow:rgba(0,0,0,0.08) 0 4px 12px, rgba(0,0,0,0.04) 0 1px 2px;
display:flex; align-items:center; padding:0 22px; gap:16px; font-size:13px; color:#767676; }
.search b { color:#222222; font-weight:700; font-size:14px; }
.search .div { width:1px; height:18px; background:#EBEBEB; }
.catbar { margin:0 36px 16px; display:flex; gap:28px; border-bottom:0.5px solid #EBEBEB; padding-bottom:10px; }
.cat { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#717171; }
.cat .ic { width:20px; height:20px; border-radius:5px; background:#EBEBEB; }
.cat.on { color:#222222; }
.cat.on .ic { background:#FC642D; }
.cat.on span.u { display:block; width:100%; height:2px; background:#222222; margin-top:1px; }
.cat span.u { height:2px; visibility:hidden; }
.body { padding:0 36px; display:flex; gap:24px; }
.card { width:440px; background:#fff; }
.photo { position:relative; width:100%; height:260px; border-radius:16px; overflow:hidden;
background:linear-gradient(135deg,#f7c59f 0%,#efb0a1 40%,#c68fa0 75%,#7d5a8c 100%); }
.heart { position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%;
background:#FF385C; box-shadow:rgba(0,0,0,0.2) 0 2px 4px; }
.dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:5px; }
.dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.55); }
.dot.on { background:#fff; }
.rating { display:flex; align-items:center; gap:4px; font-size:13px; font-weight:500; margin-top:10px; }
.rating b { font-weight:500; }
.title2 { font-size:16px; font-weight:600; margin-top:3px; }
.subtitle { font-size:13px; color:#767676; margin-top:2px; }
.dates { font-size:13px; color:#767676; margin-top:5px; }
.priceline { font-size:15px; font-weight:700; margin-top:5px; }
.priceline span { font-weight:400; }
.side { flex:1; display:flex; flex-direction:column; gap:16px; padding-top:2px; }
.mini { display:flex; gap:12px; }
.miniphoto { width:96px; height:76px; border-radius:12px; flex-shrink:0; }
.minititle { font-size:14px; font-weight:600; }
.minisub { font-size:12px; color:#767676; margin-top:2px; }
.miniprice { font-size:13px; font-weight:700; margin-top:4px; }
.footer2 { margin-top:auto; display:flex; align-items:center; justify-content:space-between;
border-top:0.5px solid #EBEBEB; padding-top:14px; }
.footprice { font-size:16px; font-weight:700; color:#222222; }
.footprice small { font-weight:400; color:#767676; }
.reserve { background:#FF385C; color:#fff; font-weight:700; font-size:14px; border-radius:8px; padding:11px 26px; }
</style></head>
<body>
<nav>
<p class="brand">Airbnb (iOS)</p>
<div class="navtabs"><span class="on">Explore</span><span>Wishlists</span><span>Trips</span><span>Inbox</span></div>
<div class="avatar"></div>
</nav>
<div class="search">
<span>🔍</span><b>Where to?</b><span class="div"></span><span>Anywhere</span><span class="div"></span><span>Any week</span><span class="div"></span><span>Add guests</span>
</div>
<div class="catbar">
<div class="cat on"><div class="ic"></div>Amazing views<span class="u"></span></div>
<div class="cat"><div class="ic"></div>Cabins<span class="u"></span></div>
<div class="cat"><div class="ic"></div>Trending<span class="u"></span></div>
<div class="cat"><div class="ic"></div>Beachfront<span class="u"></span></div>
<div class="cat"><div class="ic"></div>Design<span class="u"></span></div>
</div>
<div class="body">
<div class="card">
<div class="photo">
<div class="heart"></div>
<div class="dots"><span class="dot on"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
</div>
<div class="rating">★ <b>4.92</b> · 324</div>
<div class="title2">Private room in Reykjavík</div>
<div class="subtitle">Hosted by Sigrún · Superhost</div>
<div class="dates">Oct 12 – 17</div>
<div class="priceline">$214 <span>night</span></div>
<div class="footer2">
<div class="footprice">$1,284 <small>total</small></div>
<div class="reserve">Reserve</div>
</div>
</div>
<div class="side">
<div class="mini">
<div class="miniphoto" style="background:linear-gradient(135deg,#a8c5b0,#5f8b6e)"></div>
<div><div class="minititle">Dome in Joshua Tree</div><div class="minisub">★ 4.98 · Superhost</div><div class="miniprice">$342 night</div></div>
</div>
<div class="mini">
<div class="miniphoto" style="background:linear-gradient(135deg,#e8c39e,#b9754a)"></div>
<div><div class="minititle">Farmhouse in Tuscany</div><div class="minisub">★ 4.87 · 210 reviews</div><div class="miniprice">$186 night</div></div>
</div>
<div class="mini">
<div class="miniphoto" style="background:linear-gradient(135deg,#9fc9d3,#4c7d8c)"></div>
<div><div class="minititle">Micro-apartment in Tokyo</div><div class="minisub">★ 4.79 · 98 reviews</div><div class="miniprice">$97 night</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #222222; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #222222; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #98ffac; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #98ffac;
border: 1px solid #98ffac; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #222222; color: #f5f5f5;
border: 1px solid #444444; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #354538; color: #98ffac;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #eeeeee; }
.brand { font-size:16px; font-weight:600; color:#222; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#222; font-weight:500; }
.btn-sm { background:#222222; color:#fff; border-radius:4px; padding:10px; font-size:14px; font-weight:600; }
.hero { padding:30px 32px 20px; text-align:center; }
.hero p.eyebrow { font-size:13px; color:#999; margin:0 0 8px; }
.hero h1 { font-size:32px; font-weight:600; margin:0 0 14px; }
.herobtns { display:flex; gap:10px; justify-content:center; }
.btn { height:48px; padding:0 28px; font-size:16px; font-weight:600; display:flex; align-items:center; border-radius:4px; }
.btn.dark { background:#222222; color:#fff; }
.btn.light { background:#fff; color:#222; border:1px solid #bbbbbb; }
.demo { margin:0 32px 20px; border:1px solid #eeeeee; border-radius:4px; padding:16px; display:flex; gap:14px; align-items:center; }
.demo .tabs { display:flex; gap:16px; font-size:13px; color:#999; }
.demo .tabs .active { color:#3a89ff; font-weight:700; }
.demo .record { margin-left:auto; background:#3a89ff; color:#fff; border-radius:60px; padding:8px 22px; font-size:13px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); background:#222222; }
.stat { padding:24px; text-align:center; border-right:1px solid #333; }
.stat:last-child { border-right:none; }
.stat .num { font-size:52px; font-weight:300; color:#fff; margin:0; }
.stat .num.mint { color:#98ffac; font-size:36px; font-weight:600; }
.stat p.lab { font-size:12px; color:#999; margin:6px 0 0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:20px 32px; }
.card { border:1px solid #eeeeee; border-radius:4px; padding:16px; }
.card h4 { font-size:14px; font-weight:600; color:#2e67fe; margin:0 0 6px; }
.card p { font-size:12px; color:#666; margin:0; line-height:1.5; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #eeeeee; padding:10px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#999; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Return Zero</span>
<div class="navlinks"><span>COMPANY</span><span>STT</span><span>CALLABO</span><span>VITO</span></div>
<span class="btn-sm">Contact Us</span>
</nav>
<section class="hero">
<p class="eyebrow">RTZR STT — Speech Recognition Infrastructure</p>
<h1>The Most Accurate Korean Speech Recognition</h1>
<div class="herobtns">
<span class="btn dark">Explore RTZR STT</span>
<span class="btn light">Try It Now</span>
</div>
</section>
<div class="demo">
<div class="tabs"><span class="active">Live Recording</span><span>File Upload</span><span>Sample File</span></div>
<span class="record">● Start Recording</span>
</div>
<div class="stats">
<div class="stat"><p class="num">35</p><p class="lab">Languages Supported</p></div>
<div class="stat"><p class="num mint">2.5x</p><p class="lab">Faster Processing</p></div>
<div class="stat"><p class="num">48</p><p class="lab">Industry Domains</p></div>
</div>
<div class="cards">
<div class="card"><h4>Callabo</h4><p>Automatically analyzes call quality and insights.</p></div>
<div class="card"><h4>Vito</h4><p>Automatically summarizes and organizes meeting notes.</p></div>
<div class="card"><h4>Developers</h4><p>Build your own voice service with the STT API.</p></div>
</div>
<footer>
<span>© Return Zero</span>
<span>COMPANY · RTZR STT · CALLABO · VITO</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #786efa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #786efa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bdb8f7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #32353f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #786efa; color: #32353f;
border: 1px solid #32353f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #786efa; color: #f5f5f5;
border: 1px solid #8c84f9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bdb8f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6d65dc; color: #32353f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbfb; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:relative; height:52px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#282b32; }
.brand { color:#ffffff; font-size:15px; font-weight:600; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { color:#ffffff; font-size:13px; font-weight:500; opacity:0.9; }
.navlinks span.dim { opacity:0.5; }
.hero { position:relative; background:#282b32; padding:22px 32px 26px; display:flex; flex-direction:column; gap:12px; }
.hero h1 { color:#ffffff; font-size:30px; font-weight:600; line-height:1.28; margin:0; max-width:560px; letter-spacing:-0.6px; }
.hero p { color:#c7c9cf; font-size:13px; margin:0; max-width:460px; line-height:1.5; }
.tagrow { display:flex; gap:8px; }
.tag-active { background:#786efa; color:#ffffff; border-radius:22px; padding:5px 12px; font-size:11px; font-weight:400; }
.tag-filter { border:1px solid #737d8c; color:#737d8c; border-radius:22px; padding:5px 12px; font-size:11px; font-weight:400; }
.section { padding:22px 32px 8px; }
.section-label { font-size:20px; font-weight:600; margin:0 0 4px; letter-spacing:-0.3px; }
.section-sub { font-size:12px; color:#737d8c; margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:14px 32px 0; }
.card { background:#f6f6f9; padding:22px 20px; display:flex; flex-direction:column; gap:8px; border-left:1px solid #ffffff; }
.card:first-child { border-left:none; }
.card .tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#786efa; }
.card h3 { font-size:16px; font-weight:600; margin:0; line-height:1.3; }
.card p { font-size:12px; color:#3a3a3a; margin:0; line-height:1.5; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e6e6e6; padding:12px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#737d8c; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">42dot</p>
<div class="navlinks"><span>Technology</span><span>Mobility</span><span class="dim">Research</span><span class="dim">Careers</span></div>
</nav>
<section class="hero">
<h1>We Are A Mobility AI Company</h1>
<p>The answer to mobility and everything — building the software brain of autonomous vehicles and fleets.</p>
<div class="tagrow">
<span class="tag-active">#LLM</span>
<span class="tag-filter">#SDV</span>
<span class="tag-filter">#Active Learning</span>
</div>
</section>
<section class="section">
<h2 class="section-label">Research & Technology</h2>
<p class="section-sub">Latest posts from the 42dot engineering blog</p>
</section>
<section class="cards">
<div class="card"><span class="tag">#Transformer</span><h3>42dot LLM 1.3B: A Compact Model for On-Vehicle Inference</h3><p>How a smaller foundation model keeps latency low enough for real-time driving decisions.</p></div>
<div class="card"><span class="tag">#3D Object Detection</span><h3>Continual Model Improvement Through Active Learning</h3><p>A pipeline that finds the hardest driving scenes first and retrains where it matters most.</p></div>
<div class="card"><span class="tag">#SDV</span><h3>The Software-Defined Fleet: One Stack, Every Vehicle</h3><p>Rethinking the vehicle as a platform that ships updates, not just miles.</p></div>
</section>
<footer>
<span>© 42dot</span>
<span>Technology · Mobility · Company · Careers</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff8d08; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff8d08; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c490d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d1d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8d08; color: #1d1d1d;
border: 1px solid #1d1d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff8d08; color: #111111;
border: 1px solid #d97909; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c490d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db7b0b; color: #1d1d1d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif; }
* { box-sizing:border-box; }
.chip { position:absolute; border-radius:9999px; opacity:0.14; }
.chip.c1 { width:220px; height:220px; left:-70px; top:-60px; background:#ff3c96; }
.chip.c2 { width:180px; height:180px; right:-50px; top:-70px; background:#22ccdd; }
.chip.c3 { width:150px; height:150px; right:60px; bottom:-60px; background:#ccdd32; }
nav { position:relative; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#ffffff; }
.brand { font-size:20px; font-weight:800; margin:0; letter-spacing:-0.3px; color:#001122; }
.navlinks { display:flex; gap:6px; font-size:12px; color:#000000; }
.navlinks span { padding:6px 10px; border-radius:4px; }
.cta-pill { background:#ff8d08; color:#ffffff; border:none; border-radius:100px; padding:0 20px; height:32px;
font-size:12px; font-weight:700; white-space:nowrap; box-shadow:rgba(0,0,0,0.04) 0px 1px 2px; }
.hero { position:relative; z-index:2; padding:22px 36px 18px; display:flex; flex-direction:column; gap:10px; }
.eyebrow { display:inline-flex; align-self:flex-start; background:#f2f2f2; color:#8a8a8a; font-size:14px;
font-weight:600; padding:4px 12px; border-radius:9999px; letter-spacing:0.02em; }
.hero h1 { font-size:36px; font-weight:700; letter-spacing:-0.6px; margin:0; color:#001122; line-height:1.2; max-width:640px; }
.hero p { font-size:15px; color:#000000; margin:0; max-width:560px; }
.row { display:flex; gap:10px; align-items:center; margin-top:4px; }
.btn-primary { background:#ff8d08; color:#ffffff; border:none; border-radius:100px; padding:0 24px; height:44px;
font-size:15px; font-weight:700; box-shadow:rgba(0,0,0,0.04) 0px 1px 2px; }
.btn-ghost { background:rgba(255,255,255,0.05); color:#000000; border:1.5px solid #001122; border-radius:118px;
padding:0 24px; height:44px; font-size:14px; font-weight:600; }
.main { position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; gap:16px; padding:6px 36px 20px; }
.dash { background:#f2f2f2; border-radius:12px; padding:18px; }
.dash-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dash-title { font-size:14px; font-weight:700; color:#001122; }
.dash-tag { font-size:11px; color:#8a8a8a; font-weight:600; }
.chan-row { display:flex; align-items:center; gap:10px; background:#ffffff; border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.dot { width:10px; height:10px; border-radius:50%; flex:none; }
.chan-name { font-size:13px; font-weight:700; color:#000000; width:78px; }
.bar-track { flex:1; height:8px; background:#f2f2f2; border-radius:99px; overflow:hidden; }
.bar-fill { height:100%; border-radius:99px; }
.chan-val { font-size:12px; font-weight:700; color:#8a8a8a; width:44px; text-align:right; }
.side { display:flex; flex-direction:column; gap:12px; }
.cat-card { border-radius:12px; padding:14px 16px; color:#ffffff; display:flex; flex-direction:column; gap:6px; }
.cat-card .tag { font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; opacity:0.9; }
.cat-card h3 { margin:0; font-size:16px; font-weight:800; }
.cat-card p { margin:0; font-size:12px; line-height:1.4; opacity:0.95; }
.badges { display:flex; gap:8px; padding:0 36px 16px; flex-wrap:wrap; position:relative; z-index:2; }
.badge { border-radius:9999px; padding:4px 12px; font-size:12px; font-weight:700; color:#ffffff; }
footer { position:relative; z-index:2; border-top:1px solid #f2f2f2; padding:12px 36px;
display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#8a8a8a; }
</style></head>
<body>
<div class="chip c1"></div>
<div class="chip c2"></div>
<div class="chip c3"></div>
<nav>
<p class="brand">Wisetracker</p>
<div class="navlinks"><span>Product</span><span>Pricing</span><span>Contact</span><span>Partners</span></div>
<button class="cta-pill">Get Started</button>
</nav>
<section class="hero">
<span class="eyebrow">Marketing Automation</span>
<h1>Your starting point for smarter data use</h1>
<p>Wisetracker unifies every service you need for marketing analytics & activation — Kakao, Meta, and Naver channel performance, all in one place.</p>
<div class="row">
<button class="btn-primary">Start Free Demo</button>
<button class="btn-ghost">Try Demo</button>
</div>
</section>
<section class="main">
<div class="dash">
<div class="dash-head">
<span class="dash-title">Conversion Attribution by Channel</span>
<span class="dash-tag">Last 7 days</span>
</div>
<div class="chan-row"><span class="dot" style="background:#ff3c96"></span><span class="chan-name">Kakao</span><div class="bar-track"><div class="bar-fill" style="width:82%;background:#ff3c96"></div></div><span class="chan-val">38.2%</span></div>
<div class="chan-row"><span class="dot" style="background:#22ccdd"></span><span class="chan-name">Meta</span><div class="bar-track"><div class="bar-fill" style="width:64%;background:#22ccdd"></div></div><span class="chan-val">27.6%</span></div>
<div class="chan-row"><span class="dot" style="background:#ccdd32"></span><span class="chan-name">Naver</span><div class="bar-track"><div class="bar-fill" style="width:48%;background:#ccdd32"></div></div><span class="chan-val">19.4%</span></div>
<div class="chan-row"><span class="dot" style="background:#bb66cc"></span><span class="chan-name">Organic</span><div class="bar-track"><div class="bar-fill" style="width:31%;background:#bb66cc"></div></div><span class="chan-val">14.8%</span></div>
</div>
<div class="side">
<div class="cat-card" style="background:#22ccdd;"><span class="tag">Attribution</span><h3>From comparison to action</h3><p>Measure every channel, then automate the next best action.</p></div>
<div class="cat-card" style="background:#ff53ae;"><span class="tag">Automation</span><h3>Cart-abandon nudges</h3><p>Send a purchase reminder to abandoners exactly one day later.</p></div>
<div class="cat-card" style="background:#ffbb0e;"><span class="tag">SDK</span><h3>Developer guide</h3><p>From pre-setup diagnostics to live event tracking status.</p></div>
</div>
</section>
<div class="badges">
<span class="badge" style="background:#ff3c96">Kakao Ads</span>
<span class="badge" style="background:#22ccdd">Meta Ads</span>
<span class="badge" style="background:#ccdd32">Naver Ads</span>
<span class="badge" style="background:#bb66cc">CRM</span>
</div>
<footer>
<span>© Wisetracker</span>
<span>Wisetracker · Product · Pricing · Contact</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.2px; background: #ffe9b7; color: #222222;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fff; border-bottom:1px solid #e6e6e6; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:19px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; }
.navlinks span:first-child { color:#222; border-bottom:2px solid #222; padding-bottom:4px; }
.navlinks span:not(:first-child) { color:#777777; }
.navicons { display:flex; gap:16px; align-items:center; }
.search { width:150px; height:34px; background:#f2f2f2; border:1px solid #e6e6e6; border-radius:9999px;
font-size:12px; color:#979797; display:flex; align-items:center; padding-left:14px; }
.hero { background:#f2f2f2; padding:28px 40px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.2; }
.hero h1 { font-size:32px; font-weight:700; line-height:1.25; letter-spacing:-0.5px; margin:0 0 10px; max-width:420px; }
.hero p { font-size:14px; color:#444444; margin:0 0 16px; max-width:400px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-primary { background:#222222; color:#fff; border:none; border-radius:8px; padding:12px 24px;
font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; height:44px; }
.btn-secondary { background:#fff; color:#222222; border:2px solid #222222; border-radius:8px; padding:11px 23px;
font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; height:44px; }
.btn-live { display:inline-flex; align-items:center; gap:6px; background:#6ffb38; color:#222; border:none;
border-radius:8px; padding:8px 16px; font-size:11px; font-weight:700; text-transform:uppercase; height:32px; margin-top:12px; }
.hero-visual { flex:1; height:170px; border-radius:8px; background:#fff; border:1px solid #e6e6e6; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:130px; height:16px; border-radius:8px; background:#222; left:30px; top:76px; }
.hero-visual::after { content:''; position:absolute; width:22px; height:22px; border-radius:50%; background:#6ffb38; right:120px; top:70px; box-shadow:0 0 0 6px rgba(111,251,56,0.18); }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:20px; font-weight:700; margin:0; }
.sec-head span { font-size:13px; color:#222; font-weight:600; border-bottom:1px solid #222; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:12px; }
.thumb { aspect-ratio:1/1; border-radius:8px; position:relative; margin-bottom:8px; }
.t1 { background:linear-gradient(150deg,#f2f2f2,#dedede); }
.t2 { background:linear-gradient(150deg,#222,#444); }
.t3 { background:linear-gradient(150deg,#f2f2f2,#c7c7c7); }
.t4 { background:linear-gradient(150deg,#fff,#f2f2f2); border:1px dashed #e6e6e6; }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:700; text-transform:uppercase;
letter-spacing:0.2px; padding:2px 8px; border-radius:4px; }
.badge.amber { background:#ffe9b7; color:#222; }
.badge.green { background:#3a831d; color:#fff; }
.badge.red { background:#e0afab; color:#ab2117; }
.card h3 { font-size:13px; font-weight:600; margin:0 0 3px; }
.price { font-size:14px; font-weight:600; margin:0; }
.price .orig { font-size:11px; color:#777777; text-decoration:line-through; font-weight:400; margin-left:4px; }
footer { background:#222222; color:#fff; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#fff; margin-left:16px; }
footer a:first-child { color:#6ffb38; }
</style></head>
<body>
<nav>
<p class="brand">Belkin</p>
<div class="navlinks"><span>Chargers</span><span>Cables</span><span>Docks</span><span>Screen Care</span></div>
<div class="navicons"><div class="search">Search…</div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Power that just works</h1>
<p>Fast chargers, braided cables, and hubs engineered to disappear into your setup — until you need them.</p>
<div class="row">
<button class="btn-primary">Shop Now</button>
<button class="btn-secondary">Learn More</button>
</div>
<div><button class="btn-live">● Connected</button></div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Best Sellers</h2><span>See All</span></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge amber">Sale</span></div><h3>BoostCharge 65W GaN</h3><p class="price">$44.99<span class="orig">$59.99</span></p></div>
<div class="card"><div class="thumb t2"><span class="badge green">In Stock</span></div><h3>USB-C Braided Cable</h3><p class="price">$19.99</p></div>
<div class="card"><div class="thumb t3"></div><h3>7-in-1 USB-C Dock</h3><p class="price">$79.99</p></div>
<div class="card"><div class="thumb t4"><span class="badge red">Low Stock</span></div><h3>Screen Protector 2-Pack</h3><p class="price">$29.99</p></div>
</div>
</section>
<footer>
<span>© Belkin</span>
<div><a href="#">Support</a><a href="#">Warranty</a><a href="#">Company</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #070707;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #070707;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #070707; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00b6a7; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #070707;
border: 1px solid #00b6a7; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #070707;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ab4399; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#ffffff; color:#333333; box-sizing:border-box; font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#070707; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; letter-spacing:0.3px; color:#fff; }
.navlinks span.active { color:#00b6a7; }
.search-pill { background:#fff; border-radius:999px; padding:10px 20px; font-size:12px; color:#666; }
.strip { display:flex; gap:10px; padding:14px 32px; }
.cat-tile { flex:1; text-align:center; padding:10px; border-radius:12px; font-size:13px; font-weight:600; color:#fff; }
.cat-tile:nth-child(1) { background:#00b6a7; }
.cat-tile:nth-child(2) { background:#0097cf; }
.cat-tile:nth-child(3) { background:#ab4399; }
.cat-tile:nth-child(4) { background:#faa61a; color:#070707; }
.cat-tile:nth-child(5) { background:#f1647d; }
.main { display:flex; gap:20px; padding:8px 32px; height:308px; }
.gallery { width:400px; background:#f5f5f5; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.tile-box { width:180px; height:130px; background:#cddc29; border-radius:12px; position:relative; }
.tile-box::before { content:'B A N'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:24px; letter-spacing:8px; color:#070707; }
.badge-limited { position:absolute; top:16px; left:16px; background:#faa61a; color:#070707; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:24px; font-weight:700; margin:0; }
.price-row { display:flex; gap:10px; align-items:baseline; }
.price { font-size:22px; font-weight:700; color:#070707; }
.badge-sale { background:#f1647d; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.desc { font-size:13px; line-height:1.5; color:#333; max-width:420px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#00b6a7; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:14px; }
.btn-marigold { flex:1; height:44px; background:#faa61a; color:#070707; border:none; border-radius:8px; font-weight:600; font-size:14px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#070707; color:#999999; padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bananagrams</p>
<div class="navlinks"><span class="active">Word Games</span><span>Family Games</span><span>Travel Games</span></div>
<div class="search-pill">🔍 Search games</div>
</nav>
<div class="strip">
<div class="cat-tile">Classic</div>
<div class="cat-tile">Junior</div>
<div class="cat-tile">Party Edition</div>
<div class="cat-tile">Travel</div>
<div class="cat-tile">Deluxe</div>
</div>
<div class="main">
<div class="gallery">
<span class="badge-limited">Limited Edition</span>
<div class="tile-box"></div>
</div>
<div class="info">
<h1>Bananagrams Party Edition</h1>
<div class="price-row">
<span class="price">$16.99</span>
<span class="badge-sale">Sale</span>
</div>
<p class="desc">The fast-paced word game with 144 letter tiles and zero waiting for turns — dump the bunch, flip your tiles, and build your own crossword grid faster than everyone else at the table.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-marigold">Gift Wrap +$3</button>
</div>
</div>
</div>
<footer>
<span>© Bananagrams</span>
<span>Bananagrams · Shop · Support · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Poppins","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden; }
/* top nav */
nav.kf-nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #393939; }
.kf-brand { font-size:22px; font-weight:700; letter-spacing:1px; color:#ffffff; margin:0; }
.kf-links { display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.kf-links li { font-size:13px; font-weight:600; color:#a2a2a2; }
.kf-links li.on { color:#ffffff; }
/* hero split */
.kf-hero { position:relative; display:flex; height:394px; border-bottom:1px solid #393939; }
.kf-art { flex:0 0 540px; position:relative; overflow:hidden;
background:
radial-gradient(120% 90% at 20% 10%, rgba(61,127,217,0.35), transparent 55%),
linear-gradient(160deg,#151515 0%, #050505 55%, #000000 100%); }
.kf-art .glow1 { position:absolute; width:340px; height:340px; border-radius:50%;
background:radial-gradient(circle, rgba(237,41,41,0.28), transparent 65%); top:-90px; right:-80px; }
.kf-art .glow2 { position:absolute; width:260px; height:260px; border-radius:50%;
background:radial-gradient(circle, rgba(61,127,217,0.30), transparent 65%); bottom:-70px; left:40px; }
.kf-art .grid { position:absolute; inset:0;
background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 38px 38px; }
.kf-art .tag { position:absolute; left:24px; bottom:20px; font-size:12px; font-weight:600;
letter-spacing:2px; color:#777777; text-transform:uppercase; }
.kf-info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:14px; position:relative; }
.kf-badge-row { display:flex; gap:8px; }
.kf-badge { font-size:11px; font-weight:700; letter-spacing:0.5px; padding:4px 10px;
border:1px solid #393939; color:#a2a2a2; text-transform:uppercase; }
.kf-title { font-size:38px; font-weight:800; line-height:1.05; letter-spacing:-0.5px; margin:4px 0 0; }
.kf-studio { font-size:13px; color:#777777; font-weight:500; }
.kf-desc { font-size:14px; line-height:1.7; color:#a9a9a9; max-width:340px; }
.kf-meta { display:flex; gap:22px; margin-top:4px; }
.kf-meta div { font-size:11px; color:#777777; text-transform:uppercase; letter-spacing:1px; }
.kf-meta strong { display:block; font-size:13px; color:#ffffff; font-weight:600; margin-top:4px; text-transform:none; letter-spacing:0; }
.kf-cta-row { display:flex; gap:14px; align-items:center; margin-top:auto; }
.kf-btn { background:#ffffff; color:#000000; border:2px solid #000000; padding:11px 34px 11px 18px;
font-size:14px; font-weight:700; letter-spacing:0.3px; }
.kf-link { font-size:13px; font-weight:500; color:#e6e6e6; position:relative; padding-bottom:3px;
border-bottom:2px solid #ffffff; }
/* screenshot strip */
.kf-strip { display:flex; gap:10px; padding:20px 32px; }
.kf-shot { flex:1; height:96px; position:relative; overflow:hidden; }
.kf-shot.s1 { background:linear-gradient(135deg,#1c1c1c,#050505 60%); }
.kf-shot.s1::after { content:""; position:absolute; width:130px; height:130px; border-radius:50%;
background:radial-gradient(circle, rgba(61,127,217,0.4), transparent 70%); top:-40px; left:-30px; }
.kf-shot.s2 { background:linear-gradient(135deg,#101010,#000000 70%); }
.kf-shot.s2::after { content:""; position:absolute; width:120px; height:120px; border-radius:50%;
background:radial-gradient(circle, rgba(237,41,41,0.35), transparent 70%); bottom:-40px; right:-20px; }
.kf-shot.s3 { background:linear-gradient(135deg,#161616,#020202 65%); }
.kf-shot.s3::after { content:""; position:absolute; width:150px; height:80px;
background:radial-gradient(ellipse, rgba(255,255,255,0.12), transparent 70%); top:20px; left:30%; }
.kf-shot.s4 { background:linear-gradient(135deg,#141414,#000000 65%); }
.kf-shot.s4::after { content:""; position:absolute; width:100px; height:180px;
background:radial-gradient(ellipse, rgba(61,127,217,0.25), transparent 70%); bottom:-30px; right:20%; }
footer.kf-foot { position:absolute; left:0; right:0; bottom:0; height:44px; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; border-top:1px solid #393939; }
footer.kf-foot span { font-size:11px; color:#777777; }
</style></head>
<body>
<div class="stage">
<nav class="kf-nav">
<p class="kf-brand">KRAFTON</p>
<ul class="kf-links">
<li class="on">Games</li>
<li>Studios</li>
<li>News</li>
<li>Careers</li>
</ul>
</nav>
<div class="kf-hero">
<div class="kf-art">
<div class="grid"></div>
<div class="glow1"></div>
<div class="glow2"></div>
<span class="tag">Key Art — Frontier Protocol</span>
</div>
<div class="kf-info">
<div class="kf-badge-row">
<span class="kf-badge">Battle Royale</span>
<span class="kf-badge">New Update</span>
</div>
<h1 class="kf-title">FRONTIER<br>PROTOCOL</h1>
<div class="kf-studio">Developed by Bluehole Frontier Studio</div>
<p class="kf-desc">Drop into a shifting frontier where a hundred pioneers race to claim the last uncharted zone. Built for scale, tuned for split-second decisions.</p>
<div class="kf-meta">
<div>Genre<strong>Survival</strong></div>
<div>Platform<strong>PC / Console</strong></div>
<div>Release<strong>Live Now</strong></div>
</div>
<div class="kf-cta-row">
<button class="kf-btn">Wishlist Now</button>
<span class="kf-link">View system requirements</span>
</div>
</div>
</div>
<div class="kf-strip">
<div class="kf-shot s1"></div>
<div class="kf-shot s2"></div>
<div class="kf-shot s3"></div>
<div class="kf-shot s4"></div>
</div>
<footer class="kf-foot">
<span>© KRAFTON. Pioneer the Undiscovered.</span>
<span>Global · EN</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60f3d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60f3d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee8ea2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d30030; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60f3d; color: #ffffff;
border: 1px solid #d30030; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60f3d; color: #f5f5f5;
border: 1px solid #e8345a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee8ea2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e30d3b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:"Shorai Sans StdN Demi", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:18px; font-weight:400; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#191919; }
.navlinks .on { color:#f72a48; }
.cta { background:#e60f3d; color:#fff; border-radius:9999px; padding:9px 18px; font-size:14px; }
.hero { padding:14px 30px 20px; }
.hero h1 { font-size:32px; font-weight:400; line-height:1.4; letter-spacing:0.96px; margin:0 0 12px; max-width:620px; }
.hero p { font-size:14px; color:#282828; margin:0 0 16px; max-width:560px; line-height:1.5; }
.row { display:flex; gap:10px; }
.pill-d { background:#e60f3d; color:#fff; border-radius:9999px; padding:10px 18px; font-size:16px; }
.pill-t { background:#ffe8e8; color:#d30030; border-radius:9999px; padding:10px 18px; font-size:16px; }
.band { background:#f5f5f5; padding:20px 30px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#ffffff; border-radius:10px; padding:20px; }
.card h3 { font-size:16px; font-weight:400; margin:0 0 8px; }
.card p { font-size:12.5px; color:#282828; margin:0; line-height:1.5; }
.card .num { font-size:24px; color:#f72a48; margin-bottom:6px; }
.band2 { padding:16px 30px 0; display:flex; gap:16px; }
.panel { flex:1; background:#ededed; border-radius:12px; padding:20px; }
.panel h4 { font-size:14px; margin:0 0 6px; }
.panel span { font-size:12px; color:#6f6f6f; }
footer { position:absolute; bottom:0; width:960px; background:#cbcbcb; padding:12px 30px; font-size:11.5px;
display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<p class="brand">SPEEDA (Uzabase)</p>
<div class="navlinks"><span>Browse by Topic</span><span class="on">Solutions</span><span>Case Studies</span><span>Resources/News</span></div>
<span class="cta">Download Brochure</span>
</nav>
<section class="hero">
<h1>Access every kind of economic data with the Speeda AI Agent</h1>
<p>For teams who don't want to spend hours on market research. Trustworthy, well-sourced data ready to use in your reports.</p>
<div class="row"><span class="pill-d">Download Brochure</span><span class="pill-t">Free Trial</span></div>
</section>
<section class="band">
<div class="card"><div class="num">Accuracy</div><h3>Calculate market size for any industry, fast</h3><p>Get a sense of scale in minutes from trustworthy primary sources.</p></div>
<div class="card"><div class="num">Depth</div><h3>Manage company and industry data in one place</h3><p>All the research data you need, consolidated in one workbench.</p></div>
<div class="card"><div class="num">Speed</div><h3>Automatic summaries powered by AI agents</h3><p>Extract the key points from massive reports in an instant.</p></div>
</section>
<section class="band2">
<div class="panel"><h4>Company Database</h4><span>Financial and industry data on 500,000+ companies</span></div>
<div class="panel"><h4>Industry Reports</h4><span>Continuously updated by our analysts</span></div>
</section>
<footer>
<span>SPEEDA (Uzabase), the economic data platform</span>
<span>Download Brochure · Free Trial</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #e53624; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f9f9f9; color: #e53624;
border: 1px solid #e53624; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #c1c1c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffdf66; color: #1a1a1a;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f9f9f9; color:#333333; box-sizing:border-box; font-family:'Lora',Georgia,serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-family:'Roboto',sans-serif; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:#1a1a1a; margin:0; }
.navlinks { display:flex; gap:20px; font-family:'Roboto',sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:#1a1a1a; }
.navlinks span.active { color:#e53624; }
.search-pill { background:#fff; border-radius:999px; padding:10px 20px; font-family:'Roboto',sans-serif; font-size:12px; color:#666666; }
.cat-strip { display:flex; gap:10px; padding:0 32px 12px; }
.cat-pill { background:#efefef; border-radius:999px; padding:8px 18px; font-family:'Roboto',sans-serif; font-size:12px; font-weight:600; color:#333333; }
.cat-pill.active { background:#e53624; color:#fff; }
.main { display:flex; gap:20px; padding:8px 32px; height:344px; }
.gallery { width:360px; background:#f9eae7; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.book { width:150px; height:190px; background:linear-gradient(160deg,#98d108,#33cccc); border-radius:8px; box-shadow:8px 8px 0 rgba(0,0,0,0.06); }
.badge-award { position:absolute; top:16px; left:16px; background:#ffdf66; color:#1a1a1a; font-family:'Roboto',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; border-radius:8px; }
.age-badge { position:absolute; bottom:16px; right:16px; background:#785ba7; color:#fff; font-family:'Roboto',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; padding:4px 12px; border-radius:999px; }
.info { flex:1; display:flex; flex-direction:column; gap:6px; }
.info h1 { font-size:24px; font-weight:700; margin:0; }
.author { font-family:'Roboto',sans-serif; font-size:13px; color:#666666; }
.stars { color:#ff9635; font-family:'Roboto',sans-serif; font-size:13px; }
.price { font-family:'Roboto',sans-serif; font-size:18px; font-weight:700; color:#e53624; text-transform:uppercase; margin-top:2px; }
.desc { font-size:14px; line-height:1.55; color:#333333; max-width:420px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#e53624; color:#fff; border:none; border-radius:999px; font-family:'Roboto',sans-serif; font-weight:600; font-size:15px; }
.btn-secondary { flex:1; height:48px; background:#f9f9f9; color:#e53624; border:2px solid #e53624; border-radius:999px; font-family:'Roboto',sans-serif; font-weight:600; font-size:15px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#003399; color:#ffffff; padding:14px 32px; display:flex; justify-content:space-between; font-family:'Roboto',sans-serif; font-size:12px; }
footer span { opacity:0.9; }
</style></head>
<body>
<nav>
<p class="brand">Barefoot Books</p>
<div class="navlinks"><span class="active">Books</span><span>Gifts</span><span>About</span><span>Blog</span></div>
<div class="search-pill">🔍 Search stories</div>
</nav>
<div class="cat-strip">
<span class="cat-pill active">Adventure</span>
<span class="cat-pill">Folktales</span>
<span class="cat-pill">Nature</span>
<span class="cat-pill">Bedtime</span>
</div>
<div class="main">
<div class="gallery">
<span class="badge-award">Staff Pick</span>
<div class="book"></div>
<span class="age-badge">3-7 Years</span>
</div>
<div class="info">
<h1>The Lantern of the World</h1>
<span class="author">Written by Maya Torres · Illustrated by Ben Okafor</span>
<div class="stars">★★★★★</div>
<span class="price">$16.99</span>
<p class="desc">A story-time favorite that follows a curious fox around the globe, meeting the animals and traditions of six continents along the way — with a fold-out map inside the cover.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Details</button>
</div>
</div>
</div>
<footer>
<span>© Barefoot Books</span>
<span>Barefoot Books · About Us · Customer Service · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #06b87f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #06b87f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #89dac0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2070eb; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #06b87f; color: #000000;
border: 1px solid #2070eb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #06b87f; color: #000000;
border: 1px solid #2cc292; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #89dac0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0aac90; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { display:flex; align-items:center; gap:16px; padding:12px 30px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.search { flex:1; max-width:420px; height:44px; border-radius:52px; background:#fff; border:1px solid #e0e0e0;
padding:10px 0 10px 20px; font-size:16px; color:#0f0f0f; }
.catbtn { background:#06b87f; color:#fff; border-radius:8px 8px 0 0; padding:11px 16px; font-size:14px; font-weight:700; }
.navlinks { display:flex; gap:14px; font-size:13px; color:#333; }
.toprow { display:flex; padding:0 30px 10px; gap:10px; }
.rfilter { flex:0 0 130px; }
.rfilter .f { font-size:12px; color:#333; padding:5px 0; border-bottom:1px solid #ebebeb; }
.rfilter .f.on { color:#2070eb; }
table { width:100%; border-collapse:collapse; }
thead td { font-size:11px; color:#767676; padding:6px 0; border-bottom:1px solid #e0e0e0; }
tbody td { font-size:12px; padding:8px 10px 8px 0; border-bottom:1px solid #ebebeb; vertical-align:middle; }
.thumb { width:44px; height:44px; background:#f8f8f8; border:1px solid #e0e0e0; display:inline-block; margin-right:8px; vertical-align:middle; }
.price { font-size:13px; font-weight:700; color:#0f0f0f; }
.bulk { background:#f7faff; color:#0e68f0; font-size:11px; font-weight:700; border-radius:4px; padding:2px 6px; }
</style></head>
<body>
<nav>
<p class="brand">Danawa</p>
<div class="search">graphics card RTX 4070</div>
<button class="catbtn">All Categories</button>
<div class="navlinks"><span>Sign In</span><span>Wishlist</span><span>Recent</span></div>
</nav>
<div style="display:flex; padding:0 30px;">
<div class="rfilter">
<div class="f on">Most Popular</div>
<div class="f">Price: Low to High</div>
<div class="f">Newest</div>
<div class="f">Most Reviewed</div>
</div>
<div style="flex:1">
<table>
<thead><tr><td></td><td>Product</td><td>Price</td><td>Buying Info</td></tr></thead>
<tbody>
<tr><td><span class="thumb"></span></td><td>GeForce RTX 4070 SUPER D6 12GB — Best Price</td><td class="price">$649.00</td><td>930+ bought</td></tr>
<tr><td><span class="thumb"></span></td><td>ASUS TUF Gaming RTX 4070 OC D6 12GB</td><td class="price">$712.30</td><td><span class="bulk">Bulk Order</span></td></tr>
<tr><td><span class="thumb"></span></td><td>MSI Ventus RTX 4070 Ti D6X 12GB</td><td class="price">$889.00</td><td>412+ bought</td></tr>
<tr><td><span class="thumb"></span></td><td>GIGABYTE Eagle RTX 4070 D6 12GB</td><td class="price">$631.90</td><td>Free Shipping</td></tr>
<tr><td><span class="thumb"></span></td><td>COLORFUL iGame RTX 4070 D6 White</td><td class="price">$659.00</td><td>187+ bought</td></tr>
</tbody>
</table>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0066b4;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0066b4;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #0066b4; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003366; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #003366;
border: 1px solid #003366; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #bfd9ec; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #a90f14; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
background:#003366; }
.brand { font-family:'Open Sans Condensed',sans-serif; font-size:17px; font-weight:700; color:#fff;
letter-spacing:0.02em; text-transform:uppercase; }
.navlinks { display:flex; gap:20px; font-size:12px; color:#cddcea; font-weight:600; text-transform:uppercase; }
.search { background:#ffffff; font-size:11.5px; color:#888888; padding:6px 12px; border-radius:2px; width:200px; }
.breadcrumb { padding:8px 30px; font-size:10.5px; color:#444444; border-bottom:1px solid #eeeeee;
font-family:'Open Sans Condensed',sans-serif; }
main { display:flex; height:552px; }
.gallery { width:330px; background:#f5f7f9; position:relative; display:flex; align-items:center; justify-content:center; }
.valve { width:150px; height:190px; background:#313131; border-radius:6px; position:relative;
box-shadow:0 14px 28px rgba(0,0,0,0.2); }
.valve::before { content:''; position:absolute; top:-24px; left:50%; transform:translateX(-50%);
width:70px; height:30px; background:#003366; border-radius:4px; }
.valve .stripe { position:absolute; top:20px; left:0; right:0; height:10px; background:#a90f14; }
.badge-instock { position:absolute; top:16px; left:16px; background:#a90f14; color:#fff; font-size:9.5px;
font-weight:700; padding:4px 10px; text-transform:uppercase; }
.info { flex:1; padding:22px 30px; display:flex; flex-direction:column; gap:8px; }
.partno { font-family:'Open Sans Condensed',sans-serif; font-size:11px; color:#444444; font-weight:700; }
h1 { font-size:19px; font-weight:700; margin:0; line-height:1.3; }
.price-row { display:flex; align-items:baseline; gap:10px; padding:8px 0; border-top:1px solid #eeeeee;
border-bottom:1px solid #eeeeee; }
.price { font-size:20px; font-weight:700; color:#003366; }
.spec-table { font-size:11.5px; border-collapse:collapse; width:100%; }
.spec-table td { padding:4px 0; border-bottom:1px solid #eeeeee; }
.spec-table td.k { color:#444444; width:150px;
font-family:'Open Sans Condensed',sans-serif; text-transform:uppercase; font-size:10.5px; }
.spec-table td.v { font-weight:700; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#003366; color:#fff; border:none; border-radius:2px; padding:11px 18px;
font-size:13px; font-weight:700; }
.btn-outline { border:1.5px solid #a90f14; color:#a90f14; background:#fff; border-radius:2px; padding:9.5px 16px;
font-size:12px; font-weight:700; white-space:nowrap; }
.stock { font-size:11px; color:#2d7a3a; font-weight:700; }
</style></head>
<body>
<nav>
<div class="brand">Air And Hydraulic Equipment</div>
<div class="navlinks"><span>Pneumatics</span><span>Hydraulics</span><span>Fittings</span><span>Get Quote</span></div>
<div class="search">Search part #...</div>
</nav>
<div class="breadcrumb">HOME / HYDRAULIC / DIRECTIONAL VALVES / DCV-350-NPT</div>
<main>
<div class="gallery">
<span class="badge-instock">In Stock</span>
<div class="valve"><div class="stripe"></div></div>
</div>
<div class="info">
<span class="partno">PART NO. DCV-350-NPT-24V</span>
<h1>4-Way Directional Control Valve, 3000 PSI</h1>
<div class="price-row"><span class="price">$284.50</span></div>
<table class="spec-table">
<tr><td class="k">Max Pressure</td><td class="v">3000 PSI</td></tr>
<tr><td class="k">Port Size</td><td class="v">3/4" NPT</td></tr>
<tr><td class="k">Coil Voltage</td><td class="v">24V DC</td></tr>
<tr><td class="k">Flow Rate</td><td class="v">40 GPM</td></tr>
</table>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Request Quote</button>
</div>
<span class="stock">✓ 214 units in warehouse — ships today</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #da532c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Inter', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 58px; height:58px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #dddddd; background:#ffffff; }
.brand { font-size:19px; font-weight:700; margin:0; letter-spacing:0.3px; text-transform:uppercase; color:#1a1a1a; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#6a6a6a; }
.navlinks span.active { color:#003399; padding-bottom:4px; border-bottom:2px solid #003399; }
.navicons { display:flex; align-items:center; gap:18px; }
.icon-search { width:15px; height:15px; border:1.6px solid #1a1a1a; border-radius:50%; position:relative; }
.icon-search::after { content:''; position:absolute; width:6px; height:1.6px; background:#1a1a1a;
right:-5px; bottom:-1px; transform:rotate(45deg); }
.icon-cart { width:19px; height:15px; border:1.6px solid #1a1a1a; border-radius:0 0 3px 3px; position:relative; }
.icon-cart::before { content:''; position:absolute; top:-6px; left:2px; width:11px; height:7px;
border:1.6px solid #1a1a1a; border-bottom:none; border-radius:6px 6px 0 0; }
.cart-count { position:absolute; top:-8px; right:-8px; width:14px; height:14px; border-radius:50%;
background:#da532c; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.navicons > div { position:relative; }
.btn-primary { background:#003399; color:#ffffff; border:none; border-radius:8px;
padding:9px 20px; font-weight:600; font-size:13px; letter-spacing:0.4px; white-space:nowrap; }
.hero { flex:0 0 168px; height:168px; position:relative; background:linear-gradient(120deg,#003399 0%,#0a4bc4 55%,#0e57de 100%);
overflow:hidden; display:flex; align-items:center; padding:0 44px; color:#ffffff; }
.hero::after { content:''; position:absolute; right:-40px; bottom:-60px; width:260px; height:180px;
background:#ffffff; opacity:0.08; clip-path:polygon(20% 100%, 45% 30%, 60% 60%, 80% 10%, 100% 100%); }
.hero-inner { position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; max-width:560px; }
.badge-sale { display:inline-flex; align-self:flex-start; background:#da532c; color:#ffffff; border-radius:4px;
padding:4px 10px; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.hero h1 { margin:0; font-size:36px; font-weight:600; letter-spacing:-1px; line-height:1.08; }
.hero p { margin:0; font-size:14px; color:#cdd9f5; max-width:400px; line-height:1.4; }
.hero-row { display:flex; gap:10px; margin-top:4px; }
.btn-hero-primary { background:#ffffff; color:#003399; border:none; border-radius:8px; padding:11px 22px;
font-weight:600; font-size:14px; letter-spacing:0.3px; }
.btn-hero-secondary { background:transparent; color:#ffffff; border:1.5px solid #ffffff; border-radius:8px;
padding:9.5px 22px; font-weight:600; font-size:14px; letter-spacing:0.3px; }
.catstrip { flex:0 0 40px; height:40px; background:#f7f7f7; display:flex; align-items:center; gap:8px; padding:0 40px; }
.tab { font-size:12.5px; font-weight:600; letter-spacing:0.3px; color:#6a6a6a; padding:6px 14px; border-radius:999px; }
.tab.active { background:#003399; color:#ffffff; }
main.grid { flex:1 1 auto; overflow:hidden; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
padding:16px 40px 0; }
.card { position:relative; border:1px solid #ebebeb; border-radius:8px; background:#ffffff;
display:flex; flex-direction:column; overflow:hidden; }
.card-img { flex:0 0 118px; height:118px; position:relative; }
.img1 { background:linear-gradient(135deg,#003399 0%,#2f63c9 45%,#da532c 100%); }
.img2 { background:linear-gradient(150deg,#00204d 0%,#003399 50%,#1a4fc2 100%); }
.img3 { background:linear-gradient(160deg,#0a2e6b 0%,#003399 40%,#da532c 115%); }
.card-img::after { content:''; position:absolute; left:14%; bottom:0; width:0; height:0;
border-left:34px solid transparent; border-right:34px solid transparent; border-bottom:46px solid rgba(255,255,255,0.14); }
.tag-sale { position:absolute; top:8px; left:8px; background:#da532c; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.4px; text-transform:uppercase; border-radius:4px; padding:3px 7px; z-index:2; }
.card-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card-body .cat { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#929292; }
.card-body h3 { margin:2px 0 0; font-size:15px; font-weight:600; color:#1a1a1a; letter-spacing:0; }
.stars { font-size:11px; color:#003399; letter-spacing:1px; }
.stars span.count { color:#6a6a6a; font-weight:400; margin-left:4px; font-size:11px; letter-spacing:0; }
.price-row { display:flex; align-items:baseline; gap:7px; margin-top:2px; }
.price { font-size:15px; font-weight:600; color:#1a1a1a; }
.price.sale { color:#da532c; }
.price.orig { font-size:12px; color:#6a6a6a; text-decoration:line-through; font-weight:400; }
footer { flex:0 0 44px; height:44px; background:#003399; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; font-size:11.5px; }
footer span.dim { opacity:0.75; }
</style></head>
<body>
<nav>
<p class="brand">Armada Skis</p>
<div class="navlinks">
<span class="active">Skis</span><span>Apparel</span><span>Athletes</span><span>Sale</span>
</div>
<div class="navicons">
<div class="icon-search"></div>
<div><div class="icon-cart"></div><span class="cart-count">2</span></div>
<button class="btn-primary">Shop Now</button>
</div>
</nav>
<section class="hero">
<div class="hero-inner">
<span class="badge-sale">Winter Sale — Up to 40% Off</span>
<h1>THIS IS Armada Skis.</h1>
<p>Alpine performance built for cold-mountain air, not the showroom floor.</p>
<div class="hero-row">
<button class="btn-hero-primary">Shop Skis</button>
<button class="btn-hero-secondary">Find a Dealer</button>
</div>
</div>
</section>
<div class="catstrip">
<span class="tab active">All-Mountain</span>
<span class="tab">Freeride</span>
<span class="tab">Race</span>
<span class="tab">Apparel</span>
<span class="tab">Accessories</span>
</div>
<main class="grid">
<div class="card">
<div class="card-img img1"><span class="tag-sale">-30%</span></div>
<div class="card-body">
<span class="cat">All-Mountain Skis</span>
<h3>ARW 96 Ski</h3>
<div class="stars">★★★★★<span class="count">(128)</span></div>
<div class="price-row"><span class="price sale">$549</span><span class="price orig">$779</span></div>
</div>
</div>
<div class="card">
<div class="card-img img2"></div>
<div class="card-body">
<span class="cat">Outerwear</span>
<h3>Storm Shell Jacket</h3>
<div class="stars">★★★★☆<span class="count">(64)</span></div>
<div class="price-row"><span class="price">$329</span></div>
</div>
</div>
<div class="card">
<div class="card-img img3"></div>
<div class="card-body">
<span class="cat">Accessories</span>
<h3>Race Gloves</h3>
<div class="stars">★★★★★<span class="count">(211)</span></div>
<div class="price-row"><span class="price">$79</span></div>
</div>
</div>
</main>
<footer>
<span>© Armada Skis</span>
<span class="dim">Armada Skis · Shipping · Returns · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0051c3;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0051c3;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #0051c3; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #bada7a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #bd2426;
border: 1px solid #bd2426; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272727;
border: 1px solid #bfd4f0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bada7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f68b1f; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#272727; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.utilbar { height:26px; flex:0 0 auto; background:#163959; color:#ffffff; display:flex;
align-items:center; justify-content:space-between; padding:0 24px; font-size:11px; }
.utilbar span:last-child { opacity:0.85; }
nav.mainnav { height:58px; flex:0 0 auto; display:flex; align-items:center; gap:20px;
padding:0 24px; border-bottom:1px solid #ebebeb; background:#ffffff; }
.brand { font-size:20px; font-weight:700; margin:0; letter-spacing:-0.3px; color:#272727; white-space:nowrap; }
.searchwrap { flex:1; display:flex; height:34px; border:1px solid #dedede; border-radius:4px; overflow:hidden; }
.searchwrap input { border:none; outline:none; flex:1; padding:0 12px; font-size:13px; font-family:inherit; color:#272727; background:#fff; }
.searchbtn { width:44px; background:#163959; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.navicons { display:flex; align-items:center; gap:18px; font-size:12px; color:#404040; white-space:nowrap; }
.navicons .cart { background:#bd2426; color:#fff; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; margin-left:4px; }
.hero { flex:0 0 auto; background:#163959; color:#ffffff; padding:20px 32px; display:flex;
align-items:center; justify-content:space-between; gap:24px; }
.hero-copy h1 { font-size:26px; font-weight:700; margin:0 0 6px; letter-spacing:-0.5px; }
.hero-copy p { font-size:13px; margin:0; color:#c9d6e2; }
.hero .btn-primary { background:#bd2426; color:#fff; border:none; border-radius:4px; padding:11px 22px;
font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
.catlabel { flex:0 0 auto; padding:14px 32px 8px; font-size:12px; font-weight:700; text-transform:uppercase;
letter-spacing:0.08em; color:#163959; }
.products { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 32px 12px; min-height:0; }
.card { position:relative; border:1px solid #ebebeb; border-radius:4px; background:#fff; display:flex; flex-direction:column; overflow:hidden; }
.thumb { position:relative; flex:1; min-height:0; }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.4px; padding:3px 6px; border-radius:4px; color:#fff; z-index:2; }
.badge.bestseller { background:#f68b1f; }
.badge.sale { background:#bd2426; }
.badge.new { background:#9bca3e; color:#272727; }
.meta { padding:8px 10px 10px; }
.meta .artist { font-size:10px; color:#595959; margin:0 0 2px; text-transform:uppercase; letter-spacing:0.04em; }
.meta .title { font-size:13px; font-weight:400; margin:0 0 6px; color:#272727; line-height:1.3; }
.pricerow { display:flex; align-items:baseline; gap:6px; }
.price { font-size:15px; font-weight:700; color:#bd2426; }
.price-orig { font-size:11px; color:#595959; text-decoration:line-through; }
.t1 .thumb { background:linear-gradient(135deg,#f68b1f,#bd2426); }
.t2 .thumb { background:linear-gradient(160deg,#163959,#62a1d8); }
.t3 .thumb { background:linear-gradient(150deg,#9bca3e,#163959 120%); }
.t4 .thumb { background:linear-gradient(140deg,#c16508,#272727); }
footer { flex:0 0 auto; background:#272727; color:#ebebeb; padding:10px 32px; display:flex;
justify-content:space-between; align-items:center; font-size:11px; }
footer .flinks span { margin-left:16px; color:#dedede; }
</style></head>
<body>
<div class="utilbar">
<span>Free Shipping on Orders $99+</span>
<span>Sign In | Help | Track Order</span>
</div>
<nav class="mainnav">
<p class="brand">Art Com</p>
<div class="searchwrap">
<input type="text" placeholder="Search by artist, subject, or room" />
<div class="searchbtn">Search</div>
</div>
<div class="navicons">
<span>Favorites</span>
<span>Account</span>
<span>Cart <span class="cart">3</span></span>
</div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Museum-Quality Prints, Framed Your Way</h1>
<p>Millions of pieces from emerging and iconic artists — free returns on every order.</p>
</div>
<button class="btn-primary">Shop Best Sellers</button>
</section>
<p class="catlabel">Trending Now</p>
<section class="products">
<div class="card t1">
<div class="thumb"><span class="badge bestseller">Best Seller</span></div>
<div class="meta">
<p class="artist">Gustav Klimt</p>
<p class="title">The Kiss, 1908</p>
<div class="pricerow"><span class="price">$34.99</span></div>
</div>
</div>
<div class="card t2">
<div class="thumb"><span class="badge sale">Sale</span></div>
<div class="meta">
<p class="artist">Andy Warhol</p>
<p class="title">Flower Study No. 4</p>
<div class="pricerow"><span class="price">$24.99</span><span class="price-orig">$39.99</span></div>
</div>
</div>
<div class="card t3">
<div class="thumb"><span class="badge new">New</span></div>
<div class="meta">
<p class="artist">Sofia Marren</p>
<p class="title">Coastline in Blue</p>
<div class="pricerow"><span class="price">$29.99</span></div>
</div>
</div>
<div class="card t4">
<div class="thumb"></div>
<div class="meta">
<p class="artist">J. Alden Weir</p>
<p class="title">Autumn Field Study</p>
<div class="pricerow"><span class="price">$44.99</span></div>
</div>
</div>
</section>
<footer>
<span>© Art Com</span>
<span class="flinks"><span>About</span><span>Help</span><span>Browse</span><span>Connect</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f92c16; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f92c16; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f79b91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f92c16; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f92c16; color: #f5f5f5;
border: 1px solid #f84c3a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f79b91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d12512; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, "PingFang HK", "Microsoft JhengHei", sans-serif; }
* { box-sizing:border-box; }
.nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.nav .brand { font-size:18px; font-weight:500; }
.nav .links { display:flex; gap:26px; font-size:16px; }
.nav .lang { font-size:16px; color:#707070; }
.filterrow { display:flex; gap:26px; padding:6px 32px 18px; align-items:baseline; }
.filterrow .label { font-size:24px; font-weight:500; }
.filterrow .tag { font-size:16px; color:#bebebe; }
.filterrow .tag.on { color:#000000; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:120px; gap:2px; padding:0 2px; }
.tile { position:relative; display:flex; align-items:flex-end; padding:14px; color:#fff; font-size:14px; font-weight:500; }
.tile.big { grid-column:span 2; grid-row:span 2; height:242px; }
.t1{background:#f92c16;} .t2{background:#000000;} .t3{background:#4419fe;} .t4{background:#ff5529;} .t5{background:#126dff;} .t6{background:#e74118;}
.footer { display:flex; justify-content:space-between; padding:16px 32px 0; font-size:16px; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Bito</div>
<div class="links"><span>Work</span><span>News</span><span>About</span><span>Bitween</span></div>
<div class="lang">EN / ZH</div>
</nav>
<div class="filterrow">
<span class="label">Genre</span>
<span class="tag on">Branding</span><span class="tag">Live Action</span><span class="tag">Event</span><span class="tag">Motion</span>
</div>
<div class="grid">
<div class="tile big t1">Momentum — Brand Film</div>
<div class="tile t2">Studio Reel 2026</div>
<div class="tile t3">Northline — Identity</div>
<div class="tile t4">Signal — Launch Event</div>
<div class="tile t5">Paperwave — Motion</div>
<div class="tile t6">Contact</div>
</div>
<div class="footer">
<span>© Bito — A Platform Full of Possibilities</span>
<span>Facebook · Instagram · [email protected]</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcd535; color: #181a20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcd535; color: #181a20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #181a20; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #707a8a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #fcd535; color: #181a20;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #1e2329; color: #ffffff;
border: 1px solid #fcd535; border-radius: 6px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1e2329; color: #ffffff;
border: 1px solid #c3a630; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #1e2329; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b0e11; color:#eaecef; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:18px; font-weight:700; color:#fcd535; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#eaecef; opacity:0.85; }
.navcta { background:#fcd535; color:#181a20; border-radius:6px; padding:9px 18px; font-size:13px; font-weight:600; }
.hero { padding:6px 30px 14px; }
.hero h1 { font-size:30px; font-weight:700; letter-spacing:-0.6px; margin:0 0 6px; max-width:640px; line-height:1.15; }
.hero p { font-size:13px; color:#929aa5; margin:0 0 12px; }
.search { display:flex; align-items:center; background:#1e2329; border-radius:8px; padding:8px 14px; width:340px; gap:8px; }
.search span { font-size:13px; color:#707a8a; }
.search .go { margin-left:auto; background:#fcd535; color:#181a20; border-radius:999px; padding:6px 16px; font-size:12px; font-weight:700; }
.stats { display:flex; gap:50px; padding:6px 30px 16px; }
.stat b { display:block; color:#fcd535; font-size:26px; font-weight:700; letter-spacing:-0.4px; font-family:"Courier New", monospace; }
.stat span { font-size:11px; color:#929aa5; }
.marketscard { margin:0 30px; background:#1e2329; border-radius:12px; padding:18px 20px; }
.tabs2 { display:flex; gap:18px; font-size:12px; color:#707a8a; margin-bottom:10px; }
.tabs2 .on { color:#fcd535; font-weight:600; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:10px; color:#707a8a; font-weight:500; padding:4px 0; }
th.r, td.r { text-align:right; }
td { padding:8px 0; font-size:13px; border-top:1px solid #2b3139; font-family:"Courier New", monospace; }
td.name { font-family:-apple-system,sans-serif; display:flex; align-items:center; gap:8px; }
.coin { width:22px; height:22px; border-radius:999px; display:inline-block; }
.c-btc { background:#f7931a; }
.c-eth { background:#8a92b2; }
.c-sol { background:#14f195; }
.up { color:#0ecb81; }
.down { color:#f6465d; }
</style></head>
<body>
<nav>
<div class="brand">Binance</div>
<div class="navlinks"><span>Buy Crypto</span><span>Markets</span><span>Trade</span><span>Futures</span><span>Earn</span></div>
<div class="navcta">Sign Up</div>
</nav>
<div class="hero">
<h1>316,258,026 USERS TRUST US</h1>
<p>The world's largest crypto exchange, trusted by millions.</p>
<div class="search"><span>🔍 Search coin name</span><span class="go">Sign Up</span></div>
</div>
<div class="stats">
<div class="stat"><b>15,000 BTC</b><span>Held in reserve</span></div>
<div class="stat"><b>$429M</b><span>Funds recovered</span></div>
<div class="stat"><b>7,488,223</b><span>Users protected</span></div>
</div>
<div class="marketscard">
<div class="tabs2"><span class="on">Popular</span><span>New listing</span><span>Top gainers</span></div>
<table>
<tr><th>Pair</th><th class="r">Last Price</th><th class="r">24h Change</th><th class="r">24h Volume</th></tr>
<tr><td class="name"><span class="coin c-btc"></span>BTC/USDT</td><td class="r">83,214.50</td><td class="r up">+2.14%</td><td class="r">$1.82B</td></tr>
<tr><td class="name"><span class="coin c-eth"></span>ETH/USDT</td><td class="r">3,142.08</td><td class="r down">-0.87%</td><td class="r">$742M</td></tr>
<tr><td class="name"><span class="coin c-sol"></span>SOL/USDT</td><td class="r">168.42</td><td class="r up">+5.62%</td><td class="r">$318M</td></tr>
</table>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #034f6d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #034f6d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #88aab8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #034f6d; color: #ffffff;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #034f6d; color: #f5f5f5;
border: 1px solid #2a6a83; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #88aab8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #084861; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:80px; display:flex; align-items:center; padding:0 24px; border-bottom:1px solid #e6e6e6; }
.brand { font-size:20px; font-weight:700; margin-right:40px; }
.navlist { display:flex; height:80px; }
.navlist li { list-style:none; padding:25px 15px; font-size:14px; font-weight:700; color:#212121; }
.hero { padding:40px 40px 24px; }
h1 { font-size:36px; font-weight:700; line-height:1.3; margin:0 0 14px; max-width:640px; }
.body { font-size:16px; line-height:1.6; color:#212121; max-width:600px; margin:0 0 18px; }
a.link { color:#034f6d; font-size:16px; text-decoration:underline; }
.stats { display:flex; gap:0; padding:10px 40px 30px; border-top:1px solid #e6e6e6; margin-top:10px; }
.stat { flex:1; padding:24px 15px; border-right:1px solid #e6e6e6; }
.stat:last-child { border-right:none; }
.stat h2 { font-size:22px; font-weight:700; margin:0 0 8px; }
.stat p { font-size:14px; color:#212121; line-height:1.6; margin:0; }
.stat .num { font-size:32px; font-weight:700; margin-top:10px; }
</style></head>
<body>
<nav>
<span class="brand">Toyota</span>
<ul class="navlist">
<li>Vehicles</li>
<li>Mobility</li>
<li>Company</li>
<li>Sustainability</li>
</ul>
</nav>
<section class="hero">
<h1>Making ever-better mobility<br>for people and society</h1>
<p class="body">The Toyota Production System aims to eliminate waste, shorten lead time, and make work easier for the people who do it — every day, incrementally.</p>
<a class="link" href="#">Read the production system</a>
</section>
<div class="stats">
<div class="stat">
<h2>Production & Sales</h2>
<p>Figures reported by region and vehicle line, updated each fiscal year.</p>
<div class="num">10.3M</div>
</div>
<div class="stat">
<h2>Production System</h2>
<p>Jidoka and Just-in-Time remain the two pillars of daily kaizen.</p>
<div class="num">2 pillars</div>
</div>
<div class="stat">
<h2>Mobility for All</h2>
<p>A continuing shift toward mobility while building beloved cars.</p>
<div class="num">170+ markets</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a3a3a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #3a3a3a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #090909; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
.close { font-size:22px; font-weight:300; color:#FFFFFF; }
.toptitle { font-size:13px; font-weight:500; letter-spacing:1.4px; text-transform:uppercase; color:#B3B3B3; }
.next { font-size:13px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:#FFFFFF; }
.stage { height:364px; display:flex; align-items:center; justify-content:center; }
.photo { width:280px; height:364px; border-radius:2px;
background:linear-gradient(165deg,#3a3f2e 0%,#c8a86b 40%,#2c3542 78%,#0e0e0e 100%); }
.origtag { position:relative; }
.sliderwrap { padding:0 22px; margin-top:2px; }
.sliderlabelrow { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.toolname { font-size:12px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:#B3B3B3; }
.liveval { font-size:14px; font-weight:600; color:#FFFFFF; }
.track { position:relative; height:1px; background:#3A3A3A; margin:0 9px; }
.fill { position:absolute; left:50%; top:0; height:1px; width:22%; background:#FFFFFF; }
.knob { position:absolute; left:72%; top:50%; transform:translate(-50%,-50%); width:18px; height:18px;
border-radius:50%; background:#FFFFFF; box-shadow:0 1px 4px rgba(0,0,0,0.6); }
.carouselwrap { margin-top:22px; padding:0 22px; overflow:hidden; }
.carousel { display:flex; gap:14px; }
.tile { flex-shrink:0; width:56px; text-align:center; }
.swatch { width:56px; height:56px; border-radius:2px; }
.tile.active .swatch { box-shadow:0 0 0 2px #FFFFFF; }
.code { display:block; margin-top:6px; font-size:11px; font-weight:600; letter-spacing:1px;
text-transform:uppercase; color:#B3B3B3; }
.tile.active .code { color:#FFFFFF; }
.tray { position:absolute; bottom:0; left:0; right:0; height:84px; border-top:0.5px solid #2A2A2A;
display:flex; align-items:center; justify-content:center; gap:30px; }
.tool { display:flex; flex-direction:column; align-items:center; gap:8px; }
.toolic { font-size:20px; color:#B3B3B3; }
.toollb { font-size:12px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:#B3B3B3; }
.tool.on .toolic, .tool.on .toollb { color:#FFFFFF; }
</style></head>
<body>
<div class="topbar">
<span class="close">✕</span>
<span class="toptitle">Edit</span>
<span class="next">Next</span>
</div>
<div class="stage"><div class="photo"></div></div>
<div class="sliderwrap">
<div class="sliderlabelrow"><span class="toolname">Contrast</span><span class="liveval">+2.4</span></div>
<div class="track"><div class="fill"></div><div class="knob"></div></div>
</div>
<div class="toolname" style="padding:0 22px;">VSCO (iOS)</div>
<div class="carouselwrap">
<div class="carousel">
<div class="tile"><div class="swatch" style="background:linear-gradient(160deg,#e8d9b5,#C8A86B);"></div><span class="code">A6</span></div>
<div class="tile active"><div class="swatch" style="background:linear-gradient(160deg,#efe1c2,#C8A86B 60%,#3F382C);"></div><span class="code">C1</span></div>
<div class="tile"><div class="swatch" style="background:linear-gradient(160deg,#c7d3dd,#7E8FA1);"></div><span class="code">M5</span></div>
<div class="tile"><div class="swatch" style="background:linear-gradient(160deg,#aebac4,#7E8FA1 70%,#242424);"></div><span class="code">AV4</span></div>
<div class="tile"><div class="swatch" style="background:linear-gradient(160deg,#dcc9a0,#C8A86B 55%,#3F382C);"></div><span class="code">KP9</span></div>
<div class="tile"><div class="swatch" style="background:linear-gradient(160deg,#bdb8ae,#9A9388);"></div><span class="code">HB2</span></div>
</div>
</div>
<div class="tray">
<div class="tool"><span class="toolic">☀</span><span class="toollb">Exposure</span></div>
<div class="tool on"><span class="toolic">◑</span><span class="toollb">Contrast</span></div>
<div class="tool"><span class="toolic">💧</span><span class="toollb">Saturation</span></div>
<div class="tool"><span class="toolic">▦</span><span class="toollb">Grain</span></div>
<div class="tool"><span class="toolic">▲</span><span class="toollb">Sharpen</span></div>
<div class="tool"><span class="toolic">⬟</span><span class="toollb">HSL</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002244; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002244; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8796a5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1414ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002244; color: #ffffff;
border: 1px solid #1414ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002244; color: #f5f5f5;
border: 1px solid #274460; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8796a5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #032062; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A1424; color:#E9EEF6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.passcol { width:400px; padding:30px; display:flex; align-items:center; }
.pass { width:100%; background:#111E33; border-radius:16px; border:1px solid #243652; overflow:hidden; box-shadow:rgba(0,0,0,0.45) 0 4px 14px; }
.passhead { background:#002244; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; }
.globe { width:16px; height:16px; border-radius:50%; border:2px solid #fff; display:inline-block; margin-right:6px; }
.uword { font-weight:800; font-size:13px; }
.premier { color:#D8B863; font-size:11px; font-weight:700; }
.passbody { padding:16px 18px; }
.plabel { font-size:10px; letter-spacing:0.6px; color:#97A6BE; text-transform:uppercase; }
.pname { font-size:18px; font-weight:700; text-transform:uppercase; margin-top:2px; }
.datagrid { display:flex; margin-top:16px; }
.dcell { flex:1; }
.dval { font-size:22px; font-weight:800; margin-top:2px; }
.dval.gold { color:#D8B863; }
.perf { margin:16px 0; height:1px; border-top:1px dashed #243652; position:relative; }
.perf::before, .perf::after { content:''; position:absolute; top:-6px; width:12px; height:12px; border-radius:50%; background:#0A1424; }
.perf::before { left:-18px; } .perf::after { right:-18px; }
.barcode { height:44px; background:repeating-linear-gradient(90deg,#E9EEF6 0 2px, transparent 2px 5px); border-radius:4px; }
.main { flex:1; padding:30px 34px; }
.flightheader { background:linear-gradient(160deg,#002244,#04152C); border-radius:14px; padding:16px 20px; }
.eyebrow { font-size:11px; letter-spacing:1px; color:#7FA0CE; text-transform:uppercase; }
.routerow { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.iata { font-size:32px; font-weight:800; }
.city { font-size:12px; color:#9FBADC; }
.midinfo { text-align:center; font-size:12px; color:#CFE0F2; }
.timesrow { display:flex; justify-content:space-between; margin-top:12px; font-size:13px; font-weight:600; color:#CFE0F2; }
.seatmap { margin-top:20px; }
.smhead { font-size:15px; font-weight:700; }
.smsub { font-size:12px; color:#97A6BE; margin:4px 0 10px; }
.cabin { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; max-width:340px; }
.seat { height:26px; border-radius:6px 6px 3px 3px; background:#1A2A45; border:1px solid #243652; }
.seat.plus { background:rgba(20,20,255,0.18); border:1px solid rgba(74,74,255,0.4); }
.seat.taken { background:#0A1424; }
.seat.sel { background:#1414FF; box-shadow:0 0 0 2px #4A4AFF; }
.aisle { background:transparent; border:none; }
</style></head>
<body>
<div class="app">
<div class="passcol">
<div class="pass">
<div class="passhead"><div><span class="globe"></span><span class="uword">United (iOS)</span></div><div class="premier">PREMIER · GROUP 1</div></div>
<div class="passbody">
<div class="plabel">PASSENGER</div>
<div class="pname">J SMITH</div>
<div class="datagrid">
<div class="dcell"><div class="plabel">Gate</div><div class="dval">F12</div></div>
<div class="dcell"><div class="plabel">Seat</div><div class="dval">7A</div></div>
<div class="dcell"><div class="plabel">Boards</div><div class="dval gold">7:35A</div></div>
</div>
<div class="perf"></div>
<div class="barcode"></div>
</div>
</div>
</div>
<div class="main">
<div class="flightheader">
<div class="eyebrow">UA 482 · BOEING 777</div>
<div class="routerow">
<div><div class="iata">SFO</div><div class="city">San Francisco</div></div>
<div class="midinfo">✈<br>5h 32m</div>
<div style="text-align:right"><div class="iata">EWR</div><div class="city">Newark</div></div>
</div>
<div class="timesrow"><span>8:05 AM · Gate F12</span><span>4:37 PM · Term C</span></div>
</div>
<div class="seatmap">
<div class="smhead">Choose your seat</div>
<div class="smsub">Economy Plus · Row 7–9 · 7A selected</div>
<div class="cabin">
<div class="seat plus"></div><div class="seat plus"></div><div class="seat sel"></div><div class="aisle"></div><div class="seat plus"></div><div class="seat plus"></div><div class="seat plus"></div>
<div class="seat"></div><div class="seat taken"></div><div class="seat"></div><div class="aisle"></div><div class="seat"></div><div class="seat"></div><div class="seat taken"></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #ffffff;
border: 1px solid #003388; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1e1f26; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #02e49b; color: #121212;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#eeeeee; box-sizing:border-box;
font-family:'futura-pt','Lato','Arial',sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#003388; }
.brand { font-size:15px; font-weight:700; letter-spacing:0.1em; color:#fff; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; font-size:12.5px; color:#cfe0ff; font-weight:600; }
.navlinks span.on { color:#02e49b; }
.cart { background:#ff9900; color:#121212; font-size:11px; font-weight:700; padding:6px 12px; }
main { display:flex; height:580px; }
.gallery { width:360px; background:#1e1f26; position:relative; display:flex; align-items:center; justify-content:center; }
.poster { width:190px; height:270px; border-radius:2px; background:
linear-gradient(160deg,#003388 0%,#24292d 55%,#02e49b 100%); position:relative;
box-shadow:0 20px 40px rgba(0,0,0,0.5); }
.poster::after { content:'AGFA'; position:absolute; bottom:16px; left:16px; color:#fff; font-size:12px;
font-weight:800; letter-spacing:0.2em; }
.poster::before { content:'35mm RESTORATION'; position:absolute; top:16px; left:16px; color:#ff9900;
font-size:9px; font-weight:700; letter-spacing:0.1em; }
.badge-limited { position:absolute; top:22px; left:22px; background:#02e49b; color:#121212; font-size:10px;
font-weight:700; letter-spacing:0.04em; padding:5px 10px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:12px; background:#121212; }
.cat { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:#949494; }
h1 { font-size:22px; font-weight:700; margin:0; line-height:1.28; color:#fff; }
.stars { font-size:12px; color:#ff9900; }
.stars .n { color:#949494; margin-left:6px; font-size:11.5px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; color:#02e49b; }
.desc { font-size:13px; color:#c8c8c8; line-height:1.55; max-width:340px; }
.fmt-row { display:flex; gap:8px; }
.fmt { border:1px solid #444444; border-radius:8px; padding:7px 14px; font-size:12px; color:#eeeeee; }
.fmt.on { border-color:#02e49b; color:#02e49b; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#003388; color:#fff; border:none; border-radius:0; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #ff9900; color:#ff9900; background:transparent; border-radius:0; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#949494; }
</style></head>
<body>
<nav>
<div class="brand">Agfa American Genre Film Archive</div>
<div class="navlinks"><span class="on">Blu-ray</span><span>4K UHD</span><span>Screenings</span><span>Archive</span></div>
<div class="cart">CART (1)</div>
</nav>
<main>
<div class="gallery">
<span class="badge-limited">Limited 3,000</span>
<div class="poster"></div>
</div>
<div class="info">
<span class="cat">Cult Classic · 1976</span>
<h1>Blood Highway — 4K Restoration Blu-ray</h1>
<div class="stars">★★★★★ <span class="n">4.9 · 188 reviews</span></div>
<div class="price-row"><span class="price">$34.99</span></div>
<p class="desc">Scanned from the original camera negative and restored frame-by-frame — includes new commentary and a 40-page liner notes booklet.</p>
<div class="fmt-row">
<span class="fmt on">Blu-ray</span>
<span class="fmt">4K UHD</span>
<span class="fmt">Digital</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Watch Trailer</button>
</div>
<span class="meta">Ships in collector's slipcase</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e0e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #0e0e0e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #020202; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { height:52px; display:flex; align-items:center; padding:0 22px; gap:10px; border-bottom:0.5px solid #2A2A2A; }
.top .sail { width:20px; height:20px; border-radius:4px; background:#fff; }
.top .title { font-size:19px; font-weight:700; }
.seg { display:flex; gap:22px; padding:0 22px; height:38px; align-items:center; border-bottom:0.5px solid #2A2A2A; }
.seg span { font-size:14px; font-weight:600; color:#6E6E6E; }
.seg span.active { color:#fff; padding-bottom:9px; border-bottom:2px solid #fff; }
.feed { padding:16px 14px; display:flex; gap:18px; height:434px; }
.job { flex:1; display:flex; flex-direction:column; gap:8px; }
.prompt { font-family:'SF Mono', ui-monospace, Menlo, monospace; font-size:13px; color:#A1A1A1; line-height:1.4; padding:0 4px; }
.prompt b { color:#FFFFFF; font-weight:400; }
.grid2 { border-radius:12px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; background:#000; aspect-ratio:1; }
.cell { background-size:cover; background-position:center; }
.g1 .c1 { background:linear-gradient(135deg,#3a2a1a,#8a5a2a); }
.g1 .c2 { background:linear-gradient(135deg,#1a2a3a,#2a5a8a); }
.g1 .c3 { background:linear-gradient(135deg,#2a1a3a,#6a2a8a); }
.g1 .c4 { background:linear-gradient(135deg,#1a3a2a,#2a8a5a); }
.actionrow { height:40px; display:flex; align-items:center; padding:0 4px; }
.actionrow .icons { display:flex; gap:14px; color:#A1A1A1; font-size:16px; flex:1; }
.uchips { display:flex; gap:6px; }
.uchip { background:#FFFFFF; color:#000000; font-family:'SF Mono', ui-monospace, monospace; font-size:13px; font-weight:600; padding:6px 10px; border-radius:8px; }
.job2 { display:flex; flex-direction:column; gap:8px; }
.job2 .grid2 { opacity:0.9; }
.g2 .c1 { background:linear-gradient(135deg,#3a1a2a,#8a2a5a); }
.g2 .c2 { background:linear-gradient(135deg,#2a3a1a,#6a8a2a); }
.g2 .c3 { background:linear-gradient(135deg,#1a1a3a,#2a2a8a); }
.g2 .c4 { background:linear-gradient(135deg,#3a2a3a,#8a5a8a); }
.vchips { display:flex; gap:6px; }
.vchip { background:#1A1A1A; border:1px solid #2A2A2A; color:#fff; font-family:'SF Mono', ui-monospace, monospace; font-size:13px; font-weight:600; padding:6px 10px; border-radius:8px; }
.promptbar { position:relative; margin:0 14px; height:50px; background:#1A1A1A; border:1px solid #2A2A2A; border-radius:25px; display:flex; align-items:center; padding:0 8px 0 18px; gap:10px; }
.promptbar .ph { color:#6E6E6E; font-size:14px; flex:1; font-family:'SF Mono', ui-monospace, monospace; }
.promptbar .imagine { width:36px; height:36px; border-radius:50%; background:#FFFFFF; display:flex; align-items:center; justify-content:center; color:#000; font-size:16px; }
.tabbar { height:0; }
</style></head>
<body>
<div class="top"><div class="sail"></div><div class="title">Midjourney (iOS)</div></div>
<div class="seg"><span class="active">Imagine</span><span>Edit</span><span>Personalize</span></div>
<div class="feed">
<div class="job">
<div class="prompt"><b>a glass owl, studio light</b> --ar 1:1 --v 6 --stylize 250</div>
<div class="grid2 g1"><div class="cell c1"></div><div class="cell c2"></div><div class="cell c3"></div><div class="cell c4"></div></div>
<div class="actionrow"><span class="icons">♡ ⬇ ⋯</span><div class="uchips"><span class="uchip">U1</span><span class="uchip">U2</span><span class="uchip">U3</span><span class="uchip">U4</span></div></div>
</div>
<div class="job2">
<div class="prompt"><b>brutalist library interior</b>, morning fog --ar 1:1 --style raw</div>
<div class="grid2 g2"><div class="cell c1"></div><div class="cell c2"></div><div class="cell c3"></div><div class="cell c4"></div></div>
<div class="actionrow"><span class="icons">♡ ⬇ ⋯</span><div class="vchips"><span class="vchip">V1</span><span class="vchip">V2</span><span class="vchip">V3</span><span class="vchip">🔄</span></div></div>
</div>
</div>
<div class="promptbar"><span class="ph">What will you imagine?</span><div class="imagine">↑</div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181818; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: 1px solid #181818; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #131313; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:640px; }
.sidebar { width:190px; background:#000; padding:20px 14px; flex-shrink:0; }
.sidebar .brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin-bottom:24px; }
.sidebar .dot { width:22px; height:22px; border-radius:50%; background:#1ed760; }
.navitem { font-size:13px; font-weight:700; color:#fff; padding:8px 0; }
.navitem.inactive { color:#b3b3b3; font-weight:400; }
.plsection { margin-top:18px; }
.plsection .title { font-size:11px; color:#b3b3b3; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.pl { font-size:12.5px; color:#b3b3b3; padding:5px 0; }
.main { flex:1; padding:20px 26px; overflow:hidden; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.search { background:#1f1f1f; border-radius:9999px; padding:9px 16px; font-size:12px; color:#b3b3b3; width:220px;
box-shadow: rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset; }
.pillbtn { background:#1f1f1f; color:#fff; border:none; border-radius:9999px; padding:8px 16px; font-size:12px;
font-weight:700; text-transform:uppercase; letter-spacing:1.4px; }
h2 { font-size:22px; font-weight:700; margin:0 0 12px; }
.cardgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.card { background:#181818; border-radius:8px; padding:12px; box-shadow:rgba(0,0,0,.3) 0px 8px 8px; position:relative; }
.art { height:78px; border-radius:6px; margin-bottom:8px; }
.art.a1 { background:linear-gradient(135deg,#ff6b6b,#c92a2a); }
.art.a2 { background:linear-gradient(135deg,#1ed760,#0a5c2e); }
.art.a3 { background:linear-gradient(135deg,#ffd43b,#e8590c); }
.art.a4 { background:linear-gradient(135deg,#748ffc,#364fc7); }
.card .t { font-size:12.5px; font-weight:700; }
.card .s { font-size:11px; color:#b3b3b3; margin-top:3px; }
.play { position:absolute; right:10px; bottom:56px; width:32px; height:32px; border-radius:50%; background:#1ed760;
display:flex; align-items:center; justify-content:center; box-shadow:rgba(0,0,0,.5) 0px 8px 24px; }
.play::after { content:''; width:0; height:0; border-style:solid; border-width:6px 0 6px 9px; border-color:transparent transparent transparent #121212; margin-left:2px; }
.nowplaying { position:absolute; left:0; right:0; bottom:0; height:64px; background:#181818; border-top:1px solid #282828;
display:flex; align-items:center; padding:0 16px; gap:12px; }
.np-art { width:44px; height:44px; border-radius:4px; background:linear-gradient(135deg,#ff6b6b,#c92a2a); }
.np-text .t { font-size:12px; }
.np-text .s { font-size:10.5px; color:#b3b3b3; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="brand"><span class="dot"></span>Spotify</div>
<div class="navitem">Home</div>
<div class="navitem inactive">Search</div>
<div class="navitem inactive">Your Library</div>
<div class="plsection">
<div class="title">Playlists</div>
<div class="pl">Discover Weekly</div>
<div class="pl">Release Radar</div>
<div class="pl">Daily Mix 1</div>
<div class="pl">Liked Songs</div>
</div>
</div>
<div class="main">
<div class="topbar">
<div class="search">Search</div>
<button class="pillbtn">Upgrade</button>
</div>
<h2>Good afternoon</h2>
<div class="cardgrid">
<div class="card"><div class="art a1"></div><div class="t">Today's Top Hits</div><div class="s">The hits right now</div><div class="play"></div></div>
<div class="card"><div class="art a2"></div><div class="t">Discover Weekly</div><div class="s">Made for you</div><div class="play"></div></div>
<div class="card"><div class="art a3"></div><div class="t">RapCaviar</div><div class="s">New hip-hop</div><div class="play"></div></div>
<div class="card"><div class="art a4"></div><div class="t">Chill Hits</div><div class="s">Kick back and relax</div><div class="play"></div></div>
</div>
<h2>Recently played</h2>
<div class="cardgrid">
<div class="card"><div class="art a4"></div><div class="t">Daily Mix 1</div><div class="s">Spotify · Mixed for you</div></div>
<div class="card"><div class="art a3"></div><div class="t">Release Radar</div><div class="s">New music this week</div></div>
<div class="card"><div class="art a2"></div><div class="t">On Repeat</div><div class="s">Songs you love right now</div></div>
<div class="card"><div class="art a1"></div><div class="t">Liked Songs</div><div class="s">342 songs</div></div>
</div>
</div>
<div class="nowplaying">
<div class="np-art"></div>
<div class="np-text"><div class="t">Track Name</div><div class="s">Artist Name</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7620f6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7620f6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bc95f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7351ec; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7620f6; color: #ffffff;
border: 1px solid #7351ec; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7620f6; color: #f5f5f5;
border: 1px solid #8a42f6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bc95f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7628f4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2F2E2B; box-sizing:border-box;
font-family:Pretendard, "Apple SD Gothic Neo", "Helvetica Neue", sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #CFCECB; }
.brand { font-size:16px; font-weight:700; }
.brand span { color:#7620F6; }
.navlinks { font-size:13px; color:#6F6E6B; display:flex; gap:20px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#CFCECB; margin-top:1px; }
.tile { background:#ffffff; padding:12px; display:flex; flex-direction:column; gap:6px; }
.tile .thumb { height:150px; border-radius:8px; background:linear-gradient(160deg,#f3eefe,#e3d6fb); position:relative; }
.tile .thumb .badge { position:absolute; top:8px; left:8px; background:#EC5151; color:#fff; font-size:11px; font-weight:700; padding:2px 6px; border-radius:4px; }
.tile .name { font-size:13px; color:#4F4E4B; }
.tile .price { font-size:16px; font-weight:700; }
.tile .old { font-size:12px; color:#AFAEAB; text-decoration:line-through; margin-right:6px; }
.banner { padding:16px 34px; display:flex; align-items:center; justify-content:space-between; }
.banner .t { font-size:20px; font-weight:700; }
.banner .cta { background:#000000; color:#fff; border-radius:2px; padding:6px 14px; font-size:13px; }
</style></head>
<body>
<nav>
<div class="brand">Trenbe<span>.</span></div>
<div class="navlinks"><span>Bags</span><span>Watches</span><span>Shoes</span><span>Jewelry</span></div>
</nav>
<div class="banner">
<span class="t">Global No.1 authenticated luxury, scanned for the lowest price</span>
<span class="cta">Shop now</span>
</div>
<div class="grid">
<div class="tile"><div class="thumb"><span class="badge">SALE</span></div><span class="name">Leather Tote Bag</span><span class="price"><span class="old">$2,400</span>$1,890</span></div>
<div class="tile"><div class="thumb"></div><span class="name">Classic Chronograph</span><span class="price">$5,200</span></div>
<div class="tile"><div class="thumb"><span class="badge">SALE</span></div><span class="name">Suede Ankle Boots</span><span class="price"><span class="old">$680</span>$510</span></div>
<div class="tile"><div class="thumb"></div><span class="name">Pearl Drop Earrings</span><span class="price">$940</span></div>
<div class="tile"><div class="thumb"></div><span class="name">Cashmere Overcoat</span><span class="price">$1,760</span></div>
<div class="tile"><div class="thumb"></div><span class="name">Structured Handbag</span><span class="price">$3,100</span></div>
<div class="tile"><div class="thumb"><span class="badge">SALE</span></div><span class="name">Silk Wrap Scarf</span><span class="price"><span class="old">$310</span>$220</span></div>
<div class="tile"><div class="thumb"></div><span class="name">Minimal Steel Watch</span><span class="price">$1,050</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0065bd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0065bd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4dc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d3133; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0065bd; color: #ffffff;
border: 1px solid #2d3133; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0065bd; color: #f5f5f5;
border: 1px solid #277cc6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4dc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #075da7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2d3133; box-sizing:border-box;
font-family:"Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e5e7eb; }
.brand { font-size:18px; font-weight:700; letter-spacing:1px; color:#2d3133; }
.navlinks { display:flex; gap:32px; font-size:14px; color:#51656f; }
.navlinks li { list-style:none; }
.navlinks ul { display:flex; gap:32px; margin:0; padding:0; }
.hero { display:flex; align-items:center; gap:0; padding:44px 40px 32px; }
.hero-txt { flex:1; }
.eyebrow { font-size:13px; color:#0065bd; font-weight:700; letter-spacing:2px; margin:0 0 12px; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.5; margin:0 0 14px; color:#2d3133; }
.hero p { font-size:15px; color:#51656f; line-height:1.7; max-width:420px; margin:0; }
.hero-visual { width:280px; height:190px; position:relative; flex-shrink:0; }
.hero-visual .blob1 { position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #eaf1f8, #f5f7fb); top:-10px; right:20px; }
.hero-visual .blob2 { position:absolute; width:110px; height:8px; background:#0065bd; top:70px; right:100px; opacity:0.5; }
.hero-visual .blob3 { position:absolute; width:70px; height:8px; background:#646d76; top:100px; right:150px; opacity:0.4; }
.divider { border-top:1px solid #e5e7eb; margin:0 40px; }
.list { padding:28px 40px; }
.list h2 { font-size:15px; font-weight:700; color:#2d3133; margin:0 0 6px; }
.navitem { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-top:1px solid #e5e7eb;
font-size:14px; color:#2d3133; font-weight:400; }
.navitem:last-child { border-bottom:1px solid #e5e7eb; }
.navitem .arrow { color:#646d76; font-size:13px; }
.side { display:flex; gap:22px; padding:0 40px 24px; }
.sidecard { flex:1; border:1px solid #e5e7eb; padding:22px; }
.sidecard h3 { font-size:16px; font-weight:700; margin:0 0 8px; color:#2d3133; }
.sidecard p { font-size:13px; color:#51656f; line-height:1.7; margin:0 0 14px; }
.sidecard .side-ctrl { font-size:13px; color:#0065bd; font-weight:400; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e5e7eb; padding:14px 40px;
display:flex; justify-content:space-between; font-size:12px; color:#646d76; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Recruit</span>
<div class="navlinks"><ul><li>Company</li><li>Sustainability</li><li>Investors</li><li>Careers</li></ul></div>
</nav>
<section class="hero">
<div class="hero-txt">
<p class="eyebrow">OPPORTUNITIES FOR LIFE</p>
<h1>Making your next choice easier to find.</h1>
<p>We back individual passion and support corporate productivity. Our matching platforms connect people and opportunity through technology, worldwide.</p>
</div>
<div class="hero-visual"><span class="blob1"></span><span class="blob2"></span><span class="blob3"></span></div>
</section>
<div class="divider"></div>
<section class="list">
<h2>Sustainability Initiatives</h2>
<div class="navitem"><span>Initiatives for Productivity Growth</span><span class="arrow">›</span></div>
<div class="navitem"><span>Programs That Support Employee Growth</span><span class="arrow">›</span></div>
<div class="navitem"><span>Value Creation Report 2026</span><span class="arrow">›</span></div>
</section>
<section class="side">
<div class="sidecard">
<h3>About RSS</h3>
<p>From a matching business connecting people and companies to a SaaS business supporting productivity — explore our journey of over 60 years.</p>
<span class="side-ctrl">View Company Info ›</span>
</div>
<div class="sidecard">
<h3>Vision, Mission, Values</h3>
<p>"Creating New Value," "Pursuing Individual Potential," "Valuing Social Impact" — the three values we hold dear.</p>
<span class="side-ctrl">Learn More ›</span>
</div>
</section>
<footer>
<span>© Recruit Holdings Co., Ltd.</span>
<span>Company · Sustainability · Investors</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6363; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6363; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3636; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #07080a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6363; color: #07080a;
border: 1px solid #07080a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6363; color: #111111;
border: 1px solid #d95656; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3636; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d75455; color: #07080a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#07080a; color:#f9f9f9; box-sizing:border-box;
font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #2f3031; }
.brand { font-size:15px; font-weight:600; color:#f9f9f9; letter-spacing:0.2px; display:flex; align-items:center; gap:8px; }
.brand .dot { width:16px; height:16px; border-radius:5px; background:linear-gradient(135deg,#ff6363,#ae2c00); }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#9c9c9d; }
.navlinks span:first-child { color:#ffffff; }
.cta { background:hsla(0,0%,100%,0.815); color:#18191a; border:none; border-radius:9999px; padding:8px 16px;
font-size:13px; font-weight:600; box-shadow:rgba(255,255,255,0.1) 0px 1px 0px 0px inset; }
.hero { position:relative; padding:40px 32px 24px; text-align:center; }
.badge { display:inline-block; background:#1b1c1e; color:#ffffff; border-radius:6px; padding:3px 10px;
font-size:11px; font-weight:600; letter-spacing:0.4px; margin-bottom:16px; }
.hero h1 { font-size:38px; font-weight:600; line-height:1.1; margin:0 0 12px; letter-spacing:-0.4px; }
.hero h1 span { color:#ff6363; }
.hero p { font-size:15px; color:#cecece; margin:0 0 22px; font-weight:500; }
/* command palette — the centerpiece */
.palette { width:620px; margin:0 auto; background:#101111; border-radius:14px;
border:1px solid rgba(255,255,255,0.06);
box-shadow: rgb(27,28,30) 0px 0px 0px 1px, rgb(7,8,10) 0px 0px 0px 1px inset, rgba(0,0,0,0.5) 0px 20px 40px; }
.palette-input { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid #2f3031; }
.palette-input .icon { width:16px; height:16px; border:2px solid #6a6b6c; border-radius:50%; position:relative; flex-shrink:0; }
.palette-input .icon::after { content:''; position:absolute; width:6px; height:2px; background:#6a6b6c; right:-5px; bottom:-1px; transform:rotate(45deg); }
.palette-input .txt { font-size:14px; color:#f9f9f9; font-weight:500; }
.palette-input .txt .cursor { display:inline-block; width:1px; height:14px; background:#ff6363; vertical-align:middle; margin-left:2px; }
.plist { padding:8px; text-align:left; }
.prow { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:8px; }
.prow.active { background:#1b1c1e; }
.prow .left { display:flex; align-items:center; gap:10px; }
.prow .sw { width:26px; height:26px; border-radius:7px; flex-shrink:0; }
.sw.sw1 { background:linear-gradient(135deg,#ff6363,#ae2c00); }
.sw.sw2 { background:linear-gradient(135deg,#55b3ff,#0a449b); }
.sw.sw3 { background:linear-gradient(135deg,#5fc992,#1b5c3c); }
.sw.sw4 { background:linear-gradient(135deg,#ffbc33,#8a5e00); }
.prow .label { font-size:13px; font-weight:500; color:#f9f9f9; }
.prow .sub { font-size:11px; color:#6a6b6c; margin-top:1px; }
.prow .kbd { display:flex; gap:4px; }
.key { width:22px; height:22px; border-radius:5px; background:linear-gradient(#121212,#0d0d0d);
box-shadow:rgba(0,0,0,0.4) 0px 1.5px 0.5px 2.5px; display:flex; align-items:center; justify-content:center;
font-size:10px; color:#c0c0c0; font-weight:600; }
.cards { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:22px 32px 28px; }
.card { background:#101111; border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:16px;
box-shadow:rgba(215,201,175,0.05) 0px 0px 20px 5px; }
.card .tag { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:#55b3ff; }
.card h3 { font-size:15px; font-weight:500; margin:8px 0 6px; color:#ffffff; }
.card p { font-size:12px; color:#9c9c9d; margin:0; line-height:1.5; }
footer { position:relative; border-top:1px solid #2f3031; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#6a6b6c; }
</style></head>
<body>
<nav>
<p class="brand"><span class="dot"></span>Raycast</p>
<div class="navlinks"><span>Store</span><span>Extensions</span><span>Blog</span><span>Pro</span></div>
<button class="cta">Download</button>
</nav>
<section class="hero">
<span class="badge">RAYCAST AI</span>
<h1>Your shortcut to <span>everything</span></h1>
<p>A collection of powerful productivity tools, all within an extendable launcher.</p>
<div class="palette">
<div class="palette-input">
<span class="icon"></span>
<span class="txt">create quick link<span class="cursor"></span></span>
</div>
<div class="plist">
<div class="prow active">
<div class="left"><span class="sw sw1"></span><div><div class="label">Create Quick Link</div><div class="sub">Raycast</div></div></div>
<div class="kbd"><span class="key">⏎</span></div>
</div>
<div class="prow">
<div class="left"><span class="sw sw2"></span><div><div class="label">Search Snippets</div><div class="sub">Snippets</div></div></div>
<div class="kbd"><span class="key">⌘</span><span class="key">K</span></div>
</div>
<div class="prow">
<div class="left"><span class="sw sw3"></span><div><div class="label">Clipboard History</div><div class="sub">Clipboard</div></div></div>
<div class="kbd"><span class="key">⌥</span><span class="key">V</span></div>
</div>
<div class="prow">
<div class="left"><span class="sw sw4"></span><div><div class="label">Ask AI</div><div class="sub">Raycast AI</div></div></div>
<div class="kbd"><span class="key">⌘</span><span class="key">/</span></div>
</div>
</div>
</div>
</section>
<section class="cards">
<div class="card"><span class="tag">Extensions</span><h3>1,300+ community extensions</h3><p>Install tools built by the community, or build your own in minutes.</p></div>
<div class="card"><span class="tag">AI</span><h3>Chat with every major model</h3><p>Access GPT, Claude, and more from a single command bar.</p></div>
<div class="card"><span class="tag">Teams</span><h3>Shared snippets & quicklinks</h3><p>Keep your whole team in sync without leaving the keyboard.</p></div>
</section>
<footer>
<span>© Raycast</span>
<span>Built for macOS · Windows · Raycast Pro</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #28ab6c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #28ab6c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99d4b7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002926; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #28ab6c; color: #002926;
border: 1px solid #002926; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #28ab6c; color: #f5f5f5;
border: 1px solid #49b782; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99d4b7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #229661; color: #002926;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Google Sans","Pretendard","Apple SD Gothic Neo",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#ffffff; }
.brand { font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#000000; }
.navlinks .on { color:#28ab6c; }
.hero { background:#002926; padding:28px 32px 26px; color:#ffffff; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(40,171,108,0.35), transparent 70%); }
.hero h1 { position:relative; font-size:38px; font-weight:700; line-height:1.12; margin:0 0 10px; max-width:560px; }
.hero p { position:relative; font-size:14px; color:#badba3; max-width:480px; margin:0 0 18px; line-height:1.5; }
.hero .row { position:relative; display:flex; gap:12px; }
.pill-white { background:#ffffff; color:#002926; border-radius:999px; padding:11px 26px; font-size:14px; font-weight:700; }
.pill-ghost { background:transparent; color:#ffffff; border:1px solid rgba(255,255,255,0.3); border-radius:999px; padding:11px 24px; font-size:14px; font-weight:600; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 32px; }
.card { border-radius:24px; padding:20px; }
.card .tag { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.65; margin-bottom:8px; }
.card h3 { font-size:18px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12.5px; line-height:1.5; margin:0; }
.card.light { background:#f3f3f3; color:#000000; }
.card.dark { background:#1a1a1a; color:#ffffff; }
.card.teal { background:#002926; color:#ffffff; }
.card.teal .tag { color:#28ab6c; opacity:1; }
.blog { margin:0 32px; background:#f3f3f3; border:1px solid #e5e5e5; border-radius:18px;
padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
.blog .left b { font-size:14px; }
.blog .left div.sub { font-size:12px; color:#606060; margin-top:3px; }
.doclink { color:#03b5e5; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav>
<div class="brand">Lablup</div>
<div class="navlinks"><span class="on">Backend.AI</span><span>About us</span><span>Media center</span><span>Stories</span><span>Careers</span></div>
<div style="width:80px"></div>
</nav>
<section class="hero">
<h1>Making AI possible<br>where it wasn't.</h1>
<p>Lablup untangles complex AI infrastructure with software, for a tomorrow where AI reaches everyone.</p>
<div class="row"><span class="pill-white">Contact Us</span><span class="pill-ghost">View All</span></div>
</section>
<div class="grid3">
<div class="card light"><div class="tag">Product</div><h3>Backend.AI</h3><p>The operating system for AI infrastructure — from a laptop workload to frontier-model training.</p></div>
<div class="card dark"><div class="tag">News</div><h3>Latest from Lablup</h3><p>Marking ten years of untangling GPU and accelerator complexity for research teams.</p></div>
<div class="card teal"><div class="tag">Careers</div><h3>Join our team</h3><p>Build alongside hardware, storage, cloud, and service partners across Seoul and San Jose.</p></div>
</div>
<div class="blog">
<div class="left"><b>docs.backend.ai</b><div class="sub">Configuration guides, GPU scheduling, and API reference</div></div>
<span class="doclink">Read the docs →</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5c00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5c00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab087; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e65300; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5c00; color: #000000;
border: 1px solid #e65300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5c00; color: #f5f5f5;
border: 1px solid #fd7427; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab087; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb5b00; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.header { width:960px; height:56px; border-bottom:1px solid #e5e5e6; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.brand { font-size:18px; font-weight:700; color:#ff5c00; }
.header-right { display:flex; gap:18px; align-items:center; }
.header-link { font-size:13px; font-weight:500; color:#4a4a4a; }
.header-cta { background:#ff5c00; color:#ffffff; font-size:13px; font-weight:600; border-radius:8px;
padding:7px 16px; }
.stage { width:960px; height:584px; display:flex; }
.gallery { width:552px; height:584px; padding:20px; position:relative; }
.gallery-main { width:100%; height:380px; border-radius:8px; position:relative; overflow:hidden;
background: linear-gradient(160deg, #ffd9a8 0%, #ff8a3d 45%, #e65300 100%); }
.gallery-main::after { content:""; position:absolute; inset:0;
background: radial-gradient(circle at 75% 15%, rgba(255,255,255,0.35), transparent 40%),
linear-gradient(0deg, rgba(0,0,0,0.25), transparent 55%); }
.sale-badge { position:absolute; top:14px; left:14px; background:#ff5c00; color:#ffffff; font-size:12px;
font-weight:700; border-radius:4px; padding:2px 8px; z-index:2; }
.thumbs { display:flex; gap:10px; margin-top:10px; }
.thumb { width:calc((100% - 30px)/4); height:78px; border-radius:8px; }
.thumb.t1 { background:linear-gradient(160deg,#ffd9a8,#ff8a3d); }
.thumb.t2 { background:linear-gradient(160deg,#bfe6ff,#4fa6d6); }
.thumb.t3 { background:linear-gradient(160deg,#c9f2d6,#4caf7d); }
.thumb.t4 { background:linear-gradient(160deg,#f2d9ff,#b06fd6); }
.highlights { margin-top:16px; }
.highlights-title { font-size:15px; font-weight:700; margin-bottom:8px; }
.highlight-row { display:flex; gap:8px; font-size:13px; color:#4a4a4a; margin-bottom:6px; align-items:flex-start; }
.dot { width:5px; height:5px; border-radius:50%; background:#ff5c00; margin-top:6px; flex-shrink:0; }
.info { width:408px; height:584px; padding:20px 24px; border-left:1px solid #e5e5e6; display:flex; flex-direction:column; }
.loc { font-size:12px; font-weight:500; color:#888888; text-transform:uppercase; letter-spacing:0.04em; }
.title { font-size:23px; font-weight:700; margin:6px 0 8px; line-height:1.25; }
.rating-row { display:flex; align-items:center; gap:6px; font-size:13px; color:#888888; margin-bottom:14px; }
.stars { color:#ffb400; font-size:14px; }
.rating-val { color:#1a1a1a; font-weight:700; }
.chip-row { display:flex; gap:8px; margin-bottom:16px; }
.chip { font-size:12px; font-weight:500; border-radius:4px; padding:3px 8px; }
.chip.trust { background:#fff0e8; color:#1fa463; }
.chip.info { background:#f7f7f8; color:#1a1a1a; }
.price-block { display:flex; align-items:baseline; gap:8px; margin-bottom:16px; }
.price-old { font-size:14px; color:#bdbdbd; text-decoration:line-through; }
.price-new { font-size:26px; font-weight:700; color:#1a1a1a; }
.price-unit { font-size:12px; color:#888888; }
.field-label { font-size:12px; font-weight:600; color:#4a4a4a; margin:0 0 6px; }
.select-input { border:1px solid #d9d9d9; border-radius:8px; height:42px; display:flex; align-items:center;
padding:0 12px; font-size:14px; color:#1a1a1a; margin-bottom:14px; justify-content:space-between; }
.select-input .arrow { color:#888888; font-size:12px; }
.book-btn { margin-top:auto; background:#ff5c00; color:#ffffff; height:48px; border-radius:8px;
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; }
.urgency { font-size:12px; font-weight:600; color:#f5a623; text-align:center; margin-top:8px; }
</style></head>
<body>
<div class="header">
<div class="brand">KKday</div>
<div class="header-right">
<span class="header-link">Tours & Tickets</span>
<span class="header-link">Transport</span>
<span class="header-link">SIM & WiFi</span>
<div class="header-cta">Sign In</div>
</div>
</div>
<div class="stage">
<div class="gallery">
<div class="gallery-main"><div class="sale-badge">20% OFF</div></div>
<div class="thumbs">
<div class="thumb t1"></div>
<div class="thumb t2"></div>
<div class="thumb t3"></div>
<div class="thumb t4"></div>
</div>
<div class="highlights">
<div class="highlights-title">Highlights</div>
<div class="highlight-row"><div class="dot"></div><span>Small-group sunrise tea ceremony with a licensed local host</span></div>
<div class="highlight-row"><div class="dot"></div><span>Hotel pickup and drop-off included</span></div>
<div class="highlight-row"><div class="dot"></div><span>English, Mandarin and Korean guiding available</span></div>
</div>
</div>
<div class="info">
<div class="loc">Kyoto, Japan</div>
<div class="title">Sunrise Tea Ceremony & Garden Walk</div>
<div class="rating-row"><span class="stars">★★★★★</span>
<span class="rating-val">4.8</span><span>· 1,240 reviews</span></div>
<div class="chip-row">
<div class="chip trust">Instant confirmation</div>
<div class="chip trust">Free cancellation</div>
</div>
<div class="price-block">
<span class="price-old">NT$1,680</span>
<span class="price-new">NT$1,344</span>
<span class="price-unit">/ person</span>
</div>
<div class="field-label">Select Date</div>
<div class="select-input"><span>Sat, Oct 17, 2026</span><span class="arrow">▾</span></div>
<div class="field-label">Travelers</div>
<div class="select-input"><span>2 Adults</span><span class="arrow">▾</span></div>
<div class="book-btn">Book Now</div>
<div class="urgency">Only 3 spots left for this date</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a3a5c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a3a5c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92a1b0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a3a5c; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a3a5c; color: #f5f5f5;
border: 1px solid #3d5874; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92a1b0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #244174; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#050505; box-sizing:border-box;
font-family:"Roboto Flex","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
header { background:#1a3a5c; color:#ffffff; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.brandbar { display:flex; align-items:center; gap:22px; }
.brand { font-size:16px; font-weight:700; }
.hnav { display:flex; gap:18px; font-size:13px; color:rgba(255,255,255,0.75); }
.search { background:rgba(255,255,255,0.14); color:#ffffff; border-radius:0; height:32px; padding:0 12px; display:flex; align-items:center; font-size:13px; width:220px; }
.layout { display:flex; height:calc(100% - 56px); }
.sidebar { width:210px; background:#f6f8fa; border-right:1px solid #e1e6ec; padding:18px 0; }
.side-item { padding:10px 22px; font-size:14px; color:#3a4552; display:flex; align-items:center; gap:10px; }
.side-item.active { background:#e8f3fb; color:#0b6dd3; font-weight:700; border-right:3px solid #0b6dd3; }
.side-dot { width:6px; height:6px; border-radius:50%; background:#9aa7b5; }
.side-item.active .side-dot { background:#0b6dd3; }
.content { flex:1; padding:26px 32px; overflow:hidden; }
.pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pagehead h1 { font-size:24px; font-weight:500; margin:0; }
.action-primary { background:#03102e; color:#ffffff; border:1px solid #ffffff; border-radius:32px; padding:10px 22px; font-size:14px; font-weight:700; box-shadow:0 0 0 1px #03102e; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat { border:1px solid #e1e6ec; padding:14px 16px; }
.stat .n { font-size:22px; font-weight:500; color:#1a3a5c; }
.stat .l { font-size:12px; color:#5b6675; margin-top:4px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { text-align:left; font-weight:700; color:#3a4552; border-bottom:1px solid #d7dde4; padding:8px 10px; background:#f6f8fa; }
tbody td { padding:10px 10px; border-bottom:1px solid #edf1f5; color:#050505; }
.case-id { color:#0b6dd3; font-weight:700; }
.status-pill { display:inline-block; border-radius:2px; padding:2px 8px; font-size:11px; font-weight:700; }
.st-progress { background:#e8f3fb; color:#0b6dd3; }
.st-review { background:#fdf1de; color:#a15c00; }
.st-done { background:#e4f6ea; color:#1c7a3e; }
</style></head>
<body>
<header>
<div class="brandbar">
<span class="brand">Pega UX Design System</span>
<div class="hnav"><span>Cases</span><span>Workflows</span><span>Reports</span><span>Admin</span></div>
</div>
<div class="search">Search cases, workflows...</div>
</header>
<div class="layout">
<aside class="sidebar">
<div class="side-item active"><span class="side-dot"></span>Case Manager</div>
<div class="side-item"><span class="side-dot"></span>My Assignments</div>
<div class="side-item"><span class="side-dot"></span>Workflow Designer</div>
<div class="side-item"><span class="side-dot"></span>Decisioning</div>
<div class="side-item"><span class="side-dot"></span>Reports & Insights</div>
<div class="side-item"><span class="side-dot"></span>Data Model</div>
</aside>
<section class="content">
<div class="pagehead">
<h1>Claims Onboarding Cases</h1>
<div class="action-primary">New Case</div>
</div>
<div class="stats">
<div class="stat"><div class="n">128</div><div class="l">Open cases</div></div>
<div class="stat"><div class="n">34</div><div class="l">Pending review</div></div>
<div class="stat"><div class="n">92%</div><div class="l">SLA compliance</div></div>
<div class="stat"><div class="n">4.2d</div><div class="l">Avg cycle time</div></div>
</div>
<table>
<thead>
<tr><th>Case ID</th><th>Applicant</th><th>Assigned to</th><th>Stage</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td class="case-id">CL-40219</td><td>Jamie Lee</td><td>Alex Kim</td><td>Underwriting</td><td><span class="status-pill st-progress">In Progress</span></td></tr>
<tr><td class="case-id">CL-40218</td><td>Morgan Diaz</td><td>Taylor Reed</td><td>Documentation</td><td><span class="status-pill st-review">Needs Review</span></td></tr>
<tr><td class="case-id">CL-40216</td><td>Sam Patel</td><td>Alex Kim</td><td>Verification</td><td><span class="status-pill st-progress">In Progress</span></td></tr>
<tr><td class="case-id">CL-40211</td><td>Riley Chen</td><td>Jordan Blake</td><td>Approval</td><td><span class="status-pill st-done">Completed</span></td></tr>
<tr><td class="case-id">CL-40205</td><td>Casey Nolan</td><td>Taylor Reed</td><td>Underwriting</td><td><span class="status-pill st-review">Needs Review</span></td></tr>
</tbody>
</table>
</section>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #632ca6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #632ca6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b39bd1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8000ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #632ca6; color: #ffffff;
border: 1px solid #8000ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #632ca6; color: #f5f5f5;
border: 1px solid #7a4cb3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b39bd1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6825b4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:"Helvetica Neue", -apple-system, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:16px; font-weight:600; color:#555; }
.btn-purple { background:#632ca6; color:#fff; border-radius:4px; padding:12px 20px; font-size:15px; font-weight:700; }
.hero { padding:14px 40px 18px; }
.hero h1 { font-size:40px; font-weight:600; line-height:1.05; margin:0 0 10px; max-width:600px; }
.hero p { font-size:16px; font-weight:300; margin:0 0 14px; max-width:440px; }
.row { display:flex; gap:10px; }
.btn-outline { border:1px solid #632ca6; color:#632ca6; border-radius:4px; padding:11px 20px; font-size:15px; font-weight:700; }
.darkband { background:#000; padding:22px 40px; display:flex; gap:14px; }
.card { flex:1; background:#191919; border-radius:8px; padding:16px; }
.card h3 { color:#fff; font-size:16px; margin:0 0 6px; font-weight:600; }
.card p { color:#c7c7c7; font-size:12px; margin:0; }
.dot { width:8px; height:8px; border-radius:50%; background:#632ca6; display:inline-block; margin-right:6px; }
.footer { background:#110617; padding:16px 40px; color:#c7c7c7; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Datadog</p>
<div class="navlinks"><span>Product</span><span>Customers</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-purple">Get started</button>
</nav>
<section class="hero">
<h1>AI-Powered Observability and Security</h1>
<p>Metrics, traces, and logs from your whole stack — correlated in one place.</p>
<div class="row">
<button class="btn-purple">Free trial</button>
<button class="btn-outline">See the platform</button>
</div>
</section>
<div class="darkband">
<div class="card"><h3><span class="dot"></span>APM</h3><p>Trace requests across every service and language.</p></div>
<div class="card"><h3><span class="dot"></span>Log Management</h3><p>Search and analyze logs at petabyte scale.</p></div>
<div class="card"><h3><span class="dot"></span>Cloud Security</h3><p>Detect threats across infrastructure and code.</p></div>
</div>
<div class="footer">© Datadog · Docs · Status · Careers</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3e6ae1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3e6ae1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a3b6ec; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3e6ae1; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3e6ae1; color: #f5f5f5;
border: 1px solid #5b80e4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3b6ec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d82e6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171A20; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; height:640px; width:960px;
background:linear-gradient(180deg,#dfe6ea 0%,#eef1f2 42%,#e2e2e2 58%,#c9c9c9 100%); }
nav { position:absolute; top:0; left:0; right:0; z-index:3; height:56px; display:flex;
align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:16px; font-weight:500; letter-spacing:2px; color:#171A20; }
.navlinks { display:flex; gap:30px; }
.navlinks span { font-size:14px; font-weight:500; color:#171A20; }
.navcta { display:flex; gap:10px; }
.btn { border-radius:4px; font-size:14px; font-weight:500; padding:9px 20px; min-height:40px;
display:flex; align-items:center; border:3px solid transparent; transition:background-color .33s; }
.btn-blue { background:#3E6AE1; color:#ffffff; }
.btn-ghost { background:rgba(255,255,255,0.7); color:#171A20; border-color:rgba(255,255,255,0.7); }
.skyline { position:absolute; left:0; right:0; bottom:210px; height:120px; z-index:1; opacity:.5;
background:linear-gradient(180deg,transparent,#c9c9c9 90%); }
.carwrap { position:absolute; left:50%; bottom:150px; transform:translateX(-50%); z-index:2; width:640px; height:150px; }
.shadow { position:absolute; left:60px; right:60px; bottom:0; height:20px; border-radius:50%;
background:radial-gradient(ellipse at center, rgba(0,0,0,0.28), transparent 72%); }
.body1 { position:absolute; left:40px; right:40px; bottom:24px; height:74px; border-radius:40px 60px 30px 20px;
background:linear-gradient(180deg,#20242b,#171A20 70%); }
.cabin { position:absolute; left:190px; right:170px; bottom:70px; height:50px; border-radius:60px 90px 10px 10px;
background:linear-gradient(160deg,#2a2f38,#171A20); }
.glass { position:absolute; left:210px; right:190px; bottom:78px; height:28px; border-radius:40px 70px 4px 4px;
background:linear-gradient(120deg,#7d93b8,#b9c7dc 55%,#e7edf5); opacity:.9; }
.wheel { position:absolute; bottom:14px; width:56px; height:56px; border-radius:50%; background:#0e1013;
box-shadow:inset 0 0 0 6px #3a3f47; }
.w1 { left:110px; } .w2 { right:110px; }
.promo { position:relative; z-index:3; text-align:center; padding-top:96px; }
.badge { display:inline-block; background:#3E6AE1; color:#fff; font-size:22px; margin-bottom:10px; font-weight:400; }
.modelname { font-size:40px; font-weight:500; margin:2px 0 6px; letter-spacing:normal; color:#171A20; }
.sub { font-size:14px; color:#393C41; margin-bottom:20px; }
.ctas { display:flex; gap:12px; justify-content:center; }
.strip { position:absolute; left:0; right:0; bottom:0; z-index:3; height:88px; background:rgba(255,255,255,0.86);
display:flex; align-items:center; justify-content:center; gap:56px; border-top:1px solid #EEEEEE; }
.veh { text-align:center; }
.veh .name { font-size:17px; font-weight:500; color:#171A20; }
.veh .links { display:flex; gap:14px; justify-content:center; margin-top:4px; }
.veh .links span { font-size:12px; color:#5C5E62; }
</style></head>
<body>
<div class="hero">
<nav>
<div class="brand">Tesla</div>
<div class="navlinks"><span>Vehicles</span><span>Energy</span><span>Charging</span><span>Discover</span><span>Shop</span></div>
<div class="navcta"><button class="btn btn-ghost">Existing Owners</button><button class="btn btn-blue">Order Now</button></div>
</nav>
<div class="skyline"></div>
<div class="carwrap">
<div class="shadow"></div>
<div class="body1"></div>
<div class="cabin"></div>
<div class="glass"></div>
<div class="wheel w1"></div>
<div class="wheel w2"></div>
</div>
<div class="promo">
<div class="badge">0% APR Available</div>
<div class="modelname">Model 3</div>
<div class="sub">Starting at $38,990 after potential savings</div>
<div class="ctas"><button class="btn btn-blue">Order Now</button><button class="btn btn-ghost" style="border:1.5px solid #171A20;background:transparent;">View Inventory</button></div>
</div>
<div class="strip">
<div class="veh"><div class="name">Model S</div><div class="links"><span>Learn</span><span>Order</span></div></div>
<div class="veh"><div class="name">Model X</div><div class="links"><span>Learn</span><span>Order</span></div></div>
<div class="veh"><div class="name">Model Y</div><div class="links"><span>Learn</span><span>Order</span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; padding:24px 18px; position:relative; border-right:1px solid #E4E6E6; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.doctitle { font-size:15px; font-weight:600; }
.ring { width:38px; height:38px; border-radius:50%; background:conic-gradient(#15C39A 0 87%, #E4E6E6 87% 100%);
display:flex; align-items:center; justify-content:center; }
.ring span { width:28px; height:28px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; color:#15C39A; }
.doc { font-size:15px; line-height:1.65; color:#1A1A1A; margin-bottom:100px; }
.u1 { text-decoration:none; border-bottom:2px wavy #E5484D; }
.u2 { background:rgba(59,130,246,0.18); border-bottom:2px solid #3B82F6; }
.suggcard { position:absolute; left:0; right:0; bottom:64px; background:#F7F8F8; border:1px solid #E4E6E6;
border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,0.12); margin:0 18px; }
.catrow { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase;
color:#6B6B70; letter-spacing:0.4px; }
.catdot { width:9px; height:9px; border-radius:50%; background:#E5484D; }
.swapline { font-size:15px; margin:8px 0; }
.swapline .old { color:#E5484D; text-decoration:line-through; }
.swapline .arrow { color:#9A9A9F; margin:0 4px; }
.swapline .new { color:#15C39A; font-weight:600; }
.expl { font-size:12px; color:#6B6B70; line-height:1.5; margin-bottom:10px; }
.acceptbtn { background:#15C39A; color:#06281F; text-align:center; border-radius:999px; padding:9px; font-size:13px; font-weight:700; }
.assistbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:rgba(255,255,255,0.96);
border-top:0.5px solid #E4E6E6; display:flex; align-items:center; padding:0 16px; gap:10px; }
.orb { width:32px; height:32px; border-radius:50%; background:#15C39A; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:13px; font-weight:700; }
.assistmeta .l1 { font-size:13px; font-weight:700; }
.assistmeta .l2 { font-size:10px; color:#6B6B70; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:800; letter-spacing:-0.4px; margin:0; }
.brand span { color:#15C39A; }
.tag { font-size:14px; color:#6B6B70; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:16px; border:1px solid #E4E6E6; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6B6B70; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#6B6B70; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#F7F8F8; border:1px solid #E4E6E6; color:#6B6B70; }
.footer { margin-top:auto; border-top:1px solid #E4E6E6; padding-top:16px; font-size:11px; color:#9A9A9F; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="topbar"><span>‹</span><span class="doctitle">Q3 Product Brief</span><div class="ring"><span>87</span></div></div>
<div class="doc">The <span class="u1">recieve</span> team has finalized the roadmap, and we believe <span class="u2">it is important that we should</span> ship the onboarding redesign before the next release cycle begins.</div>
<div class="suggcard">
<div class="catrow"><span class="catdot"></span>CORRECTNESS</div>
<div class="swapline"><span class="old">recieve</span><span class="arrow">→</span><span class="new">receive</span></div>
<div class="expl">This word is commonly misspelled — "i" before "e" except after "c".</div>
<div class="acceptbtn">Accept</div>
</div>
<div class="assistbar">
<div class="orb">G</div>
<div class="assistmeta"><div class="l1">14 suggestions</div><div class="l2">3 Correctness · 6 Clarity · 5 Engagement</div></div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Grammarly (iOS)<span>.</span></h1>
<p class="tag">A calm writing surface where color-coded underlines mark the text and a single suggestion card floats up at a time.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#15C39A"></div><small>#15C39A</small></div>
<div class="sw"><div class="chip2" style="background:#E5484D"></div><small>#E5484D</small></div>
<div class="sw"><div class="chip2" style="background:#3B82F6"></div><small>#3B82F6</small></div>
<div class="sw"><div class="chip2" style="background:#8B5CF6"></div><small>#8B5CF6</small></div>
<div class="sw"><div class="chip2" style="background:#E0A82E"></div><small>#E0A82E</small></div>
</div>
<div class="typeblock">
<div class="t1">Score: 87</div>
<div class="t2">Inter · 16pt / 1.65 · editor body reads like calm prose, not a dashboard</div>
</div>
<div class="taglist">
<span>Suggestion card</span><span>Document score ring</span><span>Category underlines</span>
<span>Tone detector</span><span>Pill buttons everywhere</span>
</div>
<div class="footer">Single brand green #15C39A · four category colors mark text only, never CTAs</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ef3f24; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ef3f24; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f2a397; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d63b22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ef3f24; color: #000000;
border: 1px solid #d63b22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ef3f24; color: #f5f5f5;
border: 1px solid #f05c45; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f2a397; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #eb3e24; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Arial, sans-serif; }
* { box-sizing:border-box; }
.header { width:960px; height:56px; background:#ef3f24; display:flex; align-items:center;
justify-content:space-between; padding:0 20px; }
.brand { color:#ffffff; font-size:18px; font-weight:700; }
.app-name { color:#ffffff; font-size:14px; font-weight:400; opacity:0.9; margin-left:14px; border-left:1px solid rgba(255,255,255,0.4); padding-left:14px; }
.header-left { display:flex; align-items:center; }
.save-btn { background:#ffffff; color:#ef3f24; font-size:13px; font-weight:700; border-radius:4px;
padding:8px 18px; }
.body { width:960px; height:584px; display:flex; }
.sidebar { width:196px; height:584px; background:#ffffff; border-right:1px solid #dddddd; padding:16px 12px; }
.sidebar-label { font-size:12px; font-weight:700; color:#999999; letter-spacing:0.02em; margin:4px 8px 8px; }
.app-tile { display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:6px; margin-bottom:4px; }
.app-tile.active { background:#fff0ee; }
.tile-icon { width:26px; height:26px; border-radius:6px; flex-shrink:0; }
.tile-icon.red { background:#ef3f24; } .tile-icon.green { background:#3fa862; }
.tile-icon.blue { background:#00afec; } .tile-icon.teal { background:#00afaa; }
.tile-icon.yellow { background:#ffba00; }
.tile-name { font-size:13px; font-weight:400; color:#333333; }
.app-tile.active .tile-name { font-weight:700; color:#ef3f24; }
.canvas { flex:1; height:584px; background:#fafafa; padding:22px 24px; overflow:hidden; }
.canvas-title { font-size:20px; font-weight:700; color:#333333; margin-bottom:4px; }
.canvas-sub { font-size:13px; font-weight:400; color:#666666; margin-bottom:18px; }
.form-card { background:#ffffff; border:1px solid #dddddd; border-radius:6px; padding:20px;
box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.field-group { margin-bottom:16px; }
.field-label { font-size:13px; font-weight:700; color:#333333; margin-bottom:6px; }
.field-input { background:#ffffff; border:1px solid #dddddd; border-radius:4px; height:36px;
display:flex; align-items:center; padding:0 10px; font-size:14px; color:#333333; }
.field-input.focused { border:1px solid #00afec; box-shadow:0 0 0 2px rgba(0,175,236,0.15); }
.field-input.value { color:#333333; }
.field-input.placeholder { color:#999999; }
.two-col { display:flex; gap:14px; }
.two-col .field-group { flex:1; }
.add-field { border:1px dashed #bbbbbb; border-radius:4px; height:38px; display:flex; align-items:center;
justify-content:center; color:#999999; font-size:13px; font-weight:700; margin-top:6px; }
.side-panel { width:220px; height:584px; background:#ffffff; border-left:1px solid #dddddd; padding:18px 16px; }
.side-title { font-size:14px; font-weight:700; color:#333333; margin-bottom:14px; }
.prop-row { margin-bottom:14px; }
.prop-label { font-size:12px; font-weight:700; color:#666666; margin-bottom:6px; }
.prop-value { background:#ffffff; border:1px solid #dddddd; border-radius:4px; height:32px;
display:flex; align-items:center; padding:0 10px; font-size:13px; color:#333333; }
.chip-row { display:flex; gap:6px; }
.chip { padding:2px 10px; border-radius:12px; font-size:12px; font-weight:700; }
.chip.success { background:#e7f5ed; color:#3fa862; }
.chip.info { background:#e6f7fd; color:#00afec; }
.chip.neutral { background:#f5f5f5; color:#555555; border:1px solid #dddddd; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.toggle { width:36px; height:20px; border-radius:9999px; background:#3fa862; position:relative; }
.toggle::after { content:""; position:absolute; right:2px; top:2px; width:16px; height:16px; border-radius:50%;
background:#ffffff; }
</style></head>
<body>
<div class="header">
<div class="header-left">
<div class="brand">kintone</div>
<div class="app-name">Sales Pipeline App</div>
</div>
<div class="save-btn">Save</div>
</div>
<div class="body">
<div class="sidebar">
<div class="sidebar-label">MY APPS</div>
<div class="app-tile active"><div class="tile-icon red"></div><div class="tile-name">Sales Pipeline</div></div>
<div class="app-tile"><div class="tile-icon green"></div><div class="tile-name">Expense Reports</div></div>
<div class="app-tile"><div class="tile-icon blue"></div><div class="tile-name">Customer List</div></div>
<div class="app-tile"><div class="tile-icon teal"></div><div class="tile-name">Facility Booking</div></div>
<div class="app-tile"><div class="tile-icon yellow"></div><div class="tile-name">Onboarding Tasks</div></div>
</div>
<div class="canvas">
<div class="canvas-title">Record Editor — New Deal</div>
<div class="canvas-sub">Drag fields from the left to build this app. Everyone can create.</div>
<div class="form-card">
<div class="two-col">
<div class="field-group">
<div class="field-label">Client Name</div>
<div class="field-input value">Riverstone Traders</div>
</div>
<div class="field-group">
<div class="field-label">Deal Owner</div>
<div class="field-input focused">Jamie Wells</div>
</div>
</div>
<div class="field-group">
<div class="field-label">Deal Stage</div>
<div class="field-input placeholder">Select a stage…</div>
</div>
<div class="two-col">
<div class="field-group">
<div class="field-label">Expected Amount</div>
<div class="field-input value">¥1,240,000</div>
</div>
<div class="field-group">
<div class="field-label">Close Date</div>
<div class="field-input value">2026 / 10 / 02</div>
</div>
</div>
<div class="add-field">+ Add Field</div>
</div>
</div>
<div class="side-panel">
<div class="side-title">Field Settings</div>
<div class="prop-row">
<div class="prop-label">Field Type</div>
<div class="prop-value">Drop-down</div>
</div>
<div class="prop-row">
<div class="prop-label">Required</div>
<div class="prop-value">Yes</div>
</div>
<div class="prop-row">
<div class="prop-label">Status</div>
<div class="chip-row">
<div class="chip success">Active</div>
<div class="chip info">Shared</div>
</div>
</div>
<div class="toggle-row">
<div class="prop-label" style="margin-bottom:0;">Show in list view</div>
<div class="toggle"></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0a14; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0a14; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8b90; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #702082; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0a14; color: #ffffff;
border: 1px solid #702082; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0a14; color: #f5f5f5;
border: 1px solid #333038; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8b90; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e0e26; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0A14; color:#F4EFF7; box-sizing:border-box;
font-family:"Sora", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.wrap { padding:26px 40px 0; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:1pt; color:#FFC700; text-transform:uppercase; }
.btitle { font-size:26px; font-weight:800; margin-top:6px; }
.steps { display:flex; gap:8px; margin-top:16px; }
.step { height:30px; border-radius:999px; display:flex; align-items:center; gap:8px; padding:0 12px; font-size:12px; font-weight:700; }
.badge { width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; }
.step.done { border:1px solid #36C275; color:#F4EFF7; }
.step.done .badge { background:#36C275; color:#06210F; }
.step.active { background:linear-gradient(120deg,#702082,#C72BC8); color:#fff; }
.step.active .badge { background:rgba(255,255,255,.25); }
.step.def { background:#1A1322; border:1px solid #34273F; color:#A99BB6; }
.step.def .badge { background:#34273F; }
.hero { margin-top:16px; height:150px; border-radius:20px; position:relative; overflow:hidden;
background:linear-gradient(150deg,#702082,#4A1559,#2B0C36); padding:18px; }
.glow1 { position:absolute; top:-40px; right:-40px; width:180px; height:180px; border-radius:50%; background:rgba(199,43,200,.35); }
.glow2 { position:absolute; bottom:-50px; left:-30px; width:160px; height:160px; border-radius:50%; background:rgba(255,199,0,.22); }
.hero-bottom { position:absolute; bottom:14px; left:18px; right:18px; display:flex; justify-content:space-between; align-items:flex-end; }
.box-name { font-size:13px; font-weight:800; color:#fff; }
.box-count { font-size:11px; color:#FFC700; margin-top:2px; }
.box-price { font-size:20px; font-weight:800; color:#FFC700; }
.opt-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #34273F; }
.food-thumb { width:46px; height:46px; border-radius:10px; }
.opt-name { font-size:15px; font-weight:600; }
.opt-desc { font-size:12px; color:#A99BB6; }
.upcharge { margin-left:auto; font-size:13px; font-weight:700; color:#A99BB6; margin-right:12px; }
.radio { width:24px; height:24px; border-radius:50%; border:2px solid #34273F; display:flex; align-items:center; justify-content:center; }
.radio.on { border-color:#C72BC8; }
.radio.on::after { content:''; width:16px; height:16px; border-radius:50%; background:#C72BC8; }
.cta-bar { margin-top:18px; display:flex; align-items:center; background:rgba(14,10,20,.96); border-top:1px solid #34273F; padding-top:14px; }
.total-lbl { font-size:11px; color:#A99BB6; }
.total-val { font-size:19px; font-weight:800; }
.add-btn { margin-left:auto; background:linear-gradient(120deg,#702082,#C72BC8); color:#fff; font-size:15px; font-weight:800;
padding:14px 28px; border-radius:14px; }
</style></head>
<body>
<div class="wrap">
<div class="box-count">Taco Bell (iOS)</div>
<div class="eyebrow">Build your box</div>
<div class="btitle">Cravings Box</div>
<div class="steps">
<div class="step done"><div class="badge">✓</div>Main</div>
<div class="step active"><div class="badge">2</div>Side</div>
<div class="step def"><div class="badge">3</div>Drink</div>
<div class="step def"><div class="badge">4</div>Sweet</div>
</div>
<div class="hero">
<div class="glow1"></div><div class="glow2"></div>
<div class="hero-bottom">
<div><div class="box-name">Cravings Box</div><div class="box-count">3 of 4 items</div></div>
<div class="box-price">$5.99</div>
</div>
</div>
<div class="opt-row"><img class="food-thumb" style="background:linear-gradient(135deg,#e0a13a,#c9762a);"/><div><div class="opt-name">Nacho Fries</div><div class="opt-desc">Seasoned fries, warm nacho cheese</div></div><div class="upcharge">+$1.00</div><div class="radio on"></div></div>
<div class="opt-row"><img class="food-thumb" style="background:linear-gradient(135deg,#a3c95c,#6f9930);"/><div><div class="opt-name">Cheesy Roll-Up</div><div class="opt-desc">Melted three-cheese blend</div></div><div class="upcharge"></div><div class="radio"></div></div>
<div class="cta-bar"><div><div class="total-lbl">Box total</div><div class="total-val">$5.99</div></div><div class="add-btn">Add to Order</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 31.2px; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 12px; letter-spacing: 0.6px; margin: 0; color: #898989; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 25.6px; letter-spacing: -0.16px; background: #080808; color: #ffffff;
border: none; border-radius: 4px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 25.6px; letter-spacing: -0.16px; background: #ffffff; color: #080808;
border: 1px solid #d8d8d8; border-radius: 4px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 25.6px; letter-spacing: -0.16px; background: #ffffff; color: #080808;
border: 1px solid #d8d8d8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #898989; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 550; line-height: 15.36px; background: #146ef5; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#080808; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #d8d8d8; }
.brand { font-size:16px; font-weight:600; letter-spacing:-.3px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#5a5a5a; font-weight:500; }
.navcta { background:#080808; color:#ffffff; border-radius:6px; padding:9px 18px; font-size:13px; font-weight:600; }
.hero { text-align:center; padding:44px 32px 20px; }
.hero h1 { font-size:42px; font-weight:600; letter-spacing:-1.4px; line-height:1.08; margin:0 auto 14px; max-width:600px; }
.hero p { font-size:14px; color:#363636; margin:0 auto 22px; max-width:420px; }
.btnrow { display:flex; gap:10px; justify-content:center; }
.btn { border-radius:6px; padding:9px 18px; font-size:13px; font-weight:600; }
.btn-blk { background:#080808; color:#ffffff; }
.btn-out { background:#ffffff; color:#080808; border:1px solid #d8d8d8; }
.catstrip { display:flex; gap:10px; padding:8px 32px 22px; justify-content:center; }
.catchip { border-radius:999px; padding:6px 16px; font-size:12px; font-weight:600; color:#ffffff; }
.c-purple { background:#7a3dff; } .c-pink { background:#ed52cb; } .c-blue { background:#3b89ff; }
.c-orange { background:#ff6b00; } .c-green { background:#00d722; color:#080808; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 32px 28px; }
.card { border:1px solid #d8d8d8; border-radius:10px; padding:18px; position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }
.c1::before { background:#7a3dff; } .c2::before { background:#3b89ff; } .c3::before { background:#ff6b00; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 6px; letter-spacing:-.2px; }
.card p { font-size:12px; color:#5a5a5a; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<div class="brand">Webflow</div>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Resources</span><span>Enterprise</span><span>Pricing</span></div>
<div class="navcta">Get started — it's free</div>
</nav>
<div class="hero">
<h1>Build fully custom, production-grade websites — visually</h1>
<p>The visual-first platform for building exceptional websites, with the power of code.</p>
<div class="btnrow"><button class="btn btn-blk">Start building</button><button class="btn btn-out">Get a demo</button></div>
</div>
<div class="catstrip">
<span class="catchip c-purple">Designer</span>
<span class="catchip c-pink">CMS</span>
<span class="catchip c-blue">Ecommerce</span>
<span class="catchip c-orange">Interactions</span>
<span class="catchip c-green">Hosting</span>
</div>
<div class="cards">
<div class="card c1"><h3>Design freely</h3><p>A visual canvas with the power of hand-written HTML, CSS, and JavaScript.</p></div>
<div class="card c2"><h3>Manage content</h3><p>A CMS built for editors and developers to work side by side.</p></div>
<div class="card c3"><h3>Ship it fast</h3><p>Enterprise-grade hosting on a global edge network, out of the box.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5f0080; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5f0080; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b287c0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5f0080; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5f0080; color: #f5f5f5;
border: 1px solid #772793; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b287c0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #792994; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden; display:flex; flex-direction:column; }
header.ku-top { height:54px; flex:0 0 54px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #dfe4eb; }
.ku-brand { font-size:18px; font-weight:700; color:#5f0080; margin:0; }
.ku-delivery { font-size:13px; color:#464c52; background:#f7f7f7; border-radius:4px; padding:6px 10px; }
.ku-tabs { display:flex; gap:26px; padding:0 28px; border-bottom:1px solid #dfe4eb; }
.ku-tab { padding:13px 0; font-size:18px; color:#b5b5b5; font-weight:400; }
.ku-tab.on { color:#5f0080; font-weight:500; border-bottom:2px solid #5f0080; }
main.ku-body { flex:1; display:flex; overflow:hidden; }
.ku-media { flex:0 0 350px; padding:24px; display:flex; align-items:center; justify-content:center; }
.ku-plate { width:280px; height:280px; border-radius:4px; position:relative; overflow:hidden;
background:linear-gradient(150deg,#fdf3f7 0%, #ffffff 55%); border:1px solid #dfe4eb; }
.ku-berry { position:absolute; border-radius:50%; }
.ku-berry.b1 { width:120px; height:120px; background:radial-gradient(circle at 35% 30%, #ff6f91, #c81d4f 70%); top:52px; left:40px; }
.ku-berry.b2 { width:80px; height:80px; background:radial-gradient(circle at 35% 30%, #ff8aa8, #b81646 70%); top:150px; left:150px; }
.ku-berry.b3 { width:60px; height:60px; background:radial-gradient(circle at 35% 30%, #ffa5bc, #c81d4f 70%); top:60px; left:170px; }
.ku-leaf { position:absolute; width:34px; height:56px; background:#3f8f4e; border-radius:0 60% 0 60%; }
.ku-leaf.l1 { top:30px; left:80px; transform:rotate(-20deg); }
.ku-leaf.l2 { top:132px; left:184px; transform:rotate(30deg); }
.ku-panel { flex:1; padding:22px 28px; display:flex; flex-direction:column; overflow:hidden; }
.ku-name { font-size:20px; font-weight:500; color:#333333; margin:0 0 4px; }
.ku-sub { font-size:14px; color:#999999; margin:0 0 12px; }
.ku-price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.ku-price { font-size:24px; font-weight:700; color:#333333; }
.ku-orig { font-size:14px; color:#999999; text-decoration:line-through; }
.ku-badges { display:flex; gap:8px; margin-bottom:16px; }
.ku-badge { font-size:13px; color:#5f0080; background:#f7f7f7; padding:4px 8px; border-radius:2px; }
.ku-qty-row { display:flex; align-items:center; justify-content:space-between; border:1px solid #dfe4eb;
border-radius:4px; padding:10px 14px; margin-bottom:16px; }
.ku-qty-lbl { font-size:14px; color:#333333; }
.ku-qty-ctl { display:flex; align-items:center; gap:14px; }
.ku-qty-ctl button { width:24px; height:24px; border:1px solid #dfe4eb; background:#ffffff; border-radius:4px; font-size:13px; color:#333333; }
.ku-qty-ctl span { font-size:14px; font-weight:500; }
.ku-cart { border-top:1px solid #dfe4eb; padding-top:14px; margin-top:auto; }
.ku-cart h4 { font-size:14px; font-weight:500; margin:0 0 8px; color:#333333; }
.ku-line { display:flex; justify-content:space-between; font-size:13px; color:#464c52; padding:4px 0; }
.ku-total { display:flex; justify-content:space-between; font-size:15px; font-weight:700; color:#333333;
padding-top:8px; margin-top:4px; border-top:1px solid #dfe4eb; }
footer.ku-foot { flex:0 0 66px; border-top:1px solid #dfe4eb; padding:0 28px; display:flex; align-items:center;
gap:12px; }
.ku-btn-cart { flex:1; height:44px; border:1px solid #dfe4eb; border-radius:4px; background:#ffffff;
color:#333333; font-size:14px; font-weight:400; }
.ku-btn-buy { flex:1; height:44px; border:none; border-radius:4px; background:#5f0080; color:#ffffff;
font-size:14px; font-weight:500; }
</style></head>
<body>
<div class="stage">
<header class="ku-top">
<p class="ku-brand">Kurly</p>
<div class="ku-delivery">Order by 11pm for Dawn Delivery</div>
</header>
<div class="ku-tabs">
<div class="ku-tab">Fresh Produce</div>
<div class="ku-tab on">Dairy & Eggs</div>
<div class="ku-tab">Meat & Fish</div>
<div class="ku-tab">Bakery</div>
</div>
<main class="ku-body">
<div class="ku-media">
<div class="ku-plate">
<div class="ku-leaf l1"></div>
<div class="ku-leaf l2"></div>
<div class="ku-berry b1"></div>
<div class="ku-berry b2"></div>
<div class="ku-berry b3"></div>
</div>
</div>
<div class="ku-panel">
<div class="ku-name">Chilled Strawberries, 500g</div>
<div class="ku-sub">Sourced from Jamie's Farm · Cold-chain delivered</div>
<div class="ku-price-row">
<span class="ku-price">$8.90</span>
<span class="ku-orig">$11.20</span>
</div>
<div class="ku-badges">
<span class="ku-badge">Dawn Delivery</span>
<span class="ku-badge">Cold Chain</span>
</div>
<div class="ku-qty-row">
<span class="ku-qty-lbl">Quantity</span>
<div class="ku-qty-ctl"><button>−</button><span>2</span><button>+</button></div>
</div>
<div class="ku-cart">
<h4>Cart summary</h4>
<div class="ku-line"><span>Chilled Strawberries x2</span><span>$17.80</span></div>
<div class="ku-line"><span>Organic Whole Milk x1</span><span>$5.40</span></div>
<div class="ku-total"><span>Total</span><span>$23.20</span></div>
</div>
</div>
</main>
<footer class="ku-foot">
<button class="ku-btn-cart">Add to Cart</button>
<button class="ku-btn-buy">Checkout Now</button>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2d91ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2d91ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9bc8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0257d7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d91ff; color: #000000;
border: 1px solid #0257d7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2d91ff; color: #f5f5f5;
border: 1px solid #4da1fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9bc8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2688f9; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e2137; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",Arial,sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; }
.nav { flex:0 0 66px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eeeeee; }
.nav .brand { font-size:18px; font-weight:700; color:#1e2137; }
.nav .links { display:flex; gap:22px; }
.nav .links a { font-size:18px; font-weight:700; color:#1e2137; text-decoration:none; }
.nav .links a.act { color:#2d91ff; }
.nav .ghost { height:44px; padding:0 22px; border:1px solid #1e2137; border-radius:6px; font-size:15px;
font-weight:700; display:flex; align-items:center; color:#1e2137; }
.headline { flex:0 0 108px; display:flex; align-items:center; gap:16px; padding:22px 32px 0; }
.headline h1 { font-size:40px; font-weight:700; color:#192d82; margin:0; line-height:1.2; }
.chip { background:#e2f3ff; color:#192d82; border-radius:20px; padding:6px 14px; font-size:14px; font-weight:600; }
.bignum { flex:0 0 74px; padding:0 32px; font-size:34px; font-weight:700; color:#0c1120; }
.cards { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 32px 0; overflow:hidden; }
.card { background:#f9fbfc; border:1px solid #f9fbfc; border-radius:20px; padding:18px 20px; display:flex;
flex-direction:column; gap:10px; }
.card .t { font-size:15px; font-weight:600; color:#44546f; }
.card .v { font-size:22px; font-weight:700; color:#192d82; }
.bars { display:flex; align-items:flex-end; gap:5px; height:56px; }
.bars i { flex:1; background:#2d91ff; border-radius:3px 3px 0 0; display:block; }
.bars i.track { background:#e2f3ff; }
.bottomrow { flex:0 0 88px; display:flex; align-items:center; gap:16px; padding:16px 32px 24px; }
.softbtn { height:48px; padding:0 16px; background:#f4f7f9; color:#2d91ff; border-radius:16px; font-size:19px;
font-weight:700; border:none; display:flex; align-items:center; }
.tintcard { flex:1; height:56px; background:#e2f3ff; color:#192d82; border-radius:20px; display:flex;
align-items:center; padding:0 20px; font-size:16px; font-weight:600; justify-content:space-between; }
</style></head>
<body>
<div class="app">
<div class="nav">
<div class="brand">Korea Credit Data</div>
<div class="links">
<a class="act">Dashboard</a>
<a>Payments</a>
<a>Supplies</a>
<a>Consulting</a>
</div>
<div class="ghost">View report</div>
</div>
<div class="headline">
<h1>Today's sales</h1>
<div class="chip">As of May 2026</div>
</div>
<div class="bignum">₩ 4,820,000</div>
<div class="cards">
<div class="card">
<div class="t">Card sales</div>
<div class="v">₩ 3,110,000</div>
<div class="bars">
<i class="track" style="height:30%"></i><i style="height:55%"></i><i style="height:40%"></i>
<i style="height:70%"></i><i class="track" style="height:35%"></i><i style="height:60%"></i>
</div>
</div>
<div class="card">
<div class="t">Cash sales</div>
<div class="v">₩ 980,000</div>
<div class="bars">
<i style="height:20%"></i><i class="track" style="height:25%"></i><i style="height:45%"></i>
<i style="height:30%"></i><i style="height:50%"></i><i class="track" style="height:22%"></i>
</div>
</div>
<div class="card">
<div class="t">Settlements</div>
<div class="v">₩ 730,000</div>
<div class="bars">
<i class="track" style="height:40%"></i><i style="height:65%"></i><i style="height:50%"></i>
<i class="track" style="height:38%"></i><i style="height:58%"></i><i style="height:44%"></i>
</div>
</div>
</div>
<div class="bottomrow">
<button class="softbtn">Open Korea Credit Data</button>
<div class="tintcard"><span>Connected accounts</span><span>3 stores</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1db954; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #1db954;
border: 1px solid #1db954; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #142d1d; color: #1db954;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px;
background:
radial-gradient(120% 90% at 18% -10%, rgba(157,78,180,0.55), rgba(18,18,18,0) 55%),
linear-gradient(180deg, #3a2350 0%, #1c1226 32%, #121212 62%); }
.topbar { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; }
.topbar .chev { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.08);
display:flex; align-items:center; justify-content:center; font-size:14px; }
.topbar .src { font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#b3b3b3; }
.topbar .more { font-size:18px; color:#fff; letter-spacing:2px; }
.layout { position:relative; z-index:2; display:flex; height:calc(640px - 56px); }
.player { width:600px; display:flex; flex-direction:column; align-items:center; padding:6px 40px 28px; }
.art { width:230px; height:230px; border-radius:6px; margin-top:6px;
background:
radial-gradient(circle at 30% 25%, #ff9a3c 0%, #ff5f6d 30%, #7b2ff7 62%, #2b1055 100%);
box-shadow: 0 22px 46px rgba(0,0,0,0.55);
position:relative; overflow:hidden; }
.art::after { content:''; position:absolute; inset:0;
background: repeating-linear-gradient(115deg, rgba(0,0,0,0.08) 0 8px, rgba(255,255,255,0.03) 8px 16px); }
.meta { width:100%; margin-top:22px; display:flex; align-items:flex-start; justify-content:space-between; }
.meta .txt h1 { font-size:22px; font-weight:700; margin:0 0 4px; letter-spacing:-0.3px; }
.meta .txt p { font-size:14px; color:#b3b3b3; margin:0; }
.meta .heart { width:24px; height:24px; color:#1DB954; font-size:20px; line-height:1; }
.scrub { width:100%; margin-top:18px; }
.track { position:relative; height:3px; background:#4d4d4d; border-radius:2px; }
.track .fill { position:absolute; left:0; top:0; height:3px; width:38%; background:#fff; border-radius:2px; }
.track .thumb { position:absolute; left:38%; top:50%; width:11px; height:11px; margin-left:-5.5px; margin-top:-5.5px;
background:#fff; border-radius:50%; }
.times { display:flex; justify-content:space-between; margin-top:7px; font-size:11px; color:#b3b3b3;
font-variant-numeric:tabular-nums; }
.controls { width:100%; margin-top:20px; display:flex; align-items:center; justify-content:center; gap:34px; }
.controls .side { font-size:15px; color:#b3b3b3; }
.controls .skip { font-size:24px; color:#fff; }
.playbtn { width:64px; height:64px; border-radius:50%; background:#1DB954;
display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.4); }
.playbtn .bars { display:flex; gap:4px; }
.playbtn .bars span { width:5px; height:20px; background:#000; border-radius:1px; }
.devices { width:100%; margin-top:20px; display:flex; align-items:center; justify-content:space-between; }
.devices .pill { display:flex; align-items:center; gap:8px; font-size:12px; color:#b3b3b3; }
.devices .pill .dot { width:8px; height:8px; border-radius:50%; background:#1DB954; }
.devices .share { font-size:13px; color:#b3b3b3; }
.queue { width:360px; border-left:1px solid rgba(255,255,255,0.08); padding:22px 24px; overflow:hidden; }
.queue h2 { font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#b3b3b3; margin:0 0 14px; }
.qrow { display:flex; align-items:center; gap:12px; padding:8px 0; }
.qrow .thumb { width:44px; height:44px; border-radius:6px; flex:none; }
.qrow .t1 { background:linear-gradient(135deg,#ffce54,#ed5565); }
.qrow .t2 { background:linear-gradient(135deg,#48cfad,#37bc9b); }
.qrow .t3 { background:linear-gradient(135deg,#5d9cec,#4a89dc); }
.qrow .t4 { background:linear-gradient(135deg,#ac92ec,#967adc); }
.qrow .t5 { background:linear-gradient(135deg,#fc6e51,#e9573f); }
.qrow .info h4 { font-size:14px; font-weight:600; margin:0 0 2px; color:#fff; }
.qrow .info p { font-size:12px; color:#b3b3b3; margin:0; }
.qrow.now .info h4 { color:#1DB954; }
.eq { display:flex; align-items:flex-end; gap:2px; width:12px; height:12px; }
.eq span { width:3px; background:#1DB954; }
.eq span:nth-child(1){ height:6px; } .eq span:nth-child(2){ height:12px; } .eq span:nth-child(3){ height:8px; }
.brandtag { position:absolute; left:28px; bottom:18px; font-size:11px; color:#6a6a6a; z-index:2; }
</style></head>
<body>
<div class="stage">
<div class="topbar">
<div class="chev">⌄</div>
<div class="src">Playing from queue</div>
<div class="more">⋯</div>
</div>
<div class="layout">
<div class="player">
<div class="art"></div>
<div class="meta">
<div class="txt">
<h1>Midnight Static</h1>
<p>Camila Voss</p>
</div>
<div class="heart">♥</div>
</div>
<div class="scrub">
<div class="track"><div class="fill"></div><div class="thumb"></div></div>
<div class="times"><span>1:24</span><span>-2:03</span></div>
</div>
<div class="controls">
<div class="side">⤮</div>
<div class="skip">⏮</div>
<div class="playbtn"><div class="bars"><span></span><span></span></div></div>
<div class="skip">⏭</div>
<div class="side">⟲</div>
</div>
<div class="devices">
<div class="pill"><span class="dot"></span>Spotify (iOS) Connect · Living Room speaker</div>
<div class="share">Share</div>
</div>
</div>
<div class="queue">
<h2>Next up</h2>
<div class="qrow now">
<div class="thumb t1"></div>
<div class="info"><h4>Midnight Static</h4><p>Camila Voss</p></div>
<div class="eq"><span></span><span></span><span></span></div>
</div>
<div class="qrow">
<div class="thumb t2"></div>
<div class="info"><h4>Slow Tide</h4><p>Reef & Wren</p></div>
</div>
<div class="qrow">
<div class="thumb t3"></div>
<div class="info"><h4>Glass Corridor</h4><p>Jordan Ames</p></div>
</div>
<div class="qrow">
<div class="thumb t4"></div>
<div class="info"><h4>Paper Weather</h4><p>Minji Park</p></div>
</div>
<div class="qrow">
<div class="thumb t5"></div>
<div class="info"><h4>Low Beam</h4><p>Reef & Wren</p></div>
</div>
</div>
</div>
<div class="brandtag">Spotify (iOS)</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:64px; background:#000000; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { color:#ffffff; font-size:20px; font-weight:700; }
.capsule-dark { background:#000000; color:#ffffff; border:1px solid rgba(255,255,255,0.3); border-radius:999px;
padding:10px 12px; font-size:14px; font-weight:500; }
.capsule-light { background:#ffffff; color:#000000; border-radius:999px; padding:10px 12px; font-size:14px; font-weight:500; }
.navright { display:flex; gap:10px; }
.hero { padding:44px 40px 20px; }
h1 { font-size:52px; font-weight:700; line-height:1.23; margin:0 0 20px; max-width:600px; }
.softrow { display:flex; gap:12px; }
.soft { background:#efefef; color:#000000; border-radius:999px; padding:14px 16px; font-size:16px; font-weight:500; }
.menu { margin:24px 40px 0; background:#ffffff; border-radius:8px; box-shadow:rgba(0,0,0,0.16) 0px 4px 16px 0px;
padding:8px 0; width:220px; }
.menu .item { padding:12px 20px; font-size:14px; color:#000000; }
.menu .item:hover { background:#efefef; }
.footerrow { position:absolute; bottom:26px; left:40px; right:40px; display:flex; gap:16px; }
.tag { font-size:13px; color:#757575; }
</style></head>
<body>
<nav>
<span class="brand">Uber</span>
<div class="navright">
<span class="capsule-light">Ride</span>
<span class="capsule-dark">Drive</span>
</div>
</nav>
<section class="hero">
<h1>Go anywhere<br>with Uber</h1>
<div class="softrow">
<span class="soft">Pickup location</span>
<span class="soft">Now</span>
</div>
</section>
<div class="menu">
<div class="item">Ride</div>
<div class="item">Reserve</div>
<div class="item">Uber for Business</div>
<div class="item">Help</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ca4f0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ca4f0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e2aa8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ca4f0f; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ca4f0f; color: #f5f5f5;
border: 1px solid #d16a34; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e2aa8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #b85333; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Noto Sans TC", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #eeeeee; }
.brand { font-size:16px; font-weight:700; color:#333333; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#333333; }
.navlinks span.on { color:#ca4f0f; border-bottom:2px solid #ca4f0f; padding-bottom:14px; }
.booking { margin:16px 40px 0; background:#f7f7f7; border-radius:4px; padding:18px; }
.booking h1 { font-size:19px; font-weight:700; margin:0 0 12px; }
.fields { display:flex; gap:10px; align-items:center; }
.field { background:#fff; border:1px solid #cccccc; height:35px; padding:6px 20px 6px 12px; font-size:13px;
color:#333; display:flex; align-items:center; }
.go { background:#ca4f0f; color:#fff; border-radius:3px; height:53px; padding:0 20px; font-size:16px;
display:flex; align-items:center; }
.tabs { display:flex; gap:0; margin:16px 40px 0; border-bottom:1px solid #eeeeee; }
.tab { padding:12px 0; margin-right:24px; font-size:15px; color:#666666; }
.tab.on { background:#ca4f0f; color:#fff; padding:12px 20px; margin-right:0; }
.news { display:flex; gap:20px; padding:14px 40px 0; }
.col { flex:1; }
.row { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid #eeeeee; color:#666666; }
.row .date { color:#999; font-size:11px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #eeeeee; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#666666; }
</style></head>
<body>
<nav>
<div class="brand">Taiwan High Speed Rail</div>
<div class="navlinks"><span class="on">Book a Ticket</span><span>Timetable</span><span>Fares</span><span>Travel Info</span></div>
<span style="font-size:13px;">Member Log In</span>
</nav>
<div class="booking">
<h1>Book your journey</h1>
<div class="fields">
<div class="field">Taipei</div><div class="field">Zuoying</div><div class="field">Today, 09:30</div>
<div class="go">Search</div>
</div>
</div>
<div class="tabs">
<div class="tab on">Book a Ticket</div>
<div class="tab">Group Booking</div>
<div class="tab">Season Pass</div>
</div>
<div class="news">
<div class="col">
<div class="row"><span>Holiday schedule announcement for the upcoming season</span><span class="date">2026.09.01</span></div>
<div class="row"><span>New early-bird fare discounts now available</span><span class="date">2026.08.20</span></div>
</div>
<div class="col">
<div class="row"><span>Station facility maintenance notice</span><span class="date">2026.08.15</span></div>
<div class="row"><span>Sustainability report for the past year published</span><span class="date">2026.08.02</span></div>
</div>
</div>
<footer><span>© Taiwan High Speed Rail</span><span>Taiwan High Speed Rail · Travel Info · Corporate</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d93025; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #d93025;
border: 1px solid #d93025; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9dedc; color: #d93025;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#202124; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; padding:24px 0 0; position:relative; border-right:1px solid #DADCE0; }
.searchbar { margin:0 16px 14px; height:40px; background:#F6F8FC; border-radius:20px; display:flex; align-items:center;
padding:0 14px; gap:10px; font-size:13px; color:#5F6368; }
.row { display:flex; align-items:center; gap:12px; padding:10px 16px; }
.av { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:500; font-size:14px; }
.a1 { background:#EA4335; } .a2 { background:#4285F4; } .a3 { background:#34A853; } .a4 { background:#FBBC04; color:#202124; }
.rowtext { flex:1; min-width:0; }
.name { font-size:14px; font-weight:500; }
.snippet { font-size:13px; color:#5F6368; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row.unread .name, .row.unread .subj { font-weight:700; }
.rowend { text-align:right; font-size:11px; color:#5F6368; }
.divider { height:1px; background:#F1F3F4; margin:0 16px; }
.fab { position:absolute; bottom:80px; right:20px; width:56px; height:56px; border-radius:16px; background:#D93025;
color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
box-shadow:rgba(0,0,0,0.2) 0 4px 12px; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:#fff; border-top:0.5px solid #DADCE0;
display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:11px; color:#5F6368; text-align:center; }
.tab.on { color:#1A73E8; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:400; letter-spacing:0; margin:0; }
.brand span { color:#D93025; font-weight:700; }
.tag { font-size:14px; color:#5F6368; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:16px; border:1px solid #DADCE0; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#5F6368; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:400; }
.typeblock .t2 { font-size:13px; color:#5F6368; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:500; padding:6px 12px; border-radius:999px;
background:#F6F8FC; border:1px solid #DADCE0; color:#5F6368; }
.footer { margin-top:auto; border-top:1px solid #DADCE0; padding-top:16px; font-size:11px; color:#9AA0A6; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="searchbar">🔍 Search in mail</div>
<div class="row unread"><div class="av a1">S</div><div class="rowtext"><div class="name">Sarah Chen</div><div class="snippet subj">Q3 Roadmap — Subject line here</div></div><div class="rowend">9:14 AM ●</div></div>
<div class="divider"></div>
<div class="row"><div class="av a2">M</div><div class="rowtext"><div class="name">Marcus Lee</div><div class="snippet">Re: Contract draft — looks good to me</div></div><div class="rowend">Yesterday</div></div>
<div class="divider"></div>
<div class="row unread"><div class="av a3">R</div><div class="rowtext"><div class="name">Recruiting Team</div><div class="snippet subj">Your interview is confirmed</div></div><div class="rowend">Mon</div></div>
<div class="divider"></div>
<div class="row"><div class="av a4">T</div><div class="rowtext"><div class="name">Team Standup</div><div class="snippet">Notes from today's sync</div></div><div class="rowend">Sun</div></div>
<div class="fab">✎</div>
<div class="tabbar"><div class="tab on">Mail</div><div class="tab">Chat</div><div class="tab">Spaces</div><div class="tab">Meet</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Gmail (iOS)<span>.</span></h1>
<p class="tag">A pure-white unbranded inbox — content carries the color, and Gmail Red is spent on exactly one thing: the Compose FAB.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#D93025"></div><small>#D93025</small></div>
<div class="sw"><div class="chip2" style="background:#4285F4"></div><small>#4285F4</small></div>
<div class="sw"><div class="chip2" style="background:#34A853"></div><small>#34A853</small></div>
<div class="sw"><div class="chip2" style="background:#FBBC04"></div><small>#FBBC04</small></div>
<div class="sw"><div class="chip2" style="background:#1A73E8"></div><small>#1A73E8</small></div>
</div>
<div class="typeblock">
<div class="t1">Sarah Chen · Q3 Roadmap</div>
<div class="t2">Google Sans + Roboto · unread = bold weight, not color</div>
</div>
<div class="taglist">
<span>16pt squircle FAB</span><span>Swipe archive/delete</span><span>Smart Reply chips</span>
<span>Material dual shadow</span><span>Colored avatar initials</span>
</div>
<div class="footer">Pure white canvas · Gmail Red reserved for Compose + destructive only</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff9933; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff9933; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4e20; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f8f6f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff9933; color: #000000;
border: 1px solid #f8f6f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff9933; color: #111111;
border: 1px solid #d9832e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4e20; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fea852; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F8F6F2; color:#0F0F0F; box-sizing:border-box;
font-family:"Noto Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#ffffff; }
.brand { font-size:18px; font-weight:700; color:#FF9933; margin:0; }
.search { flex:1; max-width:360px; margin:0 24px; background:#F8F6F2; border-radius:8px; padding:9px 14px;
font-size:14px; color:#4A4A4A; }
.btn-primary { background:#FF9933; color:#fff; border-radius:8px; padding:8px 20px; font-size:14px; font-weight:600; }
.cats { display:flex; gap:14px; padding:16px 36px; }
.cat { flex:1; background:#fff; border-radius:8px; padding:14px; text-align:center; }
.cat .icon { width:34px; height:34px; border-radius:8px; margin:0 auto 8px; background:linear-gradient(135deg,#FF9933,#E9B83F); }
.cat span { font-size:13px; color:#0F0F0F; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:6px 36px 30px; }
.card { background:#fff; border-radius:8px; overflow:hidden; }
.card .photo { height:110px; background:linear-gradient(135deg,#f3c98a,#e77f4b); }
.card .body { padding:10px 12px; }
.card h3 { font-size:14px; font-weight:600; margin:0 0 4px; }
.card .meta { font-size:11px; color:#4A4A4A; display:flex; justify-content:space-between; }
.badge { background:#FAF5D7; color:#4A4A4A; border-radius:8px; padding:1px 6px; font-size:10px; }
</style></head>
<body>
<nav>
<p class="brand">Cookpad</p>
<div class="search">Search chicken breast recipes</div>
<button class="btn-primary">Post a Recipe</button>
</nav>
<div class="cats">
<div class="cat"><div class="icon"></div><span>Vegetables</span></div>
<div class="cat"><div class="icon"></div><span>Meat</span></div>
<div class="cat"><div class="icon"></div><span>Seafood</span></div>
<div class="cat"><div class="icon"></div><span>Noodles</span></div>
<div class="cat"><div class="icon"></div><span>Rice Bowls</span></div>
<div class="cat"><div class="icon"></div><span>Salads</span></div>
</div>
<div class="cards">
<div class="card"><div class="photo"></div><div class="body"><h3>Chicken Breast Teriyaki</h3><div class="meta"><span>15 min</span><span class="badge">312 made this</span></div></div></div>
<div class="card"><div class="photo"></div><div class="body"><h3>Easy Pork Miso Soup</h3><div class="meta"><span>20 min</span><span class="badge">88 made this</span></div></div></div>
<div class="card"><div class="photo"></div><div class="body"><h3>Fluffy Rolled Omelet</h3><div class="meta"><span>10 min</span><span class="badge">154 made this</span></div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #8cabd9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #8cabd9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #48566b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8cabd9; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #8cabd9; color: #111111;
border: 1px solid #7892b9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #48566b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #9eb8df; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#8CABD9; color:#000000; box-sizing:border-box;
font-family:'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.nav { background:#fff; height:60px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; border-bottom:1px solid #E5E5E5; }
.msgs { padding:24px; display:flex; flex-direction:column; }
.inrow { display:flex; gap:10px; align-items:flex-end; margin-bottom:16px; }
.av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#c9a876,#8a6a3f); flex:0 0 auto; }
.inname { font-size:12px; color:#3a4a63; margin-bottom:4px; }
.bub-in { background:#fff; border-radius:4px 16px 16px 16px; padding:10px 14px; font-size:15px; max-width:280px; box-shadow:0 1px 2px rgba(0,0,0,0.08); }
.outrow { display:flex; justify-content:flex-end; align-items:flex-end; gap:8px; margin-bottom:16px; }
.time { font-size:10px; color:#333; opacity:0.6; }
.bub-out { background:#C5F0B1; border-radius:16px 4px 16px 16px; padding:10px 14px; font-size:15px; max-width:280px; }
.sticker-row { align-self:flex-start; display:flex; align-items:flex-end; gap:8px; margin-bottom:20px; }
.sticker { width:140px; height:140px; display:flex; align-items:center; justify-content:center; font-size:80px;
background:transparent; }
.greenbadge { display:inline-flex; align-items:center; gap:5px; background:#fff; border-radius:14px; padding:5px 10px; font-size:12px; font-weight:700; }
.shield { color:#06C755; }
.stickershelf { background:rgba(255,255,255,0.5); margin:10px 24px 0; border-radius:16px; padding:14px; display:flex; align-items:center; gap:12px; }
.shelficon { width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#06C755,#04964a); }
.shelftext { font-size:13px; font-weight:700; }
.getbtn { margin-left:auto; background:#06C755; color:#fff; font-size:12px; font-weight:700; padding:6px 14px; border-radius:999px; }
.composer { position:absolute; left:0; right:0; bottom:0; background:rgba(255,255,255,0.92); padding:10px 16px; display:flex; align-items:center; gap:10px; }
.field { flex:1; height:36px; border-radius:18px; background:#F7F7F7; }
.emo { font-size:20px; }
</style></head>
<body>
<div class="nav">LINE (iOS) <span class="shield" style="margin-left:6px;">◆</span></div>
<div class="msgs">
<div class="inrow"><div class="av"></div><div><div class="inname">LINE (iOS)</div><div class="bub-in">Did you see the Cony sticker today? So funny lol</div></div></div>
<div class="outrow"><span class="time">read</span><div class="bub-out">Haha yeah, saw it, so funny</div></div>
<div class="sticker-row"><div class="sticker">🐻</div><span class="time">3:41 PM</span></div>
<div class="inrow"><div class="av"></div><div class="bub-in">Want to grab coffee this weekend?</div></div>
</div>
<div class="stickershelf"><div class="shelficon"></div><div class="shelftext">Sticker Shop · Brown & Friends</div><div class="getbtn">GET</div></div>
<div class="composer"><div class="field"></div><span class="emo">😊</span><span class="emo">📎</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #212121;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #212121;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0D0D0D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:640px; }
.sidebar { width:250px; background:#F9F9F9; border-right:1px solid #E5E5E5; padding:14px 10px; flex-shrink:0; }
.newchat { background:#0D0D0D; color:#fff; border-radius:8px; padding:11px 12px; font-size:14px; font-weight:500;
display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.sb-section { font-size:12px; font-weight:500; letter-spacing:0.2px; color:#8E8E8E; padding:14px 10px 4px; }
.conv { height:40px; display:flex; align-items:center; padding:0 10px; border-radius:8px; font-size:14px;
font-weight:500; color:#0D0D0D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv.active { background:#ECECEC; }
.conv.hover { background:#F0F0F0; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; flex-shrink:0; }
.chip { display:inline-flex; align-items:center; gap:6px; border:1px solid #E5E5E5; border-radius:999px;
padding:6px 12px; font-size:14px; font-weight:500; }
.chip .dot { width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,#3B82F6,#93C5FD); }
.chat { flex:1; padding:8px 0 0; overflow:hidden; max-width:720px; margin:0 auto; width:100%; }
.msg-row { display:flex; margin:14px 22px; }
.msg-row.user { justify-content:flex-end; }
.bubble { background:#F7F7F8; border-radius:18px 18px 4px 18px; padding:10px 14px; font-size:15px;
line-height:1.5; max-width:78%; }
.assistant { padding:0 22px; margin:14px 0 6px; }
.assistant h3 { font-size:17px; font-weight:600; margin:0 0 6px; }
.assistant p { font-size:15px; line-height:1.5; margin:0 0 8px; }
.assistant code { background:#F0F0F0; border-radius:4px; padding:2px 5px; font-family:Menlo,monospace; font-size:13px; }
.codeblock { background:#F7F7F8; border:1px solid #E5E5E5; border-radius:8px; margin:8px 0; overflow:hidden; }
.codeblock .cb-top { display:flex; justify-content:space-between; font-size:12px; font-weight:500; color:#676767;
padding:8px 12px; border-bottom:1px solid #E5E5E5; }
.codeblock pre { margin:0; padding:10px 12px; font-family:Menlo,monospace; font-size:12.5px; color:#0D0D0D; }
.feedback { display:flex; gap:6px; margin-top:8px; }
.fbtn { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
color:#676767; font-size:13px; }
.composer { padding:10px 22px 18px; flex-shrink:0; }
.cinner { max-width:720px; margin:0 auto; border:1px solid #E5E5E5; border-radius:24px; padding:10px 10px 10px 18px;
display:flex; align-items:center; gap:10px; }
.cinner .ph { font-size:15px; color:#676767; flex:1; }
.send { width:32px; height:32px; border-radius:50%; background:#0D0D0D; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="newchat">✎ New chat</div>
<div class="sb-section">Today</div>
<div class="conv active">Explaining tabular figures</div>
<div class="conv">React Hooks Explained</div>
<div class="sb-section">Previous 7 Days</div>
<div class="conv">Django ORM Help</div>
<div class="conv">Trip itinerary — Kyoto</div>
<div class="conv">CSS grid vs flexbox</div>
</div>
<div class="main">
<div class="topbar">
<div class="chip"><span class="dot"></span> ChatGPT (iOS) <span style="color:#8E8E8E">▾</span></div>
<div style="font-size:20px; color:#0D0D0D;">✎</div>
</div>
<div class="chat">
<div class="msg-row user"><div class="bubble">Can you show me a quick example of tabular number formatting in CSS?</div></div>
<div class="assistant">
<p>Sure — use <code>font-variant-numeric: tabular-nums</code> so digits share equal width and columns align.</p>
<div class="codeblock">
<div class="cb-top"><span>css</span><span>Copy</span></div>
<pre>.amount {
font-variant-numeric: tabular-nums;
}</pre>
</div>
<p>This keeps numbers from shifting as they update — handy for prices, timers, and tables.</p>
<div class="feedback">
<div class="fbtn">↻</div>
<div class="fbtn">📄</div>
<div class="fbtn">👍</div>
<div class="fbtn">👎</div>
</div>
</div>
</div>
<div class="composer">
<div class="cinner">
<span class="ph">Message ChatGPT (iOS)…</span>
<div class="send">↑</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.4px; background: #350b60; color: #ffcc33;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.4px; background: transparent; color: #350b60;
border: 1px solid #350b60; border-radius: 9999px;
padding: 12px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #ffcc33; color: #350b60;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#08003c; color:#ffffff; box-sizing:border-box;
font-family:'Century Gothic', 'Futura', Verdana, sans-serif; letter-spacing:0.1px; }
* { box-sizing:border-box; }
nav { height:62px; background:#350b60; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#ffcc33; font-size:19px; font-weight:700; margin:0; letter-spacing:0.5px; }
.navlinks { display:flex; gap:24px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; }
.cart { color:#ffcc33; font-size:13px; font-weight:600; }
main { display:flex; height:578px; background:linear-gradient(180deg,#350b60 0%,#18084d 55%,#08003c 100%); }
.stage { width:340px; display:flex; align-items:center; justify-content:center; }
.ring2 { width:130px; height:130px; border-radius:999px; border:14px solid #ffcc33;
box-shadow:0 0 40px rgba(255,204,51,0.35), 0 20px 40px rgba(0,0,0,0.5); position:relative; }
.ring2::after { content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:20px; height:20px;
background:#fce2e6; border-radius:999px; box-shadow:0 0 12px rgba(252,226,230,0.6); }
.info { flex:1; padding:30px 36px; display:flex; flex-direction:column; gap:12px; }
.badge { display:inline-flex; background:#fce2e6; color:#350b60; font-size:11px; font-weight:700; letter-spacing:0.4px;
text-transform:uppercase; border-radius:999px; padding:4px 12px; width:fit-content; }
h1 { font-size:26px; font-weight:700; margin:0; letter-spacing:0.2px; color:#fff; }
.sub { font-size:14px; color:#e6d9f5; margin:0; max-width:440px; line-height:1.5; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.price { font-size:24px; font-weight:700; color:#ffcc33; }
.actions { display:flex; gap:12px; margin-top:6px; }
.btn-primary { background:#ffcc33; color:#350b60; border-radius:4px; height:48px; padding:0 28px; display:flex;
align-items:center; font-weight:700; font-size:14px; }
.btn-secondary { background:transparent; border:1px solid #ffcc33; color:#ffcc33; border-radius:4px; height:48px;
padding:0 22px; display:flex; align-items:center; font-size:13px; font-weight:600; }
.give-back { margin-top:auto; border-top:1px solid rgba(255,255,255,0.15); padding-top:12px; font-size:12px; color:#c7b3e0; }
.give-back b { color:#ffcc33; }
</style></head>
<body>
<nav>
<p class="brand">Automic Gold</p>
<div class="navlinks"><span>Rings</span><span>Earrings</span><span>Pride Collection</span><span>Custom</span></div>
<span class="cart">Bag · 1</span>
</nav>
<main>
<div class="stage"><div class="ring2"></div></div>
<div class="info">
<span class="badge">Pride Collection</span>
<h1>The Solstice Signet — 18K Vermeil</h1>
<p class="sub">A bold, jewel-toned signet ring cast in 18K gold vermeil — designed to be worn as a statement, not a whisper.</p>
<div class="price-row"><span class="price">$285</span></div>
<div class="actions">
<div class="btn-primary">Add to Bag</div>
<div class="btn-secondary">Custom Engraving</div>
</div>
<div class="give-back"><b>10% of proceeds</b> support LGBTQ+ community organizations year-round.</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb1700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb1700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f09187; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb1700; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb1700; color: #f5f5f5;
border: 1px solid #ed3b27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f09187; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee3c29; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#191919; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:22px 32px 0; position:relative; }
.addr { display:flex; justify-content:space-between; align-items:center; }
.addr .lbl { font-size:15px; font-weight:700; display:flex; align-items:center; gap:6px; }
.search { margin-top:14px; height:44px; background:#F7F7F7; border-radius:12px; display:flex; align-items:center; padding:0 14px; color:#757575; font-size:15px; gap:8px; }
.chips { display:flex; gap:10px; margin-top:14px; }
.chip { background:#191919; color:#fff; border-radius:20px; padding:8px 16px; font-size:14px; font-weight:600; }
.chip.off { background:#F7F7F7; color:#191919; }
.sectiontitle { font-size:22px; font-weight:700; margin:18px 0 12px; letter-spacing:-0.3pt; }
.carousel { display:flex; gap:14px; overflow:hidden; }
.mcard { width:230px; flex-shrink:0; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.mimg { width:230px; height:143px; border-radius:12px 12px 0 0; position:relative; }
.mimg .badge { position:absolute; top:10px; left:10px; background:#FFEBE8; color:#EB1700; font-size:11px; font-weight:700; padding:4px 8px; border-radius:4px; text-transform:uppercase; }
.mimg .heart { position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,0.4); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
.mtext { padding:12px; }
.mtext .nm { font-size:18px; font-weight:700; letter-spacing:-0.2pt; }
.mtext .meta { font-size:13px; color:#757575; margin-top:6px; display:flex; align-items:center; gap:6px; }
.mtext .meta .g { color:#008B4A; font-weight:600; }
.floatcta { position:absolute; bottom:20px; left:32px; right:32px; height:52px; border-radius:28px; background:#EB1700; display:flex; align-items:center; justify-content:space-between; padding:0 22px; box-shadow:0 8px 24px rgba(0,0,0,0.16); }
.floatcta span { color:#fff; font-weight:700; font-size:16px; }
</style>
</head>
<body>
<div class="stage">
<div class="addr"><div class="lbl">📍 Home ▾</div><span style="font-size:13px;font-weight:800;letter-spacing:0.2pt;color:#EB1700;">DoorDash (iOS)</span><div style="font-size:22px">🔍</div></div>
<div class="search">🔍 Find food or restaurants</div>
<div class="chips"><div class="chip">🍕 Pizza</div><div class="chip off">🍣 Sushi</div><div class="chip off">🥗 Healthy</div><div class="chip off">🌮 Mexican</div></div>
<div class="sectiontitle">$0 delivery fee near you</div>
<div class="carousel">
<div class="mcard">
<div class="mimg" style="background:linear-gradient(135deg,#e8a05a,#c85a2a)"><div class="badge">Free Delivery</div><div class="heart">♡</div></div>
<div class="mtext"><div class="nm">Sunrise Diner</div><div class="meta">⭐ 4.8 · 20 min · <span class="g">$0 delivery</span></div></div>
</div>
<div class="mcard">
<div class="mimg" style="background:linear-gradient(135deg,#8ac0a0,#3a7a5a)"><div class="badge">20% OFF</div><div class="heart">♡</div></div>
<div class="mtext"><div class="nm">Greenleaf Bowls</div><div class="meta">⭐ 4.6 · 15 min · <span class="g">$0 delivery</span></div></div>
</div>
<div class="mcard">
<div class="mimg" style="background:linear-gradient(135deg,#e07a6a,#a83a2a)"><div class="badge">New</div><div class="heart">♡</div></div>
<div class="mtext"><div class="nm">Casa Molcajete</div><div class="meta">⭐ 4.9 · 25 min · $1.99 fee</div></div>
</div>
</div>
<div class="floatcta"><span>Checkout</span><span>$23.40</span></div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff385c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff385c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa0b0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff385c; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff385c; color: #f5f5f5;
border: 1px solid #fd5674; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa0b0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e43f74; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:20px; font-weight:700; color:#ff385c; }
.hosting { border:none; background:transparent; color:#222222; border-radius:20px; padding:11px 12px; height:40px; font-size:14px; font-weight:500; }
.tabs { display:flex; gap:6px; padding:0 32px; }
.tab { background:transparent; color:#6a6a6a; border-radius:8px; padding:0 16px; height:32px; font-size:14px; font-weight:500; display:flex; align-items:center; }
.tab.sel { color:#222222; font-weight:700; }
.searchshell { margin:16px 32px; height:66px; border-radius:32px; background:#ebebeb; display:flex; align-items:center;
padding:0 8px 0 24px; gap:16px; }
.searchshell .seg { font-size:14px; font-weight:500; color:#222222; }
.searchshell .div { width:1px; height:32px; background:#dddddd; }
.searchshell .go { margin-left:auto; width:48px; height:48px; border-radius:9999px; background:#ff385c; color:#fff; border:none; }
.sectitle { padding:6px 32px 10px; font-size:22px; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:0 32px; }
.lcard { display:flex; flex-direction:column; gap:6px; }
.lcard .img { aspect-ratio:1/1; border-radius:12px; background:linear-gradient(150deg,#f2f2f2,#dadada); position:relative; }
.lcard .heart { position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:9999px; background:#f2f2f2; }
.lcard .row { display:flex; justify-content:space-between; font-size:14px; }
.lcard .place { font-weight:500; color:#222222; }
.lcard .rate { color:#222222; }
.lcard .sub { font-size:14px; color:#6a6a6a; }
.lcard .price { font-size:14px; font-weight:700; margin-top:2px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; border-top:1px solid #dddddd; display:flex; justify-content:space-between; font-size:11px; color:#6a6a6a; }
</style></head>
<body>
<header>
<span class="brand">Airbnb</span>
<button class="hosting">Become a host</button>
</header>
<div class="tabs">
<span class="tab sel">Homes</span><span class="tab">Experiences</span><span class="tab">Services</span>
</div>
<div class="searchshell">
<span class="seg">Anywhere</span><span class="div"></span>
<span class="seg">Any week</span><span class="div"></span>
<span class="seg" style="color:#6a6a6a;">Add guests</span>
<button class="go">⌕</button>
</div>
<div class="sectitle">Popular homes</div>
<div class="grid">
<div class="lcard"><div class="img"><div class="heart"></div></div><div class="row"><span class="place">Seoul, Korea</span><span class="rate">★4.92</span></div><span class="sub">Hongdae studio loft</span><span class="price">₩89,000 / night</span></div>
<div class="lcard"><div class="img" style="background:linear-gradient(150deg,#eef4ff,#cfe0ff);"><div class="heart"></div></div><div class="row"><span class="place">Busan, Korea</span><span class="rate">★4.87</span></div><span class="sub">Oceanfront apartment</span><span class="price">₩120,000 / night</span></div>
<div class="lcard"><div class="img" style="background:linear-gradient(150deg,#fff2ec,#ffd8c8);"><div class="heart"></div></div><div class="row"><span class="place">Jeju, Korea</span><span class="rate">★4.95</span></div><span class="sub">Countryside cottage</span><span class="price">₩98,000 / night</span></div>
<div class="lcard"><div class="img" style="background:linear-gradient(150deg,#f0f7ee,#d3e8c9);"><div class="heart"></div></div><div class="row"><span class="place">Gangneung, Korea</span><span class="rate">★4.90</span></div><span class="sub">Cozy beach house</span><span class="price">₩75,000 / night</span></div>
</div>
<footer><span>© Airbnb</span><span>Belong anywhere</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4541ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4541ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a6a4fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4541ff; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4541ff; color: #f5f5f5;
border: 1px solid #615efd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a6a4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #423fde; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:Pretendard, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e2e8f0; }
.brand { font-size:18px; font-weight:800; color:#111827; }
.navlinks { display:flex; gap:24px; font-size:15px; color:#222222; }
.navlinks .on { color:#4541ff; font-weight:700; }
.cta-mini { background:#4541ff; color:#fff; border-radius:5px; padding:9px 14px; font-size:13px; font-weight:700; }
main { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:34px 32px; }
.left h1 { font-size:34px; font-weight:800; line-height:1.2; margin:0 0 12px; color:#111827; }
.left h1 b { color:#4541ff; }
.left p { font-size:15px; color:#64748b; line-height:1.5; margin:0 0 20px; max-width:380px; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#4541ff; color:#fff; border-radius:12px; padding:12px 24px; font-size:15px; font-weight:600; }
.btn-g { background:#fff; color:#111827; border:1px solid #e2e8f0; border-radius:8px; padding:12px 24px; font-size:15px; font-weight:600; }
.code { background:#ffffff; border-radius:12px; box-shadow:rgba(0,0,0,0.1) 0px 0px 16px 0px; padding:18px 20px;
font-family:Monaco, Menlo, Consolas, monospace; font-size:12.5px; color:#24292f; line-height:1.7; margin-top:10px; }
.code .c1 { color:#8250df; } .code .c2 { color:#0550ae; } .code .c3 { color:#953800; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 32px 24px; }
.card { background:#ffffff; border-radius:20px; box-shadow:rgba(69,65,255,0.2) 0px 0px 20px 0px; padding:20px; }
.card .dot { width:34px; height:34px; border-radius:9px; background:rgba(69,65,255,0.1); margin-bottom:10px; }
.card h3 { font-size:17px; font-weight:600; margin:0 0 6px; color:#111827; }
.card p { font-size:12.5px; color:#64748b; margin:0; line-height:1.5; }
footer { position:absolute; bottom:0; width:960px; padding:14px 32px; border-top:1px solid #e2e8f0;
display:flex; justify-content:space-between; font-size:12px; color:#828282; }
</style></head>
<body>
<nav>
<p class="brand">SOLAPI</p>
<div class="navlinks"><span class="on">Guide</span><span>SDK</span><span>API</span><span>Pricing</span></div>
<span class="cta-mini">Get Started</span>
</nav>
<main>
<div class="left">
<h1>Send the message,<br><b>keep the customer.</b></h1>
<p>Automate every step. Connect SMS, chat alerts, and RCS through a single API.</p>
<div class="btnrow"><span class="btn-p">Get Started →</span><span class="btn-g">Try the Demo</span></div>
</div>
<div class="left">
<div class="code">
<div><span class="c1">import</span> Solapi <span class="c1">from</span> <span class="c3">'solapi'</span></div>
<div> </div>
<div><span class="c2">solapi</span>.send({</div>
<div> to: <span class="c3">'01000000000'</span>,</div>
<div> text: <span class="c3">'Integrated in half a day'</span></div>
<div>})</div>
</div>
</div>
</main>
<div class="cards">
<div class="card"><div class="dot"></div><h3>SMS / Alerts</h3><p>Send texts, chat alerts, and RCS all at once.</p></div>
<div class="card"><div class="dot"></div><h3>Automated CRM</h3><p>Turn repetitive sending tasks into workflows.</p></div>
<div class="card"><div class="dot"></div><h3>AI Integration Support</h3><p>Let AI write the integration code for you.</p></div>
</div>
<footer>
<span>© SOLAPI</span>
<span>Guide · SDK · API · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #282828;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #282828;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #282828; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #fdbc00; color: #282828;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #f5f5f5; color: #282828;
border: 1px solid #fdbc00; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #282828;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #fdbc00; color: #282828;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#282828; box-sizing:border-box;
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f5f5f5; border-bottom:1px solid #e6e6e6; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#464646; }
.cart { background:#fdbc00; color:#282828; font-size:12px; font-weight:600; padding:6px 14px; border-radius:8px; }
.content { display:flex; gap:20px; padding:20px 32px; }
.gallery { flex:1.1; }
.mainimg { height:200px; background:linear-gradient(160deg,#282828,#464646); border-radius:8px; position:relative; }
.mainimg::after { content:''; position:absolute; left:20px; top:20px; right:20px; height:26px; background:#fdbc00; border-radius:8px; opacity:.85; }
.thumbs { display:flex; gap:8px; margin-top:8px; }
.thumb { width:44px; height:44px; background:#e6e6e6; border-radius:8px; }
.details { flex:1; }
.details h1 { font-size:20px; font-weight:600; margin:0 0 6px; }
.details .sub { font-size:12px; color:#888888; margin:0 0 10px; }
.price { font-size:22px; font-weight:700; margin-bottom:12px; }
.price .sale { color:#dd2c00; }
.price .old { font-size:14px; color:#aaaaaa; text-decoration:line-through; font-weight:400; margin-left:8px; }
.btnrow { display:flex; gap:8px; margin-bottom:14px; }
.btn { flex:1; text-align:center; padding:12px; border-radius:8px; font-size:13px; font-weight:600; }
.btn-primary { background:#fdbc00; color:#282828; }
.btn-outline { background:#fff; border:1px solid #dedede; color:#282828; }
.spec { border:1px solid #e6e6e6; border-radius:8px; background:#fff; }
.specrow { display:flex; justify-content:space-between; padding:8px 12px; font-size:12px; border-bottom:1px solid #e6e6e6; }
.specrow:last-child { border-bottom:none; }
.specrow span:first-child { color:#888888; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#282828; color:#aaaaaa;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Baseus Docking 2</p>
<div class="navlinks"><span>Docking</span><span>Hubs</span><span>Cables</span><span>Chargers</span></div>
<div class="cart">Cart · 1 item</div>
</nav>
<div class="content">
<div class="gallery">
<div class="mainimg"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="details">
<h1>13-in-1 USB-C Docking Station</h1>
<p class="sub">Triple 4K display · 100W passthrough · Gigabit LAN</p>
<div class="price"><span class="sale">$89.99</span><span class="old">$119.99</span></div>
<div class="btnrow"><div class="btn btn-primary">Add to Cart</div><div class="btn btn-outline">Buy Now</div></div>
<div class="spec">
<div class="specrow"><span>Ports</span><span>13</span></div>
<div class="specrow"><span>Max Display</span><span>3x 4K@60Hz</span></div>
<div class="specrow"><span>Power Delivery</span><span>100W</span></div>
<div class="specrow"><span>Data Transfer</span><span>10Gbps</span></div>
</div>
</div>
</div>
<footer>
<span>© Baseus Docking 2</span>
<span>Baseus Docking 2 · Warranty · Support · Where to Buy</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff66af; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff66af; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3758; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff66af; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff66af; color: #111111;
border: 1px solid #d95896; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3758; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7ebc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Spoqa Han Sans Neo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #eeeeee; }
.brand { font-size:17px; font-weight:700; }
.pills { display:flex; gap:8px; }
.pill { background:#ffffff; color:#8c8c8c; font-size:12px; border:1px solid #eeeeee; border-radius:32px;
padding:6px 16px; box-shadow:0 2px 0 rgba(0,0,0,0.02); }
.hero { padding:30px 36px 18px; position:relative; }
.h1 { font-size:32px; font-weight:700; line-height:1.25; margin:0 0 8px; max-width:600px; }
.sub { font-size:14px; color:#5a5a5a; margin:0 0 18px; max-width:520px; line-height:1.5; }
.cta { display:inline-block; background:#ff66af; color:#ffffff; border:none; border-radius:32px;
padding:15px 30px; font-size:16px; box-shadow:rgba(255,5,88,0.06) 0px 2px 0px 0px; }
.fins { position:absolute; right:36px; top:26px; display:flex; gap:6px; }
.fin { width:0; height:0; border-style:solid; }
.fin1 { border-width:0 18px 46px 18px; border-color:transparent transparent #ff66af transparent; transform:rotate(-6deg); }
.fin2 { border-width:0 14px 36px 14px; border-color:transparent transparent #08c7ff transparent; margin-top:14px; transform:rotate(8deg); }
.fin3 { border-width:0 22px 56px 22px; border-color:transparent transparent #ffd2e6 transparent; transform:rotate(3deg); }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:14px 36px 28px; }
.tile { border:1px solid #eeeeee; border-radius:12px; padding:16px 14px; display:flex; flex-direction:column; gap:10px; }
.tile-fin { width:0; height:0; border-style:solid; border-width:0 10px 24px 10px; }
.tf1 { border-color:transparent transparent #ff66af transparent; }
.tf2 { border-color:transparent transparent #08c7ff transparent; }
.tf3 { border-color:transparent transparent #ffcf3d transparent; }
.tf4 { border-color:transparent transparent #7ad2c3 transparent; }
.tile h4 { font-size:14px; font-weight:700; margin:0; }
.tile p { font-size:11px; color:#5a5a5a; margin:0; line-height:1.4; }
.outline-btn { align-self:flex-start; background:#ffffff; color:#08c7ff; border:1.5px solid #08c7ff;
border-radius:32px; padding:6px 14px; font-size:12px; }
.foot { padding:0 36px; display:flex; justify-content:space-between; align-items:center;
font-size:11px; color:#8c8c8c; }
</style></head>
<body>
<nav>
<span class="brand">The Pinkfong Company</span>
<div class="pills">
<span class="pill">Pinkfong</span>
<span class="pill">Shark Family</span>
<span class="pill">Bebe World</span>
</div>
</nav>
<section class="hero">
<div class="fins"><span class="fin fin1"></span><span class="fin fin2"></span><span class="fin fin3"></span></div>
<h1 class="h1">Connecting people through joyful content</h1>
<p class="sub">The Pinkfong Company makes memorable music, stories, and characters that travel from a nursery in Seoul to a living room anywhere in the world.</p>
<button class="cta">Explore our world</button>
</section>
<section class="grid">
<div class="tile"><span class="tile-fin tf1"></span><h4>Content</h4><p>Music, stories, and video series built around characters kids remember.</p><span class="outline-btn">Learn more</span></div>
<div class="tile"><span class="tile-fin tf2"></span><h4>Partnerships</h4><p>Co-creating experiences with studios and platforms worldwide.</p><span class="outline-btn">Learn more</span></div>
<div class="tile"><span class="tile-fin tf3"></span><h4>Merchandise</h4><p>Toys and goods that bring the characters off the screen.</p><span class="outline-btn">Learn more</span></div>
<div class="tile"><span class="tile-fin tf4"></span><h4>Live Events</h4><p>Concerts and shows for families to enjoy together.</p><span class="outline-btn">Learn more</span></div>
</section>
<div class="foot">
<span>© The Pinkfong Company</span>
<span>The Pinkfong Company · Company · Business · Newsroom</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111827; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111827; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9298; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242424; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111827; color: #ffffff;
border: 1px solid #242424; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #111827; color: #f5f5f5;
border: 1px solid #353b48; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9298; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #141a27; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#242424; box-sizing:border-box;
font-family:'Cal Sans',Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:600; color:#242424; margin:0; letter-spacing:-.3px; }
.navlinks { display:flex; gap:24px; font-family:Inter; font-size:16px; font-weight:600; color:#111; }
.btn { background:#242424; color:#fff; border:none; border-radius:9999px; height:38px; padding:0 20px;
font-family:Inter; font-size:16px; font-weight:600; }
.hero { text-align:center; padding:20px 40px 22px; }
.hero h1 { font-size:56px; font-weight:600; line-height:1.08; margin:0 0 12px; letter-spacing:-0.5px; }
.hero p { font-family:Inter; font-weight:300; font-size:18px; color:#898989; margin:0; }
.booker { margin:24px auto 0; width:820px; border-radius:12px;
box-shadow: rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.08) 0px 0px 0px 1px, rgba(34,42,53,0.05) 0px 4px 8px 0px;
display:flex; overflow:hidden; }
.bk-left { width:280px; padding:24px; border-right:1px solid #ececec; }
.bk-left .who { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.avatar { width:36px; height:36px; border-radius:50%; background:#242424; }
.bk-left .name { font-family:Inter; font-size:14px; font-weight:600; color:#242424; }
.bk-left .title { font-family:'Cal Sans'; font-size:20px; margin:0 0 6px; }
.bk-left .meta { font-family:Inter; font-size:14px; color:#898989; margin-bottom:6px; }
.bk-right { flex:1; padding:24px; }
.month { font-family:Inter; font-size:14px; font-weight:600; margin-bottom:14px; color:#242424; }
.days { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:16px; }
.day { text-align:center; font-family:Inter; font-size:13px; padding:6px 0; border-radius:8px; color:#242424; }
.day.muted { color:#c8c8c8; }
.day.sel { background:#242424; color:#fff; font-weight:600; }
.slots { display:flex; gap:8px; flex-wrap:wrap; }
.slot { border:1px solid rgb(118,118,118); border-radius:8px; padding:8px 16px; font-family:Inter; font-size:14px; color:#242424; }
.slot.on { background:#242424; color:#fff; border-color:#242424; }
</style></head>
<body>
<nav>
<p class="brand">Cal.com</p>
<div class="navlinks"><span>Product</span><span>Enterprise</span><span>Pricing</span></div>
<button class="btn">Get started</button>
</nav>
<section class="hero">
<h1>Scheduling for everyone</h1>
<p>One link. Every calendar. Zero back-and-forth.</p>
</section>
<div class="booker">
<div class="bk-left">
<div class="who"><div class="avatar"></div><span class="name">Alex Rivera</span></div>
<p class="title">30 Min Meeting</p>
<div class="meta">⏱ 30 minutes</div>
<div class="meta">🌐 Asia/Seoul</div>
<div class="meta">📹 Cal Video</div>
</div>
<div class="bk-right">
<div class="month">September 2026</div>
<div class="days">
<div class="day muted">Su</div><div class="day">Mo</div><div class="day">Tu</div><div class="day sel">We</div>
<div class="day">Th</div><div class="day">Fr</div><div class="day muted">Sa</div>
</div>
<div class="slots">
<div class="slot">9:00am</div><div class="slot on">10:30am</div><div class="slot">1:00pm</div>
<div class="slot">2:30pm</div><div class="slot">4:00pm</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ddaa00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ddaa00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #6d5609; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0163a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ddaa00; color: #000000;
border: 1px solid #f0163a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ddaa00; color: #111111;
border: 1px solid #bc9203; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d5609; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e09209; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#e6e6e6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#171717; }
.brand { color:#ddaa00; font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:12px; font-weight:700; color:#e6e6e6; opacity:0.7; }
.search { background:#212121; border-radius:4px; height:30px; width:170px; display:flex; align-items:center;
padding:0 10px; font-size:11px; color:#999999; }
.chips { display:flex; gap:8px; padding:14px 28px 6px; }
.chip { border-radius:16px; height:28px; padding:0 14px; display:flex; align-items:center; font-size:12px; font-weight:700; }
.chip.on { background:#e6e6e6; color:#212121; }
.chip.off { background:#212121; color:#e6e6e6; }
.rail { padding:10px 28px 0; }
.rail h2 { font-size:15px; font-weight:700; margin:0 0 10px; }
.thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.thumb { position:relative; border-radius:4px; overflow:hidden; background:#212121; }
.thumb .art { height:76px; }
.thumb .meta { padding:8px; }
.thumb .meta .t { font-size:11px; font-weight:700; margin:0 0 3px; line-height:1.3; }
.thumb .meta .s { font-size:10px; color:#999999; }
.badge-live { position:absolute; top:6px; right:6px; background:#f0163a; color:#ffffff; border-radius:4px;
padding:2px 6px; font-size:10px; font-weight:700; }
.badge-new { position:absolute; bottom:64px; left:0; background:#f0163a; color:#ffffff; border-radius:0 4px 0 0;
padding:1px 6px; font-size:9px; font-weight:700; }
.art.a1 { background:linear-gradient(135deg,#3a2b00,#ddaa00); }
.art.a2 { background:linear-gradient(135deg,#2b0710,#f0163a); }
.art.a3 { background:linear-gradient(135deg,#0b1a17,#16deb5); }
.art.a4 { background:linear-gradient(135deg,#1e0a33,#a873ff); }
.art.b1 { background:linear-gradient(135deg,#0b1414,#02d1d6); }
.art.b2 { background:linear-gradient(135deg,#241d00,#ffc400); }
.art.b3 { background:linear-gradient(135deg,#111,#373737); }
.art.b4 { background:linear-gradient(135deg,#2b0710,#f0163a); }
</style></head>
<body>
<nav>
<p class="brand">ABEMA</p>
<div class="navlinks"><span>News</span><span>Sports</span><span>Anime</span><span>Shogi</span><span>Mahjong</span></div>
<div class="search">Search shows, channels…</div>
</nav>
<div class="chips">
<span class="chip on">For You</span>
<span class="chip off">News</span>
<span class="chip off">Sports</span>
<span class="chip off">Anime</span>
<span class="chip off">Drama</span>
</div>
<div class="rail">
<h2>Live Now</h2>
<div class="thumbs">
<div class="thumb"><div class="art a1"></div><span class="badge-live">LIVE</span><div class="meta"><p class="t">ABEMA Prime — Evening News Roundup</p><span class="s">News</span></div></div>
<div class="thumb"><div class="art a2"></div><span class="badge-live">LIVE</span><div class="meta"><p class="t">Pro League Finals, Match 3</p><span class="s">Sports</span></div></div>
<div class="thumb"><div class="art a3"></div><span class="badge-new">NEW</span><div class="meta"><p class="t">Season 4 Premiere — Wandering Blade</p><span class="s">Anime</span></div></div>
<div class="thumb"><div class="art a4"></div><div class="meta"><p class="t">Late Night Talk: Creators Roundtable</p><span class="s">Variety</span></div></div>
</div>
</div>
<div class="rail">
<h2>Recommended For You</h2>
<div class="thumbs">
<div class="thumb"><div class="art b1"></div><div class="meta"><p class="t">Shogi Open, Round 6</p><span class="s">Shogi</span></div></div>
<div class="thumb"><div class="art b2"></div><div class="meta"><p class="t">Weekend Mahjong Cup</p><span class="s">Mahjong</span></div></div>
<div class="thumb"><div class="art b3"></div><div class="meta"><p class="t">Documentary: The Next Future of TV</p><span class="s">Originals</span></div></div>
<div class="thumb"><div class="art b4"></div><span class="badge-live">LIVE</span><div class="meta"><p class="t">Breaking: City Council Vote</p><span class="s">News</span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #006fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #006fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b9fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066cc; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006fff; color: #000000;
border: 1px solid #0066cc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #006fff; color: #f5f5f5;
border: 1px solid #2784fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b9fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #006ef7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3d4046; box-sizing:border-box;
font-family:"Spoqa Han Sans Neo", "Malgun Gothic", "Segoe UI", Helvetica, Arial, sans-serif; font-weight:700; }
* { box-sizing:border-box; }
.hero { background:#0b1335; height:190px; padding:18px 30px; }
.hero nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.brand { color:#ffffff; font-size:17px; margin:0; }
.navlinks { display:flex; gap:18px; }
.navlinks span { color:#b2c0cb; font-size:14px; }
.cta { background:#006fff; color:#ffffff; border:none; border-radius:20px; height:40px; padding:0 18px; font-size:14px;
box-shadow:rgba(0,104,255,0.4) 2px 2px 8px 0px; }
.hero h1 { color:#ffffff; font-size:28px; line-height:1.3; margin:0 0 12px; max-width:600px; }
.liftbtn { background:#006fff; color:#ffffff; border:none; border-radius:24px; height:44px; padding:0 20px; font-size:15px;
box-shadow:rgba(0,104,255,0.4) 0px 4px 16px -4px; }
.body { padding:20px 30px; height:430px; }
.eyebrow { color:#7e8696; font-size:14px; margin:0 0 6px; }
.body h2 { font-size:20px; margin:0 0 16px; color:#000000; }
.funnel { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.fnode { flex:1; text-align:center; background:#f4f9ff; border:1px solid rgba(0,0,0,0.05); border-radius:20px; padding:16px 10px; }
.fnode .n { font-size:20px; color:#006fff; margin:0; }
.fnode .l { font-size:12px; color:#7e8696; margin:4px 0 0; font-weight:400; }
.arrow { color:#b2c0cb; font-size:18px; font-weight:400; }
.cardrow { display:flex; gap:16px; }
.card { flex:1; border-radius:20px; padding:20px; border:1px solid #e8eaee; box-shadow:rgba(0,0,0,0.04) 0px 5px 51px 0px; background:#ffffff; }
.card h3 { font-size:16px; margin:0 0 6px; }
.card p { font-size:13px; color:#53585f; margin:0; font-weight:400; }
.card.mint { background:#dbf4eb; border:1px solid #7edbb9; box-shadow:none; }
.card.accent { background:#e1f1ff; border:none; box-shadow:none; }
</style></head>
<body>
<div class="hero">
<nav>
<p class="brand">Bigin</p>
<div class="navlinks"><span>Campaigns</span><span>Automation</span><span>Integrations</span><span>Pricing</span></div>
<button class="cta">Talk to Sales</button>
</nav>
<h1>From customer acquisition to loyalty,<br>a marketing automation pipeline</h1>
<button class="liftbtn">Talk to Sales</button>
</div>
<div class="body">
<p class="eyebrow">Funnel Overview</p>
<h2>This Month's Campaign Journey</h2>
<div class="funnel">
<div class="fnode"><p class="n">18,204</p><p class="l">Visits</p></div>
<span class="arrow">→</span>
<div class="fnode"><p class="n">6,512</p><p class="l">Sign-ups</p></div>
<span class="arrow">→</span>
<div class="fnode"><p class="n">2,048</p><p class="l">Conversions</p></div>
<span class="arrow">→</span>
<div class="fnode"><p class="n">1,120</p><p class="l">Loyal Customers</p></div>
</div>
<div class="cardrow">
<div class="card"><h3>Automation Scenario</h3><p>Condition-based email/SMS automation drives repeat purchases.</p></div>
<div class="card accent"><h3>New Segment</h3><p>Automatically classified customers recently at risk of churn.</p></div>
<div class="card mint"><h3>Integration Complete</h3><p>Storefront order data is syncing in real time.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1f2228; color:#ffffff; box-sizing:border-box;
font-family:"universalSans", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid rgba(255,255,255,0.1); }
.brand { font-family:"GeistMono", ui-monospace, monospace; font-size:14px; text-transform:uppercase; letter-spacing:1.4px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#ffffff; }
.navlinks span:nth-child(2) { color:rgba(255,255,255,0.5); }
.btn-primary { background:#ffffff; color:#1f2228; border:none; border-radius:0; padding:8px 18px;
font-family:"GeistMono",monospace; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; }
.hero { padding:34px 32px 10px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.hero .kicker { font-family:"GeistMono",monospace; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.hero h1 { font-family:"GeistMono", ui-monospace, monospace; font-size:64px; font-weight:300; line-height:1.05; margin:0; letter-spacing:-1px; }
.hero p { font-size:16px; color:rgba(255,255,255,0.7); margin:0; max-width:520px; line-height:1.5; }
.row { display:flex; gap:12px; margin-top:6px; }
.btn-ghost { background:transparent; color:#ffffff; border:1px solid rgba(255,255,255,0.2); padding:12px 24px;
font-family:"GeistMono",monospace; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; }
.btn-primary-lg { background:#ffffff; color:#1f2228; border:none; padding:12px 24px;
font-family:"GeistMono",monospace; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.1);
margin:22px 32px 0; border:1px solid rgba(255,255,255,0.1); }
.card { background:#1f2228; padding:20px; display:flex; flex-direction:column; gap:8px; }
.card .tag { font-family:"GeistMono",monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.2); padding:3px 8px; align-self:flex-start; }
.card h3 { margin:0; font-size:17px; font-weight:400; }
.card p { margin:0; font-size:13px; color:rgba(255,255,255,0.7); line-height:1.5; }
.metrics { display:flex; gap:0; margin:20px 32px 0; border:1px solid rgba(255,255,255,0.1); }
.metric { flex:1; padding:16px 20px; border-right:1px solid rgba(255,255,255,0.1); }
.metric:last-child { border-right:none; }
.metric .num { font-family:"GeistMono",monospace; font-size:26px; font-weight:300; }
.metric .lbl { font-size:11px; color:rgba(255,255,255,0.5); margin-top:4px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:14px 32px; border-top:1px solid rgba(255,255,255,0.1);
display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,0.5); }
</style></head>
<body>
<nav>
<p class="brand">xAI</p>
<div class="navlinks"><span>Models</span><span>API</span><span>Research</span><span>Company</span></div>
<button class="btn-primary">Try Now</button>
</nav>
<section class="hero">
<span class="kicker">Frontier Intelligence</span>
<h1>Understand<br>the Universe.</h1>
<p>A research lab building models that reason from first principles — for developers, researchers, and everyone curious enough to ask.</p>
<div class="row">
<button class="btn-primary-lg">Use Now</button>
<button class="btn-ghost">View Docs</button>
</div>
</section>
<div class="cards">
<div class="card"><span class="tag">Model</span><h3>Reasoning at scale</h3><p>Trained on one of the largest GPU clusters ever assembled.</p></div>
<div class="card"><span class="tag">API</span><h3>Build with the frontier</h3><p>Ship production reasoning in a single request.</p></div>
<div class="card"><span class="tag">Research</span><h3>First-principles science</h3><p>Papers and benchmarks published as the work happens.</p></div>
</div>
<div class="metrics">
<div class="metric"><div class="num">100K+</div><div class="lbl">GPUS IN CLUSTER</div></div>
<div class="metric"><div class="num">128K</div><div class="lbl">CONTEXT WINDOW</div></div>
<div class="metric"><div class="num">04</div><div class="lbl">MAJOR RELEASES</div></div>
</div>
<footer>
<span>© xAI</span>
<span>Models · API · Research · Careers</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab287; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6000; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6000; color: #f5f5f5;
border: 1px solid #fd7827; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab287; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc5605; color: #222222;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e5e5e5; }
.brand { font-size:19px; font-weight:700; color:#222222; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#737373; }
.navlinks span:first-child { color:#ff6000; font-weight:600; }
.account-pill { border:1px solid #d4d4d4; border-radius:9999px; padding:10px 16px;
font-size:14px; color:#222222; background:#ffffff; }
.layout { display:flex; height:calc(640px - 64px); }
.side { width:220px; border-right:1px solid #e5e5e5; padding:28px 24px; }
.side .eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
color:#a3a3a3; margin-bottom:14px; }
.side ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.side li { font-size:14px; color:#737373; }
.side li.active { color:#ff6000; font-weight:600; }
.side .divider { height:1px; background:#e5e5e5; margin:22px 0; }
.side .badge-mini { display:inline-block; margin-top:18px; font-size:11px; color:#a3a3a3;
border:1px solid #e5e5e5; border-radius:6px; padding:6px 10px; line-height:1.5; }
.main { flex:1; padding:28px 36px 0; overflow:hidden; }
.searchrow { display:flex; align-items:center; gap:10px; border:1px solid #e5e5e5;
border-radius:10px; padding:12px 16px; margin-bottom:22px; }
.searchrow .dot { width:8px; height:8px; border-radius:50%; background:#ff6000; flex:none; }
.searchrow .fake-input { font-size:20px; font-weight:600; color:#ff6000; }
.promo { background:#fcf4ee; border-radius:16px; padding:40px; display:flex; align-items:center;
justify-content:space-between; gap:24px; margin-bottom:26px; }
.promo h1 { font-size:32px; font-weight:700; line-height:1.25; margin:0 0 8px; color:#222222; max-width:420px; }
.promo p { margin:0; font-size:16px; color:#737373; line-height:1.5; max-width:380px; }
.promo .hackline { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
color:#ff6000; margin-bottom:10px; }
.promo .mark { width:96px; height:96px; border-radius:16px; background:#ffffff; flex:none;
display:flex; align-items:center; justify-content:center; }
.promo .mark .cub { width:44px; height:44px; border-radius:12px; background:#ff6000; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { border:1px solid #e5e5e5; border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.card .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#a3a3a3; }
.card h3 { font-size:20px; font-weight:600; margin:0; line-height:1.3; color:#222222; }
.card p { font-size:13px; color:#737373; margin:0; line-height:1.5; }
.card .meta { margin-top:8px; font-size:12px; color:#a3a3a3; display:flex; gap:10px; }
</style></head>
<body>
<nav>
<span class="brand">LikeLion</span>
<div class="navlinks"><span>Courses</span><span>Bootcamp</span><span>AI Education</span><span>Business</span></div>
<div class="account-pill">Log in / Sign up</div>
</nav>
<div class="layout">
<aside class="side">
<div class="eyebrow">Learning Tracks</div>
<ul>
<li class="active">K-Digital Training</li>
<li>AI Bootcamp</li>
<li>Frontend Track</li>
<li>Data Track</li>
<li>Business Education</li>
</ul>
<div class="divider"></div>
<div class="badge-mini">Learn by solving real problems, then share what you found.</div>
</aside>
<div class="main">
<div class="searchrow"><span class="dot"></span><span class="fake-input">Search a course or a problem to solve</span></div>
<div class="promo">
<div>
<div class="hackline">Hack your life</div>
<h1>Turn your idea into something you can ship</h1>
<p>Structured tracks built around real problems, mentoring, and shared experience — from your first line of code to your first release.</p>
</div>
<div class="mark"><div class="cub"></div></div>
</div>
<div class="grid">
<div class="card">
<span class="tag">Bootcamp</span>
<h3>12-Week Backend Track</h3>
<p>Ship a real service from planning to deployment, mentored by working engineers.</p>
<div class="meta"><span>Next cohort · Mar</span><span>Onsite + Online</span></div>
</div>
<div class="card">
<span class="tag">AI Education</span>
<h3>Working With AI as a Teammate</h3>
<p>Practical sessions on using AI tools inside a real production workflow.</p>
<div class="meta"><span>6 weeks</span><span>Beginner friendly</span></div>
</div>
<div class="card">
<span class="tag">Business</span>
<h3>AX Learning for Teams</h3>
<p>Problem-led workshops for organizations adopting AI collaboration.</p>
<div class="meta"><span>Custom schedule</span><span>B2B</span></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f2f2; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f2f2; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #1965e0; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #111111;
border: 1px solid #1965e0; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #bababa; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c10015; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f2f2; color:#111111; box-sizing:border-box;
font-family:'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#111111; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#fff; font-size:16px; font-weight:700; letter-spacing:0.3px; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.8; font-size:13px; }
.cart { color:#1965e0; font-size:13px; font-weight:600; }
main { display:flex; height:582px; }
.stage { width:340px; background:#171717; display:flex; align-items:center; justify-content:center; }
.desk { width:220px; height:120px; position:relative; }
.desktop { width:220px; height:12px; background:linear-gradient(180deg,#e5e5e5,#c8c8c8); border-radius:4px; }
.leg { position:absolute; top:12px; width:8px; height:90px; background:#1965e0; }
.leg-l { left:14px; } .leg-r { right:14px; }
.monitor { position:absolute; top:-70px; left:60px; width:100px; height:60px; background:#0d0d0d; border-radius:3px;
border:2px solid #333; }
.monitor::after { content:''; position:absolute; inset:6px; background:linear-gradient(160deg,#1965e0,#0d3a8a); }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
.badge-row { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; padding:3px 9px; border-radius:4px; }
.b-sale { background:#c10015; color:#fff; }
.b-cat { background:#e5e5e5; color:#555; }
h1 { font-size:23px; font-weight:600; margin:0; letter-spacing:-0.1px; }
.sub { font-size:13px; color:#333; margin:0; max-width:440px; line-height:1.5; }
.specs-row { display:flex; gap:22px; font-size:11px; color:#555; margin-top:2px; }
.specs-row b { display:block; color:#111; font-size:14px; font-weight:600; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:24px; font-weight:700; color:#111; }
.price-strike { font-size:14px; color:#777; text-decoration:line-through; }
.actions { display:flex; gap:10px; margin-top:4px; }
.btn-primary { background:#1965e0; color:#fff; border-radius:8px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:600; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #d4d4d4; color:#111; border-radius:8px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
.paylater { margin-top:auto; border-top:1px solid #e5e5e5; padding-top:12px; font-size:11px; color:#555; }
</style></head>
<body>
<nav>
<p class="brand">Autonomous</p>
<div class="navlinks"><span>Desks</span><span>Chairs</span><span>Storage</span><span>Deals</span></div>
<span class="cart">Cart (1)</span>
</nav>
<main>
<div class="stage">
<div class="desk"><div class="monitor"></div><div class="desktop"></div><div class="leg leg-l"></div><div class="leg leg-r"></div></div>
</div>
<div class="info">
<div class="badge-row"><span class="badge b-sale">Sale</span><span class="badge b-cat">Standing Desk</span></div>
<h1>SmartDesk Core — Dual Motor Standing Desk</h1>
<p class="sub">Motorized height adjustment from 29" to 48" with programmable memory presets and anti-collision sensing.</p>
<div class="specs-row">
<div><b>220 lb</b>Load Cap.</div>
<div><b>29–48"</b>Height Range</div>
<div><b>2</b>Memory Presets</div>
</div>
<div class="price-row"><span class="price">$379.00</span><span class="price-strike">$479.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Compare Desks</div>
</div>
<div class="paylater">Or 4 interest-free payments of $94.75 with Klarna.</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc000; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffc000;
border: 1px solid #ffc000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #291f00; color: #ffc000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; height:420px; background:
linear-gradient(180deg, transparent 60%, #000 100%),
radial-gradient(ellipse 80% 60% at 50% 30%, #1a1a1a 0%, #000 70%);
display:flex; flex-direction:column; }
nav { display:flex; align-items:center; justify-content:space-between; padding:20px 30px; }
.navside { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:0.5px; }
.bull { font-size:15px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.heroin { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.heroin h1 { font-size:76px; font-weight:400; letter-spacing:0; line-height:0.92; margin:0; text-transform:uppercase; }
.heroin p { font-size:13px; color:#c4c4c4; margin:0; text-transform:uppercase; letter-spacing:0.5px; }
.hexbtn { position:absolute; right:30px; bottom:20px; width:34px; height:34px; border:1.5px solid #fff;
clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); display:flex; align-items:center; justify-content:center; }
.hexbtn::after { content:''; border-style:solid; border-width:6px 0 6px 9px; border-color:transparent transparent transparent #fff; }
.progress { position:absolute; left:30px; right:30px; bottom:8px; height:1px; background:rgba(255,255,255,0.3); }
.progress::after { content:''; position:absolute; left:0; top:0; bottom:0; width:35%; background:#fff; }
.row { display:flex; gap:10px; justify-content:center; margin-top:8px; }
.btn-gold { background:#FFC000; color:#000; border:none; border-radius:0; padding:12px 26px; font-size:12px;
font-weight:400; text-transform:uppercase; }
.btn-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.5); border-radius:0; padding:11px 26px;
font-size:11px; font-weight:300; letter-spacing:0.2px; text-transform:uppercase; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); flex:1; }
.tile { position:relative; border-right:1px solid #202020; padding:16px 18px; display:flex; flex-direction:column; justify-content:flex-end; }
.tile:last-child { border-right:none; }
.tile .ph { position:absolute; inset:0; }
.t1 .ph { background:linear-gradient(160deg,#202020,#000 70%); }
.t2 .ph { background:linear-gradient(160deg,#181818,#000 70%); }
.t3 .ph { background:linear-gradient(160deg,#221a00,#000 70%); }
.tile .lbl { position:relative; font-size:10px; font-weight:400; letter-spacing:0.96px; text-transform:uppercase; color:#969696; }
.tile h3 { position:relative; font-size:20px; font-weight:400; margin:6px 0 0; text-transform:uppercase; }
footer { border-top:1px solid #202020; padding:10px 30px; display:flex; justify-content:space-between;
font-size:10px; color:#7D7D7D; text-transform:uppercase; letter-spacing:0.5px; }
</style></head>
<body>
<div class="hero">
<nav>
<div class="navside">☰ Menu</div>
<div class="bull">Lamborghini</div>
<div class="navside">⌕ ♡</div>
</nav>
<div class="heroin">
<h1>Temerario</h1>
<p>The new era of super sports cars</p>
<div class="row"><button class="btn-gold">Discover more</button><button class="btn-ghost">Start configuration</button></div>
</div>
<div class="hexbtn"></div>
<div class="progress"></div>
</div>
<div class="grid3">
<div class="tile t1"><div class="ph"></div><span class="lbl">Racing</span><h3>Squadra Corse</h3></div>
<div class="tile t2"><div class="ph"></div><span class="lbl">Heritage</span><h3>Museo</h3></div>
<div class="tile t3"><div class="ph"></div><span class="lbl">Configurator</span><h3>Ad Personam</h3></div>
</div>
<footer>
<span>© Lamborghini</span>
<span>Lamborghini · Models · Racing · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #007cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #007cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bffa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4b9cfb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007cff; color: #000000;
border: 1px solid #4b9cfb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #007cff; color: #f5f5f5;
border: 1px solid #278ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bffa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0c81fe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #eeeeee; }
.brand { font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#616161; font-weight:500; }
.right { display:flex; gap:10px; }
.btn-out { background:#fff; border:1px solid #e5e5e5; color:#111; border-radius:6px; height:36px;
padding:0 16px; font-size:13px; font-weight:500; display:flex; align-items:center; }
.btn-fill { background:#111; color:#fff; border-radius:6px; height:36px; padding:0 16px; font-size:13px;
font-weight:600; display:flex; align-items:center; }
.hero { text-align:center; padding:22px 40px 18px; }
.hero .pill { display:inline-block; background:rgba(0,124,255,0.10); color:#007cff; border-radius:9999px;
padding:3px 10px; font-size:11px; font-weight:600; margin-bottom:10px; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-0.02em; margin:0 0 10px; line-height:1.1; }
.hero p { font-size:15px; color:#333333; margin:0 0 16px; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 40px; }
.tile { background:#f7f7f7; border-radius:6px; height:150px; position:relative; overflow:hidden; }
.tile .grad { position:absolute; inset:0; }
.g1 { background:linear-gradient(135deg,#ffd9c2,#ff8a5c); }
.g2 { background:linear-gradient(135deg,#c9e8ff,#4b9cfb); }
.g3 { background:linear-gradient(135deg,#e0ffe0,#5cbf7d); }
.tile .label { position:absolute; left:10px; bottom:10px; background:#fff; border-radius:4px; padding:2px 8px;
font-size:11px; font-weight:600; }
.row2 { display:flex; gap:16px; padding:16px 40px 0; }
.card { flex:1; background:#fff; border:1px solid #eeeeee; border-radius:6px; padding:16px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 6px; }
.card p { font-size:12px; color:#616161; margin:0; line-height:1.5; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #eeeeee; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#616161; }
</style></head>
<body>
<nav>
<div class="brand">Studio</div>
<div class="navlinks"><span>Templates</span><span>Pricing</span><span>Community</span></div>
<div class="right"><div class="btn-out">Log in</div><div class="btn-fill">Start for free</div></div>
</nav>
<div class="hero">
<span class="pill">New</span>
<h1>The easiest way to build a beautiful website</h1>
<p>No code. All creative freedom.</p>
</div>
<div class="gallery">
<div class="tile"><div class="grad g1"></div><span class="label">Portfolio</span></div>
<div class="tile"><div class="grad g2"></div><span class="label">Agency site</span></div>
<div class="tile"><div class="grad g3"></div><span class="label">Landing page</span></div>
</div>
<div class="row2">
<div class="card"><h3>One canvas, every idea</h3><p>Sketch, prototype, and hand off — without leaving the file.</p></div>
<div class="card"><h3>Design and publish, all in one place</h3><p>Real responsive layout, interactions, and a fast hosted site.</p></div>
</div>
<footer><span>© Studio</span><span>Studio · Templates · Pricing · Community</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb2b51; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb2b51; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f09aab; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3c78; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb2b51; color: #000000;
border: 1px solid #ff3c78; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb2b51; color: #f5f5f5;
border: 1px solid #ed4b6b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f09aab; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee2e57; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0e1011; color:#eff0f4; box-sizing:border-box;
font-family:"Pretendard","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.phone { width:340px; height:600px; margin:20px auto; background:#0e1011; border-radius:28px;
border:6px solid #222327; position:relative; overflow:hidden; }
.live-video { height:380px; background:radial-gradient(circle at 30% 20%, #3a2230, #0e1011 70%);
position:relative; }
.top-row { position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between;
align-items:center; }
.avatar-ring { width:44px; height:44px; border-radius:50%;
background:conic-gradient(from -68deg, #ff2b51, #ffae8e); display:flex; align-items:center; justify-content:center; }
.avatar-ring .core { width:36px; height:36px; border-radius:50%; background:#222327; }
.live-badge { background:#eb2b51; color:#fff; font-size:10px; font-weight:700; padding:3px 8px;
border-radius:6px; margin-left:6px; }
.viewer { font-size:11px; color:#eff0f4; background:rgba(0,0,0,0.4); padding:4px 10px; border-radius:12px; }
.chat { position:absolute; left:12px; bottom:70px; font-size:11px; color:#eff0f4; line-height:1.6; }
.chat div { background:rgba(0,0,0,0.35); display:inline-block; padding:3px 8px; border-radius:10px;
margin-bottom:3px; }
.nudge { position:absolute; left:12px; right:12px; bottom:14px; height:38px;
background:rgba(47,23,253,0.10); color:#6456dc; font-size:13px; font-weight:600;
border-radius:4px; display:flex; align-items:center; padding:0 12px; }
.sheet { padding:14px; }
.price-row { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.price-row .now { color:#eb2b51; font-size:27px; font-weight:700; }
.price-row .old { color:#999999; font-size:13px; text-decoration:line-through; }
.coupon { background:#fff5f8; color:#eb2b51; border-radius:6px; padding:8px 12px; font-size:13px;
font-weight:700; margin-bottom:10px; }
.btn-row { display:flex; gap:8px; }
.btn-secondary { flex:1; background:#323232; color:#fff; border-radius:4px; height:34px; font-size:14px;
font-weight:500; display:flex; align-items:center; justify-content:center; }
.btn-primary { flex:1.6; background:#eb2b51; color:#fff; border-radius:8px; height:50px; font-size:16px;
font-weight:600; display:flex; align-items:center; justify-content:center; }
.brandbar { position:absolute; top:640px; }
.brand-label { position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:14px;
font-weight:700; color:#eff0f4; letter-spacing:0.3px; }
</style></head>
<body>
<span class="brand-label">Grip</span>
<div class="phone">
<div class="live-video">
<div class="top-row">
<div style="display:flex;align-items:center;">
<div class="avatar-ring"><div class="core"></div></div>
<span class="live-badge">LIVE</span>
</div>
<span class="viewer">1,204 watching</span>
</div>
<div class="chat">
<div>Sam: when's the restock?</div>
<div>Host: this deal is only live during the stream!</div>
</div>
<div class="nudge">⏱ Flash deal ends in 04:32</div>
</div>
<div class="sheet">
<div class="price-row"><span class="now">32% OFF</span><span class="old">$39.00</span></div>
<div class="coupon">Coupon price $26.52</div>
<div class="btn-row">
<div class="btn-secondary">Buy Now</div>
<div class="btn-primary">Add to Cart</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0b0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0b0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4fd1c5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0b0f; color: #4fd1c5;
border: 1px solid #4fd1c5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0b0f; color: #f5f5f5;
border: 1px solid #303034; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #162b2c; color: #4fd1c5;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0B0F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums; }
* { box-sizing:border-box; }
.screen { display:flex; flex-direction:column; width:960px; height:640px; }
nav { height:56px; flex:0 0 56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; }
.date-sel { font-size:20px; font-weight:700; letter-spacing:-0.3px; color:#FFFFFF; display:flex; align-items:center; gap:6px; }
.date-sel span { color:#6A6A73; font-size:14px; }
.topright { display:flex; align-items:center; gap:16px; }
.battery { width:20px; height:20px; border-radius:50%; background:conic-gradient(#9A9AA5 0deg 232deg, #27272F 232deg 360deg);
display:flex; align-items:center; justify-content:center; }
.battery::after { content:''; width:13px; height:13px; border-radius:50%; background:#0B0B0F; }
.battery-pct { font-size:11px; color:#9A9AA5; font-weight:600; }
.avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#4FD1C5,#7C6FF0); }
main { flex:1; display:grid; grid-template-columns:1.55fr 1fr; gap:22px; padding:6px 28px 0 28px; }
.col { display:flex; flex-direction:column; gap:14px; }
.hero-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:6px; }
.ring-hero { width:172px; height:172px; border-radius:50%;
background:conic-gradient(#4FD1C5 0deg 295deg, #27272F 295deg 360deg);
display:flex; align-items:center; justify-content:center; }
.ring-hero-inner { width:150px; height:150px; border-radius:50%; background:#0B0B0F;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.ring-score { font-size:44px; font-weight:700; letter-spacing:-1pt; line-height:1; }
.ring-label { font-size:12px; font-weight:700; letter-spacing:0.8pt; color:#4FD1C5; text-transform:uppercase; }
.hero-note { font-size:13px; color:#9A9AA5; text-align:center; max-width:320px; }
.card { background:#16161C; border-radius:16px; padding:16px 18px; }
.card-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#9A9AA5; margin-bottom:8px; }
.contrib-row { display:flex; align-items:center; justify-content:space-between; height:38px; border-bottom:1px solid #2A2A33; }
.contrib-row:last-child { border-bottom:none; }
.contrib-name { font-size:14px; font-weight:600; color:#FFFFFF; width:130px; flex:0 0 130px; }
.minibar-track { flex:1; height:6px; border-radius:3px; background:#27272F; margin:0 12px; overflow:hidden; }
.minibar-fill { height:100%; border-radius:3px; }
.contrib-val { font-size:13px; font-weight:600; color:#FFFFFF; width:42px; text-align:right; flex:0 0 42px; }
.rings-row { display:flex; gap:14px; }
.ring-med-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; background:#16161C; border-radius:16px; padding:12px 8px; }
.ring-med { width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ring-med-inner { width:64px; height:64px; border-radius:50%; background:#16161C;
display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-med-score { font-size:20px; font-weight:700; }
.ring-med-label { font-size:10px; font-weight:700; letter-spacing:0.6pt; text-transform:uppercase; margin-top:2px; }
.tile-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tile { background:#16161C; border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; gap:5px; }
.tile-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#9A9AA5; }
.tile-value { font-size:20px; font-weight:600; }
.tile-unit { font-size:12px; font-weight:400; color:#9A9AA5; }
.tile-delta { font-size:12px; font-weight:600; }
.insight { display:flex; gap:12px; align-items:flex-start; }
.insight-glyph { width:26px; height:26px; border-radius:8px; flex:0 0 26px; background:linear-gradient(135deg,#7C6FF0,#4FD1C5); margin-top:2px; }
.insight-title { font-size:15px; font-weight:600; color:#FFFFFF; }
.insight-body { font-size:12px; color:#9A9AA5; margin-top:2px; line-height:1.4; }
.tabbar { flex:0 0 56px; display:flex; align-items:center; justify-content:space-around;
background:rgba(11,11,15,0.82); border-top:1px solid #2A2A33; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab-dot { width:6px; height:6px; border-radius:50%; }
.tab.active .tab-dot { background:#FFFFFF; }
.tab:not(.active) .tab-dot { background:#6A6A73; }
.tab-label { font-size:11px; font-weight:600; letter-spacing:0.2pt; }
.tab.active .tab-label { color:#FFFFFF; }
.tab:not(.active) .tab-label { color:#6A6A73; }
</style></head>
<body>
<div class="screen">
<nav>
<div class="date-sel">Oura (iOS) <span>Today ⌄</span></div>
<div class="topright">
<div class="battery"></div>
<span class="battery-pct">86%</span>
<div class="avatar"></div>
</div>
</nav>
<main>
<div class="col">
<div class="hero-wrap">
<div class="ring-hero">
<div class="ring-hero-inner">
<div class="ring-score">82</div>
<div class="ring-label">Readiness</div>
</div>
</div>
<div class="hero-note">Your recovery is strong today — HRV trending up and resting heart rate is low.</div>
</div>
<div class="card">
<div class="card-title">Contributors</div>
<div class="contrib-row">
<span class="contrib-name">Sleep Balance</span>
<div class="minibar-track"><div class="minibar-fill" style="width:88%;background:#4FD1C5;"></div></div>
<span class="contrib-val">Optimal</span>
</div>
<div class="contrib-row">
<span class="contrib-name">Resting Heart Rate</span>
<div class="minibar-track"><div class="minibar-fill" style="width:74%;background:#4FD1C5;"></div></div>
<span class="contrib-val">54 bpm</span>
</div>
<div class="contrib-row">
<span class="contrib-name">HRV Balance</span>
<div class="minibar-track"><div class="minibar-fill" style="width:80%;background:#4FD1C5;"></div></div>
<span class="contrib-val">62 ms</span>
</div>
<div class="contrib-row">
<span class="contrib-name">Recovery Index</span>
<div class="minibar-track"><div class="minibar-fill" style="width:69%;background:#4FD1C5;"></div></div>
<span class="contrib-val">Good</span>
</div>
</div>
</div>
<div class="col">
<div class="rings-row">
<div class="ring-med-wrap">
<div class="ring-med" style="background:conic-gradient(#7C6FF0 0deg 266deg, #27272F 266deg 360deg);">
<div class="ring-med-inner"><div class="ring-med-score">74</div></div>
</div>
<div class="ring-med-label" style="color:#7C6FF0;">Sleep</div>
</div>
<div class="ring-med-wrap">
<div class="ring-med" style="background:conic-gradient(#F5A623 0deg 328deg, #27272F 328deg 360deg);">
<div class="ring-med-inner"><div class="ring-med-score">91</div></div>
</div>
<div class="ring-med-label" style="color:#F5A623;">Activity</div>
</div>
</div>
<div class="tile-grid">
<div class="tile">
<span class="tile-label">HRV</span>
<span><span class="tile-value">62</span><span class="tile-unit"> ms</span></span>
<span class="tile-delta" style="color:#4FD1C5;">+4</span>
</div>
<div class="tile">
<span class="tile-label">Resting HR</span>
<span><span class="tile-value">54</span><span class="tile-unit"> bpm</span></span>
<span class="tile-delta" style="color:#E0746B;">−2</span>
</div>
</div>
<div class="card insight">
<div class="insight-glyph"></div>
<div>
<div class="insight-title">Your HRV is trending up</div>
<div class="insight-body">A steady rise over 7 days suggests your body is adapting well to recent training load.</div>
</div>
</div>
</div>
</main>
<div class="tabbar">
<div class="tab active"><span class="tab-dot"></span><span class="tab-label">Today</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Vitals</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">My Health</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Explore</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc1c49; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc1c49; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f893a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c9032a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc1c49; color: #000000;
border: 1px solid #c9032a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc1c49; color: #f5f5f5;
border: 1px solid #fb3f65; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f893a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f41844; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#171b1f; box-sizing:border-box; font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; position:relative; }
nav.gnb { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #e7e7e8; }
.gnb-left { display:flex; align-items:center; gap:22px; }
.logo { font-size:18px; font-weight:700; color:#171b1f; letter-spacing:-0.3px; }
.gnb-links { display:flex; align-items:baseline; gap:20px; }
.gnb-links span.main { font-size:16px; font-weight:400; color:#171b1f; }
.gnb-links span.compact { font-size:12px; font-weight:600; color:#747678; }
.gnb-right { display:flex; align-items:center; gap:10px; }
.search { width:168px; height:32px; border:1px solid #cfd0d1; border-radius:4px; padding:0 10px; font-size:12px; color:#747678; display:flex; align-items:center; }
.btn-cta { background:#fc1c49; color:#ffffff; border-radius:4px; padding:0 16px; height:32px; display:flex; align-items:center; font-size:14px; font-weight:600; white-space:nowrap; }
.banner { flex:0 0 auto; margin:16px 28px 0; height:120px; border-radius:4px;
background:linear-gradient(115deg, #ffeb3b 0%, #f8930f 46%, #e91e63 100%);
position:relative; padding:18px 24px; overflow:hidden; }
.banner h1 { font-size:30px; font-weight:700; line-height:1.2; color:#171b1f; margin:0; max-width:540px; }
.banner .sub { font-size:12px; font-weight:600; color:#171b1f; opacity:0.72; margin-top:8px; }
.banner .dots { position:absolute; right:20px; bottom:14px; display:flex; gap:5px; background:rgba(0,0,0,0.2); border-radius:19px; padding:6px 10px; }
.banner .dot { width:5px; height:5px; border-radius:50%; background:#171b1f; opacity:0.4; }
.banner .dot.on { opacity:1; width:14px; border-radius:4px; }
.pills { flex:0 0 auto; display:flex; gap:8px; padding:16px 28px 0; }
.pill { height:32px; border-radius:4px; padding:0 14px; display:flex; align-items:center; font-size:13px; font-weight:600; white-space:nowrap; }
.pill.sel { background:#000000; color:#ffffff; }
.pill.un { background:#f5f5f6; color:#747678; }
.rail { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:0 28px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { border-radius:4px 4px 0 0; overflow:hidden; background:#ffffff; }
.thumb { height:132px; position:relative; }
.thumb.t1 { background:linear-gradient(135deg,#ebf3ff,#3b83ff); }
.thumb.t2 { background:linear-gradient(135deg,#fce4ec,#e91e63); }
.thumb.t3 { background:linear-gradient(135deg,#fff9c4,#f8930f); }
.rank { position:absolute; top:0; left:0; background:#171b1f; color:#ffffff; font-size:11px; font-weight:500; padding:4px 9px 4px 7px; border-radius:0 0 4px 0; }
.enr { position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,0.35); color:#ffffff; font-size:11px; font-weight:400; padding:2px 9px; border-radius:19px; }
.meta { padding:10px 2px 0; }
.tag { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px; margin-bottom:7px; }
.tag.blue { background:#ebf3ff; color:#3b83ff; }
.tag.pink { background:#fce4ec; color:#e91e63; }
.tag.yellow { background:#fff9c4; color:#f57f17; }
.title { font-size:14px; font-weight:700; color:#171b1f; margin:0 0 4px; line-height:1.3; }
.inst { font-size:12px; color:#747678; margin:0; }
footer { flex:0 0 30px; border-top:1px solid #e7e7e8; display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-size:11px; color:#747678; }
</style></head>
<body>
<div class="app">
<nav class="gnb">
<div class="gnb-left">
<span class="logo">Fastcampus</span>
<div class="gnb-links"><span class="main">All Courses</span><span class="compact">Corporate</span><span class="compact">Community</span></div>
</div>
<div class="gnb-right">
<div class="search">Search courses</div>
<div class="btn-cta">Enroll now</div>
</div>
</nav>
<div class="banner">
<h1>Pick a one-day class you like<br>Get the free-alert sign up today!</h1>
<div class="sub">Limited seats · This cohort closes Friday</div>
<div class="dots"><span class="dot on"></span><span class="dot"></span><span class="dot"></span></div>
</div>
<div class="pills">
<div class="pill sel">All</div>
<div class="pill un">AI Tech</div>
<div class="pill un">Design</div>
<div class="pill un">Data</div>
<div class="pill un">Marketing</div>
<div class="pill un">Video / 3D</div>
</div>
<div class="rail">
<div class="cards">
<div class="card">
<div class="thumb t1"><span class="rank">1st</span><span class="enr">1,940+</span></div>
<div class="meta"><span class="tag blue">Data / Dev</span><p class="title">AI Agent Bootcamp: Build & Ship</p><p class="inst">by Jiho Kang</p></div>
</div>
<div class="card">
<div class="thumb t2"><span class="rank">2nd</span><span class="enr">1,020+</span></div>
<div class="meta"><span class="tag pink">Design</span><p class="title">Visual Branding for Product Teams</p><p class="inst">by Yerin Song</p></div>
</div>
<div class="card">
<div class="thumb t3"><span class="rank">3rd</span><span class="enr">880+</span></div>
<div class="meta"><span class="tag yellow">Free</span><p class="title">One-Day Class: Career Reset Map</p><p class="inst">by Studio Team</p></div>
</div>
</div>
</div>
<footer>
<span>© Fastcampus</span>
<span>Fastcampus · Courses · Corporate Training · Community</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #9fe870; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #9fe870; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #51723c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #163300; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9fe870; color: #163300;
border: 1px solid #163300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #9fe870; color: #111111;
border: 1px solid #88c661; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #51723c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #89cb5e; color: #163300;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0e0f0c; box-sizing:border-box;
font-family:Inter,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:17px; color:#163300; }
.navlinks { display:flex; gap:20px; font-size:15px; color:#163300; font-weight:600; }
.row { display:flex; gap:10px; }
.pill { background:#9fe870; color:#163300; border-radius:9999px; height:44px; padding:0 22px; font-size:15px;
font-weight:600; display:flex; align-items:center; }
.pill-dark { background:#163300; color:#9fe870; border-radius:9999px; height:44px; padding:0 22px; font-size:15px;
font-weight:600; display:flex; align-items:center; }
.hero { text-align:center; padding:24px 32px 20px; }
.hero h1 { font-size:52px; font-weight:900; margin:0 0 14px; line-height:1.02; letter-spacing:-1px; }
.chips { display:flex; gap:10px; justify-content:center; margin-bottom:18px; }
.chip { border-radius:16px; height:32px; padding:0 16px; font-size:15px; font-weight:600; display:flex; align-items:center; }
.chip.on { background:#9fe870; color:#163300; }
.chip.off { background:transparent; color:#868685; border:1px solid #868685; }
.converter { background:#e8ebe6; border-radius:16px; margin:0 auto; max-width:520px; padding:20px; display:flex; align-items:center; gap:12px; }
.field { background:#ffffff; border-radius:10px; height:48px; flex:1; padding:0 16px; display:flex; align-items:center;
font-size:16px; color:#0e0f0c; }
.arrow { color:#454745; font-size:18px; }
.cardsrow { display:flex; gap:16px; padding:24px 32px 0; }
.card { flex:1; border:1px solid #e8ebe6; border-radius:16px; padding:18px; }
.card h3 { font-size:16px; margin:0 0 6px; }
.card p { font-size:13px; color:#454745; margin:0; line-height:1.5; }
</style></head>
<body>
<nav>
<span class="brand">Wise</span>
<div class="navlinks"><span>Personal</span><span>Business</span><span>Pricing</span></div>
<div class="row"><span class="pill-dark">Log in</span><span class="pill">Open an account</span></div>
</nav>
<section class="hero">
<h1>Money without borders</h1>
<div class="chips"><span class="chip on">Send money</span><span class="chip off">Spend</span><span class="chip off">Receive</span><span class="chip off">Hold</span></div>
<div class="converter">
<span class="field">1,000.00 USD</span>
<span class="arrow">→</span>
<span class="field">1,340,500 KRW</span>
</div>
</section>
<section class="cardsrow">
<div class="card"><h3>The real exchange rate</h3><p>No markups hidden in the rate — always the mid-market rate.</p></div>
<div class="card"><h3>Low, transparent fees</h3><p>See the exact fee before you send, every single time.</p></div>
<div class="card"><h3>Fast, most of the time instant</h3><p>Most transfers arrive within seconds, not days.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #22c55e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #22c55e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96dfb1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00d992; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #22c55e; color: #000000;
border: 1px solid #00d992; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #22c55e; color: #000000;
border: 1px solid #44cd76; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96dfb1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1dc866; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#050507; color:#f2f2f2; box-sizing:border-box;
font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #3d3a39; }
.brand { display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px; }
.bolt { width:14px; height:20px; background:#00d992; clip-path:polygon(60% 0,0 55%,45% 55%,30% 100%,100% 40%,55% 40%); }
.navlinks { display:flex; gap:20px; font-size:13px; color:#b8b3b0; }
.btn { background:#101010; color:#2fd6a1; border:1px solid #3d3a39; border-radius:6px; padding:8px 14px; font-size:13px; }
.hero { padding:38px 32px 20px; }
.hero h1 { font-size:44px; font-weight:400; letter-spacing:-1.2px; line-height:1.02; margin:0 0 12px; max-width:640px; }
.hero h1 span { color:#00d992; }
.hero p { font-size:16px; color:#b8b3b0; margin:0 0 18px; max-width:520px; }
.code { background:#101010; border:3px solid #3d3a39; border-radius:8px; padding:14px 18px; font-family:"SFMono-Regular",monospace;
font-size:13px; color:#f2f2f2; display:inline-flex; align-items:center; gap:16px; }
.code .cmd::before { content:"$ "; color:#8b949e; }
.code .copy { color:#2fd6a1; font-weight:700; font-size:12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 32px 0; }
.card { background:#101010; border:1px solid #3d3a39; border-radius:8px; padding:18px; }
.card.active { border:2px solid #00d992; }
.card h3 { font-size:16px; margin:0 0 8px; }
.card p { font-size:12.5px; color:#8b949e; line-height:1.5; margin:0; }
.badge { display:inline-block; font-size:11px; font-weight:600; letter-spacing:2px; color:#818cf8; text-transform:uppercase;
margin-bottom:8px; }
</style></head>
<body>
<nav>
<span class="brand"><span class="bolt"></span>VoltAgent</span>
<div class="navlinks"><span>Product</span><span>Use Cases</span><span>Resources</span><span>★ 8.7K</span></div>
<span class="btn">Docs</span>
</nav>
<section class="hero">
<h1>Open source TypeScript <span>AI agent</span> framework</h1>
<p>Memory, RAG, guardrails, tools, and MCP in one type-safe package — with n8n-style observability built in.</p>
<div class="code"><span class="cmd">npm create voltagent-app@latest</span><span class="copy">Copy</span></div>
</section>
<section class="grid">
<div class="card active"><span class="badge">Memory</span><h3>Persistent agent state</h3><p>Give every agent a durable memory layer across sessions and tools.</p></div>
<div class="card"><span class="badge">VoltOps</span><h3>Observability by default</h3><p>Trace every step, tool call, and token — production-ready from day one.</p></div>
<div class="card"><span class="badge">MCP</span><h3>Connect any tool</h3><p>Bring your own tools and models through the Model Context Protocol.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faad87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faad87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7029; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#333333; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.np { padding:26px 40px; text-align:center; }
.cover { width:220px; height:220px; margin:0 auto; border-radius:6px; background:linear-gradient(135deg,#ffb199,#ff5500);
box-shadow: rgba(0,0,0,0.18) 0 12px 32px; }
.track { font-size:22px; font-weight:700; margin-top:16px; }
.artist { font-size:14px; color:#999; margin-top:2px; }
.wave { display:flex; align-items:flex-end; gap:1.5px; height:64px; margin:18px 40px 4px; }
.bar { width:1.5px; background:#FF7700; opacity:.45; }
.bar.played { opacity:1; background:#FF5500; }
.time-row { display:flex; justify-content:space-between; padding:0 40px; font-size:11px; color:#999; }
.transport { display:flex; align-items:center; justify-content:center; gap:26px; margin-top:14px; }
.tr-ic { font-size:20px; color:#333; }
.play { width:64px; height:64px; border-radius:50%; background:#FF5500; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:24px; box-shadow: rgba(255,85,0,0.32) 0 6px 20px; }
.actionbar { display:flex; justify-content:center; gap:30px; margin-top:14px; font-size:13px; color:#999; }
.actionbar .on { color:#FF5500; }
.comments { padding:20px 40px; }
.c-hdr { font-size:13px; font-weight:700; color:#999; margin-bottom:10px; }
.c-row { display:flex; gap:10px; align-items:center; margin-top:8px; }
.c-av { width:28px; height:28px; border-radius:50%; }
.ts-chip { font-size:11px; font-weight:500; color:#FF5500; }
.c-body { font-size:14px; }
</style></head>
<body>
<div style="position:absolute; top:10px; left:16px; font-size:10px; font-weight:700; color:#FF5500; letter-spacing:.3px; text-transform:uppercase;">SoundCloud (iOS)</div>
<div class="np">
<div class="cover"></div>
<div class="track">Never Be Like You</div>
<div class="artist">flume</div>
</div>
<div style="display:flex; align-items:flex-end; gap:1.5px; height:64px; margin:0 40px 4px;">
<div style="display:flex;flex:1;gap:1.5px;align-items:flex-end;">
<div class="bar played" style="height:30%"></div><div class="bar played" style="height:60%"></div><div class="bar played" style="height:40%"></div>
<div class="bar played" style="height:80%"></div><div class="bar played" style="height:50%"></div><div class="bar played" style="height:70%"></div>
<div class="bar played" style="height:35%"></div><div class="bar played" style="height:65%"></div><div class="bar played" style="height:45%"></div>
<div class="bar played" style="height:75%"></div><div class="bar played" style="height:55%"></div>
<div class="bar" style="height:40%"></div><div class="bar" style="height:70%"></div><div class="bar" style="height:30%"></div>
<div class="bar" style="height:60%"></div><div class="bar" style="height:50%"></div><div class="bar" style="height:80%"></div>
<div class="bar" style="height:35%"></div><div class="bar" style="height:65%"></div><div class="bar" style="height:45%"></div>
</div>
</div>
<div class="time-row"><span>1:23</span><span>-2:09</span></div>
<div class="transport"><span class="tr-ic">🔀</span><span class="tr-ic">⏮</span><div class="play">▶</div><span class="tr-ic">⏭</span><span class="tr-ic">🔁</span></div>
<div class="actionbar"><span class="on">♥ 1,204</span><span>🔁 312</span><span>💬 84</span><span>↗</span></div>
<div class="comments">
<div class="c-hdr">Comments</div>
<div class="c-row"><div class="c-av" style="background:linear-gradient(135deg,#89b,#456);"></div><span class="ts-chip">@1:24</span><span class="c-body">that drop though 🔥</span></div>
<div class="c-row"><div class="c-av" style="background:linear-gradient(135deg,#e9a,#c56);"></div><span class="ts-chip">@2:03</span><span class="c-body">on repeat all week</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.14; letter-spacing: 0.36px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 0.72px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 420; line-height: 1.5; background: #000000; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 420; line-height: 1.5; background: #000000; color: #ffffff;
border: 1px solid #000000; border-radius: 9999px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 420; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.72px; background: #c1fbd4; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:300; font-size:17px; letter-spacing:1px; }
.navlinks { display:flex; gap:20px; font-size:12.5px; color:rgba(255,255,255,.7); }
.pill { border-radius:9999px; padding:9px 20px; font-size:13px; border:none; }
.pill.outline { background:transparent; border:1.5px solid #fff; color:#fff; }
.hero { position:relative; height:250px; padding:28px 32px; overflow:hidden;
background:radial-gradient(ellipse 640px 300px at 70% 30%, rgba(70,70,80,.5), transparent 65%),
linear-gradient(180deg,#050505,#000 70%); }
.hero h1 { font-size:66px; font-weight:330; letter-spacing:1.6px; line-height:1; margin:0 0 16px; max-width:600px; }
.hero .subrow { display:flex; gap:10px; }
.storefront { position:absolute; right:36px; bottom:0; width:210px; height:190px; border-radius:20px 20px 0 0;
background:linear-gradient(160deg,#1a1a1a,#0a0a0a); border:1px solid rgba(255,255,255,.1); }
.storefront::after { content:''; position:absolute; left:16px; top:20px; right:16px; height:8px; border-radius:4px; background:rgba(255,255,255,.14); }
.cream { background:#fbfbf5; color:#000; padding:22px 32px; }
.creamgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pc { background:#fff; border-radius:12px; padding:18px; border:1px solid #e4e4e7; }
.pc.featured { background:#c1fbd4; }
.pc h4 { font-size:15px; margin:0 0 6px; font-weight:500; letter-spacing:.3px; }
.pc .price { font-size:26px; font-weight:330; margin:0 0 6px; }
.pc p { font-size:11px; color:#52525b; margin:0; }
.pill.dark { background:#000; color:#fff; }
footer { background:#000; color:#fff; padding:14px 32px; display:flex; justify-content:space-between;
font-size:11px; color:#9797a2; }
</style></head>
<body>
<nav>
<div class="brand">Shopify</div>
<div class="navlinks"><span>Sell online</span><span>Point of sale</span><span>Enterprise</span></div>
<button class="pill outline">Log in</button>
</nav>
<section class="hero">
<h1>Cinematic<br>commerce</h1>
<div class="subrow">
<button class="pill" style="background:#fff;color:#000;">Start free trial</button>
<button class="pill outline">Watch film</button>
</div>
<div class="storefront"></div>
</section>
<section class="cream">
<div class="creamgrid">
<div class="pc"><h4>Basic</h4><div class="price">$29</div><p>For solo merchants starting out</p></div>
<div class="pc featured"><h4>Grow</h4><div class="price">$79</div><p>Best for scaling storefronts</p><button class="pill dark">Start free trial</button></div>
<div class="pc"><h4>Advanced</h4><div class="price">$299</div><p>Custom reporting & support</p></div>
</div>
</section>
<footer>
<span>© Shopify</span>
<span>Shopify · Themes · Apps · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace; }
.map { position:relative; width:960px; height:640px; background:#F2F2F2;
background-image: linear-gradient(#E5E5E5 1px, transparent 1px), linear-gradient(90deg, #E5E5E5 1px, transparent 1px);
background-size:40px 40px; }
.water { position:absolute; width:260px; height:180px; background:#D9E5F2; top:60px; right:0; border-radius:0 0 0 120px; }
.route { position:absolute; top:120px; left:120px; width:520px; height:5px; background:#000; border-radius:3px; }
.pin { position:absolute; width:32px; height:40px; background:#000; border-radius:16px 16px 16px 2px; top:96px; left:600px; transform:rotate(45deg); }
.mapctrl { position:absolute; right:20px; top:100px; width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:rgba(0,0,0,0.12) 0 2px 8px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.sheet { position:absolute; left:0; right:0; bottom:0; height:290px; background:#fff; border-radius:16px 16px 0 0; box-shadow:rgba(0,0,0,0.08) 0 -4px 24px; padding:10px 24px 24px; }
.grabber { width:36px; height:4px; background:#E5E5E5; border-radius:2px; margin:0 auto 16px; }
.whereto { height:56px; background:#F6F6F6; border-radius:8px; display:flex; align-items:center; gap:14px; padding:0 16px; font-size:18px; font-weight:500; }
.dotcol { display:flex; flex-direction:column; align-items:center; gap:3px; }
.dotcol span { width:8px; height:8px; background:#000; }
.dotcol .line { width:1px; height:14px; background:#000; border-left:1px dashed #000; background:none; }
.payment { display:flex; align-items:center; height:44px; margin-top:12px; font-size:15px; font-weight:500; }
.payment .chevron { margin-left:auto; color:#757575; }
.options { display:flex; gap:12px; margin-top:14px; }
.opt { flex:1; border:1px solid #E5E5E5; border-radius:8px; padding:12px; text-align:center; }
.opt.selected { border:2px solid #000; background:#F6F6F6; }
.opt .car { font-size:26px; }
.opt .name { font-size:14px; font-weight:500; margin-top:4px; }
.opt .eta { font-size:11px; color:#757575; }
.opt .price { font-size:15px; font-weight:600; margin-top:4px; }
.cta { position:absolute; left:24px; right:24px; bottom:24px; height:52px; background:#000; color:#fff; border-radius:8px; display:none; }
</style></head>
<body>
<div class="map">
<div class="water"></div>
<div class="route"></div>
<div class="pin"></div>
<div class="mapctrl">◎</div>
<div class="sheet">
<div class="grabber"></div>
<div class="whereto">
<div class="dotcol"><span></span><span style="height:14px;width:1px;background:#000"></span><span></span></div>
Where to?
</div>
<div class="payment mono">Uber (iOS) · Visa ·· 4242<span class="chevron">›</span></div>
<div class="options">
<div class="opt selected"><div class="car">🚗</div><div class="name">UberX</div><div class="eta mono">3 min · 4 seats</div><div class="price mono">$14.82</div></div>
<div class="opt"><div class="car">🚙</div><div class="name">Comfort</div><div class="eta mono">5 min · 4 seats</div><div class="price mono">$19.40</div></div>
<div class="opt"><div class="car">🚐</div><div class="name">XL</div><div class="eta mono">6 min · 6 seats</div><div class="price mono">$26.10</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f82f62; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f82f62; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f69cb3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #de2a60; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f82f62; color: #000000;
border: 1px solid #de2a60; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f82f62; color: #f5f5f5;
border: 1px solid #f84f7a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f69cb3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f42e62; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:17px; color:#f82f62; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#999ca1; }
.navlinks span.on { color:#ffffff; }
.btn { background:#f82f62; color:#ffffff; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:500; }
.billboard { height:180px; margin:0 32px 18px; border-radius:4px; background:linear-gradient(100deg,#1a1a1a,#3a1120 60%,#f82f62);
position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; overflow:hidden; }
.billboard::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent,rgba(0,0,0,0.85)); }
.billboard .b { position:relative; z-index:1; }
.billboard h2 { font-size:26px; font-weight:700; margin:0 0 6px; }
.billboard .row { display:flex; gap:8px; align-items:center; font-size:12px; color:#999ca1; }
.star { color:#f82f62; font-weight:700; }
.row-title { padding:0 32px; font-size:18px; font-weight:700; margin:0 0 10px; }
.grid { display:flex; gap:10px; padding:0 32px 20px; }
.poster { width:110px; height:156px; border-radius:4px; flex-shrink:0; position:relative; }
.p1 { background:linear-gradient(160deg,#3a2050,#7a2050); }
.p2 { background:linear-gradient(160deg,#204030,#1a6640); }
.p3 { background:linear-gradient(160deg,#402020,#802020); }
.p4 { background:linear-gradient(160deg,#1a2a40,#204a80); }
.p5 { background:linear-gradient(160deg,#302a10,#7a6020); }
.p6 { background:linear-gradient(160deg,#2a1030,#601a70); }
</style></head>
<body>
<nav>
<span class="brand">Watcha</span>
<div class="navlinks"><span class="on">Movies</span><span>Series</span><span>WatchaPedia</span></div>
<span class="btn">Log in</span>
</nav>
<div class="billboard"><div class="b">
<h2>The Long Ferry</h2>
<div class="row"><span class="star">★ 4.4</span><span>2026 · Drama · 118 min</span></div>
</div></div>
<div class="row-title">Recommended for you</div>
<div class="grid">
<div class="poster p1"></div><div class="poster p2"></div><div class="poster p3"></div>
<div class="poster p4"></div><div class="poster p5"></div><div class="poster p6"></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2f76aa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2f76aa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9cbcd3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fafafa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f76aa; color: #fafafa;
border: 1px solid #fafafa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2f76aa; color: #f5f5f5;
border: 1px solid #4f8ab6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9cbcd3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4f8bb7; color: #fafafa;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#000000; box-sizing:border-box;
font-family:"Noto Sans TC", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:52px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #e0e0e0; }
.brand { font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:16px; font-size:13px; color:#000000; }
.navlinks span.on { color:#ee5103; font-weight:700; }
.layout { display:flex; gap:18px; padding:18px 30px; }
.main { flex:2.2; }
.headline { font-size:20px; font-weight:500; line-height:1.4; letter-spacing:1px; margin:0 0 10px; }
.lead { display:flex; gap:14px; margin-bottom:14px; }
.lead .img { width:230px; height:150px; background:linear-gradient(150deg,#e2e2e2,#c7c7c7); flex-shrink:0; }
.lead .body { font-size:13px; color:#777777; line-height:1.6; }
.item { display:flex; gap:10px; padding:10px 0; border-top:1px solid #e0e0e0; }
.item .img { width:70px; height:52px; background:#e0e0e0; flex-shrink:0; }
.item .t { font-size:14px; line-height:1.4; }
.side { flex:1; display:flex; flex-direction:column; gap:10px; }
.panel { background:#ffffff; border:1px solid #e0e0e0; padding:14px; }
.panel .h { font-size:14px; font-weight:700; margin-bottom:8px; color:#2f76aa; }
.panel .row { font-size:12px; padding:6px 0; border-top:1px solid #e0e0e0; color:#000000; }
.panel .row:first-of-type { border-top:none; }
.loadmore { background:#c7c7c7; color:#ffffff; font-size:15px; padding:6px 40px; border-radius:0 0 3px 3px;
display:inline-block; margin-top:8px; }
</style></head>
<body>
<nav>
<span class="brand">UDN</span>
<div class="navlinks"><span class="on">Headlines</span><span>Politics</span><span>Business</span><span>World</span><span>Life</span></div>
</nav>
<div class="layout">
<div class="main">
<div class="lead">
<div class="img"></div>
<div class="body">
<div class="headline">Cross-agency task force launches city resilience pilot program</div>
Officials say the program will run six-month trials in three pilot districts before evaluating a full-scale rollout timeline.
</div>
</div>
<div class="item"><div class="img"></div><div class="t">New round of regional revitalization grants approved, focused on youth returning home for work</div></div>
<div class="item"><div class="img"></div><div class="t">Industry groups call for faster digital transformation support to lower barriers for small businesses</div></div>
<div class="item"><div class="img"></div><div class="t">Weather bureau issues alert for continued rainfall, urges caution in low-lying areas</div></div>
<span class="loadmore">More news</span>
</div>
<div class="side">
<div class="panel">
<div class="h">Trending</div>
<div class="row">1. City resilience pilot program enters testing phase</div>
<div class="row">2. Youth homecoming employment grants announced</div>
<div class="row">3. Continued rainfall alert issued</div>
</div>
<div class="panel">
<div class="h">Newsletter</div>
<div class="row">Daily top stories, delivered straight to your inbox.</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"YouandiNewKr","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { font-size:19px; font-weight:600; }
.navlinks { display:flex; gap:0; }
.navlinks span { padding:0 20px; font-size:18px; font-weight:500; }
.hero { height:260px; background:#000000; color:#ffffff; display:flex; flex-direction:column;
justify-content:center; padding:0 40px; }
.hero h2 { font-size:52px; font-weight:700; line-height:1.4; margin:0 0 16px; }
.btn-outline { display:inline-block; background:transparent; color:#ffffff; border:1px solid rgba(255,255,255,0.6);
border-radius:3px; padding:12px 29px; font-size:16px; width:fit-content; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0; }
.card { border:none; }
.card .thumb { height:150px; background:linear-gradient(135deg,#111111,#333333); }
.card .label { padding:12px; font-size:16px; font-weight:500; text-align:center; }
footer { border-top:1px solid #eeeeee; padding:14px 40px; text-align:center; font-size:12px; color:#000000; }
</style></head>
<body>
<nav>
<span class="logo">Hyundai Card</span>
<div class="navlinks"><span>Cards</span><span>Benefits</span><span>Digital</span><span>Events</span></div>
</nav>
<section class="hero">
<h2>THE BLACK<br />Hyundai Card</h2>
<span class="btn-outline">Learn More</span>
</section>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="label">the Black</div></div>
<div class="card"><div class="thumb"></div><div class="label">the Purple</div></div>
<div class="card"><div class="thumb"></div><div class="label">the Green</div></div>
<div class="card"><div class="thumb"></div><div class="label">the Red</div></div>
</div>
<footer>© Hyundai Card</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #080808; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; gap:20px; padding:0 32px;
border-bottom:1px solid #e5e5e5; }
.brand { font-size:19px; font-weight:700; color:#000000; letter-spacing:-0.3px; margin:0; white-space:nowrap; }
.search { flex:1; height:30px; display:flex; align-items:center; gap:8px; padding:0 28px 0 0;
border-bottom:1px solid #dddddd; max-width:340px; }
.search span { font-size:16px; color:#9d9d9d; }
.search::before { content:''; width:16px; height:16px; border:2px solid #000000; border-radius:50%; flex:none; }
.util { display:flex; align-items:center; gap:14px; margin-left:auto; }
.recent-drop { height:32px; display:flex; align-items:center; gap:6px; padding:0 16px 0 16px;
border:1px solid #dddddd; font-size:13px; color:#333333; white-space:nowrap; }
.recent-drop::after { content:'▾'; font-size:9px; color:#757575; }
.tabs { display:flex; gap:10px; padding:16px 32px 14px; border-bottom:1px solid #eeeeee; }
.tab { height:46px; display:flex; align-items:center; gap:4px; padding:0 16px 0 16px;
border:1px solid #eeeeee; border-radius:23px; font-size:15px; font-weight:500; color:#666666;
background:#ffffff; white-space:nowrap; }
.tab.on { background:#000000; color:#ffffff; border-color:#000000; font-weight:600; }
.tab .dot { width:22px; height:22px; border-radius:50%; background:#f3f3f3; flex:none; }
.tab.on .dot { background:rgba(255,255,255,0.25); }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:20px 32px 28px; }
.card { display:flex; flex-direction:column; gap:8px; }
.thumb { width:100%; aspect-ratio:1/1; position:relative; overflow:hidden; }
.thumb.a { background:linear-gradient(135deg,#f5f5f5,#e9e9e9); }
.thumb.b { background:linear-gradient(135deg,#f0eee6,#e3ded0); }
.thumb.c { background:linear-gradient(135deg,#eef0f5,#dfe3ec); }
.thumb.d { background:linear-gradient(135deg,#f4efee,#e6dbda); }
.badge { position:absolute; top:8px; left:8px; background:#000000; color:#ffffff; font-size:10px;
font-weight:700; padding:3px 7px; letter-spacing:0.02em; }
.card .tag { font-size:11px; color:#757575; font-weight:500; }
.card .name { font-size:13px; color:#333333; line-height:1.35; font-weight:500;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:35px; }
.price-row { display:flex; align-items:baseline; gap:6px; }
.discount { font-size:15px; font-weight:700; color:#000000; }
.price { font-size:14px; font-weight:600; color:#333333; }
.orig { font-size:12px; color:#9d9d9d; text-decoration:line-through; }
</style></head>
<body>
<header>
<p class="brand">Lotte ON</p>
<div class="search"><span>Search for brands, benefits, categories</span></div>
<div class="util">
<div class="recent-drop">Recently viewed</div>
</div>
</header>
<div class="tabs">
<div class="tab on"><span class="dot"></span>All</div>
<div class="tab"><span class="dot"></span>Beauty</div>
<div class="tab"><span class="dot"></span>Fashion</div>
<div class="tab"><span class="dot"></span>Grocery</div>
<div class="tab"><span class="dot"></span>Kids</div>
<div class="tab"><span class="dot"></span>Luxury</div>
</div>
<div class="grid">
<div class="card"><div class="thumb a"><span class="badge">BEST</span></div>
<span class="tag">Home Living</span><span class="name">Linen blend cushion cover, two-tone stitch edge</span>
<div class="price-row"><span class="discount">32%</span><span class="price">$13.90</span><span class="orig">$20.40</span></div></div>
<div class="card"><div class="thumb b"></div>
<span class="tag">Grocery</span><span class="name">Daily harvest mixed greens, chilled delivery pack</span>
<div class="price-row"><span class="discount">12%</span><span class="price">$7.30</span><span class="orig">$8.30</span></div></div>
<div class="card"><div class="thumb c"><span class="badge">NEW</span></div>
<span class="tag">Beauty</span><span class="name">Barrier repair cream, ceramide complex 50ml</span>
<div class="price-row"><span class="discount">20%</span><span class="price">$17.60</span><span class="orig">$22.00</span></div></div>
<div class="card"><div class="thumb d"></div>
<span class="tag">Fashion</span><span class="name">Relaxed wool-blend coat, unisex fit</span>
<div class="price-row"><span class="discount">40%</span><span class="price">$65.40</span><span class="orig">$108.60</span></div></div>
<div class="card"><div class="thumb b"></div>
<span class="tag">Kids</span><span class="name">Organic cotton sleep set, 4-piece</span>
<div class="price-row"><span class="discount">15%</span><span class="price">$24.90</span><span class="orig">$29.30</span></div></div>
<div class="card"><div class="thumb a"><span class="badge">BEST</span></div>
<span class="tag">Home Living</span><span class="name">Ceramic dinnerware set, matte glaze, 4 pieces</span>
<div class="price-row"><span class="discount">25%</span><span class="price">$33.00</span><span class="orig">$44.10</span></div></div>
<div class="card"><div class="thumb c"></div>
<span class="tag">Luxury</span><span class="name">Structured leather tote, top handle</span>
<div class="price-row"><span class="discount">10%</span><span class="price">$229.20</span><span class="orig">$254.10</span></div></div>
<div class="card"><div class="thumb d"><span class="badge">NEW</span></div>
<span class="tag">Grocery</span><span class="name">Cold-pressed juice bundle, 6 bottles</span>
<div class="price-row"><span class="discount">18%</span><span class="price">$16.10</span><span class="orig">$19.60</span></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d62872; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d62872; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e799ba; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d9006c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d62872; color: #ffffff;
border: 1px solid #d9006c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d62872; color: #f5f5f5;
border: 1px solid #db4987; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e799ba; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d62271; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f2f2; color:#404040; box-sizing:border-box;
font-family:"Microsoft JhengHei UI", "PingFang TC", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.price { font-family:"Oxygen","Century Gothic",sans-serif; }
body { display:flex; flex-direction:column; }
header { flex:0 0 44px; background:#d62872; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 20px; }
.brand { font-size:22px; font-weight:700; margin:0; }
.searchbar { flex:1; max-width:340px; margin:0 24px; height:30px; background:#ffffff; border-radius:15px;
display:flex; align-items:center; padding:0 6px 0 14px; color:#727272; font-size:13px; }
.cartwrap { position:relative; font-size:20px; }
.cartbadge { position:absolute; top:-6px; right:-10px; background:#e5047e; color:#fff; border-radius:8px;
font-size:10px; padding:1px 5px; font-weight:700; }
.catrow { flex:0 0 40px; background:#ffffff; border-bottom:1px solid #ededed; display:flex; align-items:center;
gap:22px; padding:0 20px; font-size:13px; color:#404040; }
.catrow span.active { color:#d62872; font-weight:700; border-bottom:2px solid #d62872; padding-bottom:11px; }
.banner { flex:0 0 auto; margin:12px 20px 0; height:64px; border-radius:8px;
background:linear-gradient(90deg,#fff5f9,#f9f9f9); border:1px solid #fbe9f1; display:flex; align-items:center;
padding:0 20px; justify-content:space-between; }
.banner b { color:#d62872; font-size:17px; }
.banner span { font-size:12px; color:#727272; }
.countdown { background:#dd2222; color:#fff; font-size:12px; font-weight:700; border-radius:4px; padding:4px 10px; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:12px 20px; align-content:start; }
.card { position:relative; background:#fafafa; border-radius:8px; box-shadow:0 1px 2px 0 rgba(0,0,0,.05);
overflow:hidden; display:flex; flex-direction:column; }
.thumb { height:96px; position:relative; }
.th1 { background:linear-gradient(135deg,#ffd6e8,#ff9fc3); }
.th2 { background:linear-gradient(135deg,#c9e7ff,#8fbfec); }
.th3 { background:linear-gradient(135deg,#ffe7c2,#ffbb6b); }
.th4 { background:linear-gradient(135deg,#d8f5df,#8fdba3); }
.rank { position:absolute; top:6px; left:6px; width:22px; height:22px; border-radius:4px;
background:linear-gradient(0.34deg,#ffaa3b,#ff9203); color:#fff; font-size:12px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.info { padding:8px 10px 10px; flex:1; display:flex; flex-direction:column; gap:4px; }
.info .name { font-size:12px; color:#404040; line-height:1.35; height:32px; overflow:hidden; }
.info .price-row { display:flex; align-items:baseline; gap:5px; }
.price-now { color:#dd2222; font-weight:700; font-size:16px; }
.price-old { color:#999999; font-size:11px; text-decoration:line-through; }
.tag { font-size:10px; color:#027bff; }
footer { flex:0 0 40px; background:#eeeeee; color:#484848; font-size:12px; display:flex;
align-items:center; justify-content:center; gap:18px; }
</style></head>
<body>
<header>
<p class="brand">momo Shopping</p>
<div class="searchbar">Fall/winter new dresses</div>
<div class="cartwrap">🛒<span class="cartbadge">5</span></div>
</header>
<div class="catrow">
<span class="active">Best sellers</span><span>Beauty</span><span>Fashion</span><span>Electronics</span><span>Home & living</span><span>Grocery</span>
</div>
<div class="banner">
<div><b>Flash sale — up to 50% off storewide</b> <span>— once a year, don't miss it!</span></div>
<div class="countdown">02:14:36 left</div>
</div>
<div class="grid">
<div class="card"><div class="thumb th1"><span class="rank">1</span></div>
<div class="info"><div class="name">Hydrating essence mask, 10-pack, deep repair</div>
<div class="price-row price"><span class="price-now">$399</span><span class="price-old">$690</span></div>
<span class="tag">24H fast delivery</span></div></div>
<div class="card"><div class="thumb th2"><span class="rank">2</span></div>
<div class="info"><div class="name">Wireless noise-cancelling earbuds, 12h battery</div>
<div class="price-row price"><span class="price-now">$1,290</span><span class="price-old">$1,980</span></div>
<span class="tag">Store pickup</span></div></div>
<div class="card"><div class="thumb th3"><span class="rank">3</span></div>
<div class="info"><div class="name">Fall knit dress, slimming long sleeve</div>
<div class="price-row price"><span class="price-now">$890</span><span class="price-old">$1,590</span></div>
<span class="tag">10-day return</span></div></div>
<div class="card"><div class="thumb th4"></div>
<div class="info"><div class="name">Ceramic non-stick pan, 28cm, induction-ready</div>
<div class="price-row price"><span class="price-now">$650</span><span class="price-old">$990</span></div>
<span class="tag">24H fast delivery</span></div></div>
<div class="card"><div class="thumb th2"></div>
<div class="info"><div class="name">Kids' spill-proof water bottle, 700ml</div>
<div class="price-row price"><span class="price-now">$299</span><span class="price-old">$450</span></div>
<span class="tag">New member gift</span></div></div>
<div class="card"><div class="thumb th1"></div>
<div class="info"><div class="name">Aroma diffuser, silent, large capacity</div>
<div class="price-row price"><span class="price-now">$1,080</span><span class="price-old">$1,690</span></div>
<span class="tag">Store pickup</span></div></div>
<div class="card"><div class="thumb th3"></div>
<div class="info"><div class="name">Sunscreen SPF50+, lightweight, 2-pack</div>
<div class="price-row price"><span class="price-now">$560</span><span class="price-old">$820</span></div>
<span class="tag">24H fast delivery</span></div></div>
<div class="card"><div class="thumb th4"></div>
<div class="info"><div class="name">Carry-on luggage, 24in, lightweight, scratch-proof</div>
<div class="price-row price"><span class="price-now">$2,390</span><span class="price-old">$3,980</span></div>
<span class="tag">10-day return</span></div></div>
</div>
<footer>
<span>24H fast delivery</span><span>10-day return</span><span>16 payment methods</span><span>© momo Shopping</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #742ddd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #742ddd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bb9bea; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6211c8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #742ddd; color: #ffffff;
border: 1px solid #6211c8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #742ddd; color: #f5f5f5;
border: 1px solid #894de1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bb9bea; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7129da; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0D0D0D; box-sizing:border-box;
font-family:Georgia, "Times New Roman", serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 44px;
font-family:-apple-system, sans-serif; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:500; }
.pill-dark { background:#0D0D0D; color:#FFFFFF; border:1px solid #0D0D0D; border-radius:24px; height:38px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:600; font-family:-apple-system,sans-serif; }
.hero { padding:26px 44px 16px; }
.hero h1 { font-size:56px; font-weight:500; line-height:1.05; margin:0 0 14px; max-width:700px; }
.hero p { font-family:-apple-system, sans-serif; font-size:18px; color:#424242; margin:0; max-width:480px; }
.chatpanel { margin:20px 44px 0; background:#f2f3f7; border:1px solid #e3e5ef; border-radius:12px; padding:20px;
font-family:-apple-system, sans-serif; }
.bubble { max-width:60%; padding:10px 14px; border-radius:16px; font-size:14px; margin-bottom:10px; }
.in { background:#EEEEEE; color:rgba(0,0,0,0.87); }
.out { background:#742DDD; color:#ffffff; margin-left:auto; }
.row-cta { display:flex; gap:12px; padding:18px 44px 0; font-family:-apple-system, sans-serif; }
.outline-pill { background:#ffffff; color:#0D0D0D; border:1px solid #0D0D0D; border-radius:24px; padding:12px 20px; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Sendbird</p>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Docs</span></div>
<button class="pill-dark">Get started</button>
</nav>
<section class="hero">
<h1>The AI customer experience platform</h1>
<p>Chat, calls, and AI agents your users never have to think twice about.</p>
</section>
<div class="chatpanel">
<div class="bubble in">Hey — is this refund still processing?</div>
<div class="bubble out">Yes! It'll land in 2–3 business days.</div>
<div class="bubble in">Perfect, thank you.</div>
</div>
<div class="row-cta">
<button class="pill-dark">Talk to sales</button>
<button class="outline-pill">See docs</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #ff1a1a;
border: 1px solid #ff1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffdada; color: #ff1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#2B2B2B; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { width:100%; height:100%; display:flex; flex-direction:column; }
.photohdr { position:relative; height:154px; flex-shrink:0;
background:linear-gradient(135deg,#e6b980 0%,#c8895a 35%,#8a5a3a 70%,#5c3a24 100%); }
.circbtn { position:absolute; top:14px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,0.45);
display:flex; align-items:center; justify-content:center; }
.circbtn.back { left:14px; } .circbtn.share { right:14px; }
.circbtn svg { width:16px; height:16px; }
.photocount { position:absolute; right:14px; bottom:12px; background:rgba(0,0,0,0.6); color:#fff; font-size:11px;
font-weight:600; padding:4px 8px; border-radius:6px; }
.content { flex:1; min-height:0; padding:0 20px; display:flex; flex-direction:column; }
.bizname { font-size:24px; font-weight:800; margin:12px 0 6px; letter-spacing:-0.3px; }
.starsrow { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.stars { display:flex; gap:2px; }
.stars svg { width:16px; height:16px; }
.ratenum { font-size:15px; font-weight:700; }
.revlink { font-size:14px; font-weight:700; color:#0073BB; }
.catline { font-size:14px; font-weight:600; color:#6E6E6E; margin-bottom:4px; }
.hoursline { font-size:14px; color:#6E6E6E; margin-bottom:10px; }
.hoursline b { color:#2DA44E; font-weight:700; }
.actionrow { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.writebtn { background:#FF1A1A; color:#fff; font-size:15px; font-weight:700; border-radius:8px; padding:11px 22px;
display:flex; align-items:center; gap:8px; }
.writebtn svg { width:16px; height:16px; }
.ghostbtn { width:56px; height:44px; border:1px solid #E0E0E0; border-radius:8px; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:3px; }
.ghostbtn svg { width:16px; height:16px; color:#6E6E6E; }
.ghostbtn span { font-size:9px; font-weight:600; color:#6E6E6E; }
.band { height:8px; background:#F0F0F0; margin:0 -20px 10px; flex-shrink:0; }
.sectionhdr { font-size:18px; font-weight:700; margin-bottom:8px; }
.reviews { flex:1; min-height:0; display:flex; flex-direction:column; gap:0; }
.rcard { display:flex; padding:12px 0; border-bottom:1px solid #E0E0E0; }
.rcard:last-child { border-bottom:none; }
.ravatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:14px; font-weight:700; }
.rav1 { background:linear-gradient(135deg,#D32323,#8A1818); }
.rav2 { background:linear-gradient(135deg,#0073BB,#163A55); }
.rbody { margin-left:12px; flex:1; min-width:0; }
.rtop { display:flex; justify-content:space-between; align-items:flex-start; }
.rname { font-size:14px; font-weight:700; }
.rloc { font-size:12px; font-weight:600; color:#6E6E6E; }
.rdate { font-size:12px; font-weight:600; color:#6E6E6E; }
.rstars { display:flex; gap:1px; margin:5px 0; }
.rstars svg { width:14px; height:14px; }
.rtext { font-size:13px; line-height:1.5; color:#2B2B2B; }
.votes { display:flex; gap:16px; margin-top:8px; }
.vote { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#6E6E6E; }
.vote svg { width:14px; height:14px; }
.vote.on { color:#FF1A1A; }
.star-f { fill:#F25C05; } .star-e { fill:#E3E3E0; }
</style></head>
<body>
<div class="wrap">
<div class="photohdr">
<div class="circbtn back"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg></div>
<div class="circbtn share"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><circle cx="6" cy="12" r="2.4"/><circle cx="18" cy="6" r="2.4"/><circle cx="18" cy="18" r="2.4"/><path d="M8.2 10.8L15.8 7.2M8.2 13.2l7.6 3.6"/></svg></div>
<div class="photocount">1 / 248 photos</div>
</div>
<div class="content">
<p class="bizname">Yelp (iOS)</p>
<div class="starsrow">
<div class="stars">
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-e"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
</div>
<span class="ratenum">4.3</span>
<span class="revlink">3,812 reviews</span>
</div>
<div class="catline">$$ · Bakeries · Cafes</div>
<div class="hoursline"><b>Open</b> · Closes 8:00 PM</div>
<div class="actionrow">
<div class="writebtn"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>Write a Review</div>
<div class="ghostbtn"><svg viewBox="0 0 24 24" fill="none" stroke="#6E6E6E" stroke-width="2"><path d="M6 3h12v18l-6-4-6 4z"/></svg><span>Save</span></div>
<div class="ghostbtn"><svg viewBox="0 0 24 24" fill="none" stroke="#6E6E6E" stroke-width="2"><circle cx="6" cy="12" r="2.2"/><circle cx="18" cy="6" r="2.2"/><circle cx="18" cy="18" r="2.2"/><path d="M8 10.8l7.7-3.6M8 13.2l7.7 3.6"/></svg><span>Share</span></div>
<div class="ghostbtn"><svg viewBox="0 0 24 24" fill="none" stroke="#6E6E6E" stroke-width="2"><path d="M9 20l-5-2V5l5 2M9 20l6-2M9 20V7M15 18l5 2V7l-5-2M15 18V5M15 5L9 7"/></svg><span>Directions</span></div>
</div>
<div class="band"></div>
<div class="sectionhdr">Recommended Reviews</div>
<div class="reviews">
<div class="rcard">
<div class="ravatar rav1">HK</div>
<div class="rbody">
<div class="rtop">
<div><span class="rname">Hana Kim</span><div class="rloc">San Francisco, CA · 142 reviews</div></div>
<span class="rdate">Oct 9, 2024</span>
</div>
<div class="rstars">
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
</div>
<div class="rtext">The sourdough here ruined every other bakery for me. Got here right at open and the corner table by the window was worth the early alarm.</div>
<div class="votes">
<div class="vote on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 22V11M2 13v7a2 2 0 002 2h11.3a2 2 0 002-1.7l1.4-8A2 2 0 0016.7 10H13l1-5.5A1.5 1.5 0 0012.6 3L7 11"/></svg>Useful 24</div>
<div class="vote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>Funny 3</div>
<div class="vote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v3M12 18v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M3 12h3M18 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>Cool 8</div>
</div>
</div>
</div>
<div class="rcard">
<div class="ravatar rav2">TM</div>
<div class="rbody">
<div class="rtop">
<div><span class="rname">Theo Martins</span><div class="rloc">Oakland, CA · 61 reviews</div></div>
<span class="rdate">Sep 22, 2024</span>
</div>
<div class="rstars">
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-e"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
</div>
<div class="rtext">Line moves fast for how busy it gets. Ask for the almond croissant warmed — that's the move.</div>
<div class="votes">
<div class="vote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 22V11M2 13v7a2 2 0 002 2h11.3a2 2 0 002-1.7l1.4-8A2 2 0 0016.7 10H13l1-5.5A1.5 1.5 0 0012.6 3L7 11"/></svg>Useful 9</div>
<div class="vote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>Funny 1</div>
<div class="vote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v3M12 18v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M3 12h3M18 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>Cool 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 300; line-height: 1.2; letter-spacing: 0.08em; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.10em; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.10em; background: transparent; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; background: #ffffff; color: #7a7a7a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 48px;
border-bottom:1px solid #e8e4de; }
.brand { font-size:16px; font-weight:400; letter-spacing:2px; margin:0; }
.navlinks { display:flex; gap:32px; font-size:13px; letter-spacing:.6px; color:#313131; }
.cart { font-size:13px; letter-spacing:.5px; color:#7a7a7a; }
.hero { display:flex; align-items:center; gap:0; height:320px; }
.hero-img { flex:1; height:100%; background:radial-gradient(circle at 40% 40%, #e8c98a 0%, #c9a35f 45%, #f9f8f6 100%);
position:relative; }
.hero-img::after { content:''; position:absolute; left:50%; top:50%; width:70px; height:70px; border-radius:50%;
border:6px solid #f9f8f6; transform:translate(-50%,-50%); }
.hero-text { flex:1; padding:0 56px; }
.hero-text .eyebrow { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#7a7a7a; margin:0 0 10px; }
.hero-text h1 { font-size:34px; font-weight:300; letter-spacing:.06em; line-height:1.15; margin:0 0 14px; }
.hero-text p { font-size:13px; color:#4d4d4d; line-height:1.6; margin:0 0 18px; max-width:340px; }
.btn { display:inline-block; background:#313131; color:#fff; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
padding:13px 30px; }
.band { background:#f9f8f6; padding:20px 48px; display:flex; justify-content:space-between; align-items:center; }
.band span { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#7a7a7a; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid #e8e4de; }
.card { padding:16px 18px; border-right:1px solid #e8e4de; }
.card:last-child { border-right:none; }
.ring { height:96px; background:#f9f8f6; margin-bottom:10px; position:relative; }
.ring::after { content:''; position:absolute; left:50%; top:50%; width:38px; height:38px; border-radius:50%;
border:5px solid #d8bd8a; transform:translate(-50%,-50%); }
.badge { display:inline-block; font-size:10px; letter-spacing:.5px; color:#7a7a7a; border:1px solid #e8e4de; padding:3px 9px; margin-bottom:6px; }
.card h3 { font-size:13px; font-weight:500; letter-spacing:.05em; margin:0 0 4px; }
.card .price { font-size:15px; font-weight:400; }
footer { position:absolute; bottom:0; left:0; right:0; height:34px; background:#313131; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:10px; letter-spacing:1px; }
</style></head>
<body>
<nav>
<p class="brand">Bario Neal</p>
<div class="navlinks"><span>Rings</span><span>Wedding</span><span>Fine Jewelry</span><span>Custom</span></div>
<div class="cart">Bag (1)</div>
</nav>
<section class="hero">
<div class="hero-img"></div>
<div class="hero-text">
<p class="eyebrow">Ethically Sourced · Handmade</p>
<h1>Rings Made By Hand, Worn For Life</h1>
<p>Recycled metals and conflict-free stones, formed in our Philadelphia studio one piece at a time.</p>
<span class="btn">Book a Consultation</span>
</div>
</section>
<div class="band"><span>Featured — The Equinox Collection</span><span>View All →</span></div>
<div class="grid">
<div class="card">
<div class="ring"></div>
<span class="badge">Recycled 14k Gold</span>
<h3>Aster Solitaire</h3>
<div class="price">$2,180</div>
</div>
<div class="card">
<div class="ring"></div>
<span class="badge">Lab-Grown Diamond</span>
<h3>Marlowe Band</h3>
<div class="price">$1,640</div>
</div>
<div class="card">
<div class="ring"></div>
<span class="badge">Conflict-Free</span>
<h3>Wren Cluster</h3>
<div class="price">$2,950</div>
</div>
<div class="card">
<div class="ring"></div>
<span class="badge">Custom Commission</span>
<h3>Bespoke Setting</h3>
<div class="price">From $3,400</div>
</div>
</div>
<footer>© Bario Neal — Philadelphia, PA</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #cc0000; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #cc0000;
border: 1px solid #cc0000; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#1a1a1a; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#cc0000; font-size:18px; font-weight:800; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; color:#ddd; font-size:12px; }
.btn-primary { background:#cc0000; color:#fff; border:none; border-radius:2px; padding:9px 18px; font-size:12px; font-weight:700; }
.loot { background:#ff6600; color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:2px; }
main { display:flex; height:calc(640px - 58px - 40px); }
.gallery { width:340px; background:#f5f5f5; position:relative; padding:16px; display:flex; align-items:center; justify-content:center; }
.box { width:190px; height:250px; background:linear-gradient(160deg,#333,#111); border-radius:2px; position:relative;
box-shadow:0 10px 24px rgba(0,0,0,0.25); }
.box::after { content:'1:12 SCALE'; position:absolute; bottom:14px; left:14px; color:#cc0000; font-size:11px; font-weight:800; letter-spacing:1px; }
.badges { position:absolute; top:22px; left:22px; display:flex; flex-direction:column; gap:6px; }
.b { font-size:10px; font-weight:800; padding:3px 8px; border-radius:2px; color:#fff; letter-spacing:0.3px; }
.b-new { background:#339900; } .b-preorder { background:#0066cc; } .b-excl { background:#663399; } .b-sale { background:#cc0000; }
.info { flex:1; padding:26px 30px; display:flex; flex-direction:column; gap:11px; }
.cat { font-size:11px; color:#666; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-size:20px; font-weight:700; margin:0; }
.price-row { display:flex; align-items:center; gap:10px; }
.price { font-size:21px; font-weight:800; color:#cc0000; }
.msrp { font-size:13px; color:#999; text-decoration:line-through; }
.stars { color:#ffaa00; font-size:12px; }
.arrival { background:#f5f5f5; border:1px solid #dddddd; border-radius:2px; padding:8px 12px; font-size:12px; color:#333; }
.qtybox { display:flex; align-items:center; gap:10px; font-size:12px; color:#666; }
.qty { border:1px solid #dddddd; border-radius:2px; padding:5px 12px; }
.btn-row { display:flex; gap:8px; margin-top:auto; }
.btn-add { flex:1; background:#cc0000; color:#fff; border:none; border-radius:2px; padding:13px; font-size:14px; font-weight:700; }
.btn-loot { background:#1a1a1a; color:#ff6600; border:none; border-radius:2px; padding:13px 16px; font-size:12px; font-weight:700; }
footer { padding:10px 30px; border-top:1px solid #dddddd; font-size:10px; color:#666; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bigbadtoystore</div>
<div class="navlinks"><span>Statues</span><span>Action Figures</span><span>Model Kits</span><span>Exclusives</span></div>
<button class="btn-primary">Sign In</button>
</nav>
<main>
<div class="gallery">
<div class="badges"><span class="b b-new">NEW</span><span class="b b-preorder">PRE-ORDER</span><span class="b b-excl">EXCLUSIVE</span><span class="b b-sale">SALE</span></div>
<div class="box"></div>
</div>
<div class="info">
<span class="cat">Collectible Statue — Deluxe Edition</span>
<h1>Sentinel Guardian Diorama</h1>
<div class="stars">★★★★★ 4.9 (212 reviews)</div>
<div class="price-row"><span class="price">$249.99</span><span class="msrp">$299.99</span></div>
<div class="arrival">Estimated arrival: <b>March 2027</b> · Ships when in stock</div>
<div class="qtybox">Qty <span class="qty">1</span> · Limit 2 per customer</div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-loot">+ Pile of Loot</button>
</div>
</div>
</main>
<footer><span>© Bigbadtoystore</span><span>Pile of Loot · Pre-Order Policy · Track Order</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #150f23; color: #1f1633;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #150f23; color: #1f1633;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #1f1633; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; margin: 0; color: #bdb8c0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.2px; background: #150f23; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.2px; background: #3f3849; color: #ffffff;
border: 1px solid #150f23; border-radius: 12px;
padding: 8px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; background: #ffffff; color: #1f1633;
border: 1px solid #181127; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bdb8c0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #c2ef4e; color: #1f1633;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1f1633; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stars { position:absolute; inset:0; background-image:
radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.5), transparent),
radial-gradient(1.5px 1.5px at 120px 80px, rgba(255,255,255,.4), transparent),
radial-gradient(1px 1px at 220px 40px, rgba(255,255,255,.4), transparent),
radial-gradient(1.5px 1.5px at 340px 110px, rgba(255,255,255,.4), transparent),
radial-gradient(1px 1px at 500px 60px, rgba(255,255,255,.4), transparent),
radial-gradient(1.5px 1.5px at 650px 100px, rgba(255,255,255,.4), transparent),
radial-gradient(1px 1px at 800px 50px, rgba(255,255,255,.4), transparent),
radial-gradient(1.5px 1.5px at 900px 90px, rgba(255,255,255,.4), transparent);
pointer-events:none; }
.top { position:relative; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:15px; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:500; color:rgba(255,255,255,.8); }
.btninv { background:#fff; color:#1f1633; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:700; }
.hero { position:relative; z-index:2; padding:26px 32px 30px; }
.hero h1 { font-size:52px; font-weight:700; line-height:1.15; margin:0 0 14px; max-width:560px; }
.chip { background:#c2ef4e; color:#1f1633; border-radius:4px; padding:0 12px; }
.hero p { font-size:14px; color:rgba(255,255,255,.8); margin:0 0 16px; max-width:400px; }
.ghostbtn { background:rgba(255,255,255,.18); color:#fff; border:none; border-radius:12px; padding:8px; font-size:13px; font-weight:600;
display:inline-block; padding:9px 18px; }
.blob { position:absolute; border-radius:50% 45% 55% 50%/50% 55% 45% 50%; opacity:.95; z-index:1; }
.blob1 { width:64px; height:64px; background:#fa7faa; right:70px; top:10px; transform:rotate(-8deg); }
.blob2 { width:44px; height:44px; background:#c2ef4e; right:130px; top:90px; border-radius:50%; }
.cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 32px 20px; }
.card { background:#150f23; border:1px solid #362d59; border-radius:12px; padding:16px; }
.card h3 { font-size:15px; margin:0 0 6px; }
.card p { font-size:11.5px; color:rgba(255,255,255,.72); margin:0; line-height:1.4; }
.pricing { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 32px 20px; }
.ptier { background:#fff; color:#1f1633; border-radius:12px; padding:16px; }
.ptier.featured { background:#150f23; color:#fff; }
.ptier h4 { font-size:13px; margin:0 0 4px; }
.ptier .price { font-size:22px; font-weight:500; margin:0 0 6px; }
footer { position:relative; z-index:2; padding:12px 32px; border-top:1px solid #362d59; display:flex;
justify-content:space-between; font-size:11px; color:rgba(255,255,255,.72); }
</style></head>
<body>
<div class="top">
<div class="stars"></div>
<nav>
<div class="brand">Sentry</div>
<div class="navlinks"><span>Product</span><span>Pricing</span><span>Docs</span></div>
<button class="btninv">Get Started</button>
</nav>
<div class="hero">
<h1>Debugging that<br>doesn't <span class="chip">SUCK</span></h1>
<p>Application monitoring and error tracking for developers who ship fast.</p>
<button class="ghostbtn">Get Demo</button>
</div>
<div class="blob blob1"></div>
<div class="blob blob2"></div>
</div>
<div class="cards">
<div class="card"><h3>Error Monitoring</h3><p>See stack traces the moment something breaks, in context.</p></div>
<div class="card"><h3>Performance</h3><p>Trace slow transactions across your whole stack.</p></div>
<div class="card"><h3>Session Replay</h3><p>Watch exactly what the user saw before the crash.</p></div>
</div>
<div class="pricing">
<div class="ptier"><h4>Developer</h4><div class="price">Free</div></div>
<div class="ptier featured"><h4>Business</h4><div class="price">$80</div></div>
<div class="ptier"><h4>Enterprise</h4><div class="price">Custom</div></div>
</div>
<footer>
<span>© Sentry</span>
<span>Sentry · Docs · Support · Status</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #146ef5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #146ef5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #90b8f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #080808; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #146ef5; color: #080808;
border: 1px solid #080808; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #146ef5; color: #f5f5f5;
border: 1px solid #3884f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #90b8f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #125ecf; color: #080808;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#080808; box-sizing:border-box;
font-family:"WF Visual Sans Variable",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:600; font-size:16px; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#080808; }
.btn { background:#146ef5; color:#ffffff; border-radius:4px; padding:8px 16px; font-size:14px; font-weight:550; }
.hero { text-align:center; padding:28px 32px 18px; }
.hero h1 { font-size:40px; font-weight:600; letter-spacing:-0.6px; line-height:1.1; margin:0 0 10px; }
.hero p { font-size:16px; color:#5a5a5a; margin:0 0 16px; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-out { background:transparent; color:#080808; border:1px solid #d8d8d8; border-radius:4px; padding:8px 16px; font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 32px; }
.card { border:1px solid #d8d8d8; border-radius:8px; padding:18px; position:relative; overflow:hidden; }
.bar { position:absolute; top:0; left:0; right:0; height:4px; }
.bar.purple { background:#7a3dff; } .bar.pink { background:#ed52cb; } .bar.green { background:#00d722; }
.card h3 { font-size:18px; font-weight:600; margin:10px 0 8px; }
.card p { font-size:13px; color:#363636; margin:0; line-height:1.5; }
.plans { display:flex; gap:14px; padding:0 32px 20px; }
.plan { flex:1; border:1px solid #d8d8d8; border-radius:16px; padding:16px; text-align:center; }
.plan.rec { border-top:4px solid #146ef5; }
.plan h4 { font-size:14px; margin:0 0 6px; }
.plan .p { font-size:20px; font-weight:600; margin:0 0 8px; }
.badge { background:#146ef5; color:#ffffff; font-size:11px; font-weight:550; border-radius:4px; padding:2px 8px; display:inline-block; margin-bottom:6px; }
</style></head>
<body>
<nav>
<span class="brand">Webflow</span>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Marketplace</span><span>Enterprise</span></div>
<span class="btn">Get started free</span>
</nav>
<section class="hero">
<h1>The agentic web platform for modern businesses</h1>
<p>Design, build, and launch responsive websites visually — no code required.</p>
<div class="row"><span class="btn">Start building</span><span class="btn-out">Contact sales</span></div>
</section>
<section class="grid">
<div class="card"><div class="bar purple"></div><h3>Visual canvas</h3><p>Design with real HTML, CSS, and JavaScript in a drag-and-drop editor.</p></div>
<div class="card"><div class="bar pink"></div><h3>CMS collections</h3><p>Model structured content and design its layout without touching code.</p></div>
<div class="card"><div class="bar green"></div><h3>Hosting & scale</h3><p>Global CDN, automatic backups, and enterprise-grade uptime.</p></div>
</section>
<section class="plans">
<div class="plan"><h4>Starter</h4><div class="p">Free</div></div>
<div class="plan rec"><span class="badge">Most Popular</span><h4>CMS</h4><div class="p">$19/mo</div></div>
<div class="plan"><h4>Business</h4><div class="p">$49/mo</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f7f8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f6f7f8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#242529; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { padding:20px 28px 0; display:flex; align-items:center; justify-content:space-between; }
.brand { margin:0; font-size:20px; font-weight:700; }
.search { background:#F6F7F8; border-radius:10px; height:40px; width:320px; display:flex; align-items:center; padding:0 14px; color:#72757E; font-size:14px; }
.storecard { margin:16px 28px 0; background:#fff; border:1px solid #E8E9EB; border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:14px; }
.slogo { width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#0AAD0A,#098F09); }
.sname { font-size:17px; font-weight:700; }
.smeta { font-size:12px; color:#72757E; margin-top:2px; }
.deal { margin-left:auto; background:#FFF0E6; color:#FF7009; font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; }
.section-title { margin:22px 28px 12px; font-size:14px; font-weight:700; color:#242529; }
.grid { margin:0 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard { border:1px solid #E8E9EB; border-radius:12px; padding:10px; }
.pimg { height:80px; border-radius:8px; margin-bottom:8px; }
.pimg.a { background:linear-gradient(135deg,#dff4d0,#b7e6a4); }
.pimg.b { background:linear-gradient(135deg,#ffe3c2,#ffc98a); }
.pimg.c { background:linear-gradient(135deg,#d7e8ff,#a9caf5); }
.pimg.d { background:linear-gradient(135deg,#f6d7e2,#eeb3c6); }
.ptitle { font-size:13px; font-weight:400; line-height:1.3; height:34px; overflow:hidden; }
.prow { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.pprice { font-size:15px; font-weight:700; }
.punit { font-size:11px; color:#72757E; }
.stepper { display:flex; align-items:center; gap:8px; background:#0AAD0A; border-radius:8px; padding:4px 8px; color:#fff; font-size:13px; font-weight:700; }
.cartbar { position:absolute; left:0; right:0; bottom:0; height:56px; background:#0AAD0A; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-weight:700; font-size:14px; }
</style></head>
<body>
<div class="top">
<p class="brand">Instacart (iOS)</p>
<div class="search">🔍 Search groceries, stores, aisles</div>
</div>
<div class="storecard">
<div class="slogo"></div>
<div>
<div class="sname">Instacart (iOS) Market</div>
<div class="smeta">Delivery by 4:30pm · $3.99 delivery fee</div>
</div>
<div class="deal">20% off</div>
</div>
<div class="section-title">Buy it again</div>
<div class="grid">
<div class="pcard"><div class="pimg a"></div><div class="ptitle">Organic Bananas, bunch</div>
<div class="prow"><div><div class="pprice">$1.49</div><div class="punit">$0.42/oz</div></div><div class="stepper">− 2 +</div></div></div>
<div class="pcard"><div class="pimg b"></div><div class="ptitle">Sourdough Bread Loaf</div>
<div class="prow"><div><div class="pprice">$4.29</div><div class="punit">each</div></div><div class="stepper">Add</div></div></div>
<div class="pcard"><div class="pimg c"></div><div class="ptitle">Whole Milk, 1 Gallon</div>
<div class="prow"><div><div class="pprice">$3.79</div><div class="punit">each</div></div><div class="stepper">Add</div></div></div>
<div class="pcard"><div class="pimg d"></div><div class="ptitle">Strawberries, 1 lb</div>
<div class="prow"><div><div class="pprice">$3.99</div><div class="punit">$3.99/lb</div></div><div class="stepper">Add</div></div></div>
</div>
<div class="cartbar"><span>3 items</span><span>View cart · $12.56</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181b34; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #181b34;
border: 1px solid #181b34; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dadbdf; color: #181b34;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#323338; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.head { height:60px; display:flex; align-items:center; padding:0 22px; gap:12px; }
.head .dot { width:12px; height:12px; border-radius:50%; background:#0073EA; }
.head .title { font-size:22px; font-weight:800; letter-spacing:-0.3px; }
.head .spacer { flex:1; }
.fab { width:40px; height:40px; border-radius:50%; background:#0073EA; color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 8px 20px rgba(0,115,234,0.45); }
.views { display:flex; gap:20px; padding:0 22px 10px; border-bottom:1px solid #E6E9F0; }
.views span { font-size:13px; font-weight:600; color:#676879; padding-bottom:9px; }
.views span.active { color:#323338; border-bottom:2.5px solid #0073EA; }
.board { padding:14px 0 0; }
.group { padding:0 0 6px; }
.ghead { display:flex; align-items:center; gap:8px; padding:10px 22px 6px; }
.ghead .caret { font-size:12px; }
.ghead .gname { font-size:20px; font-weight:800; }
.ghead .count { font-size:12px; color:#9699A6; font-weight:500; }
.row { height:44px; display:flex; align-items:center; border-bottom:1px solid #E6E9F0; }
.stripe { width:6px; height:100%; flex-shrink:0; }
.itemname { flex:1; font-size:14px; font-weight:500; padding:0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person { width:26px; height:26px; border-radius:50%; margin-right:14px; flex-shrink:0; }
.cell { width:118px; height:28px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; margin-right:8px; text-transform:uppercase; flex-shrink:0; }
.cell.navy { background:#333D6E; }
.cell.green { background:#00C875; }
.cell.orange { background:#FDAB3D; }
.cell.red { background:#E2445C; }
.datecell { width:78px; font-size:13px; color:#676879; margin-right:16px; text-align:right; flex-shrink:0; }
.g1 .stripe, .g1 .ghead .gname { color:#0073EA; }
.g1 .stripe { background:#0073EA; }
.g2 .stripe { background:#A25DDC; }
.g2 .ghead .gname { color:#A25DDC; }
.battery { margin:8px 22px 4px; height:24px; border-radius:4px; overflow:hidden; display:flex; }
.battery span { height:100%; }
</style></head>
<body>
<div class="head"><div class="dot"></div><div class="title">monday.com (iOS)</div><div class="spacer"></div><div class="fab">+</div></div>
<div class="views"><span class="active">Main Table</span><span>Kanban</span><span>Timeline</span><span>Calendar</span><span>Chart</span></div>
<div class="board">
<div class="group g1">
<div class="ghead"><span class="caret">▾</span><span class="gname">This week</span><span class="count">4 items</span></div>
<div class="row"><div class="stripe"></div><div class="itemname">Redesign onboarding flow</div><div class="person" style="background:#579BFC"></div><div class="cell green">Done</div><div class="cell" style="background:#FFCB00;color:#323338">High</div><div class="datecell">Sep 3</div></div>
<div class="row"><div class="stripe"></div><div class="itemname">API contract review</div><div class="person" style="background:#FF158A"></div><div class="cell orange">Working</div><div class="cell navy">Med</div><div class="datecell">Sep 6</div></div>
<div class="row"><div class="stripe"></div><div class="itemname">Fix checkout bug</div><div class="person" style="background:#9CD326"></div><div class="cell red">Stuck</div><div class="cell red">Urgent</div><div class="datecell">Sep 5</div></div>
<div class="battery"><span style="width:50%;background:#00C875"></span><span style="width:25%;background:#FDAB3D"></span><span style="width:25%;background:#E2445C"></span></div>
</div>
<div class="group g2">
<div class="ghead"><span class="caret">▾</span><span class="gname">Next sprint</span><span class="count">2 items</span></div>
<div class="row"><div class="stripe"></div><div class="itemname">Design system audit</div><div class="person" style="background:#00D2D2"></div><div class="cell navy">Not started</div><div class="cell navy">Low</div><div class="datecell">Sep 12</div></div>
<div class="row"><div class="stripe"></div><div class="itemname">Partner integration</div><div class="person" style="background:#A25DDC"></div><div class="cell navy">Not started</div><div class="cell navy">Med</div><div class="datecell">Sep 15</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffd200; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffd200; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6809; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da120d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd200; color: #da120d;
border: 1px solid #da120d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffd200; color: #111111;
border: 1px solid #d9b303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6809; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9b302; color: #da120d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body {
display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.utility { flex:0 0 24px; background:#f5f5f5; display:flex; justify-content:flex-end; gap:14px; padding:0 32px; align-items:center; font-size:11px; color:#757575; }
header { flex:0 0 60px; display:flex; align-items:center; gap:28px; padding:0 32px; }
.brand { font-size:22px; font-weight:700; letter-spacing:-0.3px; margin:0; color:#222222; }
.search { flex:1 1 auto; height:38px; border:2px solid #222222; display:flex; align-items:center; padding:0 14px; font-size:13px; color:#9e9e9e; max-width:420px; }
.carttxt { font-size:12px; font-weight:700; color:#222222; white-space:nowrap; }
.gnb { flex:0 0 38px; display:flex; align-items:center; gap:22px; padding:0 32px; border-bottom:1px solid #e0e0e0; }
.gnb span { font-size:13px; font-weight:400; color:#222222; }
.gnb span.active { color:#da120d; font-weight:700; }
.banner { flex:0 0 66px; margin:12px 32px 0; border-radius:8px; background:linear-gradient(90deg,#da120d,#fd4e28); color:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
.banner b { font-size:17px; font-weight:700; }
.banner span { font-size:12px; opacity:.9; }
.banner button { background:#ffffff; color:#da120d; border:none; border-radius:4px; padding:8px 16px; font-size:12px; font-weight:700; }
.gridwrap { flex:1 1 auto; padding:12px 32px; overflow:hidden; }
.gw-head { display:flex; justify-content:space-between; margin-bottom:8px; }
.gw-head h2 { font-size:15px; font-weight:700; margin:0; }
.gw-head span { font-size:11px; color:#757575; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { display:flex; flex-direction:column; gap:5px; }
.thumb { width:100%; aspect-ratio:1/1; border-radius:6px; }
.card .title { font-size:12px; color:#222222; line-height:1.3; }
.pricerow { display:flex; align-items:baseline; gap:6px; }
.disc { color:#da120d; font-weight:700; font-size:13px; }
.price { color:#da120d; font-weight:700; font-size:14px; }
.orig { color:#9e9e9e; font-size:11px; text-decoration:line-through; }
.chip { display:inline-flex; width:fit-content; background:#ffd200; color:#222222; border-radius:3px; padding:2px 6px; font-size:10px; font-weight:500; }
</style></head>
<body>
<div class="utility">My Page · Cart · Global</div>
<header>
<p class="brand">Gmarket</p>
<div class="search">Search products, brands, and more</div>
<span class="carttxt">Cart (3)</span>
</header>
<div class="gnb">
<span class="active">All Categories</span><span>Best</span><span>New</span><span>Super Deal</span><span>Brand Day</span><span>Live</span>
</div>
<div class="banner">
<div><b>Big Smile Week</b> <span>Up to 52% off top categories</span></div>
<button>Shop now</button>
</div>
<div class="gridwrap">
<div class="gw-head"><h2>Right now, best-selling</h2><span>Updated hourly</span></div>
<div class="grid">
<div class="card"><span class="thumb" style="background:#f5f5f5"></span><span class="title">Wireless earbuds, noise cancelling</span><div class="pricerow"><span class="disc">32%</span><span class="price">₩59,000</span></div><span class="orig">₩86,000</span><span class="chip">Smile Delivery</span></div>
<div class="card"><span class="thumb" style="background:#eeeeee"></span><span class="title">Organic cotton bath towel set</span><div class="pricerow"><span class="disc">18%</span><span class="price">₩23,900</span></div><span class="orig">₩29,000</span><span class="chip">Smile Delivery</span></div>
<div class="card"><span class="thumb" style="background:#f5f5f5"></span><span class="title">Stainless steel water bottle 750ml</span><div class="pricerow"><span class="disc">45%</span><span class="price">₩12,400</span></div><span class="orig">₩22,000</span><span class="chip">Smile Delivery</span></div>
<div class="card"><span class="thumb" style="background:#eeeeee"></span><span class="title">Compact air circulator fan</span><div class="pricerow"><span class="disc">27%</span><span class="price">₩41,500</span></div><span class="orig">₩57,000</span><span class="chip">Smile Delivery</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1b1c1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1b1c1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1b1c1b; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.1px; background: #15815b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.1px; background: #ffffff; color: #15815b;
border: 1px solid #15815b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1b1c1b;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dc2626; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#ffffff; color:#393b38; box-sizing:border-box; font-family:'Satoshi',system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
.banner { height:40px; background:#15815b; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; }
nav { height:60px; border-bottom:1px solid #e6e6e6; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:700; color:#1b1c1b; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:500; color:#1b1c1b; }
.search-pill { background:#f7f7f7; border:1px solid #d1d1d1; border-radius:999px; padding:8px 18px 8px 16px; font-size:12px; color:#6b6b6b; }
.main { display:flex; gap:20px; padding:20px 32px; height:404px; }
.gallery { width:380px; background:#f1d2a6; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; }
.packet { width:130px; height:190px; background:#fff; border:1px solid #d1d1d1; border-radius:6px; position:relative; box-shadow:0 6px 18px rgba(27,28,27,0.12); }
.packet::before { content:''; position:absolute; top:12px; left:12px; right:12px; height:80px; background:linear-gradient(180deg,#dc2626,#f1d2a6); border-radius:4px; }
.badge-new { position:absolute; top:16px; left:16px; background:#15815b; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:6px; }
.info h1 { font-size:24px; font-weight:600; margin:0; }
.botanical { font-size:13px; font-style:italic; color:#6b6b6b; }
.price { font-size:18px; font-weight:600; margin-top:4px; }
.desc { font-size:13px; line-height:1.55; color:#393b38; max-width:440px; }
.cat-row { display:flex; gap:8px; margin-top:4px; }
.cat-badge { background:#f1d2a6; color:#393b38; font-size:11px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; letter-spacing:0.5px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#15815b; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:14px; }
.btn-secondary { flex:1; height:44px; background:#fff; color:#15815b; border:1.5px solid #15815b; border-radius:8px; font-weight:600; font-size:14px; }
.breadcrumb-row { padding:0 32px; font-size:12px; color:#6b6b6b; }
.breadcrumb-row a { color:#003399; }
.related { display:flex; gap:14px; padding:12px 32px; }
.rel-card { flex:1; background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:10px; }
.rel-card .rel-img { height:56px; background:#f1d2a6; border-radius:4px; margin-bottom:6px; }
.rel-card span { font-size:11px; font-weight:600; display:block; }
.rel-card small { font-size:10px; color:#6b6b6b; font-style:italic; }
</style></head>
<body>
<div class="banner">Spring planting deadline: order by March 15 for guaranteed delivery</div>
<nav>
<p class="brand">Baker Creek Heirloom Seeds</p>
<div class="navlinks"><span>Vegetables</span><span>Flowers</span><span>Herbs</span><span>Grains</span></div>
<div class="search-pill">🔍 Search 2,000+ varieties</div>
</nav>
<div class="breadcrumb-row">Home / Vegetables / <b>Tomatoes</b></div>
<div class="main">
<div class="gallery">
<div class="badge-new">New</div>
<div class="packet"></div>
</div>
<div class="info">
<h1>Amish Paste Tomato Seeds</h1>
<span class="botanical">Solanum lycopersicum var. amish paste</span>
<span class="price">$4.25</span>
<p class="desc">A century-old heirloom prized for its deep red, meaty flesh — ideal for sauce and canning. Indeterminate vines produce heavily from midsummer through first frost.</p>
<div class="cat-row">
<span class="cat-badge">Heirloom</span>
<span class="cat-badge">Open-Pollinated</span>
<span class="cat-badge">Rare</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Browse Category</button>
</div>
</div>
</div>
<div class="related">
<div class="rel-card"><div class="rel-img"></div><span>Brandywine Tomato</span><small>Solanum lycopersicum</small></div>
<div class="rel-card"><div class="rel-img"></div><span>Glass Gem Corn</span><small>Zea mays</small></div>
<div class="rel-card"><div class="rel-img"></div><span>Cherokee Purple</span><small>Solanum lycopersicum</small></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff9100; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff9100; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4b09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff9100; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff9100; color: #111111;
border: 1px solid #d97d03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4b09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e48a27; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292929; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #dddddd; background:#ffffff; }
.brand { font-size:18px; font-weight:700; color:#292929; letter-spacing:-0.2px; }
.search-action { background:#ff9100; color:#ffffff; border:none; border-radius:4px;
padding:0 18px; height:42px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.outline-action { color:#ff9100; border:1px solid #ff9100; border-radius:4px; background:#ffffff;
padding:0 14px; height:32px; font-size:13px; font-weight:700; }
.head-right { display:flex; gap:10px; align-items:center; }
.tabs { display:flex; gap:4px; padding:14px 32px 0; border-bottom:1px solid #dddddd; background:#ffffff; }
.tab { padding:8px 16px; font-size:14px; font-weight:700; color:#7e7e7e; border-radius:4px 4px 0 0; }
.tab.active { color:#ff7800; border-bottom:2px solid #ff7800; }
.searchbar { margin:20px 32px 6px; height:44px; border:2px solid #ff9100; border-radius:4px;
display:flex; align-items:center; padding:0 16px; gap:10px; background:#ffffff; }
.searchbar .ph { color:#7e7e7e; font-size:14px; }
.searchbar .sbtn { margin-left:auto; background:#ff9100; color:#fff; border-radius:4px;
height:32px; padding:0 14px; font-size:13px; font-weight:700; display:flex; align-items:center; }
.topics { display:flex; gap:8px; padding:14px 32px; flex-wrap:wrap; }
.pill { padding:8px 16px; border-radius:4px; font-size:13px; font-weight:700; background:#dbf7f7; color:#00afb8; }
.pill.act { background:#ff7800; color:#ffffff; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:6px 32px 20px; }
.card { background:#ffffff; border:1px solid #dddddd; border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.card .logo { width:44px; height:44px; border-radius:8px; background:linear-gradient(135deg,#ff9100,#00afb8); }
.card h4 { margin:0; font-size:15px; font-weight:700; color:#292929; }
.card p { margin:0; font-size:13px; color:#7e7e7e; line-height:1.4; }
.card .tags { display:flex; gap:6px; margin-top:4px; }
.card .tag { font-size:11px; font-weight:700; color:#00afb8; background:#dbf7f7; border-radius:4px; padding:2px 8px; }
.sidebox { position:absolute; right:32px; top:216px; width:220px; background:#eeeeee; border-radius:12px; padding:16px; }
.sidebox h5 { margin:0 0 8px; font-size:13px; font-weight:700; color:#292929; }
.sidebox .row { display:flex; justify-content:space-between; font-size:12px; color:#7e7e7e; padding:6px 0; border-bottom:1px solid #dddddd; }
.sidebox .row b { color:#292929; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #dddddd; padding:14px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#7e7e7e; background:#ffffff; }
</style></head>
<body>
<header>
<span class="brand">104 Job Bank</span>
<div class="head-right">
<button class="outline-action">Post a Job</button>
<button class="search-action">Search Jobs</button>
</div>
</header>
<div class="tabs">
<span class="tab active">Jobs</span>
<span class="tab">Companies</span>
<span class="tab">Resume Tools</span>
<span class="tab">Career Advice</span>
<span class="tab">Salary Guide</span>
</div>
<div class="searchbar">
<span class="ph">Job title, company, or skill…</span>
<span class="sbtn">Search</span>
</div>
<div class="topics">
<span class="pill act">Engineering</span>
<span class="pill">Design</span>
<span class="pill">Marketing</span>
<span class="pill">Finance</span>
<span class="pill">Remote</span>
</div>
<div class="grid" style="width:660px;">
<div class="card"><div class="logo"></div><h4>Frontend Engineer</h4><p>Taipei · Full-time · 3+ yrs experience</p><div class="tags"><span class="tag">React</span><span class="tag">Hybrid</span></div></div>
<div class="card"><div class="logo"></div><h4>HR Business Partner</h4><p>Kaohsiung · Full-time · Talent management</p><div class="tags"><span class="tag">HR</span><span class="tag">On-site</span></div></div>
<div class="card"><div class="logo"></div><h4>Product Designer</h4><p>Taichung · Full-time · Career direction focus</p><div class="tags"><span class="tag">Figma</span><span class="tag">Remote</span></div></div>
<div class="card"><div class="logo"></div><h4>Data Analyst</h4><p>Taipei · Contract · Entry friendly</p><div class="tags"><span class="tag">SQL</span><span class="tag">Hybrid</span></div></div>
<div class="card"><div class="logo"></div><h4>Customer Success</h4><p>Tainan · Full-time · People-first team</p><div class="tags"><span class="tag">CS</span><span class="tag">On-site</span></div></div>
<div class="card"><div class="logo"></div><h4>Operations Manager</h4><p>Taipei · Full-time · Manage more than tasks</p><div class="tags"><span class="tag">Ops</span><span class="tag">Hybrid</span></div></div>
</div>
<div class="sidebox">
<h5>Your Career Direction</h5>
<div class="row"><span>Resume completeness</span><b>82%</b></div>
<div class="row"><span>Matched openings</span><b>146</b></div>
<div class="row"><span>Saved jobs</span><b>12</b></div>
<div class="row" style="border:none;"><span>Recommended by AI</span><b>9</b></div>
</div>
<footer>
<span>© 104 Job Bank</span>
<span>Find direction, not just a job.</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ea1717; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ea1717; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f09191; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fe3b52; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ea1717; color: #000000;
border: 1px solid #fe3b52; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ea1717; color: #f5f5f5;
border: 1px solid #ec3b3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f09191; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ed1d20; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f2f2; color:#2b2b2b; box-sizing:border-box;
font-family:"Noto Sans TC","Microsoft JhengHei",Montserrat,Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
header { background:#ffffff; border-bottom:1px solid #e5e5e5; padding:14px 28px; display:flex; align-items:center; gap:20px; }
.logo { font-size:20px; font-weight:700; color:#ea1717; letter-spacing:-0.3px; }
.search { flex:1; background:#f2f2f2; border-radius:4px; height:36px; display:flex; align-items:center; padding:0 14px; color:#969696; font-size:13px; }
.navlinks { display:flex; gap:18px; font-size:13px; color:#0090eb; white-space:nowrap; }
.tabbar { background:#ffffff; display:flex; gap:0; padding:0 28px; border-bottom:1px solid #e5e5e5; }
.tab { padding:12px 16px; font-size:14px; color:#666666; }
.tab.active { color:#000000; font-weight:700; border-bottom:2px solid #ea1717; }
.promo { margin:16px 28px 0; height:78px; border-radius:8px; background:linear-gradient(120deg,#0e4f77,#084567); display:flex; align-items:center; justify-content:space-between; padding:0 24px; color:#ffffff; }
.promo .t1 { font-size:18px; font-weight:700; }
.promo .t2 { font-size:12px; color:rgba(255,255,255,0.8); margin-top:2px; }
.countdown { display:flex; gap:6px; }
.cbox { background:rgba(255,255,255,0.16); border-radius:4px; padding:6px 10px; font-weight:700; font-size:16px; }
main { padding:16px 28px 20px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.card { background:#ffffff; border-radius:8px; padding:0 0 10px; box-shadow:rgba(0,0,0,0.1) 0px 2px 8px; overflow:hidden; position:relative; }
.thumb { height:76px; background:linear-gradient(135deg,#fd7777,#fe3b52); position:relative; }
.flag { position:absolute; top:6px; left:6px; background:#ea1717; color:#ffffff; font-size:10px; font-weight:700; border-radius:4px; padding:1px 6px; }
.ctitle { font-size:12px; color:#2b2b2b; padding:8px 8px 4px; line-height:1.3; height:30px; overflow:hidden; }
.cprice { padding:0 8px; display:flex; align-items:baseline; gap:6px; }
.price-new { font-size:16px; font-weight:700; color:#ea1717; }
.price-old { font-size:11px; color:#969696; text-decoration:line-through; }
.rebate { margin:4px 8px 0; background:#fed796; color:#2b2b2b; font-size:10px; border-radius:4px; padding:1px 6px; display:inline-block; }
.row-title { display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px; }
.row-title h3 { font-size:16px; font-weight:700; margin:0; }
.row-title span { font-size:12px; color:#0090eb; }
</style></head>
<body>
<header>
<div class="logo">PChome</div>
<div class="search">Search products, brands, or categories</div>
<div class="navlinks"><span>My Orders</span><span>Cart</span><span>Sign In</span></div>
</header>
<div class="tabbar">
<div class="tab active">24h Shopping</div>
<div class="tab">Electronics</div>
<div class="tab">Home</div>
<div class="tab">Beauty</div>
<div class="tab">Groceries</div>
</div>
<div class="promo">
<div>
<div class="t1">Flash Deal · Up to 40% off</div>
<div class="t2">24h delivery on every order today</div>
</div>
<div class="countdown">
<div class="cbox">02</div><div class="cbox">14</div><div class="cbox">39</div>
</div>
</div>
<main>
<div class="row-title"><h3>Today's Picks</h3><span>See all</span></div>
<div class="grid">
<div class="card"><div class="thumb"><span class="flag">DEAL</span></div><div class="ctitle">Wireless Noise-Cancelling Headphones</div><div class="cprice"><span class="price-new">$2,690</span><span class="price-old">$3,590</span></div><span class="rebate">8% P-coin</span></div>
<div class="card"><div class="thumb"><span class="flag">HOT</span></div><div class="ctitle">Stainless Steel Vacuum Bottle 500ml</div><div class="cprice"><span class="price-new">$399</span><span class="price-old">$599</span></div><span class="rebate">5% P-coin</span></div>
<div class="card"><div class="thumb"></div><div class="ctitle">27" Curved Gaming Monitor 144Hz</div><div class="cprice"><span class="price-new">$5,990</span><span class="price-old">$7,200</span></div><span class="rebate">3% P-coin</span></div>
<div class="card"><div class="thumb"><span class="flag">NEW</span></div><div class="ctitle">Ceramic Non-Stick Frying Pan Set</div><div class="cprice"><span class="price-new">$1,180</span><span class="price-old">$1,580</span></div><span class="rebate">6% P-coin</span></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Cotton Bedsheet 4-Piece Set, Queen</div><div class="cprice"><span class="price-new">$890</span><span class="price-old">$1,290</span></div><span class="rebate">4% P-coin</span></div>
</div>
<div class="row-title"><h3>Recommended for you</h3><span>See all</span></div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">Portable Espresso Maker, Travel Size</div><div class="cprice"><span class="price-new">$1,590</span></div><span class="rebate">In stock</span></div>
<div class="card"><div class="thumb"><span class="flag">LTD</span></div><div class="ctitle">Robot Vacuum with Mopping, Wi-Fi</div><div class="cprice"><span class="price-new">$8,990</span><span class="price-old">$10,900</span></div><span class="rebate">10% P-coin</span></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Kids' Building Blocks Set, 300pcs</div><div class="cprice"><span class="price-new">$680</span></div><span class="rebate">In stock</span></div>
<div class="card"><div class="thumb"></div><div class="ctitle">USB-C Fast Charger 65W, 3-Port</div><div class="cprice"><span class="price-new">$590</span><span class="price-old">$790</span></div><span class="rebate">5% P-coin</span></div>
<div class="card"><div class="thumb"><span class="flag">DEAL</span></div><div class="ctitle">Memory Foam Pillow, Ergonomic</div><div class="cprice"><span class="price-new">$490</span><span class="price-old">$690</span></div><span class="rebate">3% P-coin</span></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0038; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0038; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa87a0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0038; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0038; color: #f5f5f5;
border: 1px solid #fd2756; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa87a0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff2958; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; gap:20px; padding:0 32px; border-bottom:1px solid #eeeeee; }
.brand { font-size:20px; font-weight:800; color:#ff0038; letter-spacing:-0.3px; }
.search { flex:1; height:44px; border:2px solid #111111; border-radius:0; display:flex; align-items:center;
padding:0 16px; color:#666666; font-size:18px; }
.search .icon { margin-left:auto; color:#111111; font-weight:700; }
.cart { font-size:13px; color:#666666; white-space:nowrap; }
.billboards { display:flex; gap:10px; padding:14px 32px 0; }
.bpill { border:1px solid #eeeeee; border-radius:50px; padding:0 16px; height:34px; display:flex;
align-items:center; font-size:13px; color:#999999; }
.promo { margin:14px 32px; height:120px; border-radius:4px; background:linear-gradient(120deg,#ff0038,#ff6a82);
display:flex; align-items:center; padding:0 28px; color:#ffffff; }
.promo h2 { margin:0; font-size:26px; font-weight:800; }
.promo p { margin:4px 0 0; font-size:13px; opacity:0.9; }
.sectitle { padding:16px 32px 8px; font-size:15px; font-weight:800; color:#111111; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:0 32px; }
.card { background:#ffffff; border-radius:4px; box-shadow:rgba(0,0,0,0.06) 0px 2px 10px -2px, rgba(0,0,0,0.28) 0px 0px 1px;
padding:10px; display:flex; flex-direction:column; gap:6px; }
.thumb { height:78px; border-radius:4px; background:linear-gradient(135deg,#f4f4f4,#e6e6e6); }
.card .rate { color:#ff0038; font-size:13px; font-weight:700; }
.card .price { color:#111111; font-size:16px; font-weight:700; }
.card .struck { color:#a9a9a9; font-size:11px; text-decoration:line-through; }
.card .name { color:#666666; font-size:11px; line-height:1.3; height:28px; overflow:hidden; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #eeeeee; padding:12px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#666666; background:#ffffff; }
</style></head>
<body>
<header>
<span class="brand">11st</span>
<div class="search"><span>Search products, brands, deals…</span><span class="icon">⌕</span></div>
<span class="cart">Cart (3)</span>
</header>
<div class="billboards">
<span class="bpill">Today's Deals</span>
<span class="bpill">Free Shipping</span>
<span class="bpill">New Arrivals</span>
<span class="bpill">Coupon Zone</span>
</div>
<div class="promo">
<div>
<h2>11.11 Mega Sale — up to 80% off</h2>
<p>Open-market deals from thousands of verified sellers</p>
</div>
</div>
<div class="sectitle">Hourly Best — Popularity Ranking</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="name">Wireless earbuds, noise cancelling</div><span class="rate">38%</span><span class="price">₩29,900</span><span class="struck">₩48,000</span></div>
<div class="card"><div class="thumb"></div><div class="name">Cotton basic tee, 3 colors</div><span class="rate">52%</span><span class="price">₩8,900</span><span class="struck">₩18,500</span></div>
<div class="card"><div class="thumb"></div><div class="name">Stainless tumbler 500ml</div><span class="rate">21%</span><span class="price">₩12,300</span><span class="struck">₩15,600</span></div>
<div class="card"><div class="thumb"></div><div class="name">Korean skincare set</div><span class="rate">44%</span><span class="price">₩22,000</span><span class="struck">₩39,000</span></div>
<div class="card"><div class="thumb"></div><div class="name">Portable phone charger</div><span class="rate">30%</span><span class="price">₩15,900</span><span class="struck">₩22,700</span></div>
<div class="card"><div class="thumb"></div><div class="name">Kitchen knife set</div><span class="rate">18%</span><span class="price">₩33,400</span><span class="struck">₩40,700</span></div>
<div class="card"><div class="thumb"></div><div class="name">Yoga mat, non-slip</div><span class="rate">27%</span><span class="price">₩17,800</span><span class="struck">₩24,300</span></div>
<div class="card"><div class="thumb"></div><div class="name">Instant coffee 100pk</div><span class="rate">15%</span><span class="price">₩19,900</span><span class="struck">₩23,400</span></div>
<div class="card"><div class="thumb"></div><div class="name">Desk organizer tray</div><span class="rate">33%</span><span class="price">₩11,200</span><span class="struck">₩16,700</span></div>
<div class="card"><div class="thumb"></div><div class="name">Pet grooming brush</div><span class="rate">40%</span><span class="price">₩9,500</span><span class="struck">₩15,800</span></div>
</div>
<footer>
<span>© 11st</span>
<span>Search · Compare · Buy · Delivered</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #232325; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #232325; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #060606; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:absolute; top:0; left:0; right:0; height:56px; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; border-bottom:0.5px solid #232325; background:#000000; }
.wordmark { margin:0; font-size:20px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
background:linear-gradient(135deg,#00D1C1,#0079D3); -webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; }
.navicons { display:flex; gap:20px; font-size:19px; color:#FFFFFF; }
.layout { position:absolute; top:56px; bottom:50px; left:0; right:0; display:flex; gap:26px;
padding:16px 40px 8px; }
.feedcol { flex:1.5; min-width:0; }
.feedhead { display:flex; align-items:baseline; justify-content:space-between; margin:2px 0 4px; }
.feedhead h2 { font-size:21px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.caughtup { font-size:11px; color:#5E5E64; display:flex; align-items:center; gap:6px; }
.dot { width:6px; height:6px; border-radius:50%; background:#00C2B8; display:inline-block; }
.post { display:flex; gap:10px; padding:13px 0 12px; border-bottom:0.5px solid #232325; }
.avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0;
background:linear-gradient(135deg,#00D1C1,#0079D3); }
.pcol { flex:1; min-width:0; }
.phead { font-size:14px; font-weight:700; color:#FFFFFF; }
.chip { font-size:10px; font-weight:700; color:#00C2B8; text-transform:uppercase; letter-spacing:0.4px; }
.meta { font-size:11px; color:#5E5E64; font-weight:400; text-transform:none; letter-spacing:0; }
.media { margin-top:8px; height:104px; border-radius:10px;
background:linear-gradient(150deg,#0f3d3a 0%,#00C2B8 45%,#0079D3 100%); }
.caption { margin-top:8px; font-size:13px; color:#9A9AA0; line-height:1.5; font-weight:500; }
.actionrow { margin-top:10px; display:flex; gap:22px; font-size:12px; color:#9A9AA0; align-items:center; }
.actionrow .liked { color:#00C2B8; font-weight:600; }
.typedcard { margin-top:8px; background:#0E0E10; border:1px solid #232325; border-radius:10px;
padding:12px; display:flex; gap:12px; }
.cover { width:56px; height:80px; border-radius:4px; flex-shrink:0;
background:linear-gradient(160deg,#0079D3,#00D1C1); }
.bookinfo { flex:1; }
.booktitle { font-size:15px; font-weight:600; color:#FFFFFF; margin:0 0 3px; }
.bookauthor { font-size:12px; color:#9A9AA0; margin:0 0 8px; }
.stars { font-size:11px; letter-spacing:1px; color:#E8B23A; font-weight:600; }
.sidecol { width:262px; flex-shrink:0; }
.panel { background:#161618; border:1px solid #232325; border-radius:14px; padding:16px; }
.panel h3 { font-size:14px; font-weight:700; margin:0 0 12px; }
.ptgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ptcell { background:#0E0E10; border:1px solid #232325; border-radius:12px; padding:9px 2px;
display:flex; flex-direction:column; align-items:center; gap:4px; }
.ptcell .ic { font-size:17px; }
.ptcell .lb { font-size:9px; font-weight:600; color:#5E5E64; text-transform:uppercase; letter-spacing:0.3px; }
.ptcell.sel { border-color:#00C2B8; background:rgba(0,194,184,0.08); }
.ptcell.sel .lb { color:#00C2B8; }
.tierlabel { font-size:10px; font-weight:600; color:#5E5E64; text-transform:uppercase;
letter-spacing:0.4px; margin:14px 0 8px; }
.tier { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px; font-size:12px;
color:#9A9AA0; font-weight:600; }
.tier .rdot { width:13px; height:13px; border-radius:50%; border:1.5px solid #5E5E64; flex-shrink:0; }
.tier.on { background:rgba(0,194,184,0.08); color:#00C2B8; }
.tier.on .rdot { border-color:#00C2B8; background:#00C2B8; }
.postbtn { margin-top:14px; width:100%; border:none; border-radius:999px; padding:12px 0;
font-size:14px; font-weight:700; color:#FFFFFF; text-align:center;
background:linear-gradient(135deg,#00D1C1,#0079D3); }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:50px; background:rgba(0,0,0,0.96);
border-top:0.5px solid #232325; display:flex; align-items:center; justify-content:space-around;
padding:0 60px; }
.tabicon { font-size:20px; color:#5E5E64; }
.tabicon.on { color:#00C2B8; }
.ring { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#00D1C1,#0079D3);
display:flex; align-items:center; justify-content:center; }
.ringhole { width:34px; height:34px; border-radius:50%; background:#000000; color:#FFFFFF;
font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<nav>
<p class="wordmark">Vero (iOS)</p>
<div class="navicons"><span>🔍</span><span>🔔</span></div>
</nav>
<div class="layout">
<div class="feedcol">
<div class="feedhead">
<h2>Feed</h2>
<span class="caughtup"><i class="dot"></i>Caught up · newest first</span>
</div>
<div class="post">
<div class="avatar"></div>
<div class="pcol">
<div class="phead">Marisol Cruz <span class="chip">📷 Photo</span> <span class="meta">· 14m</span></div>
<div class="media"></div>
<div class="caption">Golden hour on the roof again. Never gets old up here.</div>
<div class="actionrow"><span class="liked">♥ 218</span><span>💬 12</span><span>↗ Share</span></div>
</div>
</div>
<div class="post" style="border-bottom:none;">
<div class="avatar" style="background:linear-gradient(135deg,#8ec5ff,#0079D3);"></div>
<div class="pcol">
<div class="phead">Devon Park <span class="chip">📚 Book</span> <span class="meta">· 1h</span></div>
<div class="typedcard">
<div class="cover"></div>
<div class="bookinfo">
<p class="booktitle">Project Hail Mary</p>
<p class="bookauthor">Andy Weir</p>
<div class="stars">★★★★★</div>
</div>
</div>
<div class="caption" style="margin-top:10px;">Read this in two sittings. Absolutely worth the hype.</div>
<div class="actionrow"><span>♡ 61</span><span>💬 5</span><span>↗ Share</span></div>
</div>
</div>
</div>
<div class="sidecol">
<div class="panel">
<h3>New Post</h3>
<div class="ptgrid">
<div class="ptcell"><span class="ic">📷</span><span class="lb">Photo</span></div>
<div class="ptcell"><span class="ic">🎥</span><span class="lb">Video</span></div>
<div class="ptcell"><span class="ic">🔗</span><span class="lb">Link</span></div>
<div class="ptcell"><span class="ic">🎵</span><span class="lb">Music</span></div>
<div class="ptcell"><span class="ic">🎬</span><span class="lb">Film</span></div>
<div class="ptcell sel"><span class="ic">📚</span><span class="lb">Book</span></div>
<div class="ptcell"><span class="ic">📍</span><span class="lb">Place</span></div>
</div>
<div class="tierlabel">Who can see this</div>
<div class="tier"><span class="rdot"></span>Close Friends</div>
<div class="tier on"><span class="rdot"></span>Friends</div>
<div class="tier"><span class="rdot"></span>Acquaintances</div>
<div class="tier"><span class="rdot"></span>Followers</div>
<button class="postbtn">Post</button>
</div>
</div>
</div>
<div class="tabbar">
<span class="tabicon on">⌂</span>
<span class="tabicon">🔍</span>
<div class="ring"><div class="ringhole">+</div></div>
<span class="tabicon">✉</span>
<span class="tabicon">👤</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4876ef; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4876ef; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a7bcf2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d67ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4876ef; color: #000000;
border: 1px solid #2d67ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4876ef; color: #f5f5f5;
border: 1px solid #648af0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a7bcf2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4474f2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292e41; box-sizing:border-box;
font-family:"Pretendard","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #eaedf4; }
.brand { font-size:18px; font-weight:700; margin:0; color:#4876ef; }
.navlinks { display:flex; gap:22px; font-size:14px; }
.cta { background:#4876ef; color:#ffffff; border:none; border-radius:8px; padding:10px 20px; font-size:14px; font-weight:700; }
.searchwrap { padding:26px 40px 18px; text-align:center; }
.searchwrap h1 { font-size:24px; font-weight:700; margin:0 0 14px; }
.searchbar { max-width:520px; margin:0 auto; height:48px; border:2px solid #2d67ff; border-radius:28px;
display:flex; align-items:center; padding:0 20px; color:#8491a7; font-size:14px; background:#ffffff; }
.chiprow { display:flex; gap:8px; justify-content:center; padding:14px 40px 20px; flex-wrap:wrap; }
.chip { background:#eff5ff; color:#292e41; font-size:12px; border-radius:4px; padding:4px 10px; }
.chip.on { background:#4876ef; color:#ffffff; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px; }
.card { background:#ffffff; border:1px solid #d7dce5; border-radius:16px; padding:16px;
box-shadow: 2px 6px 16px rgba(17,42,128,0.08); }
.card .tag { font-size:11px; background:#fff7d6; color:#ff5656; border-radius:4px; padding:2px 6px; font-weight:700; }
.card h3 { font-size:15px; font-weight:700; margin:8px 0 4px; }
.card p { font-size:12px; color:#5c667b; margin:0; }
.footerband { display:flex; justify-content:space-between; align-items:center; padding:18px 40px 0; }
.pill-ai { background:#02c6ff; color:#ffffff; border-radius:20px; padding:8px 16px; font-size:13px; font-weight:700;
box-shadow:0 0 10px rgba(0,161,248,0.3); border:none; }
</style></head>
<body>
<nav>
<p class="brand">Saramin</p>
<div class="navlinks"><span>Job Listings</span><span>Company & Pay</span><span>Community</span></div>
<button class="cta">Register Resume</button>
</nav>
<section class="searchwrap">
<h1>Only the career that fits you — matched</h1>
<div class="searchbar">Search by job title or company</div>
</section>
<div class="chiprow">
<span class="chip on">Seoul (64,706)</span>
<span class="chip">Gyeonggi (55,520)</span>
<span class="chip">Incheon</span>
<span class="chip">Busan</span>
</div>
<section class="cards">
<div class="card"><span class="tag">D-3</span><h3>Backend Developer</h3><p>Seoul · Full-time · Any experience</p></div>
<div class="card"><span class="tag">D-7</span><h3>Frontend Engineer</h3><p>Pangyo · Full-time · 3+ years</p></div>
<div class="card"><span class="tag">Popular</span><h3>Data Analyst</h3><p>Seoul · Full-time · New grads welcome</p></div>
</section>
<div class="footerband">
<span style="font-size:12px;color:#67738e;">Chosen by 17 million members</span>
<button class="pill-ai">AI Search</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0A0A0A; color: #FFFFFF;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0A0A0A; color: #FFFFFF;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #FFFFFF; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9A9A9A; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #FF2D20; color: #FFFFFF;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: transparent; color: #FFFFFF;
border: 1px solid #FF2D20; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #141414; color: #FFFFFF;
border: 1px solid #474747; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9A9A9A; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #141414; color: #FF2D20;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0A; color:#FFFFFF; box-sizing:border-box;
font-family:'Arial Narrow', 'Barlow', system-ui, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.cond { font-stretch:condensed; letter-spacing:-1px; text-transform:uppercase; font-weight:800; }
nav { flex:0 0 auto; height:68px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #2A2A2A; }
.brand { font-size:20px; font-weight:800; margin:0; letter-spacing:1px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; letter-spacing:0.5px; }
.cta-mini { background:#FF2D20; color:#fff; padding:8px 18px; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:0 30px; min-height:0; }
.hero { flex:1 1 auto; display:flex; align-items:center; min-height:0; position:relative; }
.hero::before { content:''; position:absolute; right:0; top:0; bottom:0; width:44%;
background:linear-gradient(150deg,#1c1c1c,#0a0a0a 70%); }
.hero::after { content:''; position:absolute; right:6%; top:20%; bottom:20%; width:30%; border-radius:12px;
background:radial-gradient(circle at 40% 30%, rgba(255,45,32,0.35), transparent 60%), #141414; border:1px solid #2A2A2A; }
.hero-copy { position:relative; z-index:1; max-width:440px; }
.hero-copy h1 { font-size:56px; line-height:0.95; margin:0 0 12px; }
.hero-copy p { font-size:14px; color:#E0E0E0; margin:0 0 16px; font-family:'Barlow', sans-serif; text-transform:none; letter-spacing:0; font-weight:400; }
.hero-copy button { background:#FF2D20; color:#fff; border:none; padding:14px 28px; font-size:15px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase; }
.stats { flex:0 0 auto; display:flex; gap:14px; padding:16px 0 18px; }
.stat { flex:1; background:#141414; border:1px solid #2A2A2A; border-radius:8px; padding:10px 16px; }
.stat .val { font-family:'Courier New', monospace; font-size:26px; font-weight:700; color:#22C55E; margin:0; }
.stat .lab { font-family:'Courier New', monospace; font-size:10px; letter-spacing:0.5px; text-transform:uppercase; color:#9A9A9A; margin:4px 0 0; }
.workout { flex:0 0 auto; display:flex; gap:12px; padding-bottom:16px; }
.wcard { flex:1; background:#1C1C1C; border:1px solid #2A2A2A; border-left:3px solid #FF2D20; border-radius:12px; padding:12px 14px; }
.wcard h3 { font-size:15px; margin:0 0 4px; font-family:'Barlow', sans-serif; text-transform:none; letter-spacing:0; font-weight:600; }
.wcard p { font-size:11px; color:#9A9A9A; margin:0; text-transform:uppercase; letter-spacing:0.3px; }
footer { flex:0 0 auto; height:52px; background:#141414; border-top:1px solid #2A2A2A; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; color:#9A9A9A; }
</style></head>
<body>
<nav>
<p class="brand cond">Apex</p>
<div class="navlinks cond"><span>Ride</span><span>Train</span><span>Compete</span></div>
<span class="cta-mini cond">Join Now</span>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<h1 class="cond">Ride now</h1>
<p>Studio-grade resistance, live leaderboard, and a cadence sensor that never misses a beat.</p>
<button class="cond">Add to Cart — $1,895</button>
</div>
</div>
<div class="stats">
<div class="stat"><p class="val">312W</p><p class="lab">Avg Output</p></div>
<div class="stat"><p class="val">1–24</p><p class="lab">Resistance Levels</p></div>
<div class="stat"><p class="val">18,204</p><p class="lab">Sessions Ridden</p></div>
</div>
<div class="workout">
<div class="wcard"><h3>Interval Sprint 30</h3><p>30 min · High Intensity</p></div>
<div class="wcard"><h3>Endurance Climb</h3><p>45 min · Moderate</p></div>
<div class="wcard"><h3>Recovery Flow</h3><p>20 min · Low Intensity</p></div>
</div>
</main>
<footer>
<span>© Apex</span>
<span>Financing Available · Free Delivery · 30-Day Trial</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #c6a671; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #231f20;
border: 1px solid #c6a671; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #231f20;
border: 1px solid #c4c3c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ca192c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#231f20; box-sizing:border-box;
font-family:'Poppins','Chivo',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; background:#231f20; }
.brand { font-size:16px; font-weight:600; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:#fff; }
.navlinks span.active { color:#c6a671; }
.cart { color:#c6a671; font-size:12px; font-weight:700; }
.hero { background:#231f20; color:#fff; padding:24px 36px 30px; display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:26px; font-weight:600; margin:0 0 8px; }
.hero p { font-size:13px; color:#cccccc; margin:0; max-width:300px; }
.btn { display:inline-block; background:#c6a671; color:#fff; font-size:12px; font-weight:600; text-transform:uppercase; padding:11px 22px; border-radius:8px; margin-top:12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px 36px; }
.card { background:#f4ede4; border-radius:12px; overflow:hidden; }
.card-img { height:100px; background:linear-gradient(135deg,#344153,#c6a671); border-radius:12px 12px 0 0; position:relative; }
.badge { position:absolute; top:8px; left:8px; font-size:9px; font-weight:600; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
.badge.sale { background:#ca192c; color:#fff; }
.badge.new { background:#19a340; color:#fff; }
.cbody { padding:10px 12px; }
.cbody h3 { font-size:13px; font-weight:600; margin:0 0 4px; }
.price { font-size:15px; font-weight:600; }
.price .old { font-size:11px; color:#999999; text-decoration:line-through; font-weight:400; margin-left:6px; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#231f20; color:#999999;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Beard And Blade</p>
<div class="navlinks"><span class="active">Beard Care</span><span>Shaving</span><span>Tools</span><span>Gift Sets</span></div>
<div class="cart">Cart (2)</div>
</nav>
<section class="hero">
<div>
<h1>Australia's Home of Men's Grooming</h1>
<p>Beard oils, precision blades, and barbershop-grade tools for the modern gentleman.</p>
<span class="btn">Shop Beard Oils</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge sale">Sale</span></div>
<div class="cbody">
<h3>Cedarwood Beard Oil 30ml</h3>
<div class="price">$24.95<span class="old">$29.95</span></div>
</div>
</div>
<div class="card">
<div class="card-img"><span class="badge new">New</span></div>
<div class="cbody">
<h3>Straight Razor — Walnut Handle</h3>
<div class="price">$89.00</div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody">
<h3>Grooming Kit — Starter Set</h3>
<div class="price">$64.95</div>
</div>
</div>
</div>
<footer>
<span>© Beard And Blade</span>
<span>Beard And Blade · Shipping · Returns · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0061ef; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0061ef; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b2f2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff7300; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0061ef; color: #ffffff;
border: 1px solid #ff7300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0061ef; color: #f5f5f5;
border: 1px solid #2779f0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b2f2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2964c9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f4f2; color:#2d2c2b; box-sizing:border-box;
font-family:"Apercu","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#ffffff; }
.logo { font-size:20px; font-weight:700; display:flex; align-items:center; gap:8px; }
.logo .dot { width:22px; height:22px; border-radius:50%; background:#ff7300; }
.navlinks { display:flex; gap:22px; font-size:15px; color:#44423f; }
.btn-primary { background:#0061ef; color:#ffffff; border-radius:32px; padding:12px 22px; font-size:14px;
font-weight:700; }
.hero { text-align:center; padding:32px 40px 22px; }
.hero h1 { font-size:48px; font-weight:700; line-height:1.0; letter-spacing:-1.2px; margin:0 0 12px; }
.hero p { font-size:16px; color:#4b4c4d; margin:0 0 18px; max-width:480px; margin-left:auto; margin-right:auto; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-dark { background:#2d2c2b; color:#ffffff; border-radius:32px; padding:14px 20px; font-size:16px; font-weight:700; }
.btn-soft { background:#f9f4f2; color:#44423f; border-radius:32px; padding:12px 24px; font-size:16px; font-weight:700;
border:1px solid #e2ded9; }
.chips { display:flex; gap:10px; justify-content:center; padding:0 40px 20px; }
.chip { border-radius:8px; padding:8px 14px; font-size:13px; font-weight:500; color:#ffffff; }
.chip.o1 { background:#ff7300; }
.chip.o2 { background:#ffa500; color:#000000; }
.chip.o3 { background:#3b197f; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px 24px; }
.card { border-radius:24px; padding:18px; }
.card.cream { background:#ffffff; }
.card.blue { background:#0061ef; color:#ffffff; }
.card.gold { background:#ffce00; color:#000000; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; margin:0; opacity:0.85; }
footer { text-align:center; padding:12px 40px; font-size:12px; color:#44423f; }
</style></head>
<body>
<nav>
<span class="logo"><span class="dot"></span>Headspace</span>
<div class="navlinks"><span>Meditation</span><span>Sleep</span><span>Mindfulness</span></div>
<span class="btn-primary">Try for free</span>
</nav>
<section class="hero">
<h1>Be kind to your mind</h1>
<p>Live a healthier, happier, more well-rested life in just a few minutes a day.</p>
<div class="row">
<button class="btn-dark">Try for $0</button>
<button class="btn-soft">Learn more</button>
</div>
</section>
<div class="chips">
<span class="chip o1">Sleep</span>
<span class="chip o2">Meditate</span>
<span class="chip o3">Move</span>
</div>
<div class="cards">
<div class="card cream"><h3>Guided meditations</h3><p>Short daily sessions for every mood.</p></div>
<div class="card blue"><h3>Sleep resources</h3><p>Sleepcasts and soundscapes to wind down.</p></div>
<div class="card gold"><h3>Online therapy</h3><p>Clinician-led care when you need it most.</p></div>
</div>
<footer>© Headspace · The mental health app for every moment</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2d2d2d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2d2d2d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #2d2d2d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #f5a623; color: #000000;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #2d2d2d;
border: 1px solid #f5a623; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2d2d2d;
border: 1px solid #cacaca; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #f5a623; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2d2d2d; box-sizing:border-box;
font-family:'nowie-web',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:20px; font-weight:600; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#4a4a4a; }
.btn-primary { background:#f5a623; color:#fff; border:none; border-radius:9999px; padding:11px 22px; font-size:13px; font-weight:600; }
main { display:flex; height:calc(640px - 68px - 44px); }
.gallery { width:380px; background:#f9f6f2; position:relative; display:flex; align-items:center; justify-content:center; }
.razor { width:16px; height:200px; border-radius:9999px; background:linear-gradient(180deg,#f7c5cc,#f5a623 60%,#d4891e); position:relative; }
.razor::before { content:''; position:absolute; top:-30px; left:-32px; width:80px; height:36px; border-radius:9999px; background:#f5a623; }
.badge-new { position:absolute; top:20px; left:20px; background:#f5a623; color:#fff; font-size:11px; font-weight:600; padding:4px 12px; border-radius:9999px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; color:#8c8c8c; }
h1 { font-size:24px; font-weight:600; margin:0; letter-spacing:-0.3px; }
.stars { color:#f5a623; font-size:13px; }
.price { font-size:20px; font-weight:600; }
.desc { font-size:13px; color:#4a4a4a; line-height:1.55; max-width:340px; }
.pillrow { display:flex; gap:8px; }
.pill { background:#f5f0eb; border-radius:9999px; padding:8px 16px; font-size:12px; color:#4a4a4a; }
.pill.on { background:#f5a623; color:#fff; }
.subs { display:flex; align-items:center; gap:10px; background:#e8e0d8; border-radius:9999px; padding:10px 16px; font-size:12px; color:#4a4a4a; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#f5a623; color:#fff; border:none; border-radius:9999px; padding:14px; font-size:14px; font-weight:600; }
.btn-sec { background:#fff; color:#2d2d2d; border:1px solid #dcdcdc; border-radius:9999px; padding:14px 20px; font-size:13px; font-weight:600; }
footer { padding:12px 34px; border-top:1px solid #eaeaea; font-size:11px; color:#8c8c8c; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Billie</div>
<div class="navlinks"><span>Shave</span><span>Body Care</span><span>Bundles</span><span>Our Story</span></div>
<button class="btn-primary">Subscribe & Save</button>
</nav>
<main>
<div class="gallery"><span class="badge-new">New Colorway</span><div class="razor"></div></div>
<div class="info">
<span class="cat">Starter Kit</span>
<h1>The Billie Razor + 2 Refills</h1>
<div class="stars">★★★★★ 4.7 (5,201 reviews)</div>
<div class="price">$9.00</div>
<p class="desc">Five-blade razor with a rounded, aloe-dipped head — built for curves, not just legs.</p>
<div class="pillrow"><span class="pill on">Peach</span><span class="pill">Lilac</span><span class="pill">Sage</span></div>
<div class="subs">Subscribe every 2 months → <b>save 20%</b></div>
<div class="btn-row">
<button class="btn-add">Add to Bag</button>
<button class="btn-sec">One-time Buy</button>
</div>
</div>
</main>
<footer><span>© Billie</span><span>We take care, not ourselves too seriously</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b0f0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b0f0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d6f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #82bc23; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b0f0; color: #000000;
border: 1px solid #82bc23; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b0f0; color: #000000;
border: 1px solid #27bbf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d6f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #15b2cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#16181B; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.list { width:320px; flex:0 0 auto; background:#fff; border-right:1px solid #E1E2E5; }
.lh { padding:16px 16px 6px; font-size:22px; font-weight:800; }
.row { display:flex; gap:12px; padding:12px 16px; align-items:center; }
.row.on { background:#F3F4F6; }
.av { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#4FCBF7,#00B0F0); flex:0 0 auto; position:relative; }
.bottag { position:absolute; bottom:-3px; right:-3px; background:#0093C8; color:#fff; font-size:8px; font-weight:800; padding:1px 4px; border-radius:4px; }
.rn { font-size:15px; font-weight:700; }
.rp { font-size:13px; color:#6C6F77; margin-top:2px; }
.thread { flex:1; display:flex; flex-direction:column; }
.nav { height:64px; border-bottom:1px solid #E1E2E5; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.nav b { font-size:15px; }
.nav span { font-size:11px; color:#9A9DA5; }
.msgs { flex:1; padding:20px 24px; display:flex; flex-direction:column; }
.bub { max-width:60%; padding:8px 13px; font-size:15px; line-height:1.35; margin-bottom:4px; border-radius:16px; }
.in { align-self:flex-start; background:#E9EAEC; }
.out { align-self:flex-end; background:#00B0F0; color:#002A36; font-weight:500; }
.receipt { align-self:flex-end; font-size:11px; color:#9CA0A8; margin-bottom:14px; display:flex; gap:5px; }
.rletter { font-weight:800; color:#00B0F0; }
.kikcode { width:100px; height:100px; border-radius:16px; margin:10px auto; background:#00B0F0;
display:flex; align-items:center; justify-content:center; }
.kikcode i { width:70px; height:70px; border-radius:50%; border:6px dotted #fff; }
.composer { padding:10px 16px; display:flex; align-items:center; gap:10px; border-top:1px solid #E1E2E5; }
.plus { width:30px; height:30px; border-radius:50%; background:#F3F4F6; display:flex; align-items:center; justify-content:center; font-weight:700; color:#6C6F77; }
.field { flex:1; height:36px; border-radius:18px; background:#F3F4F6; }
</style></head>
<body>
<div class="wrap">
<div class="list">
<div class="lh">Chats</div>
<div class="row on"><div class="av"><span class="bottag">BOT</span></div><div><div class="rn">@Kik (iOS)</div><div class="rp">Kik Code · scan to add</div></div></div>
<div class="row"><div class="av"></div><div><div class="rn">@luna.codes</div><div class="rp">omg yes 😂</div></div></div>
<div class="row"><div class="av"></div><div><div class="rn">Study Group</div><div class="rp">jay: anyone free tonight?</div></div></div>
</div>
<div class="thread">
<div class="nav"><b>@luna.codes</b><span>online</span></div>
<div class="msgs">
<div class="bub in">hey! did you get the Kik Code I sent?</div>
<div class="bub out">yeah just added you!</div>
<div class="receipt"><span class="rletter">R</span> Read</div>
<div class="kikcode"><i></i></div>
<div class="bub in">perfect, see you in the group chat</div>
</div>
<div class="composer"><div class="plus">+</div><div class="field"></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #828282; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #ff6458; color: #ffffff;
border: none; border-radius: 4px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #141414;
border: 1px solid #ff6458; border-radius: 4px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #141414;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #828282; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff6458; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141414; box-sizing:border-box;
font-family:'Proxima Nova', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #eeeeee; background:#ffffff; }
.brand { font-size:19px; font-weight:600; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:600; color:#141414; }
.navlinks span:first-child { border-bottom:2px solid #ff6458; padding-bottom:18px; }
.navicons { display:flex; gap:18px; font-size:12px; color:#626262; }
.hero { flex:0 0 auto; background:#f2f2f2; padding:26px 40px; display:flex; align-items:center;
justify-content:space-between; gap:32px; }
.hero-copy { max-width:420px; }
.hero-copy h1 { font-size:32px; font-weight:600; margin:0 0 8px; letter-spacing:-0.4px; line-height:1.15; }
.hero-copy p { font-size:14px; color:#626262; margin:0 0 14px; }
.hero-copy button { background:#ff6458; color:#fff; border:none; border-radius:4px; padding:12px 26px;
font-size:13px; font-weight:700; letter-spacing:0.2px; }
.hero-visual { width:220px; height:110px; border-radius:8px; background:linear-gradient(140deg,#ffa29b,#ff6458 60%,#cc5046); flex:0 0 auto; }
.rowlabel { flex:0 0 auto; padding:16px 40px 10px; font-size:13px; font-weight:600; color:#141414; }
.products { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0 40px 14px; min-height:0; }
.card { display:flex; flex-direction:column; gap:8px; }
.imgwrap { position:relative; flex:1; min-height:0; border-radius:0; overflow:hidden; }
.badge { position:absolute; top:12px; left:12px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:4px 8px; border-radius:4px; color:#fff; z-index:2; }
.badge.sale { background:#ff6458; }
.badge.new { background:#141414; }
.badge.bestseller { background:#e6b94f; color:#141414; }
.p1 .imgwrap { background:linear-gradient(150deg,#e7dcc9,#c8a97e); }
.p2 .imgwrap { background:linear-gradient(150deg,#d9d2c4,#8f8577); }
.p3 .imgwrap { background:linear-gradient(150deg,#e3ded3,#a99c86); }
.cardmeta .name { font-size:15px; font-weight:600; margin:0 0 3px; }
.cardmeta .desc { font-size:12px; color:#828282; margin:0 0 5px; }
.cardmeta .pricerow { display:flex; align-items:center; gap:8px; }
.cardmeta .price { font-size:15px; font-weight:600; color:#141414; }
.cardmeta .price-sale { color:#ff6458; }
.cardmeta .price-orig { font-size:12px; color:#a7a7a7; text-decoration:line-through; }
.stock { display:flex; align-items:center; gap:5px; font-size:11px; color:#626262; margin-top:2px; }
.stock .dot { width:7px; height:7px; border-radius:999px; background:#3cb064; }
footer { flex:0 0 auto; background:#2e2e2e; color:#ffffff; padding:14px 40px; display:flex;
justify-content:space-between; align-items:center; font-size:11px; }
footer .flinks span { margin-left:18px; opacity:0.7; }
</style></head>
<body>
<nav>
<p class="brand">Article</p>
<div class="navlinks"><span>Living</span><span>Bedroom</span><span>Dining</span><span>Outdoor</span><span>Office</span></div>
<div class="navicons"><span>Account</span><span>Cart (0)</span></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Furniture for real life</h1>
<p>Modern, well-made pieces designed to last — shipped straight to your door.</p>
<button>Shop Living Room</button>
</div>
<div class="hero-visual"></div>
</section>
<p class="rowlabel">New in Living</p>
<section class="products">
<div class="card p1">
<div class="imgwrap"><span class="badge sale">Sale</span></div>
<div class="cardmeta">
<p class="name">Sven Sofa</p>
<p class="desc">Cognac leather · Walnut legs</p>
<div class="pricerow"><span class="price price-sale">$1,899</span><span class="price-orig">$2,199</span></div>
<div class="stock"><span class="dot"></span>In stock</div>
</div>
</div>
<div class="card p2">
<div class="imgwrap"><span class="badge new">New</span></div>
<div class="cardmeta">
<p class="name">Ceni Lounge Chair</p>
<p class="desc">Boucle · Natural oak</p>
<div class="pricerow"><span class="price">$949</span></div>
<div class="stock"><span class="dot"></span>In stock</div>
</div>
</div>
<div class="card p3">
<div class="imgwrap"><span class="badge bestseller">Bestseller</span></div>
<div class="cardmeta">
<p class="name">Timo Coffee Table</p>
<p class="desc">Solid ash · Round top</p>
<div class="pricerow"><span class="price">$629</span></div>
<div class="stock"><span class="dot"></span>In stock</div>
</div>
</div>
</section>
<footer>
<span>© Article</span>
<span class="flinks"><span>Shipping</span><span>Returns</span><span>Trade Program</span><span>Careers</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7e55be; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7e55be; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bfaddc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #33ccff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7e55be; color: #33ccff;
border: 1px solid #33ccff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7e55be; color: #f5f5f5;
border: 1px solid #916fc7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bfaddc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7268c8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFCF2; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
/* ---- map cartography ---- */
.map { position:absolute; inset:0; overflow:hidden; }
.water { position:absolute; width:520px; height:420px; background:#9BDEEF; border-radius:48% 52% 40% 60%/55% 45% 60% 40%; left:-160px; top:230px; }
.park { position:absolute; width:360px; height:300px; background:#C5E89B; border-radius:40% 60% 55% 45%/45% 55% 45% 55%; right:-90px; top:-60px; }
.park2 { position:absolute; width:220px; height:180px; background:#C5E89B; border-radius:50%; right:120px; bottom:-60px; }
.building { position:absolute; background:#E8E2D1; border-radius:3px; }
.road { position:absolute; background:#FFFFFF; box-shadow:0 0 0 1px rgba(0,0,0,0.03); }
.road.minor { background:#F5F0E5; }
.road.hwy { background:#FFD970; }
.label { position:absolute; font-size:11px; color:#3D3D3D; font-weight:600; opacity:.75; }
/* ---- route polyline (purple, ant-trail) ---- */
.route { position:absolute; height:6px; background:#7E55BE; border-radius:3px; }
.chevrons { position:absolute; display:flex; align-items:center; gap:14px; }
.chevrons i { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:7px solid rgba(255,255,255,0.9); }
/* ---- puck + wazer ---- */
.puck-wrap { position:absolute; }
.ring { position:absolute; width:60px; height:60px; border-radius:50%; border:2px solid rgba(51,204,255,0.35); left:50%; top:50%; transform:translate(-50%,-50%); }
.puck { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(35deg); width:0; height:0;
border-left:16px solid transparent; border-right:16px solid transparent; border-bottom:34px solid #33CCFF;
filter:drop-shadow(0 3px 4px rgba(0,0,0,0.3)); }
.puck::after { content:''; position:absolute; left:-13px; top:6px; width:26px; height:26px; border:3px solid #fff; border-radius:50%; opacity:0; }
.wazer { position:absolute; width:24px; height:24px; border-radius:50%; background:#F9C42E; border:2px solid #fff;
display:flex; align-items:center; justify-content:center; font-size:13px; box-shadow:0 2px 6px rgba(0,0,0,0.25); }
/* ---- hazard speech bubbles ---- */
.bubble { position:absolute; border-radius:14px; padding:7px 12px 8px; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.22); }
.bubble::after { content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); width:0; height:0;
border-left:7px solid transparent; border-right:7px solid transparent; }
.bubble .t { font-size:13px; font-weight:700; display:flex; align-items:center; gap:5px; }
.bubble .ti { font-size:10px; opacity:.8; margin-top:1px; }
.bubble.police { background:#EF6A65; } .bubble.police::after { border-top:7px solid #EF6A65; }
.bubble.traffic { background:#F69833; } .bubble.traffic::after { border-top:7px solid #F69833; }
.glyph { width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,0.9); display:inline-block; }
/* ---- next-turn card ---- */
.nextturn { position:absolute; top:0; left:0; right:0; height:100px; background:#7E55BE; border-radius:0 0 16px 16px;
display:flex; align-items:center; padding:0 20px; gap:16px; box-shadow:0 6px 18px rgba(126,85,190,0.25); }
.arrow { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,0.14); flex:none; position:relative; }
.arrow i { position:absolute; left:50%; top:50%; transform:translate(-50%,-58%) rotate(-45deg); width:0;height:0;
border-left:11px solid transparent; border-right:11px solid transparent; border-bottom:20px solid #fff; }
.nt-text .dist { color:#fff; font-family:'SF Mono',monospace; font-size:26px; font-weight:700; letter-spacing:0; }
.nt-text .street { color:#fff; font-size:21px; font-weight:800; letter-spacing:-0.3px; margin-top:1px; }
.nt-text .sub { color:rgba(255,255,255,0.8); font-size:13px; margin-top:2px; }
.nt-exit { margin-left:auto; color:#fff; font-size:22px; opacity:.85; }
/* ---- speed tile ---- */
.speedtile { position:absolute; left:20px; bottom:96px; width:80px; height:80px; background:#fff; border-radius:12px;
box-shadow:0 4px 8px rgba(0,0,0,0.12); text-align:center; padding:6px 0; }
.speedtile .lbl { font-size:8px; font-weight:700; letter-spacing:.4px; color:#1A1A1A; }
.speedtile .lim { width:38px; height:38px; border-radius:50%; border:2.5px solid #1A1A1A; margin:2px auto 2px; display:flex; align-items:center; justify-content:center; font-family:'SF Mono',monospace; font-weight:900; font-size:19px; }
.speedtile .cur { font-family:'SF Mono',monospace; font-weight:700; font-size:20px; color:#EF6A65; line-height:1; }
.speedtile .mph { font-size:9px; color:#6B6B6B; }
/* ---- ETA bar ---- */
.etabar { position:absolute; left:0; right:0; bottom:0; height:80px; background:#FFFFFF; box-shadow:0 -2px 10px rgba(0,0,0,0.08);
display:flex; align-items:center; padding:0 20px; gap:18px; }
.eta-time { font-family:'SF Mono',monospace; font-weight:700; font-size:23px; color:#1A1A1A; }
.eta-sub { font-family:'SF Mono',monospace; font-weight:500; font-size:13px; color:#6B6B6B; }
.alt-pill { margin-left:auto; background:#75C73E; color:#fff; font-weight:700; font-size:12px; padding:8px 16px; border-radius:16px; }
.end-pill { border:1.5px solid #EF6A65; color:#EF6A65; background:#fff; font-weight:700; font-size:14px; padding:8px 18px; border-radius:16px; }
/* ---- FAB ---- */
.fab { position:absolute; right:20px; bottom:96px; width:56px; height:56px; border-radius:50%; background:#7E55BE;
box-shadow:0 6px 16px rgba(126,85,190,0.4); display:flex; align-items:center; justify-content:center; }
.fab .bang { color:#fff; font-size:26px; font-weight:900; }
.beacon { position:absolute; top:116px; left:50%; transform:translateX(-50%); background:#7E55BE; color:#fff; height:38px;
border-radius:19px; display:flex; align-items:center; padding:0 16px; gap:8px; font-size:12px; font-weight:600;
box-shadow:0 4px 10px rgba(126,85,190,0.3); }
.beacon .avs { display:flex; }
.beacon .avs i { width:20px; height:20px; border-radius:50%; border:2px solid #7E55BE; background:#ffd970; margin-left:-8px; }
</style></head>
<body>
<div class="map">
<div class="water"></div>
<div class="park"></div>
<div class="park2"></div>
<div class="building" style="width:44px;height:34px;left:600px;top:220px;"></div>
<div class="building" style="width:30px;height:60px;left:660px;top:180px;"></div>
<div class="building" style="width:50px;height:28px;left:520px;top:410px;"></div>
<div class="building" style="width:26px;height:26px;left:200px;top:150px;"></div>
<div class="road hwy" style="width:960px;height:22px;left:0;top:330px;transform:rotate(-8deg);"></div>
<div class="road" style="width:900px;height:14px;left:-40px;top:150px;transform:rotate(4deg);"></div>
<div class="road minor" style="width:700px;height:9px;left:120px;top:460px;transform:rotate(-3deg);"></div>
<div class="road" style="width:14px;height:640px;left:640px;top:0;transform:rotate(6deg);"></div>
<div class="road minor" style="width:9px;height:500px;left:340px;top:60px;transform:rotate(-5deg);"></div>
<span class="label" style="left:700px;top:145px;">Market St</span>
<span class="label" style="left:120px;top:340px;">I-80 W</span>
<span class="label" style="left:860px;top:170px;font-weight:800;color:#7E55BE;">Waze (iOS)</span>
<div class="route" style="width:340px; left:280px; top:296px; transform:rotate(-8deg);"></div>
<div class="route" style="width:6px; height:190px; left:600px; top:130px;"></div>
<div class="chevrons" style="left:330px; top:293px;"><i></i><i></i><i></i></div>
<div class="bubble police" style="left:430px; top:210px;"><div class="t"><span class="glyph"></span>Police</div><div class="ti">5 min ago</div></div>
<div class="bubble traffic" style="left:630px; top:340px;"><div class="t"><span class="glyph"></span>Traffic</div><div class="ti">2 min ago</div></div>
<div class="puck-wrap" style="left:610px; top:410px;">
<div class="ring"></div>
<div class="puck"></div>
<div class="wazer" style="left:22px; top:-14px;">😀</div>
</div>
</div>
<div class="nextturn">
<div class="arrow"><i></i></div>
<div class="nt-text">
<div class="dist">0.4 mi</div>
<div class="street">Market Street</div>
<div class="sub">then turn left in 0.6 mi</div>
</div>
<div class="nt-exit">☰</div>
</div>
<div class="beacon"><div class="avs"><i></i><i></i><i></i></div>Share your ETA with Beacon</div>
<div class="speedtile">
<div class="lbl">SPEED LIMIT</div>
<div class="lim">35</div>
<div class="cur">42</div>
<div class="mph">mph</div>
</div>
<div class="fab"><span class="bang">!</span></div>
<div class="etabar">
<div>
<div class="eta-time">12 min</div>
<div class="eta-sub">5.2 mi · 6:14 PM</div>
</div>
<div class="alt-pill">Save 3 min</div>
<div class="end-pill">End</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #53b232; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #53b232; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #acd79d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #10a83b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #53b232; color: #000000;
border: 1px solid #10a83b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #53b232; color: #000000;
border: 1px solid #6dbd51; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #acd79d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #48b033; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { display:flex; flex-direction:column; width:960px; height:640px; }
/* nav */
nav { height:60px; flex:0 0 60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #cdcdcd; background:#ffffff; }
.logo { font-size:19px; font-weight:600; letter-spacing:-0.2px; color:#1c1c1c; }
.navlinks { display:flex; gap:26px; font-size:15.5px; color:#777573; }
.navlinks .active { color:#10a83b; font-weight:700; }
.btn-primary { background:#53b232; color:#ffffff; border:none; border-radius:100px;
padding:9px 22px; font-weight:700; font-size:13.5px; white-space:nowrap; cursor:default; }
.btn-primary.lg { padding:15px 36px; font-size:16px; height:52px; }
.btn-ghost { background:transparent; color:#10a83b; border:1.5px solid #53b232; border-radius:100px;
padding:12.5px 30px; font-weight:700; font-size:15px; white-space:nowrap; cursor:default; }
/* hero */
.hero { flex:0 0 172px; padding:24px 40px 0; display:flex; flex-direction:column; align-items:center;
gap:12px; text-align:center; background:#ffffff; }
.badge-green { display:inline-block; background:#53b232; color:#ffffff; border-radius:50px;
padding:6px 18px; font-size:12px; font-weight:700; letter-spacing:0.02em; }
.hero h1 { font-size:36px; font-weight:600; line-height:1.22; margin:0; color:#1c1c1c; max-width:640px; }
.hero p { font-size:15px; color:#212529; margin:0; max-width:460px; line-height:1.5; }
.row { display:flex; gap:14px; align-items:center; }
/* feature band */
.features { flex:0 0 226px; background:#f4f4f4; display:flex; gap:20px; padding:26px 40px; }
.card { flex:1; background:#ffffff; border-radius:8px; box-shadow:rgba(0,0,0,0.25) 0 0 5px 0;
padding:22px 20px; display:flex; flex-direction:column; gap:10px; }
.card .dot { width:38px; height:38px; border-radius:50%;
background:radial-gradient(circle at 30% 30%, #00c43e, #10a83b 70%); flex:0 0 38px; }
.card h4 { font-size:18px; font-weight:600; color:#53b232; margin:0; }
.card p { font-size:12.5px; color:#212529; line-height:1.5; margin:0; }
/* green band */
.band { flex:0 0 138px; background:#00a73c; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:14px; padding:0 40px; }
.band h2 { color:#ffffff; font-size:22px; font-weight:600; margin:0; text-align:center; max-width:640px; }
.social { display:flex; gap:14px; }
.chip { width:42px; height:42px; border-radius:200px; background:#f4f4f4; color:#00c43e;
display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
/* footer */
footer { flex:0 0 44px; border-top:1px solid #cdcdcd; padding:0 40px; display:flex;
align-items:center; justify-content:space-between; font-size:11.5px; color:#777573; background:#ffffff; }
</style></head>
<body>
<div class="page">
<nav>
<div class="logo">iPASS MONEY</div>
<div class="navlinks">
<span class="active">Pay</span>
<span>Transfer</span>
<span>Transit</span>
<span>Rewards</span>
</div>
<button class="btn-primary">Get the App</button>
</nav>
<section class="hero">
<span class="badge-green">Cross-border PayPay now live</span>
<h1>Achieve simple, free living.</h1>
<p>Pay, transfer, and tap through transit — all from one green wallet built for everyday commuters.</p>
<div class="row">
<button class="btn-primary lg">Download the App</button>
<button class="btn-ghost">See how it works</button>
</div>
</section>
<section class="features">
<div class="card">
<span class="dot"></span>
<h4>Instant top-up</h4>
<p>Reload your balance from any linked bank account in seconds, no fees attached.</p>
</div>
<div class="card">
<span class="dot"></span>
<h4>Zero-fee transfers</h4>
<p>Send money between iPASS MONEY accounts anytime, anywhere, free of charge.</p>
</div>
<div class="card">
<span class="dot"></span>
<h4>Tap-to-ride transit</h4>
<p>One card for MRT, bus, and rail — auto top-up keeps every gate green.</p>
</div>
</section>
<section class="band">
<h2>Earn Green Points every time you ride public transit.</h2>
<div class="social">
<span class="chip">FB</span>
<span class="chip">LN</span>
<span class="chip">YT</span>
<span class="chip">IG</span>
</div>
</section>
<footer>
<span>© iPASS MONEY</span>
<span>Payments · Transit · Transfers · Rewards</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff7ec; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff7ec; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7874; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe9cc; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff7ec; color: #000000;
border: 1px solid #ffe9cc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fff7ec; color: #111111;
border: 1px solid #d9d2c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7874; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fff5e7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFF7EC; color:#2C2014; box-sizing:border-box;
font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.grad { position:absolute; inset:0; background:linear-gradient(180deg,#FFE9CC,#FFD9A8); }
.wrap { position:relative; display:flex; height:640px; }
.main { flex:1; display:flex; flex-direction:column; align-items:center; padding:26px 0 0; }
.viewfinder { width:300px; height:300px; border-radius:40px; overflow:hidden; position:relative;
background:linear-gradient(150deg,#FFD9A8,#FF9E2C); box-shadow:0 20px 50px rgba(180,120,30,0.25); }
.senderchip { position:absolute; top:16px; left:16px; background:rgba(44,32,20,0.32); backdrop-filter:blur(4px);
color:#fff; font-size:12px; font-weight:600; padding:6px 12px; border-radius:14px; }
.captionpill { position:absolute; bottom:16px; left:16px; right:16px; background:rgba(44,32,20,0.32); backdrop-filter:blur(4px);
color:#fff; font-size:12px; font-weight:600; padding:8px 14px; border-radius:14px; }
.capturerow { display:flex; align-items:center; gap:34px; margin:24px 0 14px; }
.flip { font-size:20px; color:#8A7A63; }
.capturebtn { width:84px; height:84px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
box-shadow:0 10px 26px rgba(180,120,30,0.35); }
.capturebtn i { width:66px; height:66px; border-radius:50%; border:5px solid #FFB02E; }
.historyh { font-size:12px; font-weight:700; color:#8A7A63; margin:6px 0 10px; }
.history { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:340px; }
.hcell { aspect-ratio:1; border-radius:12px; position:relative; }
.h1 { background:linear-gradient(150deg,#FFD9A8,#F08A1D); }
.h2 { background:linear-gradient(150deg,#FF7A59,#c9502f); }
.h3 { background:linear-gradient(150deg,#FFE9CC,#e0b976); }
.h4 { background:linear-gradient(150deg,#FFB02E,#9e6a10); }
.havdot { position:absolute; bottom:4px; right:4px; width:16px; height:16px; border-radius:50%; border:2px solid #fff; background:#FF7A59; }
.col2 { width:280px; flex:0 0 auto; padding:26px 20px; }
.widgetlabel { font-size:12px; font-weight:700; color:#8A7A63; margin-bottom:10px; }
.widget { width:170px; height:170px; border-radius:34px; background:linear-gradient(150deg,#FFD9A8,#FF9E2C);
box-shadow:0 16px 40px rgba(180,120,30,0.3); position:relative; }
.wchip { position:absolute; bottom:12px; left:12px; background:rgba(44,32,20,0.35); color:#fff; font-size:11px; font-weight:600; padding:5px 10px; border-radius:12px; }
</style></head>
<body>
<div class="grad"></div>
<div class="wrap">
<div class="main">
<div class="viewfinder">
<div class="senderchip">from Ava</div>
<div class="captionpill">golden hour on the roof ✨</div>
</div>
<div class="capturerow"><span class="flip">↻</span><div class="capturebtn"><i></i></div><span class="flip">⚡</span></div>
<div class="historyh">FRIENDS</div>
<div class="history">
<div class="hcell h1"><div class="havdot"></div></div>
<div class="hcell h2"><div class="havdot"></div></div>
<div class="hcell h3"><div class="havdot"></div></div>
<div class="hcell h4"><div class="havdot"></div></div>
</div>
</div>
<div class="col2">
<div class="widgetlabel">Home Screen Widget</div>
<div class="widget"><span class="wchip">Locket (iOS)</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #FFFFFF;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #FFFFFF;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.2px; margin: 0; color: #FFFFFF; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9A9A9A; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #00AE42; color: #FFFFFF;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #FFFFFF;
border: 1px solid #00AE42; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1E1E1E; color: #FFFFFF;
border: 1px solid #4c4c4c; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9A9A9A; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1E1E1E; color: #E0E0E0;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#111111; color:#FFFFFF; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; border-bottom:1px solid #3D3D3D; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#9A9A9A; }
.navlinks span.active { color:#fff; border-bottom:2px solid #00AE42; padding-bottom:20px; }
.search-bar { background:#1E1E1E; border:1px solid #3D3D3D; border-radius:4px; padding:8px 14px; font-size:12px; color:#9A9A9A; }
.main { display:flex; gap:0; height:380px; }
.left-col { width:460px; padding:24px 32px; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.eyebrow { color:#00AE42; font-size:11px; font-weight:500; letter-spacing:0.6px; text-transform:uppercase; }
.left-col h1 { font-size:36px; font-weight:700; margin:0; letter-spacing:-0.4px; line-height:1.1; }
.left-col p { font-size:14px; color:#9A9A9A; max-width:380px; }
.cta-row { display:flex; gap:10px; margin-top:8px; }
.btn-primary { height:44px; padding:0 22px; background:#00AE42; color:#fff; border:none; border-radius:4px; font-weight:600; font-size:14px; }
.btn-secondary { height:44px; padding:0 22px; background:transparent; color:#fff; border:1px solid #3D3D3D; border-radius:4px; font-weight:600; font-size:14px; }
.right-col { flex:1; background:#1E1E1E; display:flex; align-items:center; justify-content:center; }
.printer { width:220px; height:200px; position:relative; }
.printer::before { content:''; position:absolute; inset:0; border:3px solid #3D3D3D; border-radius:6px; }
.printer::after { content:''; position:absolute; top:30%; left:15%; right:15%; bottom:15%; background:#252525; border:2px solid #00AE42; border-radius:4px; }
.spec-strip { display:flex; border-top:1px solid #3D3D3D; border-bottom:1px solid #3D3D3D; }
.spec-item { flex:1; text-align:center; padding:14px 0; border-right:1px solid #3D3D3D; }
.spec-item:last-child { border-right:none; }
.spec-item b { display:block; font-size:20px; font-weight:700; }
.spec-item span { font-size:10px; letter-spacing:0.5px; text-transform:uppercase; color:#6B6B6B; }
.ams { display:flex; align-items:center; gap:14px; padding:14px 32px; }
.ams-grid { display:grid; grid-template-columns:repeat(4,32px); gap:6px; }
.ams-slot { width:32px; height:32px; border-radius:4px; border:2px solid #3D3D3D; background:#252525; }
.ams-slot.a1 { border-color:#00AE42; background:#00AE42; }
.ams-slot.a2 { border-color:#00AE42; background:#FF9800; }
.ams-slot.a3 { border-color:#00AE42; background:#2196F3; }
.ams-label { font-size:12px; color:#9A9A9A; }
.status-badge { background:#00AE42; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; margin-left:auto; }
</style></head>
<body>
<nav>
<p class="brand">Bambu Lab</p>
<div class="navlinks"><span class="active">Printers</span><span>AMS</span><span>Filament</span><span>Makerworld</span></div>
<div class="search-bar">🔍 Search printers</div>
</nav>
<div class="main">
<div class="left-col">
<span class="eyebrow">X1 Carbon Series</span>
<h1>X1C 3D Printer</h1>
<p>Multi-material printing with automatic calibration, LiDAR-assisted first-layer inspection, and enclosed chamber heating for high-temperature engineering filaments.</p>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Models</button>
</div>
</div>
<div class="right-col"><div class="printer"></div></div>
</div>
<div class="spec-strip">
<div class="spec-item"><b>256³mm</b><span>Build Volume</span></div>
<div class="spec-item"><b>0.05mm</b><span>Layer Resolution</span></div>
<div class="spec-item"><b>500mm/s</b><span>Print Speed</span></div>
</div>
<div class="ams">
<div class="ams-grid">
<div class="ams-slot a1"></div>
<div class="ams-slot a2"></div>
<div class="ams-slot a3"></div>
<div class="ams-slot"></div>
</div>
<span class="ams-label">AMS · 3 of 4 slots loaded</span>
<span class="status-badge">In Stock</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1c1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #1b1c1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040405; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1b1c1f; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "system-ui", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #dadbdf; }
.brand { font-size:18px; font-weight:700; color:#000000; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#1b1c1f; }
.util-btn { background:#ffffff; color:#000000; border:none; border-radius:16px; height:40px; padding:0 18px;
font-size:14px; font-weight:700; box-shadow:0 0 8px rgba(0,0,0,0.1); }
.hero { padding:20px 32px 12px; }
.hero h2 { font-size:32px; font-weight:700; line-height:1.19; margin:0 0 12px; color:#1b1c1f; }
.search-bar { background:#ffffff; border-radius:16px; box-shadow:0 0 8px rgba(0,0,0,0.1); height:64px;
display:flex; align-items:center; gap:0; padding:0 6px; }
.seg { flex:1; padding:0 16px; border-right:1px solid #dadbdf; display:flex; flex-direction:column; justify-content:center; height:44px; }
.seg:last-of-type { border-right:none; }
.seg .lbl { font-size:11px; color:#6e6f73; }
.seg .val { font-size:18px; font-weight:700; }
.search-go { background:#000000; color:#ffffff; border:none; border-radius:9999px; padding:4px 16px; height:52px; width:80px; font-size:16px; font-weight:700; margin-left:8px; }
.chiprow { display:flex; gap:10px; padding:16px 32px 0; }
.chip { background:#f7f8fb; color:#1b1c1f; border-radius:9999px; padding:2px 12px 2px 6px; font-size:12px; height:26px; display:flex; align-items:center; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 32px 0; }
.card { background:#ffffff; border:1px solid #dadbdf; border-radius:16px; overflow:hidden; }
.cover { height:100px; }
.cbody { padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.cbody .name { font-size:13px; font-weight:700; color:#1b1c1f; }
.cbody .loc { font-size:11px; color:#6e6f73; }
.cbody .price { font-size:14px; font-weight:700; color:#000000; margin-top:2px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; border-top:1px solid #dadbdf; font-size:11px; color:#6e6f73; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<p class="brand">Yanolja</p>
<div class="navlinks"><span>Stay</span><span>Leisure</span><span>Flight</span><span>Culture</span></div>
<button class="util-btn">Log In</button>
</nav>
<section class="hero">
<h2>Where do you want to stay?</h2>
<div class="search-bar">
<div class="seg"><span class="lbl">Destination</span><span class="val">Busan</span></div>
<div class="seg"><span class="lbl">Check-in — Check-out</span><span class="val">Sep 12 — Sep 14</span></div>
<div class="seg"><span class="lbl">Guests</span><span class="val">2 Adults</span></div>
<button class="search-go">Search</button>
</div>
</section>
<div class="chiprow">
<span class="chip">Hotel</span>
<span class="chip">Pension</span>
<span class="chip">Pool Villa</span>
<span class="chip">Leisure Ticket</span>
</div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#dce9f7,#a9c9ec);"></div><div class="cbody"><span class="name">Haeundae Bay Hotel</span><span class="loc">Busan · Haeundae</span><span class="price">₩128,000</span></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#e5e0d5,#c9bfa3);"></div><div class="cbody"><span class="name">Jeju Ocean Pension</span><span class="loc">Jeju · Aewol</span><span class="price">₩215,000</span></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#dde7dc,#a9c5a3);"></div><div class="cbody"><span class="name">Gapyeong Forest Villa</span><span class="loc">Gapyeong</span><span class="price">₩340,000</span></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#e6dee6,#c3a9cb);"></div><div class="cbody"><span class="name">Seoul City View Suites</span><span class="loc">Seoul · Jongno</span><span class="price">₩98,000</span></div></div>
</div>
<footer>
<span>© Yanolja</span>
<span>Yanolja · Stay · Leisure · Flight · Culture</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #0052b4; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #f8f8f8; color: #232323;
border: 1px solid #0052b4; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #232323;
border: 1px solid #c3c3c3; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #e4002b; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#232323; box-sizing:border-box;
font-family:'Segoe UI', 'Poppins', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#f8f8f8; display:flex; align-items:center; justify-content:center;
position:relative; border-bottom:1px solid #f0f0f0; }
.brand { font-size:19px; font-weight:600; margin:0; }
.navicons { position:absolute; right:28px; display:flex; gap:16px; font-size:13px; color:#232323; }
.navicons-left { position:absolute; left:28px; font-size:13px; color:#232323; }
main { display:flex; height:580px; }
.stage { width:360px; background:#fff; display:flex; align-items:center; justify-content:center; position:relative; }
.squish-badge { position:absolute; top:24px; left:24px; background:#ff8b21; color:#fff; font-size:11px; font-weight:700;
border-radius:8px; padding:5px 10px; }
.plush { width:170px; height:190px; position:relative; }
.plush-body { width:170px; height:150px; background:#0052b4; border-radius:50% 50% 44% 44% / 55% 55% 45% 45%;
box-shadow:0 22px 40px rgba(0,82,180,0.25); }
.plush-ear { width:46px; height:46px; background:#0052b4; border-radius:999px; position:absolute; top:-14px; }
.ear-l { left:10px; } .ear-r { right:10px; }
.plush-face { position:absolute; top:70px; left:34px; width:100px; text-align:center; }
.eye { width:10px; height:10px; background:#232323; border-radius:999px; display:inline-block; margin:0 14px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:12px; }
h1 { font-size:24px; font-weight:500; margin:0; }
.sub { font-size:13px; color:#323232; margin:0; }
.stars { color:#e0b252; font-size:14px; }
.stars span { color:#969696; font-size:12px; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:24px; font-weight:600; }
.price-strike { font-size:14px; color:#969696; text-decoration:line-through; }
.sale-badge { background:#e4002b; color:#fff; font-size:11px; font-weight:700; border-radius:4px; padding:2px 8px; width:fit-content; }
.size-row { display:flex; gap:8px; }
.size { border:1px solid #e6e6e6; border-radius:8px; padding:8px 14px; font-size:13px; }
.size.on { background:#0052b4; color:#fff; border-color:#0052b4; }
.actions { display:flex; gap:12px; margin-top:6px; }
.btn-primary { background:#0052b4; color:#fff; border-radius:8px; height:48px; padding:0 26px; display:flex;
align-items:center; font-weight:600; font-size:14px; }
.btn-secondary { background:#fff; border:1px solid #e6e6e6; color:#232323; border-radius:8px; height:48px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
.newsletter { margin-top:auto; border-top:1px solid #f0f0f0; padding-top:14px; display:flex; gap:8px; align-items:center; }
.newsletter input { flex:1; border:1px solid #e6e6e6; border-radius:999px; height:36px; padding:0 16px; font-size:12px;
color:#969696; display:flex; align-items:center; }
.nbtn { background:#0052b4; color:#fff; border-radius:999px; height:36px; padding:0 18px; display:flex; align-items:center;
font-size:12px; font-weight:600; }
</style></head>
<body>
<nav>
<span class="navicons-left">☰</span>
<p class="brand">Aurora</p>
<div class="navicons"><span>Search</span><span>Cart (2)</span><span>Account</span></div>
</nav>
<main>
<div class="stage">
<span class="squish-badge">Super Soft</span>
<div class="plush">
<div class="plush-ear ear-l"></div><div class="plush-ear ear-r"></div>
<div class="plush-body"></div>
<div class="plush-face"><span class="eye"></span><span class="eye"></span></div>
</div>
</div>
<div class="info">
<span class="sale-badge">Sale</span>
<h1>Bramble the Bear — 14"</h1>
<p class="sub">Ultra-plush jumbo teddy with a weighted base for extra snuggles.</p>
<div class="stars">★★★★★<span>4.8 (612 reviews)</span></div>
<div class="price-row"><span class="price">$24.99</span><span class="price-strike">$32.99</span></div>
<div class="size-row"><div class="size on">14"</div><div class="size">20"</div><div class="size">28"</div></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Gift Wrap +$3</div>
</div>
<div class="newsletter"><div style="flex:1;border:1px solid #e6e6e6;border-radius:999px;height:36px;padding:0 16px;font-size:12px;color:#969696;display:flex;align-items:center;">[email protected]</div><div class="nbtn">Join</div></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4285f4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4285f4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a4c3f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ea4335; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4285f4; color: #000000;
border: 1px solid #ea4335; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4285f4; color: #f5f5f5;
border: 1px solid #5f97f4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a4c3f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d7ad5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#202124; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; position:relative; overflow:hidden;
background:linear-gradient(180deg,#F5F5F5,#AADAFF 140%); }
.park { position:absolute; width:160px; height:120px; background:#C8E6C9; border-radius:40% 60% 55% 45%; }
.p1 { top:60px; left:-30px; } .p2 { bottom:100px; right:-20px; }
.roadv { position:absolute; width:14px; top:0; bottom:0; background:#fff; }
.roadv.r1 { left:120px; } .roadv.r2 { left:220px; }
.roadh { position:absolute; height:14px; left:0; right:0; background:#fff; }
.roadh.h1 { top:180px; } .roadh.h2 { top:340px; }
.hwy { position:absolute; height:10px; left:0; right:0; top:260px; background:#FDF6E3; }
.searchbar { position:absolute; top:16px; left:16px; right:16px; height:48px; background:#fff; border-radius:24px;
display:flex; align-items:center; padding:0 12px; gap:10px; box-shadow:rgba(0,0,0,0.15) 0 2px 8px; z-index:3; }
.searchbar .av { width:28px; height:28px; border-radius:50%; background:#4285F4; }
.searchbar .ph { flex:1; font-size:14px; color:#5F6368; }
.chiprow { position:absolute; top:74px; left:16px; right:16px; display:flex; gap:8px; z-index:3; }
.chiprow span { background:#fff; border:1px solid #DADCE0; border-radius:18px; padding:7px 12px; font-size:12px; font-weight:500;
box-shadow:rgba(0,0,0,0.08) 0 1px 3px; white-space:nowrap; }
.chiprow span.act { background:#E8F0FE; border-color:#4285F4; color:#1967D2; }
.pin { position:absolute; width:28px; height:36px; background:#EA4335; border-radius:50% 50% 50% 6px;
transform:rotate(45deg); z-index:2; }
.pin::before { content:''; position:absolute; inset:8px; background:#fff; border-radius:50%; }
.pin1 { top:220px; left:150px; } .pin2 { top:340px; left:250px; }
.locdot { position:absolute; width:12px; height:12px; background:#4285F4; border:3px solid #fff; border-radius:50%;
top:150px; left:70px; box-shadow:0 0 0 12px rgba(66,133,244,0.18); }
.fab { position:absolute; bottom:100px; right:16px; width:56px; height:56px; border-radius:50%; background:#4285F4;
color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
box-shadow:rgba(0,0,0,0.2) 0 4px 12px; z-index:3; }
.sheet { position:absolute; bottom:0; left:0; right:0; height:180px; background:#fff; border-radius:16px 16px 0 0;
box-shadow:rgba(0,0,0,0.12) 0 -4px 20px; z-index:3; padding:14px 16px; }
.grabber { width:32px; height:4px; background:#DADCE0; border-radius:2px; margin:0 auto 12px; }
.placename { font-size:18px; font-weight:500; }
.placemeta { font-size:13px; color:#5F6368; margin:4px 0 10px; }
.actionrow { display:flex; gap:8px; }
.actionrow .dirbtn { background:#4285F4; color:#fff; border-radius:22px; padding:9px 16px; font-size:13px; font-weight:500; }
.actionrow .other { background:#F1F3F4; border-radius:22px; padding:9px 14px; font-size:13px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:500; letter-spacing:-0.2px; margin:0; }
.brand span { color:#EA4335; }
.tag { font-size:14px; color:#5F6368; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:10px; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#5F6368; text-align:center; }
.typeblock .t1 { font-size:22px; font-weight:500; }
.typeblock .t2 { font-size:13px; color:#5F6368; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:500; padding:6px 12px; border-radius:999px;
background:#F1F3F4; border:1px solid #DADCE0; color:#5F6368; }
.footer { margin-top:auto; border-top:1px solid #DADCE0; padding-top:16px; font-size:11px; color:#80868B; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="park p1"></div><div class="park p2"></div>
<div class="hwy"></div>
<div class="roadv r1"></div><div class="roadv r2"></div>
<div class="roadh h1"></div><div class="roadh h2"></div>
<div class="pin pin1"></div><div class="pin pin2"></div>
<div class="locdot"></div>
<div class="searchbar"><span class="av"></span><span class="ph">Search here</span>🎙</div>
<div class="chiprow"><span class="act">Restaurants</span><span>Coffee</span><span>Hotels</span></div>
<div class="fab">➤</div>
<div class="sheet">
<div class="grabber"></div>
<div class="placename">Blue Bottle Coffee</div>
<div class="placemeta">4.5 ★ (2,345) · Coffee shop · $$ · 1.2 mi</div>
<div class="actionrow"><span class="dirbtn">Directions</span><span class="other">Save</span><span class="other">Call</span></div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Google Maps (iOS)<span>.</span></h1>
<p class="tag">The map is the product — chrome floats as translucent pills and sheets over full-bleed geography.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#4285F4"></div><small>#4285F4</small></div>
<div class="sw"><div class="chip2" style="background:#EA4335"></div><small>#EA4335</small></div>
<div class="sw"><div class="chip2" style="background:#34A853"></div><small>#34A853</small></div>
<div class="sw"><div class="chip2" style="background:#FB8C00"></div><small>#FB8C00</small></div>
<div class="sw"><div class="chip2" style="background:#FBBC04"></div><small>#FBBC04</small></div>
</div>
<div class="typeblock">
<div class="t1">Blue Bottle Coffee</div>
<div class="t2">Google Sans + Roboto · tabular figures for distance, ETA, ratings</div>
</div>
<div class="taglist">
<span>Four-color pin system</span><span>Location accuracy halo</span><span>Bottom sheet detents</span>
<span>Route polyline + casing</span><span>Category chip rail</span>
</div>
<div class="footer">Map owns 60%+ of viewport · UI floats, never boxes the geography</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #bf0000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #bf0000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #dd8787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #134ff3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #bf0000; color: #ffffff;
border: 1px solid #134ff3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #bf0000; color: #f5f5f5;
border: 1px solid #c82727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #dd8787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #a30d27; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box; font-family:Meiryo,"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif; font-size:12px; }
* { box-sizing:border-box; }
.util { background:#f4f4f4; font-size:11px; color:#666; padding:4px 20px; }
.header { display:flex; align-items:center; padding:8px 20px; gap:12px; }
.brand { font-weight:700; font-size:18px; color:#bf0000; }
.search { flex:1; display:flex; height:40px; }
.sfield { flex:1; background:#f7f7f7; border:1px solid #ebebeb; border-radius:4px 0 0 4px; padding:8px 12px; color:#666; }
.sbtn { background:#bf0000; color:#fff; border-radius:0 4px 4px 0; width:60px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.login { background:#bf0000; color:#fff; border-radius:4px; padding:0 11px; height:32px; display:flex; align-items:center; font-size:12px; }
.servicenav { background:#333; display:flex; gap:2px; padding:0 20px; }
.stab { color:#fff; padding:12px 8px; font-size:13px; }
.stab.active { background:#bf0000; padding:8px 20px; }
.band { background:#f4f4f4; padding:14px 20px; display:flex; gap:14px; }
.module { flex:1; background:#fff; border-radius:8px; padding:10px; }
.module h4 { font-size:14px; font-weight:600; margin:0 0 8px; }
.prod { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.thumb { width:44px; height:44px; border-radius:4px; }
.pname { font-size:11px; }
.price { color:#bf0000; font-weight:700; font-size:12px; }
.sale { margin:0 20px; background:#fff9c8; border-radius:8px; padding:4px; }
.saleinner { background:#fff100; border-radius:8px; padding:12px 24px 16px; text-align:center; color:#666; font-weight:700; }
</style></head>
<body>
<div class="util">Free Membership Registration | Log In</div>
<div class="header">
<div class="brand">Rakuten</div>
<div class="search"><div class="sfield">Search by keyword</div><div class="sbtn">Search</div></div>
<div class="login">Log In</div>
</div>
<div class="servicenav">
<div class="stab active">Marketplace</div>
<div class="stab">Travel</div>
<div class="stab">Books</div>
<div class="stab">Card</div>
<div class="stab">Bank</div>
</div>
<div class="band">
<div class="module">
<h4>Trending Now</h4>
<div class="prod"><div class="thumb" style="background:linear-gradient(150deg,#f5c9a0,#e69b5c);"></div><div><div class="pname">Wireless Earbuds</div><div class="price">¥3,980</div></div></div>
<div class="prod"><div class="thumb" style="background:linear-gradient(150deg,#c9d9f5,#7fa0e6);"></div><div><div class="pname">Insulated Tumbler</div><div class="price">¥1,280</div></div></div>
</div>
<div class="module">
<h4>Recently Viewed</h4>
<div class="prod"><div class="thumb" style="background:linear-gradient(150deg,#d9f5c9,#8fbd8b);"></div><div><div class="pname">Organic Coffee Beans</div><div class="price">¥980</div></div></div>
<div class="prod"><div class="thumb" style="background:linear-gradient(150deg,#f5c9e0,#e07fa8);"></div><div><div class="pname">Aroma Diffuser</div><div class="price">¥2,480</div></div></div>
</div>
</div>
<div class="sale"><div class="saleinner">Super Deal – Points Up Now!</div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f4f1; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f4f1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #E2E6DF; }
.brand { font-size:19px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navtabs { display:flex; gap:24px; font-size:13px; font-weight:600; color:#9A9E96; }
.navtabs span.on { color:#428000; }
.record { width:34px; height:34px; border-radius:50%; background:#428000;
box-shadow:0 6px 14px -4px rgba(66,128,0,0.4); }
.wrap { display:flex; gap:20px; padding:18px 36px; }
.map { position:relative; width:520px; height:490px; border-radius:14px; overflow:hidden;
background:#F2F4F1;
background-image:
radial-gradient(circle at 20% 30%, rgba(66,128,0,0.10) 0, rgba(66,128,0,0.10) 60px, transparent 61px),
radial-gradient(circle at 70% 65%, rgba(66,128,0,0.08) 0, rgba(66,128,0,0.08) 90px, transparent 91px),
radial-gradient(circle at 45% 80%, rgba(66,128,0,0.07) 0, rgba(66,128,0,0.07) 70px, transparent 71px); }
.searchpill { position:absolute; top:14px; left:14px; right:14px; height:44px; background:#fff; border-radius:22px;
box-shadow:rgba(0,0,0,0.12) 0 4px 12px; display:flex; align-items:center; padding:0 16px; gap:10px;
font-size:13px; color:#9A9E96; }
.pin { position:absolute; width:20px; height:20px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
box-shadow:0 2px 5px rgba(0,0,0,0.25); }
.pin.sel { width:26px; height:26px; border:3px solid #fff; }
.toggle { position:absolute; bottom:70px; left:50%; transform:translateX(-50%); display:flex;
background:#fff; border-radius:20px; box-shadow:rgba(0,0,0,0.12) 0 4px 12px; overflow:hidden; }
.toggle span { padding:9px 22px; font-size:13px; font-weight:600; }
.toggle .on { background:#428000; color:#fff; }
.toggle .off { color:#428000; }
.sheet { position:absolute; bottom:0; left:0; right:0; height:64px; background:#fff; border-radius:16px 16px 0 0;
box-shadow:rgba(0,0,0,0.18) 0 -10px 24px; display:flex; align-items:center; padding:0 16px; gap:10px; }
.sheetphoto { width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#c9d9a8,#6f9b4f); flex-shrink:0; }
.sheetname { font-size:13px; font-weight:600; }
.sheetstat { font-size:11px; color:#6B6F68; margin-top:2px; }
.list { flex:1; display:flex; flex-direction:column; gap:14px; }
.tcard { border:1px solid #E2E6DF; border-radius:12px; padding:12px; }
.tphoto { width:100%; height:104px; border-radius:10px; margin-bottom:9px; position:relative; }
.tphoto .pc { position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,0.55); color:#fff; font-size:10px;
font-weight:700; padding:2px 6px; border-radius:6px; }
.trow1 { display:flex; align-items:center; justify-content:space-between; }
.pill { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:3px 9px; border-radius:11px; }
.pill.easy { color:#428000; background:#E8F0DF; }
.pill.mod { color:#C77700; background:#FBEEDD; }
.rate { font-size:12px; color:#1A1A1A; font-weight:600; }
.tname { font-size:15px; font-weight:600; margin-top:7px; }
.tloc { font-size:12px; color:#6B6F68; margin-top:2px; }
.stats { font-size:12px; color:#6B6F68; margin-top:6px; }
.stats b { color:#1A1A1A; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">AllTrails (iOS)</p>
<div class="navtabs"><span class="on">Explore</span><span>Saved</span><span>Community</span><span>Profile</span></div>
<div class="record"></div>
</nav>
<div class="wrap">
<div class="map">
<div class="searchpill">🔍 Search by city, park, or trail</div>
<div class="pin sel" style="left:150px; top:140px; background:#428000;"></div>
<div class="pin" style="left:260px; top:210px; background:#C77700;"></div>
<div class="pin" style="left:340px; top:120px; background:#428000;"></div>
<div class="pin" style="left:200px; top:280px; background:#B3261E;"></div>
<div class="pin" style="left:390px; top:260px; background:#428000;"></div>
<div class="toggle"><span class="on">Map</span><span class="off">List</span></div>
<div class="sheet">
<div class="sheetphoto"></div>
<div><div class="sheetname">Eagle Ridge Loop</div><div class="sheetstat">5.2 mi · ↑ 1,200 ft · Moderate</div></div>
</div>
</div>
<div class="list">
<div class="tcard">
<div class="tphoto" style="background:linear-gradient(135deg,#cbe0a8,#7fae54)"><span class="pc">📷 32</span></div>
<div class="trow1"><span class="pill easy">Easy</span><span class="rate">★ 4.7 (1,284)</span></div>
<div class="tname">Eagle Ridge Loop</div>
<div class="tloc">Marin County, California</div>
<div class="stats">Length <b>5.2 mi</b> · Est. <b>2h 45m</b> · ↑ <b>1,200 ft</b></div>
</div>
<div class="tcard">
<div class="tphoto" style="background:linear-gradient(135deg,#f0d7a8,#c98a3f)"><span class="pc">📷 18</span></div>
<div class="trow1"><span class="pill mod">Moderate</span><span class="rate">★ 4.5 (612)</span></div>
<div class="tname">Sunset Mesa Trail</div>
<div class="tloc">Boulder County, Colorado</div>
<div class="stats">Length <b>7.8 mi</b> · Est. <b>4h 10m</b> · ↑ <b>2,050 ft</b></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5055b1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5055b1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #abadd6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4dac27; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5055b1; color: #ffffff;
border: 1px solid #4dac27; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5055b1; color: #f5f5f5;
border: 1px solid #6a6fbc; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #abadd6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #50639b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard","NotoSansKR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
header { padding:16px 32px 12px; border-bottom:1px solid #eaeaea; }
.toprow { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.brand { font-size:20px; font-weight:700; letter-spacing:-0.3px; }
.utils { display:flex; gap:16px; font-size:12px; color:#595959; }
.search { display:flex; align-items:center; gap:10px; background:#ffffff; border:1px solid #eaeaea;
border-radius:24px; height:40px; padding:0 16px; max-width:420px; }
.search input-fake { flex:1; font-size:13px; color:#767676; }
.search .go { width:22px; height:22px; border-radius:50%; background:#5055b1; flex:0 0 auto; }
.tabs { display:flex; gap:22px; padding:12px 32px 0; border-bottom:1px solid #eaeaea; }
.tab { font-size:14px; color:#767676; padding-bottom:11px; }
.tab.on { color:#000000; font-weight:700; border-bottom:2px solid #5055b1; }
.section { padding:16px 32px 8px; display:flex; align-items:baseline; justify-content:space-between; }
.section h2 { font-size:20px; font-weight:700; margin:0; }
.section .more { font-size:12px; color:#278203; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:0 32px 16px; }
.card { border:1px solid #eaeaea; border-radius:8px; overflow:hidden; background:#ffffff; }
.cover { height:140px; position:relative; }
.cover::after { content:''; position:absolute; inset:10px; border:1px solid rgba(255,255,255,0.35); border-radius:2px; }
.c1 { background:linear-gradient(160deg,#5055b1,#8388d6); }
.c2 { background:linear-gradient(160deg,#4dac27,#8fd066); }
.c3 { background:linear-gradient(160deg,#c71e24,#e37a7d); }
.c4 { background:linear-gradient(160deg,#474c98,#7378c4); }
.c5 { background:linear-gradient(160deg,#595959,#9a9a9a); }
.meta { padding:9px 10px 11px; }
.title { font-size:12.5px; font-weight:500; line-height:1.35; height:34px; overflow:hidden; }
.author { font-size:11px; color:#767676; margin:4px 0 6px; }
.price-row { display:flex; align-items:baseline; gap:6px; }
.strike { font-size:10px; color:#767676; text-decoration:line-through; }
.price { font-size:13px; font-weight:700; color:#000000; }
.off { font-size:11px; font-weight:700; color:#c71e24; }
.btnrow { display:flex; gap:6px; margin-top:8px; }
.buy { flex:1; background:#5055b1; color:#ffffff; border:none; border-radius:6px; font-size:11px; font-weight:500; padding:7px 0; text-align:center; }
.cart { flex:1; background:#767676; color:#ffffff; border:none; border-radius:6px; font-size:11px; font-weight:500; padding:7px 0; text-align:center; }
.rail { margin:6px 32px 0; background:#f7f7f7; border-radius:8px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.rail-title { font-size:13px; color:#195800; font-weight:700; }
.rail-sub { font-size:11px; color:#767676; }
footer { padding:10px 32px; text-align:center; font-size:11px; color:#767676; border-top:1px solid #eaeaea; margin-top:8px; }
footer b { color:#195800; }
</style></head>
<body>
<header>
<div class="toprow">
<div class="brand">Kyobo Book Centre</div>
<div class="utils"><span>Login</span><span>Sign up</span><span>My Page</span><span>Cart</span></div>
</div>
<div class="search"><span class="go"></span><input-fake>Search by title, author, or ISBN</input-fake></div>
</header>
<div class="tabs">
<div class="tab on">Domestic Books</div>
<div class="tab">Foreign Books</div>
<div class="tab">eBook</div>
<div class="tab">Hot Tracks</div>
<div class="tab">Gifts</div>
</div>
<div class="section"><h2>Today's Picks</h2><span class="more">Weekly Bestsellers ></span></div>
<div class="grid">
<div class="card"><div class="cover c1"></div><div class="meta"><div class="title">The Quiet Algorithm: Stories of Everyday Code</div><div class="author">Minji Han</div><div class="price-row"><span class="strike">18,000</span><span class="off">20%</span></div><div class="price-row"><span class="price">14,400</span></div><div class="btnrow"><span class="buy">Buy</span><span class="cart">Cart</span></div></div></div>
<div class="card"><div class="cover c2"></div><div class="meta"><div class="title">A Field Guide to Slow Mornings</div><div class="author">Jihoon Yang</div><div class="price-row"><span class="strike">15,800</span><span class="off">10%</span></div><div class="price-row"><span class="price">14,220</span></div><div class="btnrow"><span class="buy">Buy</span><span class="cart">Cart</span></div></div></div>
<div class="card"><div class="cover c3"></div><div class="meta"><div class="title">Letters from the Reading Room</div><div class="author">Soyeon Baek</div><div class="price-row"><span class="strike">13,500</span><span class="off">15%</span></div><div class="price-row"><span class="price">11,470</span></div><div class="btnrow"><span class="buy">Buy</span><span class="cart">Cart</span></div></div></div>
<div class="card"><div class="cover c4"></div><div class="meta"><div class="title">The Grammar of Small Cities</div><div class="author">Daeun Cho</div><div class="price-row"><span class="strike">22,000</span><span class="off">12%</span></div><div class="price-row"><span class="price">19,360</span></div><div class="btnrow"><span class="buy">Buy</span><span class="cart">Cart</span></div></div></div>
<div class="card"><div class="cover c5"></div><div class="meta"><div class="title">Notes on a Long Commute</div><div class="author">Seungwoo Ko</div><div class="price-row"><span class="strike">12,000</span><span class="off">5%</span></div><div class="price-row"><span class="price">11,400</span></div><div class="btnrow"><span class="buy">Buy</span><span class="cart">Cart</span></div></div></div>
</div>
<div class="rail"><span class="rail-title">This Week's Ranking</span><span class="rail-sub">Updated every Monday · Online + In-store</span></div>
<footer>Since 1980, Gwanghwamun, Seoul · <b>People make books, and books make people</b></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3dba90; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3dba90; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #255d4a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3e3e3e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3dba90; color: #3e3e3e;
border: 1px solid #3e3e3e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3dba90; color: #111111;
border: 1px solid #369f7c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #255d4a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3da683; color: #3e3e3e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3e3e3e; box-sizing:border-box;
font-family:"Noto Sans TC", "Microsoft JhengHei", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:700; color:#3e3e3e; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#3e3e3e; }
.right { display:flex; gap:10px; align-items:center; }
.login { color:#3dba90; font-weight:700; font-size:14px; }
.signup { background:#fff; border:1px solid #3dba90; color:#3dba90; border-radius:4px; height:40px;
padding:0 16px; font-size:14px; font-weight:700; display:flex; align-items:center; }
.hero { text-align:center; padding:16px 40px 18px; }
.hero h1 { font-size:34px; font-weight:900; line-height:1.4; letter-spacing:1px; margin:0 0 10px; color:#3e3e3e; }
.hero p { font-size:15px; color:#000000; margin:0 0 14px; }
.cta { display:inline-flex; background:#3dba90; color:#fff; border-radius:4px; height:48px; padding:0 26px;
font-size:14px; font-weight:500; align-items:center; }
.band { background:#f7f7f7; padding:16px 40px; }
.band h2 { text-align:center; font-size:22px; font-weight:700; letter-spacing:1px; margin:0 0 14px; color:#3e3e3e; }
.row { display:flex; gap:14px; }
.card { flex:1; background:#fff; border-radius:8px; padding:16px; box-shadow:rgba(0,0,0,0.06) 0px 2px 8px; }
.card .dot { width:34px; height:34px; border-radius:8px; margin-bottom:8px; }
.d1 { background:#5f54e0; } .d2 { background:#f5b849; } .d3 { background:#f26659; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 4px; color:#3e3e3e; }
.card p { font-size:12px; color:#000; margin:0 0 6px; line-height:1.5; }
.learn { color:#3dba90; font-size:13px; font-weight:700; }
.tiers { display:flex; gap:12px; padding:14px 40px 0; }
.tier { flex:1; background:#fff; border:1px solid #dddddd; border-radius:8px; padding:12px; text-align:center; }
.tier.hi { border-color:#3dba90; }
.tier .name { font-size:13px; color:#3e3e3e; }
.tier .band-top { height:4px; background:#3dba90; border-radius:4px 4px 0 0; margin:-12px -12px 8px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #dddddd; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#9b9b9b; }
</style></head>
<body>
<nav>
<div class="brand">SurveyCake</div>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Templates</span></div>
<div class="right"><span class="login">Log in</span><div class="signup">Sign up</div></div>
</nav>
<div class="hero">
<h1>Enterprise-grade cloud survey service</h1>
<p>Powerful professional features and question types, built for teams that trust data.</p>
<div class="cta">Create a free survey</div>
</div>
<div class="band">
<h2>Everything a survey team needs</h2>
<div class="row">
<div class="card"><div class="dot d1"></div><h3>Advanced logic</h3><p>Branching, skip logic, and scoring for complex forms.</p><span class="learn">Learn more</span></div>
<div class="card"><div class="dot d2"></div><h3>Team collaboration</h3><p>Shared workspaces and roles for growing organizations.</p><span class="learn">Learn more</span></div>
<div class="card"><div class="dot d3"></div><h3>Data security</h3><p>Enterprise compliance built for sensitive research data.</p><span class="learn">Learn more</span></div>
</div>
</div>
<div class="tiers">
<div class="tier"><div class="band-top"></div><div class="name">BASIC</div></div>
<div class="tier hi"><div class="band-top"></div><div class="name">PRO</div></div>
<div class="tier"><div class="band-top"></div><div class="name">TEAM</div></div>
<div class="tier"><div class="band-top"></div><div class="name">ENTERPRISE</div></div>
</div>
<footer><span>© SurveyCake</span><span>SurveyCake · Support Center · Privacy</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dc87; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dc87; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096c46; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002d37; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dc87; color: #002d37;
border: 1px solid #002d37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dc87; color: #111111;
border: 1px solid #03bc74; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096c46; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c07a; color: #002d37;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#191919; box-sizing:border-box;
font-family:"Clear Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; overflow:hidden; }
.side { width:280px; flex:0 0 280px; background:#002d37; color:#ffffff; display:flex; flex-direction:column;
padding:22px 18px; }
.side .brand { font-size:20px; font-weight:700; margin-bottom:22px; letter-spacing:-0.2px; }
.side .navitem { height:40px; display:flex; align-items:center; padding:0 12px; border-radius:4px;
font-size:15px; font-weight:500; color:#bcd6da; margin-bottom:4px; }
.side .navitem.act { background:rgba(255,255,255,0.10); color:#ffffff; }
.side .doclabel { font-size:12px; color:#8fb0b5; margin:18px 0 8px; text-transform:uppercase; letter-spacing:0.6px; }
.doc { height:44px; border:1px solid rgba(255,255,255,0.14); border-radius:4px; display:flex;
align-items:center; padding:0 12px; gap:8px; margin-bottom:8px; }
.doc .icon { width:16px; height:20px; border:1.5px solid #00dc87; border-radius:2px; flex:0 0 16px; }
.doc .name { font-size:13px; color:#e8f4f2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side .grow { flex:1; }
.side .newbtn { height:44px; background:#caff00; color:#000000; border:none; border-radius:4px; font-size:16px;
font-weight:500; display:flex; align-items:center; justify-content:center; }
.main { flex:1; display:flex; flex-direction:column; padding:22px 34px; overflow:hidden; }
.topbar { flex:0 0 40px; display:flex; align-items:center; justify-content:space-between; }
.topbar .fname { font-size:16px; font-weight:500; color:#191919; }
.topbar .status { font-size:13px; font-weight:500; color:#007aff; border:1.5px solid #007aff; border-radius:4px;
padding:4px 10px; }
.preview { flex:1; margin-top:14px; background:#ffffff; border:1.5px solid #002d37; border-radius:4px;
padding:28px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.preview h2 { font-size:56px; font-weight:700; margin:0 0 6px; color:#002d37; letter-spacing:-0.5px; }
.line { height:10px; background:#e6e6e6; border-radius:2px; }
.line.w1 { width:92%; } .line.w2 { width:78%; } .line.w3 { width:85%; } .line.w4 { width:60%; }
.sigbox { margin-top:auto; align-self:flex-end; width:280px; height:96px; border:1.5px dashed #4b4b4b;
border-radius:4px; position:relative; display:flex; align-items:flex-end; padding:10px 14px; }
.sigbox .siglabel { position:absolute; top:8px; left:14px; font-size:12px; color:#4b4b4b; }
.sigscript { width:170px; height:28px; border-bottom:2px solid #002d37; position:relative; }
.sigscript::after { content:"Sam Carter"; position:absolute; left:0; bottom:4px; font-size:20px; font-style:italic;
color:#002d37; font-weight:500; }
.actions { flex:0 0 66px; display:flex; align-items:center; gap:12px; margin-top:16px; }
.btn-outline { height:38px; padding:0 18px; border:1.5px solid #002d37; color:#002d37; background:transparent;
border-radius:4px; font-size:16px; font-weight:500; display:flex; align-items:center; }
.btn-solid { height:38px; padding:0 18px; border:1.5px solid #002d37; background:#002d37; color:#ffffff;
border-radius:4px; font-size:16px; font-weight:500; display:flex; align-items:center; }
.grow2 { flex:1; }
.btn-hero { height:53px; padding:0 30px; background:#caff00; color:#000000; border:none; border-radius:4px;
font-size:22px; font-weight:500; display:flex; align-items:center; }
</style></head>
<body>
<div class="app">
<div class="side">
<div class="brand">Kdan Mobile</div>
<div class="navitem act">Documents</div>
<div class="navitem">Templates</div>
<div class="navitem">Signatures</div>
<div class="navitem">Settings</div>
<div class="doclabel">Recent</div>
<div class="doc"><div class="icon"></div><div class="name">Service_Agreement.pdf</div></div>
<div class="doc"><div class="icon"></div><div class="name">NDA_Draft_v2.pdf</div></div>
<div class="doc"><div class="icon"></div><div class="name">Vendor_Contract.pdf</div></div>
<div class="grow"></div>
<button class="newbtn">New Document</button>
</div>
<div class="main">
<div class="topbar">
<div class="fname">Service_Agreement.pdf</div>
<div class="status">Awaiting signature</div>
</div>
<div class="preview">
<h2>Service Agreement</h2>
<div class="line w1"></div>
<div class="line w2"></div>
<div class="line w3"></div>
<div class="line w4"></div>
<div class="sigbox">
<div class="siglabel">Sign here</div>
<div class="sigscript"></div>
</div>
</div>
<div class="actions">
<button class="btn-outline">Save Draft</button>
<button class="btn-solid">Request Signature</button>
<div class="grow2"></div>
<button class="btn-hero">Send Now</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #101010; color: #f2f2f2;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #101010; color: #f2f2f2;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.6px; margin: 0; color: #f2f2f2; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; margin: 0; color: #8b949e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #00d992; color: #101010;
border: none; border-radius: 6px; padding: {spacing.md} {spacing.lg};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #101010; color: #f2f2f2;
border: 1px solid #3d3a39; border-radius: 6px;
padding: {spacing.md} {spacing.lg}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #1a1a1a; color: #f2f2f2;
border: 1px solid #3d3a39; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b949e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 20px; background: #101010; color: #f2f2f2;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#101010; color:#f2f2f2; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #3d3a39; }
.brandwrap { display:flex; align-items:center; gap:8px; }
.bolt { width:16px; height:16px; color:#00d992; font-size:16px; line-height:1; }
.brand { font-size:15px; font-weight:600; color:#ffffff; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#bdbdbd; }
.navcta { background:#00d992; color:#101010; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:700; }
.hero { padding:34px 32px 24px; display:flex; gap:26px; align-items:center; }
.heroleft { flex:1; }
.status { display:inline-flex; align-items:center; gap:6px; border:1px solid #3d3a39; border-radius:999px;
padding:4px 12px; font-size:11px; color:#2fd6a1; margin-bottom:14px; }
.status .dot { width:6px; height:6px; border-radius:50%; background:#00d992; }
.hero h1 { font-size:32px; font-weight:600; line-height:1.12; margin:0 0 12px; color:#ffffff; max-width:400px; }
.hero p { font-size:13.5px; color:#bdbdbd; margin:0 0 18px; max-width:380px; }
.btnrow { display:flex; gap:10px; }
.btn { border-radius:6px; padding:9px 18px; font-size:13px; font-weight:600; }
.btn-g { background:#00d992; color:#101010; }
.btn-o { background:transparent; color:#f2f2f2; border:1px solid #3d3a39; }
.term { flex:1; background:#1a1a1a; border:1px solid #3d3a39; border-radius:10px; padding:0; overflow:hidden; }
.termbar { height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid #3d3a39; }
.tdot { width:8px; height:8px; border-radius:50%; background:#3d3a39; }
.termbody { padding:14px 16px; font-size:12px; line-height:1.85; }
.termbody .g { color:#00d992; }
.termbody .m { color:#8b949e; }
.termbody .w { color:#f5f6f7; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 32px 30px; }
.card { border:1px solid #3d3a39; border-radius:8px; padding:16px; background:#101010; }
.card .top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.card .pill { font-size:10px; color:#2fd6a1; border:1px solid #3d3a39; border-radius:999px; padding:2px 8px; }
.card h3 { font-size:14px; font-weight:600; margin:0 0 4px; color:#ffffff; }
.card p { font-size:11.5px; color:#8b949e; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<div class="brandwrap"><span class="bolt">⚡</span><div class="brand">VoltAgent</div></div>
<div class="navlinks"><span>Docs</span><span>Agents</span><span>Observability</span><span>Pricing</span></div>
<div class="navcta">Get started</div>
</nav>
<div class="hero">
<div class="heroleft">
<div class="status"><span class="dot"></span>v1.4 now with voice agents</div>
<h1>Build AI agents with code, not drag and drop</h1>
<p>The open-source TypeScript framework for building, observing, and shipping production AI agents.</p>
<div class="btnrow"><button class="btn btn-g">npm create voltagent</button><button class="btn btn-o">Read the docs</button></div>
</div>
<div class="term">
<div class="termbar"><span class="tdot"></span><span class="tdot"></span><span class="tdot"></span></div>
<div class="termbody mono">
<span class="m">$</span> <span class="w">voltagent dev</span><br>
<span class="g">✓</span> <span class="m">Agent</span> supervisor <span class="g">ready</span><br>
<span class="m">→</span> tool: <span class="w">web_search</span><br>
<span class="m">→</span> tool: <span class="w">code_exec</span><br>
<span class="g">●</span> <span class="m">listening on :3141</span>
</div>
</div>
</div>
<div class="cards">
<div class="card"><div class="top"><h3>Agent graphs</h3><span class="pill">core</span></div><p>Compose supervisor and sub-agents into one traceable workflow.</p></div>
<div class="card"><div class="top"><h3>Observability</h3><span class="pill">console</span></div><p>Visual tracing for every tool call, token, and handoff.</p></div>
<div class="card"><div class="top"><h3>Voice + MCP</h3><span class="pill">beta</span></div><p>Native voice interaction and Model Context Protocol support.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faad87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e64d00; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #000000;
border: 1px solid #e64d00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faad87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb5400; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1A1A1A; box-sizing:border-box;
font-family:Pretendard, "Pretendard JP", "Noto Sans TC", system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
.brand { font-size:17px; font-weight:700; color:#FF5500; }
.tabs { display:flex; gap:16px; font-size:14px; font-weight:500; color:#767676; }
.tabs .on { color:#1A1A1A; font-weight:600; }
.row { display:flex; gap:8px; }
.cta { background:#FF5500; color:#fff; border-radius:999px; padding:10px 20px; font-size:14px; font-weight:600; }
.login { background:#fff; border:1px solid #FF5500; color:#FF5500; border-radius:999px; padding:4px 12px; font-size:12px; }
.chiprow { display:flex; gap:8px; padding:8px 26px; }
.chip { background:#F2F2F2; color:#333333; border-radius:12px; padding:4px 10px; font-size:12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:10px 26px 0; }
.room { background:#ffffff; border:1px solid #E5E5E5; border-radius:12px; padding:12px; }
.top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.av { width:44px; height:44px; border-radius:50%; border:2px solid #FF5500;
background:linear-gradient(135deg,#ffd7b8,#FF5500); }
.room h4 { font-size:13px; font-weight:600; margin:0; }
.room span { font-size:10.5px; color:#767676; }
.badge { background:#FF5500; color:#fff; border-radius:6px; font-size:9.5px; font-weight:600; padding:2px 5px; }
.band { display:flex; gap:14px; padding:18px 26px 0; }
.live-panel { flex:1; background:#1A1A1A; border-radius:16px; padding:18px; color:#fff; }
.live-panel h3 { font-size:15px; margin:0 0 8px; }
.gift { display:inline-block; background:rgba(255,179,0,0.15); color:#FFB300; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600; }
footer { position:absolute; bottom:0; width:960px; padding:12px 26px; display:flex; justify-content:space-between;
font-size:11px; color:#767676; border-top:1px solid #E5E5E5; }
</style></head>
<body>
<nav>
<p class="brand">Spoon</p>
<div class="tabs"><span class="on">Live</span><span>Podcast</span><span>Ranking</span></div>
<div class="row"><span class="login">Log In</span><span class="cta">Go Live</span></div>
</nav>
<div class="chiprow"><span class="chip">#Romance</span><span class="chip">#Stories</span><span class="chip">#Chat</span><span class="chip">#Music</span></div>
<div class="grid">
<div class="room"><div class="top"><div class="av"></div><h4>DJ Jiwoo<br><span class="badge">LIVE</span></h4></div><span>1,204 listening</span></div>
<div class="room"><div class="top"><div class="av"></div><h4>Late Night Radio<br><span class="badge">LIVE</span></h4></div><span>532 listening</span></div>
<div class="room"><div class="top"><div class="av"></div><h4>Karaoke Challenge<br><span class="badge">LIVE</span></h4></div><span>890 listening</span></div>
<div class="room"><div class="top"><div class="av"></div><h4>Advice Corner<br><span class="badge">LIVE</span></h4></div><span>341 listening</span></div>
</div>
<div class="band">
<div class="live-panel"><h3>Live right now</h3><span class="gift">Gift sent!</span></div>
</div>
<footer>
<span>A space where anyone can easily start an audio live stream</span>
<span>Spoon · Live · Podcast · Ranking</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5c46ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5c46ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b0a6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f323ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5c46ff; color: #ffffff;
border: 1px solid #f323ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5c46ff; color: #f5f5f5;
border: 1px solid #7462fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b0a6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7440ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292930; box-sizing:border-box;
font-family:ui-sans-serif, system-ui, -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { font-size:19px; font-weight:800; margin:0; color:#292930; }
.navlinks { display:flex; gap:18px; font-size:14px; color:#5c5c61; }
.btn-login { background:#292930; color:#ffffff; border:none; border-radius:8px; padding:0 16px; height:36px; font-size:14px; font-weight:500; }
.btn-secondary { background:#f5f5f6; color:#292930; border:none; border-radius:8px; padding:0 16px; height:36px; font-size:14px; margin-right:8px; }
.heroband { background:linear-gradient(135deg,#5c46ff,#7a5eff); padding:26px 60px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.heroband h1 { font-size:36px; font-weight:800; color:#ffffff; margin:0; line-height:1.1; }
.heroband p { font-size:14px; color:rgba(255,255,255,0.85); margin:0; }
.btn-invert { background:#ffffff; color:#5c46ff; border:none; border-radius:26px; padding:0 30px; height:48px; font-size:16px; font-weight:700; box-shadow:rgba(0,0,0,0.2) 0px 0px 20px 0px; }
.avatar-row { display:flex; justify-content:center; gap:14px; padding:16px 0 4px; }
.avatar-circle { width:56px; height:56px; border-radius:50%; border:3px solid #ffffff; }
.section { padding:18px 60px 0; }
.section h2 { font-size:22px; font-weight:700; margin:0 0 10px; text-align:center; }
.pillars { display:flex; gap:14px; }
.pillar { flex:1; background:#f8f8fa; border-radius:24px; padding:16px; display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; }
.pillar .ic { width:44px; height:44px; border-radius:50%; }
.pillar h3 { font-size:16px; font-weight:700; margin:0; }
.pillar p { font-size:11px; color:#75757a; margin:0; }
.badge-row { display:flex; justify-content:center; gap:8px; padding:14px 0 0; }
.badge { background:#5c46ff; color:#ffffff; border-radius:9999px; padding:4px 14px; font-size:12px; font-weight:500; }
footer { position:absolute; bottom:0; left:0; right:0; padding:10px 28px; font-size:11px; color:#75757a; text-align:center; }
</style></head>
<body>
<nav>
<p class="brand">ZEPETO</p>
<div class="navlinks"><span>Contents</span><span>Creator Program</span><span>Business</span><span>Guides</span></div>
<div style="display:flex;"><button class="btn-secondary">Buy Coins</button><button class="btn-login">Login</button></div>
</nav>
<section class="heroband">
<h1>All you've imagined,<br>at ZEPETO.</h1>
<p>Style your avatar, build worlds, and go live — limitless possibilities in the palm of your hand.</p>
<div class="avatar-row">
<span class="avatar-circle" style="background:linear-gradient(160deg,#ffd6e8,#ff9dc0);"></span>
<span class="avatar-circle" style="background:linear-gradient(160deg,#cdeadb,#8fd4b3);"></span>
<span class="avatar-circle" style="background:linear-gradient(160deg,#ffe3c7,#ffb680);"></span>
<span class="avatar-circle" style="background:linear-gradient(160deg,#d9d3f7,#a99df0);"></span>
</div>
<button class="btn-invert">Get Started</button>
</section>
<section class="section">
<h2>Made for the Creators</h2>
<div class="pillars">
<div class="pillar"><span class="ic" style="background:#5c46ff;"></span><h3>Items</h3><p>Design and sell avatar fashion.</p></div>
<div class="pillar"><span class="ic" style="background:#f323ff;"></span><h3>World</h3><p>Build interactive spaces to explore.</p></div>
<div class="pillar"><span class="ic" style="background:#5c46ff;"></span><h3>Live</h3><p>Host shows for a global audience.</p></div>
</div>
<div class="badge-row">
<span class="badge">New Drop</span>
<span class="badge">Trending World</span>
<span class="badge">Live Now</span>
</div>
</section>
<footer>© ZEPETO · Studio · Guides · Support</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfcfc; color: #201d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfcfc; color: #201d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0; color: #201d1d; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #646262; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 2; background: #201d1d; color: #fdfcfc;
border: none; border-radius: 4px; padding: 4px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 2; background: #fdfcfc; color: #201d1d;
border: 1px solid #201d1d; border-radius: 4px;
padding: 4px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f7f7; color: #201d1d;
border: 1px solid #c6c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646262; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 2; background: #201d1d; color: #fdfcfc;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfcfc; color:#201d1d; box-sizing:border-box;
font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
* { box-sizing:border-box; }
/* 전면 모노스페이스 — 헤드라인부터 풋터 잔글씨까지 전부 monospace.
유일한 시각적 순간은 TUI 를 흉내내는 다크 히어로 카드 하나뿐. */
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid rgba(15,0,0,0.12); font-size:13px; }
.brand { font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; color:#646262; }
.btn { background:#201d1d; color:#fdfcfc; border:none; border-radius:4px; padding:7px 16px; font-size:12px; font-weight:700;
font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
.wrap { padding:26px 40px 0; }
.lede { font-size:12px; color:#6e6e73; }
.lede .b { color:#007aff; }
h1 { font-size:34px; font-weight:700; margin:14px 0 8px; letter-spacing:0; line-height:1.15; max-width:560px; }
.sub { font-size:13px; color:#424245; max-width:520px; line-height:1.5; margin:0 0 20px; }
/* 다크 TUI 히어로 카드 — OpenCode 의 유일한 "비주얼 모먼트" */
.tui { background:#201d1d; border-radius:4px; padding:16px 20px; color:#fdfcfc; font-size:12px; line-height:1.7; }
.tui .prompt { color:#30d158; }
.tui .path { color:#9a9898; }
.tui .pipe { color:#646262; }
.tui .ascii { color:#ff9f0a; font-weight:700; }
.rows { padding:20px 40px 0; display:flex; flex-direction:column; gap:0; }
.row { display:flex; gap:10px; padding:10px 0; border-top:1px solid rgba(15,0,0,0.12); font-size:12.5px; }
.row .m { color:#201d1d; font-weight:700; }
.row .neg { color:#ff3b30; font-weight:700; }
.row p { margin:0; color:#424245; }
footer { border-top:1px solid rgba(15,0,0,0.12); margin-top:20px; padding:12px 40px; display:flex; justify-content:space-between;
font-size:11px; color:#6e6e73; }
</style></head>
<body>
<nav>
<p class="brand">OpenCode</p>
<div class="navlinks"><span>docs</span><span>github</span><span>discord</span></div>
<button class="btn">[ install ]</button>
</nav>
<div class="wrap">
<div class="lede">$ <span class="b">man opencode</span> — the AI coding agent, built for the terminal</div>
<h1>Your terminal.<br>Now with a co-pilot.</h1>
<p class="sub">A model-agnostic coding agent that lives where you already work — no browser tab required.</p>
<div class="tui">
<span class="path">~/projects/app</span> <span class="pipe">›</span> <span class="prompt">opencode</span><br>
<span class="ascii">[+]</span> loaded 3 providers, 12 tools<br>
<span class="ascii">[+]</span> reading src/index.ts <span class="pipe">|</span> 412 lines<br>
<span class="ascii">[-]</span> found 1 failing test <span class="pipe">|</span> patching...<br>
<span class="prompt">✓</span> all tests passing
</div>
</div>
<div class="rows">
<div class="row"><span class="m">[+]</span><p>Works with any model — Claude, GPT, Llama, or your own.</p></div>
<div class="row"><span class="neg">[-]</span><p>No lock-in, no telemetry, no non-monospace characters.</p></div>
</div>
<footer>
<span>© OpenCode</span>
<span>docs / github / discord / license</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f4f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4f4f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-variant-numeric:tabular-nums; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #EAEAEA; }
.brand { font-size:19px; font-weight:700; margin:0; }
.navr span { font-size:12px; color:#767676; margin-left:22px; }
main { display:flex; height:calc(640px - 52px - 30px); padding:26px 32px 0; gap:34px; }
/* left: the big square album art — the whole point of Bandcamp */
.art { width:260px; height:260px; border-radius:2px; flex:0 0 auto;
background:linear-gradient(150deg,#1DA0C3,#629AA9 55%,#123842); }
/* right: album page, editorial record-sleeve rhythm */
.albumpage { flex:1; }
.atitle { font-size:24px; font-weight:700; margin:0 0 4px; letter-spacing:-0.3px; }
.byartist { font-size:17px; font-weight:600; color:#1DA0C3; margin:0 0 6px; }
.relmeta { font-size:13px; color:#767676; margin:0 0 16px; }
.buycard { border:1px solid #E2E2E2; border-radius:6px; padding:16px; margin-bottom:16px; max-width:420px; }
.buyrow { display:flex; align-items:baseline; justify-content:space-between; }
.price { font-size:22px; font-weight:700; }
.priceunit { font-size:12px; font-weight:600; color:#767676; margin-left:4px; }
.ormore { font-size:12px; color:#767676; }
.nyp { font-size:11px; color:#767676; margin:6px 0 12px; }
.buybtn { display:block; text-align:center; background:#1DA0C3; color:#fff; font-size:14px; font-weight:700;
padding:11px 0; border-radius:4px; }
.wishlist { display:block; text-align:center; font-size:12px; color:#1DA0C3; font-weight:600; margin-top:10px; }
.playerbar { display:flex; align-items:center; gap:10px; border-top:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA;
padding:9px 2px; max-width:420px; margin-bottom:14px; }
.playbtn { width:28px; height:28px; border-radius:50%; background:#1A1A1A; color:#fff; font-size:10px;
display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ptitle { font-size:12px; font-weight:600; }
.ptime { font-size:10px; color:#767676; }
.wave { flex:1; height:14px; display:flex; align-items:flex-end; gap:2px; }
.wave i { width:2px; background:#1DA0C3; display:block; }
.wave i.un { opacity:0.35; }
.tracklist { max-width:420px; }
.trow { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid #F0F0F0; }
.tnum { width:16px; font-size:11px; color:#9A9A9A; }
.tname { flex:1; font-size:13px; font-weight:500; }
.tname.playing { color:#1DA0C3; font-weight:700; }
.tdur { font-size:11px; color:#767676; }
footer { height:30px; border-top:1px solid #EAEAEA; padding:0 32px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#767676; }
</style></head>
<body>
<nav>
<p class="brand">Bandcamp (iOS)</p>
<div class="navr"><span>Feed</span><span>Discover</span><span>Collection</span></div>
</nav>
<main>
<div class="art"></div>
<div class="albumpage">
<p class="atitle">Field Recordings, Vol. II</p>
<p class="byartist">by Bandcamp (iOS)</p>
<p class="relmeta">Released June 4 · 10 tracks</p>
<div class="buycard">
<div class="buyrow">
<span><span class="price mono">$9</span><span class="priceunit">USD</span></span>
<span class="ormore">or more</span>
</div>
<p class="nyp">Name your price · pay what you want</p>
<span class="buybtn">Buy Digital Album</span>
<span class="wishlist">Add to wishlist</span>
</div>
<div class="playerbar">
<div class="playbtn">▶</div>
<div>
<div class="ptitle">Low Tide</div>
<div class="ptime mono">1:42 / 5:08</div>
</div>
<div class="wave">
<i style="height:6px"></i><i style="height:10px"></i><i style="height:5px"></i><i style="height:12px"></i>
<i style="height:8px"></i><i style="height:14px"></i><i style="height:6px" class="un"></i><i style="height:9px" class="un"></i>
<i style="height:11px" class="un"></i><i style="height:7px" class="un"></i><i style="height:13px" class="un"></i><i style="height:5px" class="un"></i>
</div>
</div>
<div class="tracklist">
<div class="trow"><span class="tnum mono">01</span><span class="tname playing">Low Tide</span><span class="tdur mono">5:08</span></div>
<div class="trow"><span class="tnum mono">02</span><span class="tname">Harbor Light</span><span class="tdur mono">4:22</span></div>
<div class="trow"><span class="tnum mono">03</span><span class="tname">Static Bloom</span><span class="tdur mono">3:57</span></div>
<div class="trow"><span class="tnum mono">04</span><span class="tname">Quiet Machines</span><span class="tdur mono">6:14</span></div>
</div>
</div>
</main>
<footer>
<span>© Bandcamp (iOS)</span>
<span>Bandcamp (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7360f2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7360f2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bab2f4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7360f2; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7360f2; color: #f5f5f5;
border: 1px solid #8878f2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bab2f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #8979f4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1825; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { position:absolute; inset:0; display:flex; }
.chatlist { width:252px; flex-shrink:0; background:#F4F3F8; border-right:1px solid #E4E2EC;
padding:18px 14px; overflow:hidden; }
.clbrand { font-size:24px; font-weight:800; margin:0 4px 12px; letter-spacing:-0.3px; }
.searchbox { height:32px; background:#FFFFFF; border:1px solid #E4E2EC; border-radius:10px;
display:flex; align-items:center; padding:0 10px; font-size:12px; color:#A8A5B5; margin-bottom:12px; }
.row { display:flex; align-items:center; gap:10px; padding:9px 6px; border-radius:10px; }
.row.on { background:#E9E7F2; }
.ravatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; position:relative;
background:linear-gradient(135deg,#8F7DF7,#7360F2); }
.pdot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
background:#46C26A; border:2px solid #F4F3F8; }
.rcol { flex:1; min-width:0; }
.rname { font-size:14px; font-weight:700; margin:0; }
.rprev { font-size:12px; color:#7D7A8C; margin:2px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rmeta { text-align:right; flex-shrink:0; }
.rtime { font-size:10px; color:#A8A5B5; display:block; }
.badge { display:inline-block; margin-top:4px; background:#F0506E; color:#fff; font-size:9px; font-weight:700;
border-radius:999px; padding:2px 6px; }
.thread { flex:1; display:flex; flex-direction:column; min-width:0; }
.chathead { height:56px; flex-shrink:0; border-bottom:1px solid #E4E2EC; display:flex; align-items:center;
justify-content:space-between; padding:0 22px; }
.headleft { display:flex; align-items:center; gap:10px; }
.havatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#8F7DF7,#7360F2); }
.hname { font-size:15px; font-weight:700; margin:0; }
.honline { font-size:11px; color:#46C26A; font-weight:600; margin:1px 0 0; }
.headicons { display:flex; gap:20px; font-size:19px; color:#7360F2; }
.banner { margin:14px 22px 0; border-radius:14px; padding:11px 14px; display:flex; align-items:center;
justify-content:space-between; background:linear-gradient(135deg,#7360F2,#59267C); }
.banner .bl { display:flex; align-items:center; gap:10px; }
.banner .bicon { font-size:18px; color:#fff; }
.banner b { display:block; font-size:13px; color:#fff; font-weight:700; }
.banner small { display:block; font-size:11px; color:rgba(255,255,255,0.8); margin-top:1px; }
.callpill { background:rgba(255,255,255,0.22); color:#fff; font-size:12px; font-weight:700;
border-radius:999px; padding:6px 14px; }
.msgs { flex:1; padding:14px 22px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.brow { display:flex; }
.brow.out { justify-content:flex-end; }
.bubble { max-width:60%; padding:9px 14px; font-size:14px; line-height:1.32; border-radius:16px; }
.bubble.inc { background:#EDEBF5; color:#1A1825; border-bottom-left-radius:5px; }
.bubble.out { background:#7360F2; color:#FFFFFF; border-bottom-right-radius:5px; }
.bfoot { font-size:9px; color:#A8A5B5; margin-top:4px; display:flex; gap:4px; align-items:center; }
.brow.out .bfoot { justify-content:flex-end; }
.seen { color:#8F7DF7; font-weight:700; }
.sentchk { color:#A8A5B5; font-weight:700; }
.stickerwrap { display:flex; flex-direction:column; }
.sticker { width:88px; height:88px; border-radius:14px;
background:radial-gradient(circle at 32% 30%, #FFE29A, #F0506E 70%); }
.quote { border-left:3px solid #59267C; padding-left:8px; margin-bottom:5px; font-size:12px; opacity:0.85; }
.composebar { flex-shrink:0; border-top:1px solid #E4E2EC; padding:10px 18px; display:flex;
align-items:center; gap:10px; }
.plus { font-size:22px; color:#7360F2; }
.field { flex:1; height:36px; background:#F4F3F8; border-radius:18px; display:flex; align-items:center;
padding:0 14px; font-size:13px; color:#A8A5B5; }
.emo { font-size:20px; color:#7D7A8C; }
.send { width:36px; height:36px; border-radius:50%; background:#7360F2; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
</style></head>
<body>
<div class="shell">
<div class="chatlist">
<p class="clbrand">Viber (iOS)</p>
<div class="searchbox">🔍 Search</div>
<div class="row on">
<div class="ravatar"><span class="pdot"></span></div>
<div class="rcol"><p class="rname">Elena Marchetti</p><p class="rprev">Yes! 1pm at the usual place</p></div>
<div class="rmeta"><span class="rtime">9:41</span></div>
</div>
<div class="row">
<div class="ravatar" style="background:linear-gradient(135deg,#c9b8ff,#59267C);"></div>
<div class="rcol"><p class="rname">Marco T.</p><p class="rprev">Sent a photo</p></div>
<div class="rmeta"><span class="rtime">Mon</span><span class="badge">3</span></div>
</div>
<div class="row">
<div class="ravatar" style="background:linear-gradient(135deg,#ffb3d1,#7360F2);"></div>
<div class="rcol"><p class="rname">Family Group</p><p class="rprev">Dad: call me when free</p></div>
<div class="rmeta"><span class="rtime">Sun</span></div>
</div>
</div>
<div class="thread">
<div class="chathead">
<div class="headleft">
<div class="havatar"></div>
<div><p class="hname">Elena Marchetti</p><p class="honline">online</p></div>
</div>
<div class="headicons"><span>📞</span><span>🎥</span></div>
</div>
<div class="banner">
<div class="bl"><span class="bicon">📞</span><div><b>Free Viber Call</b><small>Talk free, Viber to Viber</small></div></div>
<span class="callpill">Call</span>
</div>
<div class="msgs">
<div class="brow"><div class="bubble inc">Hey! Are we still on for lunch tomorrow?</div></div>
<div class="brow out">
<div class="stickerwrap">
<div class="bubble out">Yes! 1pm at the usual place</div>
<div class="bfoot">9:41 <span class="seen">✓✓</span></div>
</div>
</div>
<div class="brow">
<div class="stickerwrap">
<div class="sticker"></div>
<div class="bfoot">9:42</div>
</div>
</div>
<div class="brow out">
<div class="stickerwrap" style="max-width:60%;">
<div class="bubble out"><div class="quote">Elena: usual place?</div>Table by the window, I already booked it</div>
<div class="bfoot">9:43 <span class="sentchk">✓</span></div>
</div>
</div>
</div>
<div class="composebar">
<span class="plus">+</span>
<div class="field">Type a message</div>
<span class="emo">☺</span>
<div class="send">➤</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffaf0; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffaf0; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #fffaf0; color: #0a0a0a;
border: 1px solid #0a0a0a; border-radius: 12px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #fffaf0; color: #0a0a0a;
border: 1px solid #c2beb6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #f5f0e0; color: #0a0a0a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffaf0; color:#0a0a0a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#3a3a3a; }
.btnp { background:#0a0a0a; color:#fff; border-radius:12px; padding:9px 16px; font-size:13px; font-weight:600; }
.hero { display:flex; align-items:center; gap:26px; padding:14px 32px; height:216px; }
.hero .left { flex:1; }
.hero h1 { font-size:36px; font-weight:500; letter-spacing:-1.6px; margin:0 0 10px; line-height:1.08; }
.hero p { font-size:14px; color:#3a3a3a; margin:0 0 14px; max-width:320px; }
.scene { flex:1; height:180px; border-radius:24px; background:#faf5e8; position:relative; overflow:hidden; }
.peak { position:absolute; bottom:0; border-radius:14px 14px 0 0; }
.peak.p1 { left:10px; width:110px; height:100px; background:linear-gradient(160deg,#ffb084,#e8b94a); }
.peak.p2 { left:90px; width:140px; height:140px; background:linear-gradient(160deg,#b8a4ed,#8f74d6); }
.peak.p3 { right:10px; width:120px; height:90px; background:linear-gradient(160deg,#a4d4c5,#6fae99); }
.sun { position:absolute; top:18px; right:40px; width:34px; height:34px; border-radius:50%; background:#ff4d8b; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 32px; }
.fcard { border-radius:24px; padding:20px; height:150px; display:flex; flex-direction:column; justify-content:space-between; }
.fcard h3 { font-size:16px; font-weight:600; margin:0; }
.fcard p { font-size:12px; margin:0; line-height:1.4; }
.f1 { background:#ff4d8b; color:#fff; }
.f2 { background:#b8a4ed; color:#0a0a0a; }
.f3 { background:#ffb084; color:#0a0a0a; }
footer { position:relative; height:170px; margin-top:16px; background:#faf5e8; overflow:hidden; }
footer .mtnshape { position:absolute; bottom:0; left:0; width:100%; height:100px;
clip-path:polygon(0 100%, 10% 30%, 22% 75%, 38% 15%, 55% 70%, 72% 25%, 88% 60%, 100% 20%, 100% 100%);
background:linear-gradient(160deg,#c0a8dd,#a4d4c5); }
footer .flabel { position:absolute; top:20px; left:32px; font-size:12px; color:#6a6a6a; }
</style></head>
<body>
<nav>
<div class="brand">Clay</div>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Resources</span><span>Pricing</span></div>
<span class="btnp">Try free</span>
</nav>
<div class="hero">
<div class="left">
<h1>Go to market<br>with unique data</h1>
<p>Connect any data source, enrich with AI, and automate your entire outbound motion.</p>
<span class="btnp">Try free</span>
</div>
<div class="scene">
<div class="sun"></div>
<div class="peak p1"></div>
<div class="peak p2"></div>
<div class="peak p3"></div>
</div>
</div>
<div class="features">
<div class="fcard f1"><h3>Claygent AI agent</h3><p>Research any lead with an autonomous web agent.</p></div>
<div class="fcard f2"><h3>Sequencer</h3><p>Personalized outbound at a scale humans can't match.</p></div>
<div class="fcard f3"><h3>CRM enrichment</h3><p>Fill every field with data your CRM never had.</p></div>
</div>
<footer>
<span class="flabel">Clay</span>
<div class="mtnshape"></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f7ccc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f7ccc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95bfe3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a62ad; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f7ccc; color: #000000;
border: 1px solid #0a62ad; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f7ccc; color: #f5f5f5;
border: 1px solid #418fd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95bfe3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c78c7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#393c41; box-sizing:border-box;
font-family:"Open Sans","Noto Sans JP",-apple-system,"system-ui",Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
.layout { display:flex; height:100%; }
.sidebar { width:200px; background:#f7f8fa; border-right:1px solid #dee0e3; padding:22px 0; }
.sb-brand { padding:0 20px 18px; font-size:14px; font-weight:700; color:#1f2124; }
.sb-item { padding:9px 20px; font-size:13px; color:#585c63; }
.sb-item.active { color:#393c41; font-weight:700; background:#ffffff; border-left:3px solid #1f7ccc; }
.sb-group { padding:14px 20px 4px; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:#9297a1; }
.content { flex:1; padding:28px 34px; overflow:hidden; }
.crumb { font-size:12px; color:#767b85; margin-bottom:6px; }
h1 { font-size:24px; font-weight:700; margin:0 0 6px; }
.lead { font-size:14px; color:#585c63; max-width:520px; line-height:1.5; margin:0 0 24px; }
.mint-pill { display:inline-flex; align-items:center; background:#30f4c5; color:#0e7365; border-radius:4px; padding:3px 10px; font-size:12px; font-weight:600; margin-bottom:18px; }
.row { display:flex; gap:20px; }
.panel { flex:1; border:1px solid #dee0e3; border-radius:4px; padding:20px; }
.panel h3 { font-size:14px; font-weight:700; margin:0 0 14px; color:#1f2124; }
.btn-demo { display:flex; gap:10px; flex-wrap:wrap; }
.b1 { background:#000000; color:#ffffff; border-radius:4px; height:40px; padding:0 18px; display:flex; align-items:center; font-size:14px; box-shadow:rgba(0,0,0,0.12) 0px 1px 2px 0px; }
.b2 { background:#ffffff; color:#585c63; border:1px solid #585c63; border-radius:4px; height:40px; padding:0 18px; display:flex; align-items:center; font-size:14px; }
.b3 { background:#000000; color:#ffffff; border-radius:20px; height:32px; padding:0 16px; display:flex; align-items:center; font-size:13px; }
.field { margin-top:16px; }
.field label { display:block; font-size:12px; color:#767b85; margin-bottom:6px; }
.field .box { background:#ffffff; border:1px solid #dee0e3; border-radius:4px; height:40px; padding:0 16px; display:flex; align-items:center; font-size:14px; color:#9297a1; }
.field .box.focus { border:1px solid #1f7ccc; color:#393c41; }
.swatches { display:flex; gap:10px; margin-top:12px; }
.sw { flex:1; border-radius:4px; height:44px; display:flex; align-items:flex-end; padding:4px 6px; font-size:10px; color:#ffffff; font-weight:700; }
.badge-row { display:flex; gap:8px; margin-top:14px; }
.bp { border-radius:4px; padding:4px 10px; font-size:12px; }
.bp.pos { background:#1dc487; color:#ffffff; }
.bp.notice { background:#debf43; color:#393c41; }
.bp.neg { background:#cc1f24; color:#ffffff; }
.bp.att { background:#db7d42; color:#ffffff; }
</style></head>
<body>
<div class="layout">
<aside class="sidebar">
<div class="sb-brand">GMO Pepabo (Inhouse) — Inhouse</div>
<div class="sb-group">Foundation</div>
<div class="sb-item">Color</div>
<div class="sb-item">Typography</div>
<div class="sb-item">Elevation</div>
<div class="sb-group">Components</div>
<div class="sb-item active">Button</div>
<div class="sb-item">Textfield</div>
<div class="sb-item">Card</div>
<div class="sb-item">Avatar</div>
</aside>
<section class="content">
<div class="crumb">Inhouse / Components</div>
<h1>Button</h1>
<p class="lead">A neutral pepper base flavor — brand-swappable at the token layer so every GMO Pepabo (Inhouse) service can re-color it as its own.</p>
<div class="mint-pill">Flavor: pepabo</div>
<div class="row">
<div class="panel">
<h3>Button variants</h3>
<div class="btn-demo">
<div class="b1">Save</div>
<div class="b2">Cancel</div>
<div class="b3">Pill</div>
</div>
<div class="field">
<label>Textfield — default</label>
<div class="box focus">Enter a value</div>
</div>
</div>
<div class="panel">
<h3>Semantic intentions</h3>
<div class="swatches">
<div class="sw" style="background:#1f7ccc">Informative</div>
<div class="sw" style="background:#1dc487">Positive</div>
<div class="sw" style="background:#cc1f24">Negative</div>
</div>
<div class="badge-row">
<span class="bp pos">Positive</span>
<span class="bp notice">Notice</span>
<span class="bp neg">Negative</span>
<span class="bp att">Attention</span>
</div>
</div>
</div>
</section>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #C4923A; color: #FFFFFF;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #FFFFFF; color: #313131;
border: 1px solid #C4923A; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1A4A8A; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#313131; box-sizing:border-box;
font-family:Arial, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.ticker { flex:0 0 auto; height:34px; background:#1E1E1E; color:#fff; display:flex; align-items:center;
gap:22px; padding:0 30px; font-size:13px; font-weight:600; }
.ticker span.lab { color:#9E9E9E; font-weight:400; margin-right:4px; }
.up { color:#2E7D32; }
.down { color:#C62828; }
nav { flex:0 0 auto; height:58px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #D9D9D9; }
.brand { font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; }
.navlinks .active { color:#C4923A; }
main { flex:1 1 auto; display:flex; gap:22px; padding:18px 30px; min-height:0; }
.left { flex:0.9; border-radius:4px; position:relative; min-height:0;
background:radial-gradient(circle at 40% 35%, #f0dca0, #C4923A 60%, #7a5a1e 100%); }
.left::after { content:''; position:absolute; inset:22px; border-radius:999px; border:2px solid rgba(255,255,255,0.4); }
.right { flex:1.2; display:flex; flex-direction:column; min-height:0; }
.title { font-size:20px; font-weight:700; margin:0 0 6px; }
.meta { font-size:13px; color:#767676; margin:0 0 10px; }
.price { font-size:26px; font-weight:700; margin:0 0 4px; }
.price-sub { font-size:12px; color:#767676; margin:0 0 12px; }
.badges { display:flex; gap:8px; margin-bottom:12px; }
.badge { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 7px; border-radius:4px; color:#fff; }
.badge.ira { background:#1A4A8A; }
.cta-row { display:flex; gap:10px; margin-bottom:14px; }
.btn-primary { background:#C4923A; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-weight:700; font-size:15px; }
.btn-secondary { background:#fff; border:1px solid #313131; color:#313131; border-radius:4px; padding:11px 23px; font-weight:700; font-size:15px; }
.pricetable { flex:1; border:1px solid #D9D9D9; border-radius:4px; min-height:0; overflow:hidden; }
.prow { display:flex; justify-content:space-between; font-size:12px; padding:8px 14px; border-bottom:1px solid #EFEFEF; }
.prow.head { background:#F8F5F0; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; font-size:11px; }
footer { flex:0 0 auto; height:52px; background:#313131; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
footer .links { color:#9E9E9E; display:flex; gap:16px; }
</style></head>
<body>
<div class="ticker">
<span><span class="lab">GOLD</span>$2,384.60 <span class="up">▲0.4%</span></span>
<span><span class="lab">SILVER</span>$28.91 <span class="down">▼0.2%</span></span>
<span><span class="lab">PLATINUM</span>$981.20 <span class="up">▲0.1%</span></span>
</div>
<nav>
<p class="brand">Apmex</p>
<div class="navlinks"><span class="active">Gold</span><span>Silver</span><span>Platinum</span><span>Collectibles</span></div>
</nav>
<main>
<div class="left"></div>
<div class="right">
<h1 class="title">1 oz American Gold Eagle (2026)</h1>
<p class="meta">.9167 Fine Gold · Brilliant Uncirculated</p>
<div class="price">$2,412.50</div>
<p class="price-sub">Spot price + 1.2% premium</p>
<div class="badges"><span class="badge ira">IRA Eligible</span></div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Add to Watchlist</button>
</div>
<div class="pricetable">
<div class="prow head"><span>Qty</span><span>Price / Unit</span><span>Total</span></div>
<div class="prow"><span>1–4</span><span>$2,412.50</span><span>$2,412.50</span></div>
<div class="prow"><span>5–9</span><span>$2,399.00</span><span>$11,995.00</span></div>
<div class="prow"><span>10+</span><span>$2,385.75</span><span>$23,857.50</span></div>
</div>
</div>
</main>
<footer>
<span>© Apmex</span>
<div class="links"><span>BBB A+</span><span>Secure Checkout</span><span>Support</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0f10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0f10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0f10; color: #ffffff;
border: 1px solid #1c1c1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f0f10; color: #f5f5f5;
border: 1px solid #343435; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #111112; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0F0F10; color:#ECECEE; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; display:flex; align-items:center; }
.hero { position:relative; z-index:2; width:460px; padding:0 56px; display:flex; flex-direction:column; gap:16px; }
.word { font-size:40px; font-weight:700; letter-spacing:-0.6pt; line-height:1.08; margin:0; }
.tag { font-size:15px; color:#9A9AA2; line-height:1.55; max-width:340px; margin:0; }
.row { display:flex; gap:12px; align-items:center; margin-top:6px; }
.cta { background:#3A7BFD; color:#FFFFFF; border-radius:999px; padding:13px 26px; font-weight:600; font-size:15px; }
.cta2 { background:#1B2A4A; color:#9FC0FF; border-radius:999px; padding:13px 24px; font-weight:600; font-size:14px; }
.card { margin-top:8px; background:#1E1E21; border:1pt solid #2A2A2E; border-radius:16px; padding:14px; display:flex; gap:12px; align-items:center; max-width:340px; }
.cavatar { width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 36% 30%, #6FA0FF, #3A7BFD 55%, #274FB0); flex-shrink:0; }
.card b { font-size:14px; font-weight:600; display:block; }
.card span { font-size:12px; color:#9A9AA2; }
.phonewrap { position:relative; z-index:2; width:500px; height:640px; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:296px; height:604px; background:#0F0F10; border:1pt solid #2A2A2E; border-radius:46px;
box-shadow:0 30px 90px rgba(0,0,0,0.6); overflow:hidden; }
.notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#000; border-radius:12px; z-index:6; }
.pheader { display:flex; align-items:center; gap:10px; padding:36px 16px 12px; border-bottom:0.5pt solid #2A2A2E; }
.pavatar { width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 36% 30%, #6FA0FF, #3A7BFD 55%, #274FB0); }
.pheader b { font-size:15px; font-weight:600; display:block; }
.pheader span { font-size:10px; color:#9A9AA2; }
.stream { padding:14px 14px 10px; display:flex; flex-direction:column; gap:10px; }
.row-msg { display:flex; gap:8px; align-items:flex-start; }
.row-msg.user { justify-content:flex-end; }
.mavatar { width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 36% 30%, #6FA0FF, #3A7BFD 55%, #274FB0); flex-shrink:0; margin-top:2px; }
.bubble { max-width:78%; font-size:12px; line-height:1.5; padding:9px 12px; }
.bubble.ai { background:#1C1C1F; border:1pt solid #2A2A2E; border-radius:4px 16px 16px 16px; }
.bubble.user { background:#26262A; border-radius:16px 4px 16px 16px; }
.action { color:#9A9AA2; font-style:italic; }
.composer { position:absolute; left:14px; right:14px; bottom:16px; height:40px; background:#1E1E21; border:1pt solid #2A2A2E;
border-radius:20px; display:flex; align-items:center; padding:0 6px 0 14px; }
.composer span { font-size:11px; color:#66666E; flex:1; }
.send { width:30px; height:30px; border-radius:50%; background:#3A7BFD; display:flex; align-items:center; justify-content:center; }
.send i { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid #fff; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<div style="font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#9A9AA2;margin-bottom:2px;">Character.AI (iOS)</div>
<h1 class="word">The chat is the product.</h1>
<p class="tag">A near-black room where speaker isn't color — it's a single tucked corner. Roleplay actions fade into italics; everything else stays quiet.</p>
<div class="row">
<div class="cta">Start chat</div>
<div class="cta2">Create a Character</div>
</div>
<div class="card">
<span class="cavatar"></span>
<div><b>Aria</b><span>A curious starship navigator · by @lumen</span></div>
</div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="notch"></div>
<div class="pheader">
<span class="pavatar"></span>
<div><b>Aria</b><span>by @lumen · 2.4M chats</span></div>
</div>
<div class="stream">
<div class="row-msg">
<span class="mavatar"></span>
<div class="bubble ai"><span class="action">*she looks up from the star charts*</span><br>You're early. Good — the readings just changed.</div>
</div>
<div class="row-msg user">
<div class="bubble user">What changed?</div>
</div>
<div class="row-msg">
<span class="mavatar"></span>
<div class="bubble ai">There's a signal three sectors out. I want you to see it before I log it.</div>
</div>
</div>
<div class="composer">
<span>Message Aria…</span>
<span class="send"><i></i></span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0e0f0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0e0f0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 31.2px; letter-spacing: -0.48px; margin: 0; color: #0e0f0c; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; color: #868685; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #9fe870; color: #0e0f0c;
border: none; border-radius: 24px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #e8ebe6; color: #0e0f0c;
border: 1px solid #9fe870; border-radius: 24px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; background: #ffffff; color: #0e0f0c;
border: 1px solid #0e0f0c; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #868685; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 20px; background: #e2f6d5; color: #054d28;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e8ebe6; color:#0e0f0c; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:900; letter-spacing:-.3px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; font-weight:700; }
.pill { border-radius:999px; padding:9px 20px; font-size:13px; font-weight:800; }
.pill-lime { background:#9fe870; color:#0e0f0c; }
.hero { padding:20px 32px 26px; }
.hero h1 { font-size:56px; font-weight:900; letter-spacing:-1.6px; line-height:.98; margin:0 0 16px; max-width:640px; }
.hero p { font-size:15px; color:#454745; margin:0 0 20px; max-width:420px; }
.converter { display:flex; gap:0; align-items:stretch; max-width:560px; border-radius:16px; overflow:hidden;
background:#ffffff; }
.cside { flex:1; padding:16px 20px; }
.cside + .cside { border-left:1px solid #e8ebe6; }
.cside .lbl { font-size:11px; color:#868685; font-weight:700; text-transform:uppercase; }
.cside .amt { font-size:22px; font-weight:900; margin-top:4px; }
.cbtn { width:76px; background:#9fe870; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; }
.badge { display:inline-flex; align-items:center; gap:6px; background:#c5edab; color:#163300; border-radius:999px;
padding:6px 14px; font-size:12px; font-weight:800; margin-top:16px; }
.cardsrow { display:flex; gap:16px; padding:0 32px 30px; }
.wcard { flex:1; background:#ffffff; border-radius:16px; padding:18px; }
.wcard .tag { font-size:11px; font-weight:800; text-transform:uppercase; color:#868685; }
.wcard h3 { font-size:17px; font-weight:900; margin:8px 0 6px; }
.wcard p { font-size:12px; color:#454745; margin:0; line-height:1.4; }
.wcard .num { font-size:26px; font-weight:900; color:#054d28; }
</style></head>
<body>
<nav>
<div class="brand">Wise</div>
<div class="navlinks"><span>Send money</span><span>Spend</span><span>Business</span><span>Help</span></div>
<div class="pill pill-lime">Get started</div>
</nav>
<div class="hero">
<h1>Money without borders</h1>
<p>Send, spend, and receive money internationally at the real exchange rate.</p>
<div class="converter">
<div class="cside"><div class="lbl">You send</div><div class="amt">1,000.00 USD</div></div>
<div class="cbtn">→</div>
<div class="cside"><div class="lbl">Recipient gets</div><div class="amt">923,450 KRW</div></div>
</div>
<div class="badge">✓ Save up to 6x vs. your bank</div>
</div>
<div class="cardsrow">
<div class="wcard"><div class="tag">Transfer</div><h3 class="num">0.4%</h3><p>Low, transparent fees on every transfer — no markup.</p></div>
<div class="wcard"><div class="tag">Card</div><h3 class="num">40+</h3><p>Hold and spend in 40+ currencies with one card.</p></div>
<div class="wcard"><div class="tag">Trust</div><h3 class="num">16M</h3><p>People and businesses moving money with Wise.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4c0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4c0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa98b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd9b12; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4c0a; color: #000000;
border: 1px solid #fd9b12; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4c0a; color: #f5f5f5;
border: 1px solid #fd6730; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa98b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff590b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f4f3; color:#333333; box-sizing:border-box;
font-family:"Hiragino Kaku Gothic ProN", "Noto Sans JP", -apple-system, "Meiryo", sans-serif; }
* { box-sizing:border-box; }
.numeral { font-family:"Oswald", sans-serif; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; padding:0 32px; }
.brand { font-size:16px; font-weight:900; color:#ff4c0a; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:30px; }
.navlinks span { font-size:16px; font-weight:700; color:#333333; }
.navlinks span.on { color:#ff4c0a; }
.cta { margin-left:auto; background:#ff4c0a; color:#ffffff; border-radius:6px; height:40px; padding:0 20px;
display:flex; align-items:center; font-size:14px; font-weight:700; }
.hero { text-align:center; padding:20px 32px 10px; }
.hero .label { font-size:44px; font-weight:900; color:#ff4c0a; margin:0; letter-spacing:-0.5px; }
.hero h1 { font-size:26px; font-weight:900; margin:2px 0 10px; color:#333333; }
.hero p { font-size:14px; color:#666666; margin:0; }
.navy { background:#001c46; color:#ffffff; padding:20px 32px; display:flex; gap:20px; margin-top:14px; }
.step { flex:1; display:flex; gap:14px; align-items:flex-start; }
.step .num { font-size:44px; font-weight:600; color:#fd9b12; line-height:1; }
.step h4 { font-size:16px; font-weight:700; margin:0 0 4px; color:#ffffff; }
.step p { font-size:12px; color:#cdd6e6; margin:0; line-height:1.4; }
.school { display:flex; align-items:center; gap:16px; padding:16px 32px 20px; }
.btn-school { background:#ff7f09; color:#ffffff; border-radius:8px; height:58px; padding:0 26px; display:flex;
align-items:center; font-size:15px; font-weight:400; box-shadow:#e26f00 0px 4px 0px 0px; }
.btn-outline { background:#ffffff; color:#333333; border:2px solid #ff7f09; border-radius:8px; height:58px;
padding:0 26px; display:flex; align-items:center; font-size:15px; box-shadow:#e26f00 0px 4px 0px 0px; }
.badge { margin-left:auto; background:#e5f7f5; color:#00b29d; border-radius:40px; padding:6px 16px; font-size:14px; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">mikan</p>
<div class="navlinks"><span class="on">Top</span><span>About</span><span>Members</span><span>News</span></div>
<div class="cta">Careers</div>
</nav>
<div class="hero">
<div class="label">Service</div>
<h1>Supporting every small "I got it" moment, one at a time</h1>
<p>The mikan English app — over 10 million downloads</p>
</div>
<div class="navy">
<div class="step"><span class="num numeral">01</span><div><h4>See the Word</h4><p>Quickly check its meaning and pronunciation</p></div></div>
<div class="step"><span class="num numeral">02</span><div><h4>Choose an Answer</h4><p>Build up that feeling of getting it right</p></div></div>
<div class="step"><span class="num numeral">03</span><div><h4>Review</h4><p>Revisit it once more before you forget</p></div></div>
</div>
<div class="school">
<div class="btn-school">Sign Up for a Free Trial</div>
<div class="btn-outline">Request Materials</div>
<div class="badge">mikan for School</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffcc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffcc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6509; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffcc00; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffcc00; color: #111111;
border: 1px solid #d9ae03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6509; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4bc27; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Malgun Gothic","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,Arial,sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; }
.hdr { height:64px; flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:3px solid #ffcc00; background:#ffffff; }
.hdr .brand { font-size:18px; font-weight:700; color:#000000; letter-spacing:-0.2px; }
.hdr .icons { display:flex; gap:10px; }
.hdr .icobox { width:26px; height:26px; border:1px solid #dddddd; border-radius:0; display:flex;
align-items:center; justify-content:center; }
.hdr .icobox .dot { width:6px; height:6px; background:#ffcc00; border-radius:0; }
.hdr .icobox .bars { width:14px; height:10px; border-top:2px solid #000000; border-bottom:2px solid #000000;
border-left:2px solid #000000; }
.balance { flex:0 0 128px; margin:16px 24px 0; padding:16px 20px; background:#ffffff;
border:1px solid #dddddd; border-radius:0; }
.balance .lbl { font-size:13px; color:#5a5a5a; font-weight:400; }
.balance .num { font-size:32px; font-weight:700; color:#000000; margin-top:6px; letter-spacing:-0.5px; }
.balance .sub { font-size:12px; color:#5a5a5a; margin-top:8px; }
.balance .sub a { color:#0c4ad1; text-decoration:none; margin-left:10px; }
.quick { flex:0 0 84px; display:flex; gap:10px; margin:14px 24px 0; }
.qitem { flex:1; height:64px; border:1px solid #dddddd; border-radius:0; background:#ffffff;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.qitem .shape { width:18px; height:18px; border:2px solid #000000; }
.qitem .lbl { font-size:12px; color:#222222; font-weight:400; }
.txsec { flex:1; margin:16px 24px 0; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.txsec .rowhdr { display:flex; align-items:baseline; justify-content:space-between; flex:0 0 auto; }
.txsec .rowhdr h2 { font-size:20px; font-weight:700; line-height:26px; margin:0; color:#000000; }
.txsec .rowhdr a { font-size:13px; color:#0c4ad1; text-decoration:none; }
.txlist { margin-top:8px; border-top:1px solid #dddddd; flex:1; overflow:hidden; }
.txrow { display:flex; align-items:center; gap:12px; height:56px; border-bottom:1px solid #dddddd;
padding:0 4px; }
.txrow .avatar { width:32px; height:32px; border:1px solid #dddddd; border-radius:0; flex:0 0 32px;
background:#f6f6f6; }
.txrow .who { flex:1; min-width:0; }
.txrow .who .n { font-size:14px; color:#222222; font-weight:400; line-height:21px; }
.txrow .who .d { font-size:12px; color:#5a5a5a; }
.txrow .amt { font-size:14px; font-weight:700; color:#000000; white-space:nowrap; }
.txrow .amt.plus { color:#0c4ad1; }
.tabbar { flex:0 0 56px; display:flex; border-top:1px solid #dddddd; background:#ffffff; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.tab .ic { width:16px; height:16px; border:2px solid #5a5a5a; }
.tab .lbl { font-size:11px; color:#5a5a5a; }
.tab.active { border-top:2px solid #ffcc00; }
.tab.active .ic { border-color:#000000; }
.tab.active .lbl { color:#000000; font-weight:700; }
</style></head>
<body>
<div class="app">
<div class="hdr">
<div class="brand">KB Kookmin Bank</div>
<div class="icons">
<div class="icobox"><div class="dot"></div></div>
<div class="icobox"><div class="bars"></div></div>
</div>
</div>
<div class="balance">
<div class="lbl">Total balance</div>
<div class="num">₩ 12,480,300</div>
<div class="sub">Checking · Savings · Card<a href="#">Manage accounts</a></div>
</div>
<div class="quick">
<div class="qitem"><div class="shape"></div><div class="lbl">Transfer</div></div>
<div class="qitem"><div class="shape"></div><div class="lbl">Deposit</div></div>
<div class="qitem"><div class="shape"></div><div class="lbl">Card</div></div>
<div class="qitem"><div class="shape"></div><div class="lbl">More</div></div>
</div>
<div class="txsec">
<div class="rowhdr"><h2>Recent activity</h2><a href="#">See all</a></div>
<div class="txlist">
<div class="txrow">
<div class="avatar"></div>
<div class="who"><div class="n">Grocery Market</div><div class="d">Today · 09:41</div></div>
<div class="amt">-₩ 42,900</div>
</div>
<div class="txrow">
<div class="avatar"></div>
<div class="who"><div class="n">Transfer from Jamie R.</div><div class="d">Yesterday · 18:02</div></div>
<div class="amt plus">+₩ 300,000</div>
</div>
<div class="txrow">
<div class="avatar"></div>
<div class="who"><div class="n">Mobile phone bill</div><div class="d">Yesterday · 08:15</div></div>
<div class="amt">-₩ 58,000</div>
</div>
<div class="txrow">
<div class="avatar"></div>
<div class="who"><div class="n">Coffee Shop</div><div class="d">Mon · 07:52</div></div>
<div class="amt">-₩ 4,800</div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><div class="ic"></div><div class="lbl">Home</div></div>
<div class="tab"><div class="ic"></div><div class="lbl">Accounts</div></div>
<div class="tab"><div class="ic"></div><div class="lbl">Transfer</div></div>
<div class="tab"><div class="ic"></div><div class="lbl">Card</div></div>
<div class="tab"><div class="ic"></div><div class="lbl">More</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #5f3f3f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #5f3f3f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #5f3f3f; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777620; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #a9c7e7; color: #2b2b2b;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f6f6f6; color: #5f3f3f;
border: 1px solid #a9c7e7; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #454545;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777620; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #fffa90; color: #5f3f3f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#5f3f3f; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f6f6f6; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:20px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; }
.navlinks span:first-child { border-bottom:2px solid #a9c7e7; padding-bottom:4px; }
.chips { display:flex; gap:8px; padding:0 36px 14px; }
.chip { border:1px solid #c5c5c5; border-radius:9999px; padding:6px 14px; font-size:12px; background:#fff; }
.chip.active { background:#a9c7e7; color:#2b2b2b; border:none; font-weight:600; }
.hero { background:#eeeeee; padding:28px 36px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.2; }
.hero h1 { font-size:32px; font-weight:700; line-height:1.2; letter-spacing:-0.5px; margin:0 0 10px; }
.hero p { font-size:14px; color:#454545; margin:0 0 16px; max-width:400px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-primary { background:#a9c7e7; color:#2b2b2b; border:none; border-radius:8px; padding:12px 22px;
font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; height:44px; }
.btn-accent { background:#dad55e; color:#2b2b2b; border:none; border-radius:8px; padding:12px 22px;
font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; height:44px; }
.hero-visual { flex:1; height:170px; border-radius:12px; position:relative; overflow:hidden; background:#fff; }
.hero-visual .b1 { position:absolute; width:90px; height:90px; border-radius:16px; background:#f1a899; left:20px; top:20px; transform:rotate(-8deg); }
.hero-visual .b2 { position:absolute; width:70px; height:70px; border-radius:50%; background:#dad55e; right:36px; top:44px; }
.hero-visual .b3 { position:absolute; width:80px; height:80px; border-radius:12px; background:#a9c7e7; right:100px; bottom:16px; transform:rotate(10deg); }
.section { padding:16px 36px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:22px; font-weight:700; margin:0; }
.sec-head span { font-size:13px; font-weight:600; color:#5f3f3f; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#ffffff; border-radius:12px; padding:16px; }
.thumb { height:100px; border-radius:8px; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(150deg,#f1a899,#fddfdf); }
.t2 { background:linear-gradient(150deg,#a9c7e7,#d4e3f3); }
.t3 { background:linear-gradient(150deg,#dad55e,#fffa90); }
.badge { position:absolute; top:8px; left:8px; background:#fffa90; color:#5f3f3f; font-size:10px; font-weight:700;
letter-spacing:0.3px; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.card h3 { font-size:16px; font-weight:600; margin:0 0 4px; }
.card .price { font-size:16px; margin:0 0 10px; color:#454545; }
.addbtn { width:100%; background:#f6f6f6; color:#5f3f3f; border:none; border-radius:8px; padding:9px;
font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
footer { background:#2b2b2b; color:#eeeeee; font-size:12px; padding:16px 36px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#eeeeee; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Beginagain</p>
<div class="navlinks"><span>Toys</span><span>Music</span><span>Wood Play</span><span>Gifts</span></div>
</nav>
<div class="chips">
<div class="chip active">All Ages</div>
<div class="chip">0–2</div>
<div class="chip">3–5</div>
<div class="chip">6+</div>
</div>
<section class="hero">
<div class="hero-copy">
<h1>Toys that let imagination lead</h1>
<p>Solid wood, saturated color, no batteries required — playthings built to be handed down, not thrown away.</p>
<div class="row">
<button class="btn-primary">Shop Now</button>
<button class="btn-accent">New Arrivals</button>
</div>
</div>
<div class="hero-visual"><div class="b1"></div><div class="b2"></div><div class="b3"></div></div>
</section>
<section class="section">
<div class="sec-head"><h2>Favorites</h2><span>See All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge">Bestseller</span></div>
<h3>Rainbow Wood Xylophone</h3>
<p class="price">$29.00</p>
<button class="addbtn">Add to Cart</button>
</div>
<div class="card">
<div class="thumb t2"></div>
<h3>Stacking Cloud Blocks</h3>
<p class="price">$34.50</p>
<button class="addbtn">Add to Cart</button>
</div>
<div class="card">
<div class="thumb t3"><span class="badge">New</span></div>
<h3>Wooden Shape Sorter</h3>
<p class="price">$22.00</p>
<button class="addbtn">Add to Cart</button>
</div>
</div>
</section>
<footer>
<span>© Beginagain</span>
<div><a href="#">Shop</a><a href="#">About</a><a href="#">Support</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5b6bff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0f; color: #5b6bff;
border: 1px solid #5b6bff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0f; color: #f5f5f5;
border: 1px solid #303034; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #171a35; color: #5b6bff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:100%; }
.side { width:96px; background:#0A0A0F; border-right:1px solid #2A2A38; padding:28px 0; display:flex; flex-direction:column; align-items:center; gap:26px; }
.side .logo { width:36px; height:36px; border-radius:10px; background:linear-gradient(115deg,#5B6BFF,#9C6BFF); }
.side .ic { width:22px; height:22px; opacity:.4; }
.side .ic.on { opacity:1; background:#6B5BFF; border-radius:6px; }
.main { flex:1; padding:30px 34px; overflow:hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.brand { font-size:15px; font-weight:700; color:#9A9AAA; letter-spacing:.4px; }
.avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#5B6BFF,#9C6BFF); }
.balance-label { font-size:11px; font-weight:700; letter-spacing:.6px; color:#6A6A7E; text-transform:uppercase; }
.balance { font-size:38px; font-weight:700; letter-spacing:-0.6px; margin-top:6px; }
.delta { display:inline-flex; align-items:center; gap:6px; margin-top:8px; background:#1C1B33; color:#1FD17B; font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; }
.grid { display:flex; gap:20px; margin-top:26px; }
.col-left { flex:1.15; }
.col-right { flex:1; display:flex; flex-direction:column; gap:14px; }
.card { background:#16161F; border:1px solid #2A2A38; border-radius:16px; }
.metal { height:170px; border-radius:16px; position:relative; overflow:hidden;
background:linear-gradient(150deg,#2c2c38 0%,#1a1a24 55%,#0e0e14 100%); padding:18px; }
.metal::after { content:''; position:absolute; top:-40px; left:-60px; width:180px; height:280px;
background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); transform:rotate(20deg); }
.metal .wordmark { font-weight:700; font-size:14px; letter-spacing:.5px; }
.metal .num { position:absolute; bottom:18px; left:18px; font-size:15px; letter-spacing:2px; color:#e9e9f5; }
.metal .chip { position:absolute; top:18px; right:18px; width:34px; height:24px; border-radius:5px; background:linear-gradient(135deg,#e7c98a,#b8933f); }
.donut-card { padding:18px; margin-top:14px; }
.donut-row { display:flex; align-items:center; gap:18px; }
.donut { width:88px; height:88px; border-radius:50%;
background: conic-gradient(#5B6BFF 0deg 210deg, #28283A 210deg 360deg);
display:flex; align-items:center; justify-content:center; }
.donut-inner { width:62px; height:62px; border-radius:50%; background:#16161F; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-inner b { font-size:15px; }
.donut-inner span { font-size:9px; color:#9A9AAA; }
.legend { flex:1; display:flex; flex-direction:column; gap:8px; }
.leg-row { display:flex; justify-content:space-between; font-size:12px; color:#9A9AAA; }
.leg-row .dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.tile { background:#16161F; border:1px solid #2A2A38; border-radius:16px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; }
.tile .flag { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#3F9BFF,#1FD17B); margin-right:10px; }
.tile .code { font-size:14px; font-weight:600; }
.tile .name { font-size:11px; color:#9A9AAA; }
.tile .amt { font-size:15px; font-weight:700; }
.row-f { display:flex; align-items:center; }
.cta { margin-top:14px; background:linear-gradient(115deg,#5B6BFF,#9C6BFF); border-radius:16px; height:46px;
display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600;
box-shadow: rgba(108,91,255,0.30) 0 8px 20px; }
</style></head>
<body>
<div class="app">
<div class="side">
<div class="logo"></div>
<div class="ic on"></div><div class="ic"></div><div class="ic"></div><div class="ic"></div><div class="ic"></div>
</div>
<div class="main">
<div class="topbar"><div class="brand">Revolut (iOS)</div><div class="avatar"></div></div>
<div class="balance-label">Total balance</div>
<div class="balance">$24,820.55</div>
<div class="delta">▲ +$1,204.10 this month</div>
<div class="grid">
<div class="col-left">
<div class="metal">
<div class="wordmark">Revolut (iOS)</div>
<div class="chip"></div>
<div class="num">•••• 4821</div>
</div>
<div class="card donut-card">
<div class="donut-row">
<div class="donut"><div class="donut-inner"><b>$1,284</b><span>this month</span></div></div>
<div class="legend">
<div class="leg-row"><span><span class="dot" style="background:#5B6BFF"></span>Groceries</span><span>$412</span></div>
<div class="leg-row"><span><span class="dot" style="background:#9C6BFF"></span>Transport</span><span>$210</span></div>
<div class="leg-row"><span><span class="dot" style="background:#3F9BFF"></span>Dining</span><span>$188</span></div>
</div>
</div>
</div>
</div>
<div class="col-right">
<div class="tile"><div class="row-f"><div class="flag"></div><div><div class="code">USD</div><div class="name">US Dollar</div></div></div><div class="amt">$4,820.50</div></div>
<div class="tile"><div class="row-f"><div class="flag" style="background:linear-gradient(135deg,#F7C948,#9C6BFF)"></div><div><div class="code">EUR</div><div class="name">Euro</div></div></div><div class="amt">€1,120.00</div></div>
<div class="tile"><div class="row-f"><div class="flag" style="background:linear-gradient(135deg,#1FD17B,#3F9BFF)"></div><div><div class="code">GBP</div><div class="name">Sterling</div></div></div><div class="amt">£640.20</div></div>
<div class="cta">Add money</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f0e6; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f0e6; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #105742; color: #fefefe;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fefefe; color: #105742;
border: 1px solid #105742; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #646464;
border: 1px solid #bfbcb5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cf263b; color: #fefefe;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f0e6; color:#212121; box-sizing:border-box;
font-family:'Figtree','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#105742; }
.brand { font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:800; letter-spacing:-0.5px; color:#fefefe; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#dfe8e3; }
.btn-primary { background:#fefefe; color:#105742; border:none; border-radius:8px; padding:11px 22px; font-size:13px; font-weight:700; }
main { display:flex; height:calc(640px - 76px - 44px); }
.gallery { width:400px; background:#ece5d4; position:relative; display:flex; align-items:center; justify-content:center; }
.egg { width:200px; height:230px; border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;
background:radial-gradient(circle at 35% 30%,#1c7355,#0d4535 75%); box-shadow:0 20px 40px rgba(0,0,0,0.2); }
.egg::after { content:''; position:absolute; width:200px; height:14px; background:#3a2f1e; border-radius:4px;
bottom:120px; left:50%; transform:translateX(-100px); }
.badge-warranty { position:absolute; top:20px; left:20px; background:#a07636; color:#fefefe; font-size:11px;
font-weight:700; padding:4px 10px; border-radius:6px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:#888888; font-weight:600; }
h1 { font-family:'Fraunces',Georgia,serif; font-size:30px; font-weight:800; letter-spacing:-0.8px; margin:0; }
.quote { font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:14px; color:#646464;
border-left:3px solid #105742; padding-left:12px; }
.price-row { display:flex; align-items:center; gap:12px; }
.price { font-size:22px; font-weight:800; }
.sale { background:#cf263b; color:#fefefe; font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; }
.temp { display:flex; align-items:center; gap:8px; background:#f7f7f7; border-radius:8px; padding:10px 14px; font-size:12px; color:#646464; }
.temp .bar { flex:1; height:6px; background:#aadddd; border-radius:3px; position:relative; }
.temp .bar::after { content:''; position:absolute; left:62%; top:-3px; width:12px; height:12px; border-radius:9999px; background:#105742; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#105742; color:#fefefe; border:none; border-radius:8px; padding:14px; font-size:15px; font-weight:700; }
.btn-sec { background:#fefefe; color:#105742; border:1px solid #105742; border-radius:8px; padding:14px 18px; font-size:14px; font-weight:600; }
footer { padding:12px 34px; border-top:1px solid #cecbc7; font-size:11px; color:#888888; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Big Green Egg</div>
<div class="navlinks"><span>Grills</span><span>Accessories</span><span>Recipes</span><span>EGGcessories</span></div>
<button class="btn-primary">Find a Dealer</button>
</nav>
<main>
<div class="gallery"><span class="badge-warranty">Lifetime Warranty</span><div class="egg"></div></div>
<div class="info">
<span class="cat">Ceramic Kamado Grill</span>
<h1>Big Green Egg — Large</h1>
<p class="quote">"A single unbroken temperature curve, from low-and-slow to searing heat."</p>
<div class="price-row"><span class="price">$1,299.00</span><span class="sale">Save $100</span></div>
<div class="temp">Cooking mode: <b style="color:#212121">Low & Slow</b><div class="bar"></div>225°F</div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">View Recipes</button>
</div>
</div>
</main>
<footer><span>© Big Green Egg</span><span>Lifetime Warranty · EGGhead Community</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa114f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa114f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f78eaa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #92e82a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa114f; color: #92e82a;
border: 1px solid #92e82a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa114f; color: #f5f5f5;
border: 1px solid #f9356a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f78eaa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e93349; color: #92e82a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#000000; border-bottom:1px solid #1C1C1E; }
.brand { font-size:15px; font-weight:800; letter-spacing:-0.3px; margin:0; color:#FFFFFF; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:600; color:#98989F; }
.navlinks span.on { color:#FF375F; }
.avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#2C2C2E,#3A3A3C); }
.wrap { display:flex; height:584px; }
/* left: summary column with rings + tiles */
.summary { width:520px; padding:18px 28px 0; border-right:1px solid #1C1C1E; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#FF375F; margin:0; }
.date { font-size:26px; font-weight:800; letter-spacing:-0.6px; margin:2px 0 14px; }
.ringcard { background:#1C1C1E; border-radius:18px; padding:18px 20px; display:flex; align-items:center; gap:24px; }
.rings { position:relative; width:132px; height:132px; flex:0 0 auto; }
.ring { position:absolute; border-radius:50%; }
.track { position:absolute; border-radius:50%; }
/* Move outer */
.ring.move { inset:0; background:conic-gradient(#FA114F 0deg 298deg, transparent 298deg 360deg); filter:drop-shadow(0 0 6px rgba(250,17,79,0.55)); }
.track.move { inset:0; background:radial-gradient(closest-side, #000 79%, transparent 80% 81%, rgba(250,17,79,0.22) 82%); }
/* Exercise middle */
.ring.exercise { inset:16px; background:conic-gradient(#92E82A 0deg 228deg, transparent 228deg 360deg); filter:drop-shadow(0 0 5px rgba(146,232,42,0.55)); }
.track.exercise { inset:16px; background:radial-gradient(closest-side, #000 76%, transparent 77% 78%, rgba(146,232,42,0.22) 79%); }
/* Stand inner */
.ring.stand { inset:32px; background:conic-gradient(#1EE4E1 0deg 270deg, transparent 270deg 360deg); filter:drop-shadow(0 0 5px rgba(30,228,225,0.55)); }
.track.stand { inset:32px; background:radial-gradient(closest-side, #000 74%, transparent 75% 76%, rgba(30,228,225,0.22) 77%); }
.legend { display:flex; flex-direction:column; gap:10px; }
.lrow { display:flex; align-items:baseline; gap:8px; }
.llabel { font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; width:66px; }
.llabel.move { color:#FF375F; } .llabel.exercise { color:#92E82A; } .llabel.stand { color:#1EE4E1; }
.lval { font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.lgoal { font-size:11px; font-weight:600; color:#EBEBF599; }
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.tile { background:#1C1C1E; border-radius:14px; padding:11px 12px; }
.tile .trow { display:flex; align-items:center; gap:5px; margin-bottom:6px; }
.dot { width:8px; height:8px; border-radius:50%; }
.tile .tlabel { font-size:10.5px; font-weight:600; color:#EBEBF599; }
.tile .tval { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.tile .tsub { font-size:9.5px; color:#EBEBF54D; margin-top:2px; }
/* right: Fitness+ shelf */
.plus { width:440px; padding:18px 24px; }
.sechead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.sechead h2 { font-size:19px; font-weight:800; margin:0; letter-spacing:-0.3px; }
.seeall { font-size:12px; font-weight:600; color:#FF375F; }
.fpgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fpcard { border-radius:14px; overflow:hidden; background:#1C1C1E; }
.fpart { height:110px; position:relative; }
.fpart.a { background:linear-gradient(160deg,#FF375F,#7A0F2C); }
.fpart.b { background:linear-gradient(160deg,#66FF00,#2E6600); }
.fpart.c { background:linear-gradient(160deg,#00F0FF,#0B5C5B); }
.fpart.d { background:linear-gradient(160deg,#C969E0,#4E1F5A); }
.fpbadge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.4); backdrop-filter:blur(6px);
font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:3px 7px; border-radius:5px; }
.fpplay { position:absolute; bottom:8px; left:8px; width:26px; height:26px; border-radius:50%;
background:rgba(255,255,255,0.22); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; }
.fpplay::before { content:''; border-left:8px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; margin-left:2px; }
.fpbody { padding:8px 10px 10px; }
.fptype { font-size:9px; font-weight:700; text-transform:uppercase; color:#FF375F; letter-spacing:0.3px; }
.fptitle { font-size:12.5px; font-weight:600; margin:3px 0 2px; }
.fpmeta { font-size:10.5px; color:#EBEBF599; }
.startbtn { margin-top:14px; width:100%; background:#FA114F; color:#fff; border-radius:14px;
padding:11px; text-align:center; font-size:13.5px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Apple Fitness (iOS)</p>
<div class="navlinks"><span class="on">Summary</span><span>Fitness+</span><span>Sharing</span></div>
<div class="avatar"></div>
</nav>
<div class="wrap">
<section class="summary">
<p class="eyebrow">Thursday</p>
<h1 class="date">May 14</h1>
<div class="ringcard">
<div class="rings">
<div class="track move"></div><div class="ring move"></div>
<div class="track exercise"></div><div class="ring exercise"></div>
<div class="track stand"></div><div class="ring stand"></div>
</div>
<div class="legend">
<div class="lrow"><span class="llabel move">Move</span><span class="lval">486</span><span class="lgoal">/620 KCAL</span></div>
<div class="lrow"><span class="llabel exercise">Exercise</span><span class="lval">38</span><span class="lgoal">/30 MIN</span></div>
<div class="lrow"><span class="llabel stand">Stand</span><span class="lval">9</span><span class="lgoal">/12 HR</span></div>
</div>
</div>
<div class="tiles">
<div class="tile"><div class="trow"><span class="dot" style="background:#FF375F"></span><span class="tlabel">Steps</span></div><div class="tval">8,214</div><div class="tsub">Avg 7,540</div></div>
<div class="tile"><div class="trow"><span class="dot" style="background:#0A84FF"></span><span class="tlabel">Distance</span></div><div class="tval">5.2 km</div><div class="tsub">Avg 4.8</div></div>
<div class="tile"><div class="trow"><span class="dot" style="background:#FF453A"></span><span class="tlabel">Heart</span></div><div class="tval">62</div><div class="tsub">bpm resting</div></div>
<div class="tile"><div class="trow"><span class="dot" style="background:#92E82A"></span><span class="tlabel">Workouts</span></div><div class="tval">3</div><div class="tsub">This week</div></div>
</div>
<div class="startbtn">Start Workout</div>
</section>
<section class="plus">
<div class="sechead"><h2>Fitness+</h2><span class="seeall">See All</span></div>
<div class="fpgrid">
<div class="fpcard"><div class="fpart a"><span class="fpbadge">New</span><span class="fpplay"></span></div>
<div class="fpbody"><div class="fptype">HIIT</div><div class="fptitle">20 min HIIT</div><div class="fpmeta">Bakari · Pop Anthems</div></div></div>
<div class="fpcard"><div class="fpart b"><span class="fpplay"></span></div>
<div class="fpbody"><div class="fptype">Strength</div><div class="fptitle">Full Body Burn</div><div class="fpmeta">Emily · Indie Rock</div></div></div>
<div class="fpcard"><div class="fpart c"><span class="fpplay"></span></div>
<div class="fpbody"><div class="fptype">Yoga</div><div class="fptitle">Morning Flow</div><div class="fpmeta">Jessica · Ambient</div></div></div>
<div class="fpcard"><div class="fpart d"><span class="fpbadge">Trending</span><span class="fpplay"></span></div>
<div class="fpbody"><div class="fptype">Cycling</div><div class="fptitle">Climb Ride</div><div class="fpmeta">Kyle · Electronic</div></div></div>
</div>
</section>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.3px; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #1a5fa8; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #1a5fa8;
border: 1px solid #1a5fa8; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #dde2e8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.8px; background: #1a5fa8; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; border-bottom:1px solid #dde2e8; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.logo { font-weight:700; font-size:18px; letter-spacing:-0.3px; color:#313131; }
.search { flex:1; max-width:340px; margin:0 24px; height:36px; border:1px solid #dde2e8; border-radius:8px;
display:flex; align-items:center; padding:0 12px; font-size:13px; color:#717171;
font-family:'Courier New',Courier,monospace; }
.icons { display:flex; gap:16px; font-size:13px; font-weight:600; color:#1a5fa8; }
.crumb { padding:10px 32px 0; font-size:12px; color:#717171; }
.crumb b { color:#313131; }
main { display:flex; padding:12px 32px 0; gap:32px; height:460px; }
.imgcol { width:300px; display:flex; flex-direction:column; gap:10px; }
.prodimg { border:1px solid #dde2e8; border-radius:8px; height:300px; position:relative;
background:linear-gradient(180deg, #f4f6f9, #eaecf0);
display:flex; align-items:center; justify-content:center; }
.prodimg .box { width:150px; height:170px; background:linear-gradient(160deg,#ffffff,#dde2e8);
border:1px solid #c7ced8; border-radius:4px; position:relative; }
.prodimg .box::before { content:''; position:absolute; inset:14px; border:6px solid #1a5fa8; opacity:0.15; border-radius:2px; }
.merv { position:absolute; top:12px; left:12px; background:#1a5fa8; color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.8px; text-transform:uppercase; border-radius:4px; padding:3px 8px; }
.instock { position:absolute; top:12px; right:12px; background:#27ae60; color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.8px; text-transform:uppercase; border-radius:4px; padding:3px 8px; }
.specrows { border:1px solid #dde2e8; border-radius:8px; padding:8px 12px; }
.specrow { display:flex; justify-content:space-between; font-size:12px; padding:5px 0; border-bottom:1px solid #eff1f4; }
.specrow:last-child { border-bottom:none; }
.specrow .l { color:#717171; text-transform:uppercase; letter-spacing:0.5px; font-size:11px; }
.specrow .v { color:#313131; font-family:'Courier New',Courier,monospace; }
.info { flex:1; display:flex; flex-direction:column; }
.part { font-family:'Courier New',Courier,monospace; font-size:13px; color:#717171; margin-bottom:4px; }
.title { font-size:22px; font-weight:700; line-height:1.3; margin:0 0 10px; }
.price { font-size:26px; font-weight:700; margin-bottom:14px; }
.filterbuild { border:1px solid #dde2e8; border-radius:8px; padding:14px; background:#f4f6f9; margin-bottom:14px; }
.filterbuild h4 { margin:0 0 8px; font-size:13px; font-weight:600; }
.chiprow { display:flex; gap:8px; flex-wrap:wrap; }
.chip { background:#eaecf0; border:1px solid #dde2e8; border-radius:8px; padding:6px 12px; font-size:12px; }
.chip.active { background:#1a5fa8; color:#fff; border-color:#1a5fa8; }
.cta { margin-top:auto; display:flex; gap:10px; }
.btn-primary { flex:1; background:#1a5fa8; color:#fff; border:none; border-radius:8px; height:44px;
font-size:15px; font-weight:600; letter-spacing:0.2px; }
.btn-secondary { background:#fff; color:#1a5fa8; border:1.5px solid #1a5fa8; border-radius:8px; height:44px;
padding:0 18px; font-size:15px; font-weight:600; }
footer { border-top:1px solid #dde2e8; margin-top:8px; padding:12px 32px; display:flex; justify-content:space-between;
background:#313131; color:#fff; font-size:12px; }
</style></head>
<body>
<nav>
<div class="logo">Alpine Home Air</div>
<div class="search">AFL20X25X4-MERV13-CS</div>
<div class="icons">Account · Quote · Cart (0)</div>
</nav>
<div class="crumb">Home › Furnace Filters › MERV 13 › <b>20x25x4 Pleated Filter</b></div>
<main>
<div class="imgcol">
<div class="prodimg"><span class="merv">MERV 13</span><span class="instock">In Stock</span><div class="box"></div></div>
<div class="specrows">
<div class="specrow"><span class="l">Nominal Size</span><span class="v">20 x 25 x 4</span></div>
<div class="specrow"><span class="l">Actual Size</span><span class="v">19.5 x 24.5 x 3.6</span></div>
<div class="specrow"><span class="l">CFM Rating</span><span class="v">2000</span></div>
<div class="specrow"><span class="l">Static Pressure</span><span class="v">0.30 in. w.g.</span></div>
</div>
</div>
<div class="info">
<div class="part">SKU AFL20X25X4-MERV13-CS</div>
<h1 class="title">20x25x4 Pleated Media Filter — MERV 13, Case of 2</h1>
<div class="price">$59.00</div>
<div class="filterbuild">
<h4>Build My Filter</h4>
<div class="chiprow">
<span class="chip">MERV 8</span>
<span class="chip">MERV 11</span>
<span class="chip active">MERV 13</span>
<span class="chip">MERV 16</span>
</div>
</div>
<div class="cta">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Spec Sheet</button>
</div>
</div>
</main>
<footer>
<span>© Alpine Home Air</span>
<span>Shop · Resources · Account · Contact</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf7f2; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf7f2; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #c49a3c; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #1e4d4f;
border: 1px solid #c49a3c; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c2c0bc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.4px; background: #f3efe8; color: #3d3d3d;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf7f2; color:#1a1a1a; box-sizing:border-box;
font-family:'Inter', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #eae6df; background:#faf7f2; }
.brand { font-family:'Playfair Display','Georgia',serif; font-size:21px; font-weight:400; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:12.5px; font-weight:500; letter-spacing:0.1px; color:#3d3d3d; }
.navlinks span.on { color:#1e4d4f; font-weight:600; }
.navicons { display:flex; align-items:center; gap:16px; }
.icon-search { width:14px; height:14px; border:1.5px solid #1a1a1a; border-radius:50%; position:relative; }
.icon-search::after { content:''; position:absolute; width:6px; height:1.5px; background:#1a1a1a; right:-5px; bottom:-1px; transform:rotate(45deg); }
.icon-cart { width:17px; height:14px; border:1.5px solid #1a1a1a; border-radius:0 0 3px 3px; position:relative; }
.icon-cart::before { content:''; position:absolute; top:-6px; left:2px; width:10px; height:6px; border:1.5px solid #1a1a1a; border-bottom:none; border-radius:6px 6px 0 0; }
.hero { flex:0 0 156px; height:156px; display:flex; }
.hero-art { flex:0 0 46%; position:relative; background:linear-gradient(140deg,#c49a3c 0%,#8a5a2e 40%,#1e4d4f 100%); overflow:hidden; }
.hero-art::after { content:''; position:absolute; left:18%; top:20%; width:38%; height:55%;
background:rgba(255,255,255,0.14); border-radius:6px; transform:rotate(-6deg); }
.hero-art::before { content:''; position:absolute; right:10%; bottom:14%; width:26%; height:30%;
background:rgba(250,247,242,0.18); border-radius:50%; }
.hero-panel { flex:1 1 auto; background:#1e4d4f; color:#faf7f2; display:flex; flex-direction:column;
justify-content:center; gap:8px; padding:0 32px; }
.hero-panel h1 { margin:0; font-family:'Playfair Display','Georgia',serif; font-size:26px; font-weight:400;
line-height:1.18; letter-spacing:-0.3px; }
.hero-panel p { margin:0; font-size:12.5px; opacity:0.85; max-width:340px; line-height:1.5; }
.hero-cta { align-self:flex-start; margin-top:6px; background:#c49a3c; color:#ffffff; border:none;
border-radius:4px; padding:9px 20px; font-size:12.5px; font-weight:600; letter-spacing:0.2px; }
.collhead { flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center; }
.collhead h2 { margin:0; font-family:'Playfair Display','Georgia',serif; font-size:18px; font-weight:500; }
main.grid { flex:1 1 auto; overflow:hidden; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
padding:6px 40px 0; }
.card { background:#ffffff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.04); display:flex;
flex-direction:column; overflow:hidden; padding:10px; }
.card-img { flex:0 0 auto; aspect-ratio:1/1; border-radius:4px; position:relative; overflow:hidden; }
.img1 { background:linear-gradient(135deg,#e7b96a 0%,#c49a3c 45%,#7a4a20 100%); }
.img2 { background:linear-gradient(135deg,#7fa9a8 0%,#1e4d4f 55%,#123334 100%); }
.img3 { background:linear-gradient(135deg,#d98f7a 0%,#a6503a 55%,#6b2f22 100%); }
.card-img::after { content:''; position:absolute; left:22%; top:22%; width:56%; height:56%;
border:2px solid rgba(255,255,255,0.35); border-radius:2px; }
.piece-badge { position:absolute; bottom:8px; left:8px; background:#f3efe8; color:#3d3d3d; font-size:10px;
font-weight:700; letter-spacing:0.4px; border-radius:999px; padding:3px 10px; z-index:2; }
.card-body { padding:9px 2px 0; display:flex; flex-direction:column; gap:3px; }
.card-body h3 { margin:0; font-size:14.5px; font-weight:600; }
.artist { font-family:'Playfair Display','Georgia',serif; font-style:italic; font-size:12px; color:#6b6b6b; margin:0; }
.rating { font-size:10.5px; color:#c49a3c; letter-spacing:1px; margin-top:2px; }
.rating span { color:#6b6b6b; font-weight:500; margin-left:5px; letter-spacing:0; font-family:'Inter',sans-serif; }
.price { font-size:13.5px; font-weight:600; color:#1a1a1a; margin-top:3px; }
footer { flex:0 0 44px; height:44px; background:#1e4d4f; color:#faf7f2; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; font-size:11.5px; }
footer span.dim { opacity:0.75; }
</style></head>
<body>
<nav>
<p class="brand">Art And Fable Puzzle Company</p>
<div class="navlinks">
<span class="on">Shop</span><span>Artists</span><span>Collections</span><span>Gifting</span>
</div>
<div class="navicons">
<div class="icon-search"></div>
<div class="icon-cart"></div>
</div>
</nav>
<section class="hero">
<div class="hero-art"></div>
<div class="hero-panel">
<h1>Gallery-grade jigsaw puzzles</h1>
<p>Museum-quality reproductions of original artwork, printed on premium recycled board.</p>
<button class="hero-cta">Shop New Arrivals</button>
</div>
</section>
<div class="collhead"><h2>Featured Artists</h2></div>
<main class="grid">
<div class="card">
<div class="card-img img1"><span class="piece-badge">1000 pcs</span></div>
<div class="card-body">
<h3>Golden Hour Meadow</h3>
<p class="artist">by Nora Ashford</p>
<div class="rating">★★★★★<span>4.9 (612)</span></div>
<span class="price">$32</span>
</div>
</div>
<div class="card">
<div class="card-img img2"><span class="piece-badge">500 pcs</span></div>
<div class="card-body">
<h3>Deep Sea Study</h3>
<p class="artist">by Marcus Liu</p>
<div class="rating">★★★★★<span>4.8 (348)</span></div>
<span class="price">$28</span>
</div>
</div>
<div class="card">
<div class="card-img img3"><span class="piece-badge">1000 pcs</span></div>
<div class="card-body">
<h3>Terracotta Grove</h3>
<p class="artist">by Elena Ruiz</p>
<div class="rating">★★★★☆<span>4.6 (201)</span></div>
<span class="price">$32</span>
</div>
</div>
</main>
<footer>
<span>© Art And Fable Puzzle Company</span>
<span class="dim">Art And Fable Puzzle Company · Shop · Artists · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ccbc; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #00ccbc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6f7f4; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#1D1D1B; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; }
.left { width:960px; height:640px; overflow:hidden; position:relative; }
.hero { height:200px; background:linear-gradient(160deg,#00524B,#00CCBC 130%); position:relative; }
.backbtn { position:absolute; top:18px; left:20px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,0.35); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; }
.restname { position:absolute; bottom:16px; left:20px; color:#fff; }
.restname .n { font-size:22px; font-weight:800; letter-spacing:-0.2pt; }
.restname .r { font-size:13px; font-weight:400; margin-top:4px; opacity:0.9; }
.rating { position:absolute; bottom:18px; right:20px; color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; gap:4px; }
.rating .star { color:#00CCBC; }
.catnav { height:44px; display:flex; align-items:center; gap:22px; padding:0 20px; border-bottom:1px solid #E8E8E6; font-size:14px; font-weight:700; color:#6B6B6B; }
.catnav .on { color:#1D1D1B; border-bottom:2px solid #00CCBC; height:44px; display:flex; align-items:center; }
.list { padding:14px 20px; }
.row { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid #E8E8E6; }
.rowtext { max-width:560px; }
.rowtext .nm { font-size:15px; font-weight:700; color:#1D1D1B; }
.rowtext .desc { font-size:13px; color:#6B6B6B; margin-top:4px; max-width:520px; }
.rowtext .price { font-size:14px; font-weight:800; margin-top:6px; }
.thumbwrap { position:relative; width:84px; height:84px; flex-shrink:0; margin-left:16px; }
.thumb { width:84px; height:84px; border-radius:12px; background:linear-gradient(135deg,#f6d9c4,#e8a878); }
.plus { position:absolute; bottom:-8px; right:-8px; width:28px; height:28px; border-radius:50%; background:#00CCBC; color:#003733; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.18); }
.basketbar { position:absolute; bottom:16px; left:20px; right:20px; height:52px; border-radius:999px; background:#00CCBC; display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
.basketbar .txt { color:#003733; font-weight:800; font-size:15px; }
</style>
</head>
<body>
<div class="stage">
<div class="left">
<div class="hero">
<div class="backbtn">←</div>
<div style="position:absolute; top:18px; right:20px; font-size:14px; font-weight:800; color:#fff; letter-spacing:0.2pt;">Deliveroo (iOS)</div>
<div class="restname"><div class="n">Bao & Broth Kitchen</div><div class="r">Ramen · Bao · 25–35 min</div></div>
<div class="rating"><span class="star">★</span>4.8</div>
</div>
<div class="catnav">
<div class="on">Popular</div><div>Mains</div><div>Bao Buns</div><div>Sides</div><div>Drinks</div>
</div>
<div class="list">
<div class="row">
<div class="rowtext"><div class="nm">Tonkotsu Ramen</div><div class="desc">Slow-simmered pork broth, chashu, ajitama egg, nori, scallion</div><div class="price">£12.50</div></div>
<div class="thumbwrap"><div class="thumb" style="background:linear-gradient(135deg,#e8c99a,#c98a4a)"></div><div class="plus">+</div></div>
</div>
<div class="row">
<div class="rowtext"><div class="nm">Pork Belly Bao (x2)</div><div class="desc">Steamed bun, braised pork belly, pickled cucumber, hoisin</div><div class="price">£7.90</div></div>
<div class="thumbwrap"><div class="thumb" style="background:linear-gradient(135deg,#f0e0c8,#d8a860)"></div><div class="plus">+</div></div>
</div>
<div class="row">
<div class="rowtext"><div class="nm">Spicy Miso Ramen</div><div class="desc">Miso broth, chili oil, minced pork, bean sprouts, corn</div><div class="price">£13.20</div></div>
<div class="thumbwrap"><div class="thumb" style="background:linear-gradient(135deg,#e6a898,#b8402e)"></div><div class="plus">+</div></div>
</div>
<div class="row">
<div class="rowtext"><div class="nm">Edamame</div><div class="desc">Steamed, sea salt</div><div class="price">£3.50</div></div>
<div class="thumbwrap"><div class="thumb" style="background:linear-gradient(135deg,#c8dca0,#8ab060)"></div><div class="plus">+</div></div>
</div>
</div>
<div class="basketbar"><span class="txt">View basket · 2 items</span><span class="txt">£20.40</span></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f2ef; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f2ef; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #777675; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f3f2ef; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f3f2ef; color: #111111;
border: 1px solid #cfcecb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777675; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f5f4f2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F3F2EF; color:#000000E6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.feed { flex:1; padding:16px 20px; overflow:hidden; }
.navbar { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.av0 { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#0A66C2,#004182); }
.searchbar { flex:1; background:#fff; border-radius:6px; height:34px; display:flex; align-items:center; padding:0 12px; color:#00000099; font-size:13px; }
.card { background:#fff; border-radius:8px; margin-bottom:8px; padding:14px 16px; }
.chead { display:flex; gap:10px; align-items:center; }
.cav { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#0A66C2,#00396B); position:relative; }
.otwring { position:absolute; inset:-3px; border-radius:50%; border:2px solid #057642; }
.cname { font-size:14px; font-weight:600; }
.chline { font-size:12px; color:#00000099; margin-top:2px; }
.otwbadge { display:inline-block; background:#057642; color:#fff; font-size:9px; font-weight:700; padding:1px 6px; border-radius:3px; margin-left:6px; }
.cbody { font-size:14px; line-height:1.5; margin:10px 0; }
.cimg { height:150px; border-radius:6px; background:linear-gradient(150deg,#dbe4ee,#aeb9c7); margin-bottom:10px; }
.reactions { display:flex; gap:6px; font-size:14px; padding-top:8px; border-top:1px solid #EDEDED; }
.rchip { display:flex; gap:2px; font-size:11px; color:#00000099; }
.col2 { width:300px; flex:0 0 auto; padding:16px 20px; }
.profcard { background:#fff; border-radius:8px; padding:16px; text-align:center; }
.pbanner { height:52px; background:linear-gradient(120deg,#0A66C2,#004182); border-radius:8px 8px 0 0; margin:-16px -16px 0; }
.pav { width:64px; height:64px; border-radius:50%; margin:-32px auto 8px; border:3px solid #C37D16; background:linear-gradient(135deg,#0A66C2,#00396B); }
.pname { font-size:16px; font-weight:700; }
.ptag { font-size:12px; color:#00000099; margin-top:4px; }
.connectbtn { margin-top:12px; border:1.5px solid #0A66C2; color:#0A66C2; font-weight:700; font-size:13px; padding:6px 0; border-radius:16px; }
</style></head>
<body>
<div class="wrap">
<div class="feed">
<div class="navbar"><div class="av0"></div><div class="searchbar">Search</div></div>
<div class="card">
<div class="chead"><div class="cav"><div class="otwring"></div></div>
<div><div class="cname">LinkedIn (iOS)<span class="otwbadge">#OPENTOWORK</span></div><div class="chline">Product Designer · 2h · 🌐</div></div></div>
<div class="cbody">Excited to share that our latest release ships with a fully redesigned onboarding flow. Grateful for the team that made it happen. #productdesign</div>
<div class="cimg"></div>
<div class="reactions"><span class="rchip">👍 ❤️ 248</span><span class="rchip" style="margin-left:auto;">32 comments</span></div>
</div>
<div class="card">
<div class="chead"><div class="cav" style="background:linear-gradient(135deg,#c9c7c2,#8e8c88);"></div>
<div><div class="cname">Alicia Reyes</div><div class="chline">Hiring Manager at Nova Labs · 1d</div></div></div>
<div class="cbody">We're hiring a Senior iOS Engineer to join our platform team — remote friendly. Link in comments.</div>
<div class="reactions"><span class="rchip">💡 91</span><span class="rchip" style="margin-left:auto;">14 comments</span></div>
</div>
</div>
<div class="col2">
<div class="profcard">
<div class="pbanner"></div>
<div class="pav"></div>
<div class="pname">LinkedIn (iOS)</div>
<div class="ptag">Product Designer at Nova Labs</div>
<div class="connectbtn">+ Connect</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fafaf8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #fafaf8;
border: 1px solid #fafaf8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #287efe; color: #fafaf8;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0a0a; box-sizing:border-box;
font-family:"Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
.banner { background:#ffe145; color:#0a0a0a; font-size:12px; font-weight:600; text-align:center; padding:8px 0; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:600; letter-spacing:-0.4px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; }
.right { display:flex; gap:10px; align-items:center; }
.chip { background:#f2f2f0; color:#0a0a0a; border-radius:9999px; height:34px; padding:0 16px; font-size:12px;
display:flex; align-items:center; font-weight:600; }
.pill-out { background:#fff; border:1px solid #d0d0cc; color:#0a0a0a; border-radius:9999px; height:34px;
padding:0 16px; font-size:12px; display:flex; align-items:center; font-weight:600; }
.pill-primary { background:#0066ff; color:#fff; border-radius:9999px; height:34px; padding:0 20px;
font-size:12px; display:flex; align-items:center; font-weight:600; }
.hero { text-align:center; padding:16px 40px 20px; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-1px; margin:0 0 10px; line-height:1.15; }
.hero p { font-size:14px; color:#737368; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:6px 40px; }
.svc { background:#fafaf8; border-radius:16px; padding:16px; }
.svc .icon { width:36px; height:36px; border-radius:10px; margin-bottom:10px; }
.svc h3 { font-size:14px; font-weight:600; letter-spacing:0.02em; margin:0 0 4px; }
.svc p { font-size:11px; color:#737368; margin:0; line-height:1.4; }
.i1 { background:#0066ff; } .i2 { background:#024d58; } .i3 { background:#0eaa7d; } .i4 { background:#ce2874; }
.dark { margin-top:14px; background:#0a0a0a; color:#f0f0f0; border-radius:20px 20px 0 0; padding:20px 40px;
display:flex; justify-content:space-between; align-items:center; }
.dark h2 { font-size:20px; font-weight:600; margin:0 0 4px; }
.dark p { font-size:12px; color:#f0f0f0; opacity:0.75; margin:0; }
.light-pill { background:#f0f0f0; color:#090909; border-radius:9999px; height:36px; padding:0 24px;
display:flex; align-items:center; font-size:13px; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; background:#0a0a0a; color:#838383; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<div class="banner">Gift card campaign — open a shop and get a bonus</div>
<nav>
<div class="brand">STORES</div>
<div class="navlinks"><span>Services</span><span>Case studies</span><span>Pricing</span><span>Resources</span></div>
<div class="right"><span class="chip">Log in</span><span class="pill-out">Talk to us</span><span class="pill-primary">Start for free</span></div>
</nav>
<div class="hero">
<h1>Build a store people want to buy from</h1>
<p>Payments, reservations, and your shop — all in one monthly plan.</p>
</div>
<div class="grid">
<div class="svc"><div class="icon i1"></div><h3>Online Shop</h3><p>Launch a storefront in minutes, no code needed.</p></div>
<div class="svc"><div class="icon i2"></div><h3>Cashless Pay</h3><p>Accept cards and mobile payments in person.</p></div>
<div class="svc"><div class="icon i3"></div><h3>Reservations</h3><p>Bookings and waitlists your customers can manage.</p></div>
<div class="svc"><div class="icon i4"></div><h3>Mobile Order</h3><p>Order-ahead for cafés, salons, and small shops.</p></div>
</div>
<div class="dark">
<div><h2>Everything your shop needs, one monthly fee</h2><p>Let's start building your shop together.</p></div>
<div class="light-pill">Join our team</div>
</div>
<footer><span>© STORES</span><span>STORES · Solutions · Company · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #640faf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #640faf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b48ed6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ec0040; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #640faf; color: #ffffff;
border: 1px solid #ec0040; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #640faf; color: #f5f5f5;
border: 1px solid #7b34ba; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b48ed6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7a0d9d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Nanum Barun Gothic", "Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
.utilbar { height:26px; background:#26292a; color:#929292; font-size:11px; display:flex; align-items:center;
gap:16px; padding:0 24px; }
.nav { height:50px; display:flex; align-items:center; padding:0 24px; gap:24px; border-bottom:1px solid #e5e5e5; }
.nav .brand { font-size:22px; font-weight:700; color:#640faf; }
.nav .links { display:flex; gap:18px; font-size:15px; }
.nav .links .cur { color:#640faf; }
.search { flex:1; max-width:300px; height:32px; border-bottom:2px solid #111; display:flex; align-items:center; font-size:13px; color:#929292; }
.banner { margin:16px 24px 0; height:100px; background:linear-gradient(100deg,#3d0a63,#640faf); border-radius:4px;
display:flex; align-items:center; justify-content:space-between; padding:0 30px; color:#fff; }
.banner .live { display:flex; align-items:center; gap:8px; font-size:13px; }
.live .dot { width:8px; height:8px; border-radius:50%; background:#ec0040; }
.banner h2 { font-size:20px; margin:4px 0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 24px 0; }
.card { border:1px solid #e5e5e5; border-radius:2px; overflow:hidden; }
.thumb { aspect-ratio:1/1; background:#f5f5f5; position:relative; }
.p1{background:linear-gradient(150deg,#f0e6f7,#dcc3ef);} .p2{background:linear-gradient(150deg,#fde6ea,#f8c0cc);}
.p3{background:linear-gradient(150deg,#e6f0fd,#c0d8f8);} .p4{background:linear-gradient(150deg,#f7f0e6,#efdcb8);}
.sale { position:absolute; top:6px; left:6px; background:rgba(0,0,0,0.2); color:#fff; font-size:11px; font-weight:700;
border-radius:2px; padding:2px 8px; }
.cbody { padding:8px 8px 10px; }
.cprice { font-size:16px; font-weight:700; }
.cprice .sale-pct { color:#ec0040; margin-right:4px; }
.ctitle { font-size:12px; color:#2a2a2a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.buybar { display:flex; gap:10px; padding:16px 24px 0; }
.buy-primary { flex:1; height:44px; background:#640faf; color:#fff; border-radius:4px; font-size:15px; font-weight:400;
display:flex; align-items:center; justify-content:center; }
.buy-wish { width:120px; height:44px; background:#fff; color:#111; border:1px solid #b2b2b2; border-radius:4px;
font-size:15px; display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="utilbar">Track Order · Customer Service · Sign In · My Zone</div>
<nav class="nav">
<div class="brand">CJ ONSTYLE</div>
<div class="links"><span class="cur">Home</span><span>Deals</span><span>TV Shopping</span><span>Beauty</span><span>Fashion</span></div>
<div class="search">Search products, brands</div>
</nav>
<div class="banner">
<div>
<div class="live"><span class="dot"></span>LIVE Now</div>
<h2>New Fall Knit Collection Up to 40% Off</h2>
</div>
<span style="font-size:13px;">Watch Now ›</span>
</div>
<div class="grid">
<div class="card"><div class="thumb p1"><span class="sale">-40%</span></div>
<div class="cbody"><div class="cprice"><span class="sale-pct">40%</span>₩58,900</div><div class="ctitle">Wool Blend Crewneck Sweater</div></div></div>
<div class="card"><div class="thumb p2"><span class="sale">-20%</span></div>
<div class="cbody"><div class="cprice"><span class="sale-pct">20%</span>₩32,000</div><div class="ctitle">Daily Lip Tint Set of 3</div></div></div>
<div class="card"><div class="thumb p3"></div>
<div class="cbody"><div class="cprice">₩129,000</div><div class="ctitle">AirFit Running Shoes</div></div></div>
<div class="card"><div class="thumb p4"><span class="sale">-15%</span></div>
<div class="cbody"><div class="cprice"><span class="sale-pct">15%</span>₩89,000</div><div class="ctitle">Cashmere Blend Scarf</div></div></div>
</div>
<div class="buybar">
<div class="buy-primary">Buy Now</div>
<div class="buy-wish">Wishlist</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f44336; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f44336; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f5a59f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e171f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f44336; color: #0e171f;
border: 1px solid #0e171f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f44336; color: #f5f5f5;
border: 1px solid #f45f55; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f5a59f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf3c32; color: #0e171f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0e171f; color:#ffffff; box-sizing:border-box;
font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid rgba(255,255,255,0.08); }
.brand { font-size:18px; font-weight:800; margin:0; color:#fff; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:600; color:#7a909e; }
.navlinks span.active { color:#fff; }
.btn-contact { background:#f44336; color:#fff; border:none; border-radius:4px; height:44px;
padding:0 16px; font-size:16px; font-weight:400; display:flex; align-items:center; }
.hero { padding:44px 40px 24px; }
.badge { display:inline-block; background:#2a3f4d; color:#f2f5f7; border-radius:999px; padding:4px 14px;
font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.hero h1 { font-size:52px; font-weight:800; line-height:1.1; margin:0 0 12px; letter-spacing:-1px; max-width:620px; }
.hero p { font-size:16px; color:#9fb1bd; margin:0; max-width:460px; line-height:1.4; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 40px 28px; }
.stat { background:#2a3f4d; border-radius:32px; padding:22px 24px; }
.stat .n { font-size:34px; font-weight:800; color:#fff; }
.stat .l { font-size:12px; color:#9fb1bd; margin-top:4px; font-weight:500; }
.lower { background:#ffffff; padding:26px 40px 30px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#f2f5f7; border-radius:16px; padding:20px; }
.card .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#5b7282; }
.card h3 { font-size:17px; font-weight:700; color:#0e171f; margin:8px 0 6px; }
.card p { font-size:13px; color:#3e5463; margin:0; line-height:1.5; }
.filters { display:flex; gap:8px; margin-top:2px; }
.pill { border:1px solid #c1ccd6; border-radius:999px; padding:6px 14px; font-size:12px; color:#7a909e; }
.pill.on { background:#000; color:#fff; border-color:#000; }
</style></head>
<body>
<nav>
<p class="brand">Buzzvil</p>
<div class="navlinks"><span class="active">Products</span><span>Technologies</span><span>Company</span></div>
<button class="btn-contact">Contact</button>
</nav>
<section class="hero">
<span class="badge">Reward Ad Platform</span>
<h1>Advertising that everyone loves</h1>
<p>Buzzvil turns everyday moments into reward moments — connecting brands with people through unlock screens they actually enjoy.</p>
</section>
<section class="stats">
<div class="stat"><div class="n">42M+</div><div class="l">Monthly active users reached</div></div>
<div class="stat"><div class="n">3.4x</div><div class="l">Average engagement lift</div></div>
<div class="stat"><div class="n">120+</div><div class="l">Brand partners live today</div></div>
</section>
<section class="lower">
<div class="card">
<div class="filters"><span class="pill on">All goals</span><span class="pill">Awareness</span></div>
<h3>Reach every unlock</h3>
<p>Native lock-screen placements that feel like part of the phone, not an interruption.</p>
</div>
<div class="card">
<div class="tag">Technology</div>
<h3>AI-optimized bidding</h3>
<p>Real-time delivery tuning keeps every campaign inside its performance targets.</p>
</div>
<div class="card">
<div class="tag">Company</div>
<h3>Built for the long run</h3>
<p>A decade of reward-ad data powering smarter, fairer advertising for everyone.</p>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7b09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0096e5; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fffc00; color: #0096e5;
border: 1px solid #0096e5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fffc00; color: #111111;
border: 1px solid #d9d603; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7b09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6ec25; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121314; color:#ffffff; box-sizing:border-box;
font-family:"Avenir Next", Helvetica, Tahoma, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.2px; }
.brand span { color:#FFFC00; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:500; color:#C7C7CC; }
.cta { background:#FFFC00; color:#000000; border-radius:64px; padding:11px 26px; font-size:14px; font-weight:500; }
.hero { text-align:center; padding:44px 40px 30px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero h1 { font-size:42px; font-weight:400; line-height:1.08; margin:0; max-width:640px; }
.hero h1 b { display:block; color:#FFFC00; font-weight:700; }
.hero p { font-size:16px; color:#C7C7CC; margin:0; max-width:460px; font-weight:500; }
.hero .row { display:flex; gap:12px; margin-top:6px; }
.btn-y { background:#FFFC00; color:#000; border-radius:64px; padding:11px 28px; font-size:16px; font-weight:500; }
.btn-d { background:#000000; color:#fff; border-radius:64px; padding:11px 28px; font-size:16px; font-weight:500; }
.strip { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:10px 40px 30px; }
.card { background:#3A3E41; border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.card .ghost { width:34px; height:34px; border-radius:50%; background:#FFFC00; position:relative; }
.card .ghost::after { content:''; position:absolute; inset:8px; background:#3A3E41; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; }
.card h3 { font-size:15px; font-weight:700; margin:0; color:#fff; }
.card p { font-size:12.5px; color:#C7C7CC; margin:0; line-height:1.4; }
footer { display:flex; justify-content:center; align-items:center; gap:34px; padding:14px 0;
border-top:1px solid rgba(255,255,255,0.08); }
.avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#FFFC00,#3A3E41); }
</style></head>
<body>
<nav>
<p class="brand"><span>●</span> Snapchat</p>
<div class="navlinks"><span>Why Snapchat?</span><span>Goals</span><span>Products</span><span>Resources</span></div>
<span class="cta">Get Started</span>
</nav>
<section class="hero">
<h1>Talk to your friends.<b>Speak with Snap.</b></h1>
<p>Chat, snap, and video call — camera-first communication built for how you actually talk.</p>
<div class="row">
<span class="btn-y">Get Started</span>
<span class="btn-d">See Success Stories</span>
</div>
</section>
<section class="strip">
<div class="card"><div class="ghost"></div><h3>Stories</h3><p>Share moments that disappear — ephemeral by design, honest by default.</p></div>
<div class="card"><div class="ghost"></div><h3>Spotlight</h3><p>Discover creators and trends before they hit anywhere else.</p></div>
<div class="card"><div class="ghost"></div><h3>Lenses</h3><p>Playful AR that turns a plain photo into something worth sending.</p></div>
</section>
<footer>
<div class="avatar"></div><div class="avatar"></div><div class="avatar"></div>
<span style="font-size:13px;color:#C7C7CC;">Friends over followers — built for close relationships</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eff4f8; color: #2b333f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eff4f8; color: #2b333f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #2b333f; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #73859f; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #eff4f8; color: #2b333f;
border: 1px solid #73859f; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2b333f;
border: 1px solid #bec4ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bce7f4; color: #2b333f;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eff4f8; color:#2b333f; box-sizing:border-box;
font-family:'Inter', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#73859f; }
.brand { font-size:18px; font-weight:700; color:#fff; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#eff4f8; font-weight:600; }
.cart { background:#ff7734; color:#fff; font-size:12px; font-weight:700; padding:7px 14px; border-radius:9999px; }
main { display:flex; height:578px; }
.gallery { width:390px; background:#f8f8f8; position:relative; display:flex; align-items:center; justify-content:center; }
.bookcover { width:170px; height:220px; background:linear-gradient(160deg,#bce7f4,#73859f); border-radius:8px;
box-shadow:0 18px 34px rgba(43,51,63,0.2); position:relative; }
.bookcover::before { content:''; position:absolute; top:24px; left:24px; right:24px; height:60px;
background:#fff; opacity:0.85; border-radius:6px; }
.bookcover::after { content:'ALICE'; position:absolute; bottom:26px; left:0; right:0; text-align:center;
color:#2b333f; font-size:14px; font-weight:800; letter-spacing:0.06em; }
.cloud { position:absolute; width:60px; height:24px; background:#ffffff; border-radius:9999px; opacity:0.8; }
.cloud.a { top:40px; left:40px; } .cloud.b { bottom:60px; right:50px; width:44px; height:18px; }
.badge-age { position:absolute; top:22px; left:22px; background:#2b333f; color:#fff; font-size:10px;
font-weight:700; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:12px; background:#eff4f8; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#73859f; }
h1 { font-size:22px; font-weight:700; margin:0; line-height:1.3; }
.author { font-size:13px; color:#707070; }
.stars { font-size:12px; color:#ff7734; }
.stars .n { color:#707070; margin-left:6px; font-size:11.5px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; }
.desc { font-size:13.5px; color:#3d4853; line-height:1.55; max-width:340px; }
.fmt-row { display:flex; gap:8px; }
.fmt { border:1px solid #d6d6d6; border-radius:9999px; padding:7px 16px; font-size:12px; background:#fff; }
.fmt.on { border-color:#73859f; color:#73859f; background:#e8eef5; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#73859f; color:#fff; border:none; border-radius:9999px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #73859f; color:#73859f; background:#fff; border-radius:9999px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#919191; }
</style></head>
<body>
<nav>
<div class="brand">Alice Ever After Books</div>
<div class="navlinks"><span>Picture Books</span><span>Chapter Books</span><span>Author Visits</span><span>Buffalo, NY</span></div>
<div class="cart">Cart · 2</div>
</nav>
<main>
<div class="gallery">
<div class="cloud a"></div><div class="cloud b"></div>
<span class="badge-age">Ages 4–8</span>
<div class="bookcover"></div>
</div>
<div class="info">
<span class="cat">Picture Book · Hardcover</span>
<h1>The Rabbit Who Read Backwards</h1>
<span class="author">by June Ferris · illus. Tomás Ruiz</span>
<div class="stars">★★★★★ <span class="n">4.9 · 128 reviews</span></div>
<div class="price-row"><span class="price">$17.99</span></div>
<p class="desc">A gentle, whimsical story about a rabbit who discovers his own way of seeing the world — perfect for bedtime.</p>
<div class="fmt-row">
<span class="fmt on">Hardcover</span>
<span class="fmt">Paperback</span>
<span class="fmt">Signed Copy</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Gift Wrap +$3</button>
</div>
<span class="meta">Shop local — 295 Parkside Ave, Buffalo NY</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #001339; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #001339; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878fa0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001339; color: #ffffff;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #001339; color: #f5f5f5;
border: 1px solid #273757; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878fa0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #051535; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3e4149; box-sizing:border-box;
font-family:Roboto,"Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#fff; font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:30px; color:#fff; font-size:16px; }
.hero { height:300px; background:linear-gradient(#151f32cc,#151f32cc), linear-gradient(135deg,#001339,#102245);
display:flex; flex-direction:column; }
.hero .inner { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:16px; padding:0 40px; }
.hero h1 { color:#fff; font-size:38px; font-weight:700; line-height:1.4; margin:0; }
.hero .row { display:flex; gap:14px; }
.pill-dark { background:#222222; color:#fff; border-radius:50px; padding:14px 28px; font-size:16px; font-weight:700; }
.pill-white { background:#fff; color:#3e4149; border-radius:50px; padding:14px 28px; font-size:16px; font-weight:700; }
.story { padding:32px 40px; }
.story h2 { font-size:26px; font-weight:700; color:#3e4149; margin:0 0 20px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { background:#f5f6fb; border-radius:20px; padding:20px; }
.card .thumb { height:80px; border-radius:12px; margin-bottom:12px;
background:linear-gradient(135deg,#001339,#524fa1); }
.card h4 { font-size:14px; margin:0 0 6px; color:#222222; }
.card p { font-size:12px; color:#8f97a7; margin:0; line-height:1.5; }
.card.white { background:#fff; border:1px solid #d0d6e1; }
</style></head>
<body>
<nav>
<p class="brand">Sinsang Market (Dealicious)</p>
<div class="navlinks"><span>About</span><span>Services</span><span>People & Culture</span><span>Newsroom</span></div>
</nav>
<section class="hero">
<div class="inner">
<h1>Making our customers'<br>business easy and enjoyable.</h1>
<div class="row">
<button class="pill-dark">Careers →</button>
<button class="pill-white">Read the blog →</button>
</div>
</div>
</section>
<section class="story">
<h2>Our story</h2>
<div class="grid">
<div class="card"><div class="thumb"></div><h4>Freedom and structure coexist here</h4><p>Interviews from the people building the platform, in their own words.</p></div>
<div class="card white"><div class="thumb"></div><h4>Chronicles of the dev team</h4><p>How search, checkout, and settlement got rebuilt without downtime.</p></div>
<div class="card"><div class="thumb"></div><h4>Category leadership, No.1</h4><p>Korea's largest K-fashion wholesale trading platform, by the numbers.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Pretendard, "Apple SD Gothic Neo", sans-serif; }
* { box-sizing:border-box; }
.wrap { position:relative; height:100%; display:flex; flex-direction:column; }
.gnb { height:56px; background:#000000; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#fff; font-size:16px; font-weight:700; letter-spacing:-0.3px; }
.gnb-links { display:flex; gap:0; }
.gnb-links span { color:rgba(255,255,255,0.8); font-size:16px; font-weight:500; padding:0 8px; height:56px;
display:flex; align-items:center; }
.gnb-links span.on { color:#fff; border-bottom:2px solid #fff; }
.search { width:220px; height:36px; border-radius:4px; background:#ffffff; color:#8a8a8a; font-size:14px;
display:flex; align-items:center; padding:0 12px; }
.banner { padding:16px 40px; display:flex; align-items:center; justify-content:space-between; }
.banner h1 { font-size:20px; font-weight:700; margin:0; }
.banner span { font-size:13px; color:#666666; }
.grid { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid #ebebeb;
border-left:1px solid #ebebeb; margin:0 40px; }
.cell { border-right:1px solid #ebebeb; border-bottom:1px solid #ebebeb; padding:0; display:flex; flex-direction:column; }
.photo { aspect-ratio:1; position:relative; overflow:hidden;
background:linear-gradient(160deg,#f2f2f2,#e2e2e2); }
.photo .g { position:absolute; border-radius:4px; }
.g1 .photo .g { width:56%; height:70%; left:22%; top:12%; background:#dcdcdc; }
.g2 .photo .g { width:36%; height:60%; left:32%; top:20%; background:#d4d4d4; border-radius:50%; }
.g3 .photo .g { width:66%; height:34%; left:17%; bottom:18%; background:#dedede; }
.g4 .photo .g { width:40%; height:64%; left:30%; top:16%; background:#d9d9d9; }
.info { padding:8px 10px 10px; display:flex; flex-direction:column; gap:3px; }
.info .brand-n { font-size:12px; font-weight:600; }
.info .name { font-size:13px; color:#333; }
.info .price { font-size:14px; font-weight:700; }
.util { position:absolute; right:6px; bottom:6px; width:28px; height:28px; background:rgba(255,255,255,0.9);
border-radius:0; display:flex; align-items:center; justify-content:center; font-size:13px; color:#000; }
footer { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-top:1px solid #ebebeb; font-size:11px; color:#666666; }
</style></head>
<body>
<div class="wrap">
<div class="gnb">
<div class="brand">Musinsa</div>
<div class="gnb-links"><span class="on">STORE</span><span>SNAP</span><span>MAGAZINE</span><span>RANK</span><span>BRAND</span></div>
<div class="search">Search brand, style, item</div>
</div>
<div class="banner"><h1>MUSINSA STANDARD</h1><span>New arrivals this week</span></div>
<div class="grid">
<div class="cell g1"><div class="photo"><div class="g"></div><div class="util">♡</div></div>
<div class="info"><span class="brand-n">MUSINSA STANDARD</span><span class="name">Oversized Cotton Tee</span><span class="price">₩29,000</span></div></div>
<div class="cell g2"><div class="photo"><div class="g"></div><div class="util">♡</div></div>
<div class="info"><span class="brand-n">MUSINSA STANDARD</span><span class="name">Wide Denim Pants</span><span class="price">₩59,000</span></div></div>
<div class="cell g3"><div class="photo"><div class="g"></div><div class="util">♡</div></div>
<div class="info"><span class="brand-n">MUSINSA STANDARD</span><span class="name">Light Padded Jacket</span><span class="price">₩89,000</span></div></div>
<div class="cell g4"><div class="photo"><div class="g"></div><div class="util">♡</div></div>
<div class="info"><span class="brand-n">MUSINSA STANDARD</span><span class="name">Crew Neck Knit</span><span class="price">₩39,000</span></div></div>
</div>
<footer>
<span>© Musinsa</span>
<span>Musinsa · Store · Snap · Magazine · Rank</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f9fafb; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9fafb; color: #333333;
border: 1px solid #c8c8c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #0a4021; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9fafb; color:#333333; box-sizing:border-box;
font-family:'Halant','Nunito Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#108474; }
.brand { font-family:'Arial Narrow','Impact',sans-serif; font-size:22px; font-weight:800; color:#f9fafb;
letter-spacing:0.01em; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; font-size:12.5px; color:#c1e6e6; font-weight:600; text-transform:uppercase; }
.navlinks span.on { color:#fbcd0a; }
.cart { background:#fbcd0a; color:#0a4021; font-size:12px; font-weight:800; padding:6px 14px; border-radius:8px; }
main { display:flex; height:576px; }
.gallery { width:400px; background:#0a4021; position:relative; display:flex; align-items:center; justify-content:center; }
.jar { width:180px; height:180px; border-radius:20px; background:linear-gradient(160deg,#108474 0%,#0a4021 100%);
position:relative; box-shadow:0 20px 44px rgba(0,0,0,0.3); }
.jar::before { content:''; position:absolute; top:-14px; left:14px; right:14px; height:24px;
background:#f8f2e3; border-radius:10px; }
.jar::after { content:'ACTIVIST'; position:absolute; bottom:26px; left:0; right:0; text-align:center;
color:#fbcd0a; font-size:13px; font-weight:800; letter-spacing:0.14em; }
.leaf { position:absolute; width:60px; height:60px; border-radius:0 60% 0 60%; background:#c1e6e6; opacity:0.35; }
.leaf.a { top:40px; left:40px; transform:rotate(20deg); }
.leaf.b { bottom:60px; right:50px; transform:rotate(-30deg); }
.badge-eco { position:absolute; top:20px; left:20px; background:#f8f2e3; color:#0a4021; font-size:10px;
font-weight:800; text-transform:uppercase; letter-spacing:0.05em; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:32px 38px; display:flex; flex-direction:column; gap:12px; background:#f9fafb; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#108474; }
h1 { font-family:'Arial Narrow','Impact',sans-serif; font-size:34px; font-weight:800; margin:0;
letter-spacing:0.01em; line-height:1.05; text-transform:uppercase; color:#0a4021; }
.stars { font-size:12px; color:#fbcd0a; }
.stars .n { color:#555555; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:800; color:#108474; }
.desc { font-size:13.5px; color:#555555; line-height:1.55; max-width:340px; }
.fact-row { display:flex; gap:8px; flex-wrap:wrap; }
.fact { background:#eeeeee; border-radius:8px; padding:6px 12px; font-size:11px; font-weight:700; color:#333333; }
.fact.green { background:#108474; color:#fff; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#fbcd0a; color:#0a4021; border:none; border-radius:6px; padding:13px 18px;
font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; }
.btn-outline { border:2px solid #108474; color:#108474; background:#fff; border-radius:6px; padding:11px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#7b7b7b; }
</style></head>
<body>
<nav>
<div class="brand">Activist Skincare</div>
<div class="navlinks"><span class="on">Skincare</span><span>Refill</span><span>Our Mission</span><span>Journal</span></div>
<div class="cart">Bag · 1</div>
</nav>
<main>
<div class="gallery">
<div class="leaf a"></div><div class="leaf b"></div>
<span class="badge-eco">Refillable Jar</span>
<div class="jar"></div>
</div>
<div class="info">
<span class="cat">Face Cream · 50ml</span>
<h1>Supercritical Renewal Cream</h1>
<div class="stars">★★★★★ <span class="n">4.9 · 1,802 reviews</span></div>
<div class="price-row"><span class="price">$68.00</span></div>
<p class="desc">Barrier-repairing, planet-first formula built with supercritical CO2 extraction — powerful skincare that never costs the earth.</p>
<div class="fact-row">
<span class="fact green">1% for the Planet</span>
<span class="fact">Refillable</span>
<span class="fact">Vegan</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Bag</button>
<button class="btn-outline">Buy Refill −20%</button>
</div>
<span class="meta">Carbon-neutral shipping · Recycled glass jar</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #083ccc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #083ccc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8aa2e3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #012ca2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #083ccc; color: #ffffff;
border: 1px solid #012ca2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #083ccc; color: #f5f5f5;
border: 1px solid #2e5ad3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8aa2e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0739c5; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f7f8; color:#1a1a1e; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { display:flex; flex-direction:column; width:960px; height:640px; }
nav { flex:0 0 60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; border-bottom:1px solid #e6e8ea; }
.logo { font-size:19px; font-weight:700; color:#083ccc; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#575f6c; font-weight:500; }
.navlinks .active { color:#083ccc; border-bottom:2px solid #083ccc; padding-bottom:18px; }
.row { display:flex; gap:10px; align-items:center; }
.btn-ghost { background:#ffffff; color:#1a1a1e; border:1px solid #d5d8dc; border-radius:10px;
height:36px; padding:0 16px; font-size:13px; font-weight:500; display:flex; align-items:center; white-space:nowrap; cursor:default; }
.btn-primary { background:#083ccc; color:#ffffff; border:none; border-radius:10px;
height:36px; padding:0 16px; font-size:13px; font-weight:700; display:flex; align-items:center; white-space:nowrap; cursor:default; }
.hero { flex:0 0 178px; background:#ffffff; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:16px; padding:0 40px; border-bottom:1px solid #e6e8ea; }
.hero h1 { font-size:30px; font-weight:700; letter-spacing:-0.5px; margin:0; text-align:center; color:#1a1a1e; }
.search-wrap { width:520px; padding:2px; border-radius:999px;
background:linear-gradient(90deg, #ff9ec7, #ffd48a, #6fa8ff); }
.search { background:#f6f7f8; border-radius:999px; height:46px; display:flex; align-items:center;
padding:0 20px; gap:10px; }
.search .ai { font-size:11px; font-weight:700; color:#083ccc; background:#f0f2fa; border-radius:999px;
padding:3px 10px; white-space:nowrap; }
.search span.q { font-size:14px; color:#949ba8; }
.listwrap { flex:1; padding:20px 40px; display:flex; flex-direction:column; gap:10px; }
.listwrap .lh { font-size:12px; font-weight:700; color:#575f6c; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:2px; }
.cards { display:flex; gap:16px; }
.jcard { flex:1; background:#ffffff; border:1px solid #e6e8ea; border-radius:10px; padding:16px;
box-shadow: rgba(0,0,0,0.06) 0px 2px 8px; display:flex; flex-direction:column; gap:8px; position:relative; }
.jcard .badge-urgent { position:absolute; top:14px; right:14px; font-size:11px; font-weight:700;
color:#ff6d12; background:#fff2e9; border-radius:6px; padding:2px 8px; }
.jcard .co { font-size:11.5px; color:#949ba8; font-weight:500; }
.jcard h3 { font-size:15.5px; font-weight:700; margin:0; color:#1a1a1e; }
.jcard .chip { display:inline-block; background:#f0f2fa; color:#083ccc; border-radius:999px;
padding:3px 10px; font-size:11.5px; font-weight:600; width:fit-content; }
.jcard .meta { font-size:11px; color:#575f6c; margin-top:auto; }
footer { flex:0 0 40px; background:#ffffff; border-top:1px solid #e6e8ea; padding:0 40px;
display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#949ba8; }
</style></head>
<body>
<div class="page">
<nav>
<div class="logo">JobKorea</div>
<div class="navlinks">
<span class="active">All jobs</span>
<span>IT</span>
<span>Design</span>
<span>Senior</span>
<span>Startup</span>
</div>
<div class="row">
<button class="btn-ghost">Sign in</button>
<button class="btn-primary">Post a job</button>
</div>
</nav>
<section class="hero">
<h1>Find work that actually fits you.</h1>
<div class="search-wrap">
<div class="search">
<span class="ai">AI</span>
<span class="q">Search 9M+ profiles and matched openings…</span>
</div>
</div>
</section>
<section class="listwrap">
<span class="lh">Matched for you</span>
<div class="cards">
<div class="jcard">
<span class="badge-urgent">D-2</span>
<span class="co">Northline Robotics</span>
<h3>Frontend Engineer, Platform</h3>
<span class="chip">$58K–$72K</span>
<span class="meta">128 applied · 340 recruiter views</span>
</div>
<div class="jcard">
<span class="co">Cedarwave Studio</span>
<h3>Product Designer, Growth</h3>
<span class="chip">$50K–$64K</span>
<span class="meta">64 applied · 190 recruiter views</span>
</div>
<div class="jcard">
<span class="badge-urgent">D-5</span>
<span class="co">Alex Kim & Partners</span>
<h3>Marketing Manager, In-house</h3>
<span class="chip">$46K–$58K</span>
<span class="meta">201 applied · 512 recruiter views</span>
</div>
</div>
</section>
<footer>
<span>© JobKorea</span>
<span>Jobs · Companies · Salaries · Career advice</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faad87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faad87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7029; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0b0b0b; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.brand { font-size:16px; font-weight:600; margin:0; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:8px; }
.pill { border-radius:99999px; padding:4px 12px; font-size:13px; font-family:"Courier New", monospace; }
.pill.light { background:#ededed; color:#0b0b0b; }
.pill.inverse { background:#0b0b0b; color:#ffffff; }
.hero { padding:36px 44px 24px; }
.hero h1 { font-size:60px; font-weight:400; line-height:0.98; letter-spacing:-2.4px; margin:0 0 18px; max-width:760px; }
.hero p { font-size:18px; color:#424242; max-width:480px; line-height:1.4; margin:0 0 20px; }
.cta-row { display:flex; gap:10px; }
.cta-brand { background:color-mix(in srgb, #ff5500 100%, white 0%); background:#ff5500; color:#0b0b0b;
border-radius:99999px; padding:8px 32px; font-size:20px; font-family:"Helvetica Neue", Arial, sans-serif;
border:1px solid #ff5500; }
.cta-dark { background:#0b0b0b; color:#ffffff; border-radius:99999px; padding:8px 24px; font-size:14px; border:1px solid #0b0b0b; }
.split { display:flex; gap:0; padding:16px 44px 0; }
.field { flex:1; background:#0b0b0b; border-radius:3px; padding:18px; }
.field .lbl { color:#b9b9b9; font-size:13px; font-family:"Courier New", monospace; margin-bottom:8px; }
.field .fill { height:52px; border:1px solid #ff5500; border-radius:3px; background:#212121; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:22px 44px 0; }
.card { background:#212121; border-radius:8px; padding:16px; }
.card .k { color:#ff5500; font-family:"Courier New", monospace; font-size:12px; }
.card .v { color:#ffffff; font-size:20px; font-weight:600; margin-top:6px; }
</style></head>
<body>
<nav>
<p class="brand">Sanity</p>
<div class="navlinks">
<span class="pill light">Docs</span>
<span class="pill light">Pricing</span>
<span class="pill inverse">Contact sales</span>
</div>
</nav>
<section class="hero">
<h1>The Content<br>Operating System</h1>
<p>Structured content, a configurable Studio, and APIs built for the AI era.</p>
<div class="cta-row">
<button class="cta-brand">Get started</button>
<button class="cta-dark">Book a demo</button>
</div>
</section>
<div class="split">
<div class="field"><div class="lbl">Ask anything about your content</div><div class="fill"></div></div>
</div>
<div class="grid3">
<div class="card"><div class="k">STUDIO</div><div class="v">Configurable</div></div>
<div class="card"><div class="k">CONTENT LAKE</div><div class="v">One source of truth</div></div>
<div class="card"><div class="k">AI AGENT</div><div class="v">Built in</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0076ce; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0076ce; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bce3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0063af; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0076ce; color: #ffffff;
border: 1px solid #0063af; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0076ce; color: #f5f5f5;
border: 1px solid #278ad4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bce3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0073c9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#11141a; box-sizing:border-box;
font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #DDE1E6; }
.logo { font-weight:700; font-size:18px; color:#0076CE; }
.search { width:260px; height:32px; background:#F7F8FA; border:1px solid #DDE1E6; border-radius:4px;
display:flex; align-items:center; padding:0 12px; font-size:12px; color:#9AA3AE; }
.cart { background:#0076CE; color:#fff; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:500; }
.layout { display:flex; gap:20px; padding:20px 32px; }
.filters { width:150px; font-size:13px; color:#4C545E; }
.filters h5 { font-size:11px; text-transform:uppercase; color:#6B7480; margin:0 0 8px; }
.filters .opt { padding:6px 0; }
.filters .opt.on { color:#11141a; font-weight:500; }
.content { flex:1; }
.content h1 { font-size:20px; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { border:1px solid #DDE1E6; border-radius:8px; padding:14px; }
.card .img { height:70px; border-radius:6px; background:linear-gradient(135deg,#E5F1FA,#0076CE); margin-bottom:10px; }
.card .badge { display:inline-block; background:#E5F1FA; color:#0076CE; font-size:10px; font-weight:700; border-radius:4px;
padding:2px 6px; margin-bottom:6px; }
.card h4 { font-size:13px; margin:0 0 4px; }
.card .spec { font-size:11px; color:#6B7480; margin:2px 0; }
.card .price { font-size:16px; font-weight:700; margin:8px 0; }
.card .cta { background:#0076CE; color:#fff; border-radius:4px; padding:6px 14px; font-size:12px; font-weight:500;
display:inline-block; }
.spectable { margin-top:16px; border:1px solid #DDE1E6; border-radius:8px; overflow:hidden; }
.srow { display:flex; padding:8px 16px; font-size:12px; border-bottom:1px solid #EEF0F3; }
.srow:nth-child(even) { background:#F7F8FA; }
.srow .lbl { width:40%; color:#6B7480; }
.srow .val { color:#22262B; }
</style></head>
<body>
<header>
<span class="logo">Dell</span>
<div class="search">Search products</div>
<div class="cart">Cart (2)</div>
</header>
<div class="layout">
<div class="filters">
<h5>Category</h5>
<div class="opt on">Laptops</div>
<div class="opt">Monitors</div>
<div class="opt">Workstations</div>
<h5 style="margin-top:16px">Price</h5>
<div class="opt">Under $1,000</div>
<div class="opt">$1,000 – $2,000</div>
</div>
<div class="content">
<h1>Laptops</h1>
<div class="grid">
<div class="card"><div class="img"></div><span class="badge">NEW</span><h4>XPS 13 Laptop</h4><div class="spec">16GB LPDDR5x · 512GB SSD</div><div class="price">$1,299.99</div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="img"></div><h4>Latitude 7450</h4><div class="spec">Intel Core Ultra 7</div><div class="price">$1,749.00</div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="img"></div><h4>Alienware m18 R2</h4><div class="spec">RTX 4080 · 18" QHD+</div><div class="price">$2,899.00</div><div class="cta">Add to Cart</div></div>
</div>
<div class="spectable">
<div class="srow"><span class="lbl">Processor</span><span class="val">Intel Core Ultra 7 155H</span></div>
<div class="srow"><span class="lbl">Memory</span><span class="val">16GB LPDDR5x 7467MT/s</span></div>
<div class="srow"><span class="lbl">Storage</span><span class="val">512GB M.2 PCIe NVMe SSD</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf5ef; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf5ef; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7875; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1641e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faf5ef; color: #f1641e;
border: 1px solid #f1641e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #faf5ef; color: #111111;
border: 1px solid #d5d1cb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7875; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9dece; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FAF5EF; color:#222222; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:22px 32px 0; }
.topnav { display:flex; align-items:center; justify-content:space-between; }
.wordmark { color:#F1641E; font-size:24px; font-weight:800; font-style:italic; }
.search { margin-top:14px; height:48px; background:#fff; border:1px solid #E1DDD5; border-radius:999px; display:flex; align-items:center; padding:0 18px; color:#595959; font-size:15px; gap:8px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px; }
.pcard { background:#fff; border-radius:12px; overflow:hidden; }
.pphoto { aspect-ratio:1/1; position:relative; }
.pphoto .tag { position:absolute; top:8px; left:8px; background:#FDEDE4; color:#F1641E; font-size:10px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.pphoto .heart { position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,0.45); color:#fff; display:flex; align-items:center; justify-content:center; }
.ptext { padding:10px; }
.ptext .nm { font-size:13px; font-weight:500; line-height:1.3; height:34px; overflow:hidden; }
.ptext .price { font-size:15px; font-weight:700; margin-top:4px; }
.ptext .stars { font-size:11px; margin-top:4px; color:#222; }
.ptext .shop { font-size:12px; color:#595959; margin-top:4px; }
</style>
</head>
<body>
<div class="stage">
<div class="topnav"><div class="wordmark">Etsy (iOS)</div><div style="font-size:20px">🔔 🛒</div></div>
<div class="search">🔍 Search for anything</div>
<div class="grid">
<div class="pcard"><div class="pphoto" style="background:linear-gradient(135deg,#e8d5b8,#c9a86a)"><span class="tag">Bestseller</span><span class="heart">♡</span></div>
<div class="ptext"><div class="nm">Hand-thrown ceramic mug set</div><div class="price">$38.00</div><div class="stars">★★★★★ (1,284)</div><div class="shop">ClayAndEmber</div></div>
</div>
<div class="pcard"><div class="pphoto" style="background:linear-gradient(135deg,#d8c8e8,#9878b8)"><span class="heart">♡</span></div>
<div class="ptext"><div class="nm">Macramé wall hanging, boho</div><div class="price">$52.00</div><div class="stars">★★★★★ (642)</div><div class="shop">KnotAndFiber</div></div>
</div>
<div class="pcard"><div class="pphoto" style="background:linear-gradient(135deg,#f0c8a8,#d88858)"><span class="tag">Etsy's Pick</span><span class="heart">♡</span></div>
<div class="ptext"><div class="nm">Engraved wooden jewelry box</div><div class="price">$64.00</div><div class="stars">★★★★★ (2,910)</div><div class="shop">OakAndOwl</div></div>
</div>
<div class="pcard"><div class="pphoto" style="background:linear-gradient(135deg,#c8e0d0,#78a888)"><span class="heart">♡</span></div>
<div class="ptext"><div class="nm">Hand-poured soy candle trio</div><div class="price">$28.00</div><div class="stars">★★★★☆ (398)</div><div class="shop">WickAndWillow</div></div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00d632; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00d632; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e79d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00d632; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00d632; color: #000000;
border: 1px solid #27db51; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e79d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00b42a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace; }
.stage { position:relative; width:960px; height:640px; display:flex; align-items:center; }
.hero { position:relative; z-index:2; width:460px; padding:0 56px; display:flex; flex-direction:column; gap:16px; }
.amt { font-size:96px; font-weight:700; letter-spacing:-2pt; line-height:1; margin:0; }
.amt span { color:#9E9E9E; font-size:64px; }
.word { font-size:28px; font-weight:900; letter-spacing:-0.5pt; margin:4px 0 0; text-transform:uppercase; }
.tag { font-size:15px; color:#9E9E9E; line-height:1.4; max-width:340px; margin:0; }
.row { display:flex; gap:12px; align-items:center; margin-top:8px; }
.cta { background:#00D632; color:#000000; border-radius:30px; padding:16px 32px; font-weight:700; font-size:17px; }
.cta2 { background:#1A1A1A; color:#FFFFFF; border-radius:30px; padding:16px 28px; font-weight:700; font-size:15px; }
.cashtag { margin-top:10px; font-size:15px; color:#00D632; }
.phonewrap { position:relative; z-index:2; width:500px; height:640px; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:296px; height:604px; background:#000000; border:1pt solid #1F1F1F; border-radius:46px;
box-shadow:0 30px 90px rgba(0,0,0,0.7); overflow:hidden; }
.notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#0a0a0a; border-radius:12px; z-index:6; }
.pamtzone { text-align:center; padding:44px 0 8px; }
.psign { font-size:34px; color:#9E9E9E; font-weight:700; }
.pnum { font-size:56px; font-weight:700; letter-spacing:-1.5pt; text-shadow:0 0 10px rgba(0,214,50,0.55); }
.precip { text-align:center; font-size:12px; color:#6E6E6E; margin-bottom:16px; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); padding:0 18px; row-gap:2px; }
.key { height:52px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:400; }
.pbtns { display:flex; gap:8px; padding:14px 18px 0; }
.pbtn { flex:1; height:44px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }
.req { background:#1A1A1A; color:#FFFFFF; }
.pay { background:#00D632; color:#000000; }
.ptabbar { position:absolute; left:0; right:0; bottom:0; height:58px; background:#000000; border-top:0.5pt solid #1F1F1F;
display:flex; align-items:center; justify-content:space-around; }
.tglyph { width:20px; height:20px; border:2pt solid #FFFFFF; border-radius:4px; }
.tglyph.on { border-color:#00D632; }
.dollarglyph { font-size:24px; font-weight:700; color:#00D632; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<p class="amt mono">$<span>0</span></p>
<h1 class="word">Cash App (iOS)</h1>
<p class="tag">Pure black, one violently saturated green, and a keypad big enough to fill the screen. Type a number, name a person, hit Pay.</p>
<div class="row">
<div class="cta">Pay</div>
<div class="cta2">Request</div>
</div>
<div class="cashtag mono">$cashtag</div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="notch"></div>
<div class="pamtzone mono">
<span class="psign">$</span><span class="pnum">247</span>
</div>
<div class="precip">to $johndoe</div>
<div class="keypad mono">
<span class="key">1</span><span class="key">2</span><span class="key">3</span>
<span class="key">4</span><span class="key">5</span><span class="key">6</span>
<span class="key">7</span><span class="key">8</span><span class="key">9</span>
<span class="key">.</span><span class="key">0</span><span class="key">⌫</span>
</div>
<div class="pbtns">
<div class="pbtn req">Request</div>
<div class="pbtn pay">Pay</div>
</div>
<div class="ptabbar">
<span class="tglyph"></span><span class="tglyph"></span>
<span class="dollarglyph">$</span>
<span class="tglyph"></span><span class="tglyph"></span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4438; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4438; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa5a0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f6f9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4438; color: #f6f6f9;
border: 1px solid #f6f6f9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4438; color: #f5f5f5;
border: 1px solid #fd6056; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa5a0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fe6057; color: #f6f6f9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f9; color:#232334; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; background:#fff; }
.nav .brand { font-weight:700; font-size:18px; color:#ff4438; }
.nav .links { display:flex; gap:20px; font-size:14px; color:#333333; }
.navbtn { background:#ff4438; color:#fff; border-radius:8px; padding:6px 16px; font-size:15px; font-weight:600; }
.hero { text-align:center; padding:40px 60px 0; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.3; margin:0 0 14px; color:#232334; }
.hero h1 span { color:#ff4438; }
.hero p { font-size:15px; color:#666b80; margin:0 0 20px; }
.herobtn { background:#ff4438; color:#fff; border-radius:8px; padding:12px 34px; font-size:16px; font-weight:600; display:inline-block; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; padding:30px 40px 0; }
.card { background:#f6f6f9; border-radius:30px; padding:30px; }
.card h4 { font-size:16px; font-weight:700; margin:0 0 8px; }
.card p { font-size:14px; color:#333333; margin:0; line-height:1.5; }
.card .tag { display:inline-block; background:#fff; color:#ff4438; font-size:11px; font-weight:700; border-radius:6px;
padding:3px 10px; margin-bottom:10px; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Classum</div>
<div class="links"><span>Solutions</span><span>Learning</span><span>University LMS</span></div>
<button class="navbtn">Contact sales</button>
</nav>
<div class="hero">
<h1>Q&A and learning,<br>built for <span>engagement</span></h1>
<p>An AI LMS that keeps instructors, students, and teams actually talking.</p>
<span class="herobtn">Request a demo</span>
</div>
<div class="grid">
<div class="card"><span class="tag">University</span><h4>AI LMS for classrooms</h4><p>Real-time Q&A, anonymous questions, and AI-summarized discussion for every lecture.</p></div>
<div class="card"><span class="tag">Corporate</span><h4>HR & skills training</h4><p>Onboarding, compliance, and skill-building tracked in one dashboard.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #005ea2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #005ea2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b1d0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005ea2; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #005ea2; color: #f5f5f5;
border: 1px solid #2776af; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b1d0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e5faf; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfcfc; color:#1b1b1b; box-sizing:border-box;
font-family:"Public Sans Web",-apple-system,Arial,sans-serif; }
* { box-sizing:border-box; }
.banner { background:#252f3e; color:#ffffff; font-size:11px; padding:5px 24px; display:flex; gap:6px; align-items:center; }
.banner .flag { width:12px; height:8px; background:linear-gradient(180deg,#b31942 0 20%,#fff 20% 30%,#b31942 30% 50%,#fff 50% 60%,#b31942 60% 80%,#fff 80% 100%); }
header { background:#252f3e; color:#ffffff; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:22px; font-size:13.5px; }
.search { display:flex; }
.search input { background:#13171f; border:none; color:#ffffff; padding:8px 12px; font-size:13px; width:170px; }
.search button { background:#2672de; color:#ffffff; border:none; padding:0 12px; height:38px; width:48px; border-radius:0 4px 4px 0; }
main { display:flex; height:520px; }
aside { width:220px; background:#ffffff; border-right:1px solid #e6e6e6; padding:16px 0; }
aside .grp { font-size:11px; font-weight:700; text-transform:uppercase; color:#71767a; padding:8px 20px 4px; }
aside .item { padding:8px 20px; font-size:14.5px; color:#1b1b1b; }
aside .item.active { background:#e7f6f8; border-left:4px solid #005ea2; font-weight:700; padding-left:16px; }
.content { flex:1; padding:28px 32px; overflow:hidden; }
.content h1 { font-size:28px; margin:0 0 6px; }
.content .sub { color:#5c5c5c; font-size:14px; margin-bottom:18px; }
.content p { font-size:16px; line-height:1.6; color:#1b1b1b; margin:0 0 14px; max-width:640px; }
.demo { background:#f0f0f0; border:1px solid #e6e6e6; padding:18px; margin:14px 0; }
.accordion-item { border-bottom:1px solid #e6e6e6; padding:12px 0; display:flex; justify-content:space-between; font-size:15px; }
.accordion-item.open { font-weight:700; }
.btnrow { display:flex; gap:10px; margin-top:16px; }
.btn { background:#005ea2; color:#ffffff; border:none; padding:10px 20px; font-size:15px; border-radius:4px; }
.btn-outline { background:#ffffff; color:#005ea2; border:1px solid #005ea2; padding:10px 20px; font-size:15px; border-radius:4px; }
</style></head>
<body>
<div class="banner"><span class="flag"></span>An official website of the United States government</div>
<header>
<span class="brand">U.S. Web Design System</span>
<div class="navlinks"><span>Design</span><span>Development</span><span>Components</span><span>Templates</span></div>
<div class="search"><input placeholder="Search components" /><button>Go</button></div>
</header>
<main>
<aside>
<div class="grp">Get started</div>
<div class="item">Design principles</div>
<div class="item">Developer setup</div>
<div class="grp">Components</div>
<div class="item active">Accordion</div>
<div class="item">Banner</div>
<div class="item">Button</div>
<div class="item">Form controls</div>
<div class="item">Side navigation</div>
</aside>
<div class="content">
<h1>Accordion</h1>
<div class="sub">An accordion is a list of headers that hide or reveal additional content when selected.</div>
<p>Accordions let users show and hide sections of related content on a page. Only enable the interaction pattern when the content benefits from being collapsed by default.</p>
<div class="demo">
<div class="accordion-item open"><span>Where can I download census data?</span><span>−</span></div>
<div class="accordion-item"><span>What are the eligibility requirements?</span><span>+</span></div>
<div class="accordion-item"><span>How do I contact a program office?</span><span>+</span></div>
</div>
<div class="btnrow"><button class="btn">Copy usage code</button><button class="btn-outline">View accessibility notes</button></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #004dc1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #004dc1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87a9de; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a2864; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #004dc1; color: #ffffff;
border: 1px solid #0a2864; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #004dc1; color: #f5f5f5;
border: 1px solid #2768c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87a9de; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0247b2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:"Inter","Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; color:#004dc1; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; color:#1e1f21; }
.cta { background:#004dc1; color:#ffffff; border:1px solid #004dc1; border-radius:3px; padding:9px 20px; font-size:14px; font-weight:600; }
.hero { background:#0a2864; color:#ffffff; padding:44px 40px; text-align:center; }
.hero h1 { font-size:40px; font-weight:700; letter-spacing:-0.4px; margin:0 0 14px; }
.row { display:flex; gap:12px; justify-content:center; }
.ghost { background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.2); color:#ffffff; border-radius:3px; padding:12px 20px; font-size:14px; font-weight:600; }
.white { background:#ffffff; color:#004dc1; border:1px solid #ffffff; border-radius:2px; padding:12px 30px; font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(54,55,61,0.25); }
.band { background:#f4f7fb; padding:24px 40px; }
.band h2 { font-size:24px; font-weight:700; color:#1e1f21; letter-spacing:-0.4px; margin:0 0 14px; text-align:center; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border-radius:8px; padding:16px; box-shadow:0 8px 13px rgba(159,176,199,0.3); }
.card h3 { font-size:15px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; color:#495057; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Shiftee</p>
<div class="navlinks"><span>Company</span><span>Schedule</span><span>Pricing</span></div>
<button class="cta">Free trial</button>
</nav>
<section class="hero">
<h1>Empower Your Workforce, Shiftee</h1>
<div class="row"><button class="ghost">Contact Us</button><button class="white">Free trial</button></div>
</section>
<div class="band">
<h2>Everything You Need for Workforce Management</h2>
<div class="cards">
<div class="card"><h3>Sophisticated Scheduling</h3><p>Shift plans built and shared in minutes.</p></div>
<div class="card"><h3>Automated T&A</h3><p>Attendance tracked, without the spreadsheets.</p></div>
<div class="card"><h3>Easy Leave Management</h3><p>Requests and approvals in one flow.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eaeaea; color: #31373d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eaeaea; color: #31373d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #31373d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #e9be33; color: #31373d;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #eaeaea; color: #31373d;
border: 1px solid #e9be33; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #31373d;
border: 1px solid #bcbdbf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #e9be33; color: #31373d;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eaeaea; color:#31373d; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#31373d; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#e9be33; font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; }
.cart { color:#e9be33; font-size:13px; font-weight:600; }
main { display:flex; height:582px; }
.stage { width:320px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.mat { width:200px; height:70px; background:linear-gradient(100deg,#e9be33,#d4a92e); border-radius:16px; position:relative;
box-shadow:0 16px 30px rgba(0,0,0,0.15); }
.mat-roll { position:absolute; left:-14px; top:-6px; width:34px; height:82px; border-radius:16px; background:#31373d; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
h1 { font-size:24px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#6c6c6c; margin:0; max-width:440px; line-height:1.5; }
.swatches { display:flex; gap:10px; }
.sw { width:30px; height:30px; border-radius:999px; border:2px solid transparent; }
.sw.on { border-color:#31373d; }
.sw1 { background:#e9be33; } .sw2 { background:#479ccf; } .sw3 { background:#31373d; }
.rating { font-size:13px; color:#e9be33; }
.rating span { color:#8a8a8a; font-size:12px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:24px; font-weight:700; }
.actions { display:flex; gap:12px; }
.btn-primary { background:#e9be33; color:#31373d; border-radius:8px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:700; font-size:14px; }
.btn-secondary { background:#fff; border:1px solid #d4d4d4; color:#31373d; border-radius:8px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
.link { font-size:12px; color:#479ccf; margin-top:auto; }
</style></head>
<body>
<nav>
<p class="brand">B Yoga</p>
<div class="navlinks"><span>Mats</span><span>Props</span><span>Apparel</span><span>Studio Finder</span></div>
<span class="cart">Cart (0)</span>
</nav>
<main>
<div class="stage"><div class="mat-roll"></div><div class="mat"></div></div>
<div class="info">
<h1>The Alpha Mat — 4.5mm Non-Slip</h1>
<p class="sub">A studio-grade travel mat with a closed-cell surface that stays dry through the hottest vinyasa flow.</p>
<div class="swatches"><div class="sw sw1 on"></div><div class="sw sw2"></div><div class="sw sw3"></div></div>
<div class="rating">★★★★★ <span>4.9 (1,340 reviews)</span></div>
<div class="price-row"><span class="price">$88.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Find a Studio</div>
</div>
<span class="link">Free shipping on orders over $75</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4865; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4865; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa7b4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e91e63; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4865; color: #000000;
border: 1px solid #e91e63; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4865; color: #f5f5f5;
border: 1px solid #fd647c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa7b4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb4165; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E12; color:#F4F4F6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#0E0E12; padding:22px 16px; position:relative; }
.wm { font-size:20px; font-weight:700; margin-bottom:16px; }
.wm span { color:#FF4865; }
.timeline { position:relative; padding-left:26px; }
.spine { position:absolute; left:5px; top:6px; bottom:0; width:2px; background:#2A2A33; }
.tcard { background:#18181F; border:1px solid #2A2A33; border-radius:18px; padding:12px; margin-bottom:14px; position:relative; }
.dot { position:absolute; left:-21px; top:16px; width:12px; height:12px; border-radius:50%; background:#FF4865;
box-shadow:0 0 0 4px rgba(255,72,101,0.18); }
.trow { display:flex; align-items:center; gap:10px; }
.tav { width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,#FF7B93,#E91E63); flex-shrink:0; }
.tname { font-size:15px; font-weight:600; }
.tloc { font-size:12px; color:#A0A0AE; margin-top:2px; }
.tcount { font-size:12px; font-weight:600; color:#FF4865; margin-top:4px; }
.charm { margin-left:auto; width:40px; height:40px; border-radius:50%; background:#FF4865; display:flex;
align-items:center; justify-content:center; color:#fff; font-size:16px; flex-shrink:0;
box-shadow:0 6px 16px -4px rgba(255,72,101,0.5); }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:64px; background:rgba(14,14,18,0.94);
border-top:0.5px solid #2A2A33; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#6C6C7A; text-align:center; }
.tab.on { color:#FF4865; font-weight:600; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0; }
.brand span { color:#FF4865; }
.tag { font-size:14px; color:#A0A0AE; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:14px; border:1px solid #2A2A33; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#A0A0AE; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:600; }
.typeblock .t2 { font-size:13px; color:#A0A0AE; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#21212B; border:1px solid #2A2A33; color:#A0A0AE; }
.footer { margin-top:auto; border-top:1px solid #2A2A33; padding-top:16px; font-size:11px; color:#6C6C7A; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="wm">happ<span>n</span></div>
<div class="timeline">
<div class="spine"></div>
<div class="tcard">
<div class="dot"></div>
<div class="trow">
<div class="tav"></div>
<div><div class="tname">Camille, 27</div><div class="tloc">📍 Le Marais · 11 min ago</div><div class="tcount">You crossed paths 3 times</div></div>
<div class="charm">♥</div>
</div>
</div>
<div class="tcard">
<div class="dot"></div>
<div class="trow">
<div class="tav" style="background:linear-gradient(135deg,#C5B3E6,#FF4865)"></div>
<div><div class="tname">Léa, 24</div><div class="tloc">📍 Gare du Nord · 40 min ago</div><div class="tcount">You crossed paths 1 time</div></div>
<div class="charm" style="background:#21212B;box-shadow:none;border:1px solid #2A2A33">♡</div>
</div>
</div>
</div>
<div class="tabbar"><div class="tab on">Timeline</div><div class="tab">Map</div><div class="tab">Chats</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">happn (iOS)<span>.</span></h1>
<p class="tag">A diary of near-misses — a connector-line timeline of real-world crossings, sent forward with a one-tap pink Charm.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#FF4865"></div><small>#FF4865</small></div>
<div class="sw"><div class="chip2" style="background:#E91E63"></div><small>#E91E63</small></div>
<div class="sw"><div class="chip2" style="background:#C5B3E6"></div><small>#C5B3E6</small></div>
<div class="sw"><div class="chip2" style="background:#FFC24B"></div><small>#FFC24B</small></div>
<div class="sw"><div class="chip2" style="background:#0E0E12"></div><small>#0E0E12</small></div>
</div>
<div class="typeblock">
<div class="t1">You crossed paths 3 times</div>
<div class="t2">Poppins + Inter · the crossing count is always pink — the emotional hook</div>
</div>
<div class="taglist">
<span>Crossings timeline</span><span>Charm heart</span><span>Crush gold celebration</span>
<span>Map crossing pins</span><span>FlashNote opener</span>
</div>
<div class="footer">Graphite canvas #0E0E12 · gold reserved strictly for Crush + premium</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d4aff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d4aff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #94a8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1f23; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d4aff; color: #1e1f23;
border: 1px solid #1e1f23; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d4aff; color: #f5f5f5;
border: 1px solid #4065fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #94a8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1d43dc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfdf8; color:#4d4f46; box-sizing:border-box;
font-family:"IBM Plex Sans", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #bfc1b7; }
.brand { font-weight:800; font-size:17px; color:#23251d; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:600; color:#23251d; }
.btn-dark { background:#1e1f23; color:#fff; border:none; border-radius:6px; padding:9px 14px; font-size:14px; font-weight:600; }
.hero { padding:38px 40px 20px; }
.hero h1 { font-size:30px; font-weight:800; letter-spacing:-0.75px; line-height:1.2; margin:0 0 10px; color:#23251d; max-width:600px; }
.hero p { font-size:16px; color:#4d4f46; margin:0 0 14px; max-width:520px; }
.row { display:flex; gap:14px; padding:0 40px 30px; }
.card { flex:1; background:#fdfdf8; border:1px solid #bfc1b7; border-radius:6px; padding:16px; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 6px; color:#23251d; }
.card p { font-size:13px; color:#4d4f46; margin:0; line-height:1.5; }
.hog { width:34px; height:34px; border-radius:50%; background:#F54E00; margin-bottom:10px; position:relative; }
.hog::after { content:''; position:absolute; width:10px; height:10px; background:#fdfdf8; border-radius:50%; top:9px; left:9px; }
.tag { display:inline-block; background:#e5e7e0; color:#4d4f46; font-size:12px; font-weight:500; border-radius:4px; padding:2px 8px; margin-top:20px; margin-left:40px; }
</style></head>
<body>
<nav>
<div class="brand">🦔 PostHog</div>
<div class="navlinks"><span>Products</span><span>Docs</span><span>Pricing</span><span>Handbook</span></div>
<button class="btn-dark">Get started - free</button>
</nav>
<div class="hero">
<h1>We make dev tools for product engineers</h1>
<p>Product OS: analytics, feature flags, session replay, surveys, A/B tests — in one integrated platform.</p>
</div>
<div class="row">
<div class="card"><div class="hog"></div><h3>Product analytics</h3><p>Autocapture every event so you never have to worry about instrumenting again.</p></div>
<div class="card"><div class="hog"></div><h3>Session replay</h3><p>Watch real users struggle so you don't have to guess why they churned.</p></div>
<div class="card"><div class="hog"></div><h3>Feature flags</h3><p>Ship safely and roll back instantly when something looks wrong.</p></div>
</div>
<div class="tag">open source · self-host first-class</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff595a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff595a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faafaf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #10567b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff595a; color: #10567b;
border: 1px solid #10567b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff595a; color: #f5f5f5;
border: 1px solid #fd7273; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faafaf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9595f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f8; color:#39393e; box-sizing:border-box;
font-family:"Helvetica Neue",Helvetica,Arial,"PingFang TC","Heiti TC",sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; background:#ffffff; display:flex; align-items:center; gap:14px; padding:0 24px;
border-bottom:1px solid #e5e5e6; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.2px; flex-shrink:0; }
.searchbox { flex:1; height:34px; border:1px solid #d3d3d5; border-radius:4px 8px 8px 4px; display:flex;
align-items:center; padding:0 12px; color:#929295; font-size:13px; background:#ffffff; }
.cpills { display:flex; gap:6px; }
.cpill { font-size:12px; font-weight:500; border-radius:100px; padding:5px 12px; background:#eeeeef; color:#66666a; }
.cpill.active { background:#fff8f7; color:#10567b; }
.login { background:#10567b; color:#ffffff; border:1px solid #10567b; border-radius:4px; padding:8px 14px;
font-size:13px; font-weight:400; }
.catbar { height:32px; display:flex; align-items:center; gap:20px; padding:0 24px; background:#ffffff;
border-bottom:1px solid #e5e5e6; font-size:13px; }
.catitem { color:#66666a; }
.catitem.active { color:#2e90b7; font-weight:700; }
.featured { display:flex; gap:16px; padding:14px 24px; background:#ffffff; margin:0; }
.fthumb { width:150px; height:110px; border-radius:4px; background:linear-gradient(135deg,#10567b,#2e90b7); flex-shrink:0; }
.finfo { flex:1; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.fdesigner { font-size:11px; color:#929295; }
.ftitle { font-size:16px; font-weight:700; margin:0; }
.fprice { font-size:19px; font-weight:700; }
.fbtns { display:flex; gap:8px; margin-top:4px; }
.btn-purchase { background:#f16c5d; color:#ffffff; border:1px solid #f16c5d; border-radius:4px;
padding:8px 16px; font-size:13px; font-weight:400; }
.btn-outline { background:#ffffff; color:#10567b; border:1px solid #10567b; border-radius:4px;
padding:8px 16px; font-size:13px; font-weight:400; }
.gridwrap { padding:12px 24px 20px; }
.gridlabel { font-size:14px; font-weight:700; margin:0 0 8px; color:#39393e; }
.grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.card { background:#ffffff; border-radius:4px; overflow:hidden; }
.thumb { height:78px; position:relative; }
.t1 { background:linear-gradient(135deg,#f7d6c9,#f16c5d); }
.t2 { background:linear-gradient(135deg,#cfe4ee,#2e90b7); }
.t3 { background:linear-gradient(135deg,#dcecd8,#2cac97); }
.t4 { background:linear-gradient(135deg,#e8e3f2,#a98fd1); }
.t5 { background:linear-gradient(135deg,#f9e2c4,#e0a95a); }
.t6 { background:linear-gradient(135deg,#f2d6de,#d888a0); }
.ribbon { position:absolute; top:0; left:0; background:#e63349; color:#fff; font-size:10px; font-weight:700;
border-radius:2px 0 2px 0; padding:2px 6px; box-shadow:1px 1px 2px 0 rgba(32,32,38,0.2); }
.cinfo { padding:6px 7px 8px; }
.ctitle { font-size:11px; color:#39393e; line-height:1.3; margin:0 0 3px; }
.cprice { font-size:12px; font-weight:700; }
</style></head>
<body>
<nav>
<span class="brand">Pinkoi</span>
<div class="searchbox">Search independent design goods…</div>
<div class="cpills"><span class="cpill active">TW</span><span class="cpill">JP</span><span class="cpill">HK</span></div>
<button class="login">Sign In</button>
</nav>
<div class="catbar">
<span class="catitem active">Home Decor</span>
<span class="catitem">Stationery</span>
<span class="catitem">Jewelry</span>
<span class="catitem">Bags</span>
<span class="catitem">Ceramics</span>
</div>
<div class="featured">
<div class="fthumb"></div>
<div class="finfo">
<span class="fdesigner">by Studio Mori · Kyoto</span>
<p class="ftitle">Hand-thrown stoneware mug, sand glaze</p>
<span class="fprice">NT$980</span>
<div class="fbtns">
<button class="btn-purchase">Add to Cart</button>
<button class="btn-outline">Message Seller</button>
</div>
</div>
</div>
<div class="gridwrap">
<p class="gridlabel">More from independent designers</p>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="ribbon">20%</span></div><div class="cinfo"><p class="ctitle">Woven cotton coaster set</p><span class="cprice">NT$420</span></div></div>
<div class="card"><div class="thumb t2"></div><div class="cinfo"><p class="ctitle">Brass desk clip, set of 3</p><span class="cprice">NT$650</span></div></div>
<div class="card"><div class="thumb t3"><span class="ribbon">15%</span></div><div class="cinfo"><p class="ctitle">Linen zip pouch, sage</p><span class="cprice">NT$390</span></div></div>
<div class="card"><div class="thumb t4"></div><div class="cinfo"><p class="ctitle">Enamel pin, quiet moon</p><span class="cprice">NT$280</span></div></div>
<div class="card"><div class="thumb t5"><span class="ribbon">10%</span></div><div class="cinfo"><p class="ctitle">Ceramic incense holder</p><span class="cprice">NT$540</span></div></div>
<div class="card"><div class="thumb t6"></div><div class="cinfo"><p class="ctitle">Hand-bound notebook A6</p><span class="cprice">NT$310</span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f4; color: #26251e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f4; color: #26251e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.11px; margin: 0; color: #26251e; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #807d72; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #f54e00; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #ffffff; color: #26251e;
border: 1px solid #f54e00; border-radius: 8px;
padding: 9px 17px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #26251e;
border: 1px solid #c3c2be; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #807d72; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background: #e6e5e0; color: #26251e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f4; color:#26251e; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:400; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#5a5852; }
.btnd { background:#26251e; color:#f7f7f4; border-radius:8px; padding:10px 18px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:6px 32px 14px; }
.hero h1 { font-size:38px; font-weight:400; letter-spacing:-1.4px; margin:0 0 8px; line-height:1.1; }
.hero p { font-size:14px; color:#5a5852; margin:0 auto 14px; max-width:400px; }
.btnf { background:#f54e00; color:#fff; border-radius:8px; padding:10px 18px; font-size:13px; font-weight:500; }
.idecard { margin:0 32px; background:#fff; border:1px solid #e6e5e0; border-radius:12px; display:flex; height:250px; overflow:hidden; }
.sidebar { width:120px; background:#fafaf7; border-right:1px solid #e6e5e0; padding:12px; font-size:11px; color:#807d72; }
.sidebar div { padding:5px 0; }
.editor { flex:1; padding:14px; font-family:"Courier New", monospace; font-size:12px; color:#26251e; line-height:1.7; }
.editor .kw { color:#f54e00; } .editor .cm { color:#a09c92; }
.chat { width:220px; background:#fafaf7; border-left:1px solid #e6e5e0; padding:12px; font-size:11px; }
.chat .msg { background:#fff; border:1px solid #e6e5e0; border-radius:8px; padding:8px; margin-bottom:8px; color:#5a5852; }
.timeline { display:flex; gap:10px; padding:16px 32px 0; align-items:center; }
.pill { border-radius:999px; padding:4px 10px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.t1 { background:#dfa88f; color:#26251e; } .t2 { background:#9fc9a2; color:#26251e; }
.t3 { background:#9fbbe0; color:#26251e; } .t4 { background:#c0a8dd; color:#26251e; } .t5 { background:#c08532; color:#fff; }
.timeline span.arrow { color:#a09c92; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Cursor</div>
<div class="navlinks"><span>Pricing</span><span>Features</span><span>Enterprise</span><span>Blog</span></div>
<span class="btnd">Download</span>
</nav>
<div class="hero">
<h1>The AI code editor</h1>
<p>Built to make you extraordinarily productive, Cursor is the best way to code with AI.</p>
<span class="btnf">Download for macOS</span>
</div>
<div class="idecard">
<div class="sidebar"><div>▾ src</div><div> app.tsx</div><div> utils.ts</div><div> api.ts</div><div>▸ tests</div></div>
<div class="editor"><span class="cm">// authenticate user</span><br><span class="kw">async function</span> login(user) {<br> <span class="kw">return</span> api.post(user);<br>}</div>
<div class="chat"><div class="msg">Add error handling to the login function</div><div class="msg">Done — added try/catch and a toast on failure.</div></div>
</div>
<div class="timeline">
<span class="pill t1">Thinking</span><span class="arrow">→</span>
<span class="pill t2">Grepping</span><span class="arrow">→</span>
<span class="pill t3">Reading</span><span class="arrow">→</span>
<span class="pill t4">Editing</span><span class="arrow">→</span>
<span class="pill t5">Done</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3264f0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3264f0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9db4f3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #252a39; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3264f0; color: #252a39;
border: 1px solid #252a39; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3264f0; color: #f5f5f5;
border: 1px solid #517bf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9db4f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #305bd3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101218; box-sizing:border-box;
font-family:"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
nav { flex:0 0 60px; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#252a39; }
.brand { font-size:16px; font-weight:700; color:#ffffff; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#ffffff; }
.navlinks span.active { color:#3264f0; }
.btn-outline { background:transparent; color:#3264f0; border:1px solid #3264f0; border-radius:4px;
height:32px; padding:0 16px; font-size:12px; font-weight:500; white-space:nowrap; font-family:inherit; }
.hero { flex:0 0 168px; background:#252a39; display:flex; align-items:center; gap:36px; padding:0 40px; }
.hero .text { display:flex; flex-direction:column; gap:8px; max-width:430px; }
.eyebrow { font-size:13px; font-weight:400; color:#3264f0; }
.hero h1 { margin:0; font-size:26px; font-weight:700; line-height:1.25; color:#f5f5f7; letter-spacing:-0.3px; }
.hero p { margin:0; font-size:12px; color:#9099ab; line-height:1.5; }
.radar { position:relative; width:220px; height:120px; border-radius:8px; flex:0 0 220px;
background:linear-gradient(160deg,#171a24,#2a3350); overflow:hidden; }
.radar .grid { position:absolute; inset:0; background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 20px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 20px); }
.box { position:absolute; border:1.5px solid #3264f0; border-radius:2px; }
.box::before { content:attr(data-label); position:absolute; top:-14px; left:0; font-size:8px; color:#8fb0ff;
background:rgba(50,100,240,0.25); padding:1px 4px; border-radius:2px; white-space:nowrap; }
.b1 { top:22px; left:24px; width:52px; height:36px; }
.b2 { top:52px; left:120px; width:44px; height:58px; }
.b3 { top:16px; left:160px; width:38px; height:30px; }
.content { flex:1; background:#ffffff; padding:20px 40px 0; min-height:0; }
.content .heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.content .heading h2 { margin:0; font-size:18px; font-weight:400; color:#101218; }
.content .heading span { font-size:12px; color:#3264f0; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.stat { background:#ffffff; border-radius:10px; border:1px solid #e7e7e7; padding:12px 14px; }
.stat .k { font-size:20px; font-weight:700; color:#101218; }
.stat .l { font-size:10.5px; color:#7e8390; margin-top:2px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border-radius:10px; padding:14px 16px;
box-shadow:rgba(141,141,141,0.15) 10px 10px 28px 0px; display:flex; flex-direction:column; gap:6px; }
.card .tag { font-size:10px; font-weight:500; color:#3264f0; text-transform:uppercase; letter-spacing:0.05em; }
.card h3 { margin:0; font-size:14px; font-weight:700; color:#101218; }
.card p { margin:0; font-size:11px; color:#7e8390; line-height:1.4; }
footer { flex:0 0 40px; background:#252a39; padding:0 40px; display:flex; align-items:center;
justify-content:space-between; font-size:10.5px; color:#9099ab; }
</style></head>
<body>
<div class="page">
<nav>
<span class="brand">Nota AI</span>
<div class="navlinks"><span class="active">AI Solutions</span><span>Tech Blog</span><span>Company</span></div>
<button class="btn-outline">Contact Us</button>
</nav>
<div class="hero">
<div class="text">
<span class="eyebrow">AI Solutions</span>
<h1>Industry-tailored Vision Intelligence</h1>
<p>On-device AI that runs fast, accurate, and efficient — from cameras to vehicles to edge hardware.</p>
</div>
<div class="radar">
<div class="grid"></div>
<div class="box b1" data-label="Vehicle 98%"></div>
<div class="box b2" data-label="Person 96%"></div>
<div class="box b3" data-label="Sign 91%"></div>
</div>
</div>
<div class="content">
<div class="heading"><h2>High-performance AI on any device</h2><span>Read More →</span></div>
<div class="stats">
<div class="stat"><div class="k">2.4ms</div><div class="l">Inference latency</div></div>
<div class="stat"><div class="k">98.6%</div><div class="l">Detection accuracy</div></div>
<div class="stat"><div class="k">62 FPS</div><div class="l">Edge throughput</div></div>
<div class="stat"><div class="k">-71%</div><div class="l">Model size reduction</div></div>
</div>
<div class="cards">
<div class="card"><span class="tag">ITS</span><h3>Traffic Intelligence</h3><p>Real-time vehicle and incident detection for smart intersections.</p></div>
<div class="card"><span class="tag">DMS & FR</span><h3>Driver Monitoring</h3><p>On-device face and drowsiness recognition for safer fleets.</p></div>
<div class="card"><span class="tag">Surveillance</span><h3>Industrial Safety</h3><p>Edge-optimized models for restricted-zone monitoring.</p></div>
</div>
</div>
<footer>
<span>© Nota AI</span>
<span>NetsPresso® · Nota AI AI Solutions</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #262626;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #262626;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #262626; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.5px; background: #1c69d4; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.5px; background: #ffffff; color: #262626;
border: 1px solid #1c69d4; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; background: #ffffff; color: #262626;
border: 1px solid #c9c9c9; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.5px; background: #ffffff; color: #262626;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
border-bottom:1px solid #e6e6e6; }
.brand { width:30px; height:30px; border-radius:999px; border:2px solid #1c69d4; display:flex; align-items:center;
justify-content:center; font-size:9px; font-weight:700; color:#1c69d4; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:400; letter-spacing:0.3px; }
.hero { display:flex; align-items:center; justify-content:space-between; padding:30px 40px; height:220px; }
.hero .txt h1 { font-size:44px; font-weight:700; margin:0 0 10px; letter-spacing:0; }
.hero .txt p { font-size:16px; font-weight:300; color:#3c3c3c; margin:0 0 14px; max-width:340px; }
.hero .txt .link { font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.car { width:340px; height:150px; border-radius:0;
background:linear-gradient(100deg,#dfe3e8,#aeb6c2 45%,#7d8896); position:relative; }
.car::after { content:''; position:absolute; left:20px; right:20px; bottom:-8px; height:14px; border-radius:50%;
background:rgba(0,0,0,0.18); filter:blur(4px); }
.cardgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0 40px; }
.mcard { padding:20px; display:flex; flex-direction:column; gap:8px; }
.mplate { background:#fafafa; height:110px; display:flex; align-items:center; justify-content:center; }
.mplate .sil { width:120px; height:46px; border-radius:0; }
.sil1 { background:linear-gradient(100deg,#c7cdd6,#8b95a3); }
.sil2 { background:linear-gradient(100deg,#d7d2c8,#a89f8e); }
.sil3 { background:linear-gradient(100deg,#c2d0da,#7d94a3); }
.mcard h3 { font-size:18px; font-weight:700; margin:0; }
.mcard p { font-size:14px; font-weight:300; color:#3c3c3c; margin:0; }
.mcard .learn { font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
</style></head>
<body>
<nav>
<div class="brand">BMW</div>
<div class="navlinks"><span>Models</span><span>Next Generation</span><span>Pre-Owned</span><span>Dealers</span><span>Test Drive</span></div>
<div class="brand" style="border-radius:0;border:none;font-size:18px;color:#262626;width:auto;height:auto;">BMW</div>
</nav>
<div class="hero">
<div class="txt">
<h1>BMW iX3</h1>
<p>Pure electric power. Precision engineering. The next generation, arriving now.</p>
<span class="link">LEARN MORE ›</span>
</div>
<div class="car"></div>
</div>
<div class="cardgrid">
<div class="mcard"><div class="mplate"><div class="sil sil1"></div></div><h3>BMW iX3</h3><p>Fully electric. Fully engineered.</p><span class="learn">LEARN MORE ›</span></div>
<div class="mcard"><div class="mplate"><div class="sil sil2"></div></div><h3>BMW 5 Series</h3><p>The business of driving pleasure.</p><span class="learn">LEARN MORE ›</span></div>
<div class="mcard"><div class="mplate"><div class="sil sil3"></div></div><h3>BMW iX</h3><p>A bold step into the future.</p><span class="learn">LEARN MORE ›</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3f3fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3f3fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a3a3fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f2fae; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3f3fff; color: #ffffff;
border: 1px solid #2f2fae; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3f3fff; color: #f5f5f5;
border: 1px solid #5c5cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3a3fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3c3cf2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body {
display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181818; box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
header { flex:0 0 64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #ebebeb; }
.brand { font-size:17px; font-weight:700; margin:0; }
.tabs { display:flex; gap:22px; }
.tab { font-size:13px; font-weight:500; color:#6d6d6d; padding-bottom:6px; border-bottom:2px solid transparent; }
.tab.active { color:#3f3fff; border-bottom-color:#3f3fff; font-weight:600; }
.search { background:#f5f5f5; border-radius:9999px; padding:8px 16px; font-size:12px; color:#989898; width:180px; }
.content { flex:1 1 auto; padding:20px 32px 4px; overflow:hidden; }
.crow { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.crow h2 { font-size:16px; font-weight:600; margin:0; }
.crow span { font-size:12px; color:#3f3fff; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.album { display:flex; flex-direction:column; gap:6px; }
.thumb { width:100%; aspect-ratio:1/1; border-radius:6px; }
.album b { font-size:13px; font-weight:600; line-height:1.2; }
.album span { font-size:12px; color:#989898; }
.playerbar { flex:0 0 72px; border-top:1px solid #ebebeb; display:flex; align-items:center; gap:16px; padding:0 32px; }
.pthumb { width:44px; height:44px; border-radius:6px; background:linear-gradient(135deg,#3f3fff,#7286ff); flex:0 0 44px; }
.pmeta { flex:0 0 150px; }
.pmeta b { font-size:13px; font-weight:600; display:block; }
.pmeta span { font-size:11px; color:#989898; }
.controls { display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.play-circle { width:32px; height:32px; border-radius:50%; background:#3f3fff; display:flex; align-items:center; justify-content:center; }
.play-circle .tri { width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #ffffff; margin-left:2px; }
.skip { width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:8px solid #6d6d6d; }
.progresswrap { flex:1 1 auto; display:flex; align-items:center; gap:8px; }
.progresswrap span { font-size:11px; color:#989898; }
.track { flex:1 1 auto; height:4px; border-radius:9999px; background:#323232; position:relative; overflow:hidden; }
.trackfill { position:absolute; left:0; top:0; bottom:0; width:38%; background:#3f3fff; border-radius:9999px; }
</style></head>
<body>
<header>
<p class="brand">FLO</p>
<div class="tabs"><span class="tab active">Home</span><span class="tab">Search</span><span class="tab">Library</span><span class="tab">Charts</span></div>
<span class="search">Search songs, artists</span>
</header>
<div class="content">
<div class="crow"><h2>Your Daily Mix</h2><span>See all</span></div>
<div class="grid">
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#3f3fff,#7286ff)"></span><b>Night Drive</b><span>Yuna Park</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#525cfd,#3f3fff)"></span><b>Paper Moon</b><span>Jiho Lee</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#576aff,#181818)"></span><b>Slow Tape</b><span>Minho Kim</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#7286ff,#f5f5f5)"></span><b>Coastline</b><span>Suji Kang</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#181818,#3f3fff)"></span><b>Static Bloom</b><span>Doyun Bae</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#3f3fff,#525cfd)"></span><b>Afterglow</b><span>Harin Oh</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#7286ff,#576aff)"></span><b>Blue Hour</b><span>Junseo Yoon</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#323232,#576aff)"></span><b>Rewind</b><span>Aeri Song</span></div>
</div>
</div>
<div class="playerbar">
<span class="pthumb"></span>
<div class="pmeta"><b>Night Drive</b><span>Yuna Park</span></div>
<div class="controls"><span class="skip" style="transform:scaleX(-1)"></span><span class="play-circle"><span class="tri"></span></span><span class="skip"></span></div>
<div class="progresswrap"><span>1:24</span><span class="track"><span class="trackfill"></span></span><span>3:42</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f1e6; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f1e6; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787671; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #b9d9eb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f1e6; color: #000000;
border: 1px solid #b9d9eb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f6f1e6; color: #111111;
border: 1px solid #d1cdc4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787671; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ecede7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F6F1E6; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.map { position:absolute; inset:0; background:#F6F1E6; }
.water { position:absolute; background:#B9D9EB; border-radius:50%; }
.w1 { width:420px; height:420px; left:-140px; top:-60px; }
.w2 { width:260px; height:260px; right:-90px; bottom:-80px; }
.park { position:absolute; background:#D6E5C9; border-radius:40% 60% 55% 45%; }
.p1 { width:190px; height:140px; left:360px; top:60px; }
.p2 { width:150px; height:110px; right:220px; bottom:40px; }
.road { position:absolute; background:#FFFFFF; border:1px solid #D5CFC0; }
.r1 { width:900px; height:14px; left:30px; top:230px; transform:rotate(-3deg); }
.r2 { width:14px; height:520px; left:470px; top:60px; transform:rotate(6deg); }
.r3 { width:700px; height:10px; left:120px; top:420px; transform:rotate(2deg); }
.bld { position:absolute; width:34px; height:34px; background:#EFE9DD; border:1px solid #D5CFC0; border-radius:4px; }
nav { position:relative; z-index:5; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:rgba(246,241,230,0.0); }
.brand { font-size:15px; font-weight:700; margin:0; letter-spacing:-0.2px; color:#000; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:500; color:#3C3C43; opacity:0.6; }
.controls { position:absolute; right:24px; top:66px; display:flex; flex-direction:column; gap:8px; z-index:6; }
.cbtn { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.72); backdrop-filter:blur(10px);
display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.cbtn .g { width:16px; height:16px; border:2px solid #000; border-radius:3px; }
.cbtn.loc .g { border-radius:50%; border-color:#0A84FF; }
.cbtn.compass .g { width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:14px solid #FF3B30; border-radius:0; }
.pin { position:absolute; left:560px; top:150px; z-index:6; }
.pinhead { width:26px; height:26px; background:#FF3B30; border-radius:50% 50% 50% 0; transform:rotate(45deg);
box-shadow:0 3px 6px rgba(0,0,0,0.3); }
.pindot { position:absolute; left:8px; top:8px; width:10px; height:10px; background:#fff; border-radius:50%; }
.puck { position:absolute; left:340px; top:340px; z-index:6; }
.pring { width:38px; height:38px; border-radius:50%; background:rgba(10,132,255,0.18); position:absolute; left:-9px; top:-9px; }
.pcore { width:20px; height:20px; border-radius:50%; background:#0A84FF; border:3px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.cone { position:absolute; left:9px; top:-30px; width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent;
border-bottom:34px solid rgba(10,132,255,0.35); }
.searchcard { position:absolute; left:0; right:0; bottom:0; height:236px; background:rgba(255,255,255,0.86);
backdrop-filter:blur(18px); border-radius:20px 20px 0 0; box-shadow:0 -8px 24px rgba(0,0,0,0.12); z-index:8; padding:10px 28px 20px; }
.grabber { width:36px; height:5px; background:rgba(60,60,67,0.3); border-radius:3px; margin:0 auto 12px; }
.searchfield { height:40px; background:#F2F2F7; border-radius:10px; display:flex; align-items:center; gap:8px; padding:0 14px; }
.searchfield .mag { width:14px; height:14px; border:2px solid rgba(60,60,67,0.6); border-radius:50%; position:relative; }
.searchfield .mag::after { content:''; position:absolute; width:6px; height:2px; background:rgba(60,60,67,0.6); right:-6px; bottom:0; transform:rotate(45deg); }
.searchfield span { font-size:15px; color:rgba(60,60,67,0.4); }
.pills { display:flex; gap:10px; margin-top:14px; }
.pill { width:74px; height:88px; background:#fff; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,0.08);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.pill .ic { width:24px; height:24px; border-radius:6px; }
.pill span { font-size:11px; font-weight:500; color:#000; }
.placecard { position:absolute; right:28px; bottom:20px; width:230px; background:#fff; border-radius:16px;
box-shadow:0 6px 20px rgba(0,0,0,0.16); padding:16px; z-index:9; }
.placecard .bar { width:4px; height:34px; background:#FF3B30; border-radius:2px; position:absolute; left:16px; top:16px; }
.pctitle { font-size:16px; font-weight:700; margin:0 0 2px 14px; }
.pcsub { font-size:11px; color:rgba(60,60,67,0.6); margin:0 0 10px 14px; }
.pcbtn { background:#0A84FF; color:#fff; font-size:12px; font-weight:600; text-align:center; border-radius:18px; padding:8px; }
</style></head>
<body>
<div class="map">
<div class="water w1"></div><div class="water w2"></div>
<div class="park p1"></div><div class="park p2"></div>
<div class="road r1"></div><div class="road r2"></div><div class="road r3"></div>
<div class="bld" style="left:410px;top:150px;"></div>
<div class="bld" style="left:456px;top:190px;"></div>
<div class="bld" style="left:230px;top:280px;"></div>
<div class="bld" style="left:640px;top:300px;"></div>
</div>
<nav>
<p class="brand">Apple Maps (iOS)</p>
<div class="navlinks"><span>Standard</span><span>Satellite</span><span>Transit</span></div>
</nav>
<div class="controls">
<div class="cbtn"><div class="g"></div></div>
<div class="cbtn loc"><div class="g"></div></div>
<div class="cbtn compass"><div class="g"></div></div>
</div>
<div class="pin"><div class="pinhead"></div><div class="pindot"></div></div>
<div class="puck"><div class="cone"></div><div class="pring"></div><div class="pcore"></div></div>
<div class="placecard">
<div class="bar"></div>
<p class="pctitle">Tartine Bakery</p>
<p class="pcsub">Bakery · French · $$</p>
<div class="pcbtn">Directions</div>
</div>
<div class="searchcard">
<div class="grabber"></div>
<div class="searchfield"><span class="mag"></span><span>Search Maps</span></div>
<div class="pills">
<div class="pill"><div class="ic" style="background:#FF9500"></div><span>Food</span></div>
<div class="pill"><div class="ic" style="background:#A5694C"></div><span>Coffee</span></div>
<div class="pill"><div class="ic" style="background:#5AC8FA"></div><span>Drinks</span></div>
<div class="pill"><div class="ic" style="background:#FFCC00"></div><span>Shopping</span></div>
<div class="pill"><div class="ic" style="background:#AF52DE"></div><span>Parking</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb001b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb001b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f08793; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141413; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb001b; color: #141413;
border: 1px solid #141413; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb001b; color: #f5f5f5;
border: 1px solid #ed273e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f08793; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c9031a; color: #141413;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141413; box-sizing:border-box;
font-family:"Mark", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; padding:0 40px; border-bottom:1px solid #E0E0E0; }
.circles { width:26px; height:16px; position:relative; margin-right:10px; }
.circles span { position:absolute; width:16px; height:16px; border-radius:50%; top:0; }
.circles .r { left:0; background:#EB001B; }
.circles .y { left:10px; background:#F79E1B; mix-blend-mode:multiply; }
.brand { font-size:15px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; margin-left:32px; }
.navlinks span { font-size:14px; color:#5A5A5A; }
.cta-dark { margin-left:auto; background:#141413; color:#FFFFFF; border-radius:24px; height:40px;
padding:0 22px; display:flex; align-items:center; font-size:14px; font-weight:600; }
.hero { display:flex; align-items:center; padding:40px 40px 30px; gap:30px; }
.hero-text { flex:1.2; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#EB001B; }
.hero h1 { font-size:42px; font-weight:700; line-height:1.14; letter-spacing:-0.5px; margin:10px 0 14px; max-width:460px; }
.hero p { font-size:18px; font-weight:500; color:#5A5A5A; margin:0 0 22px; max-width:420px; line-height:1.4; }
.cta-row { display:flex; gap:12px; }
.btn-red { background:#EB001B; color:#FFFFFF; border-radius:24px; height:48px; padding:0 26px;
display:flex; align-items:center; font-size:16px; font-weight:600; }
.btn-outline { background:transparent; color:#141413; border:1.5px solid #141413; border-radius:24px;
height:48px; padding:0 26px; display:flex; align-items:center; font-size:16px; font-weight:600; }
.marks { flex:1; height:220px; position:relative; }
.disc { position:absolute; width:150px; height:150px; border-radius:50%; }
.disc.r { background:#EB001B; left:40px; top:30px; }
.disc.y { background:#F79E1B; left:150px; top:30px; mix-blend-mode:multiply; }
.stats { display:flex; gap:16px; padding:20px 40px 30px; }
.stat { flex:1; background:#F7F7F7; border-radius:12px; padding:20px; position:relative; overflow:hidden; }
.stat::before { content:''; position:absolute; top:0; left:0; right:0; height:4px;
background:linear-gradient(90deg,#EB001B,#FF5F00,#F79E1B); }
.stat .v { font-size:32px; font-weight:700; color:#141413; }
.stat .l { font-size:13px; color:#767676; text-transform:uppercase; letter-spacing:0.04em; margin-top:4px; }
</style></head>
<body>
<nav>
<div class="circles"><span class="r"></span><span class="y"></span></div>
<p class="brand">Mastercard</p>
<div class="navlinks"><span>Personal</span><span>Business</span><span>Partners</span><span>News</span></div>
<div class="cta-dark">Sign in</div>
</nav>
<div class="hero">
<div class="hero-text">
<span class="eyebrow">Global Payments Network</span>
<h1>Start something priceless</h1>
<p>Connecting consumers, merchants, and banks in over 210 countries — safely, instantly, everywhere.</p>
<div class="cta-row"><div class="btn-red">Get started</div><div class="btn-outline">Learn more</div></div>
</div>
<div class="marks"><div class="disc r"></div><div class="disc y"></div></div>
</div>
<div class="stats">
<div class="stat"><div class="v">210+</div><div class="l">Countries & Territories</div></div>
<div class="stat"><div class="v">3B+</div><div class="l">Cards Accepted</div></div>
<div class="stat"><div class="v">100%</div><div class="l">Network Uptime Goal</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc4c02; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc4c02; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f8a988; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc4c02; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc4c02; color: #f5f5f5;
border: 1px solid #fb6729; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f8a988; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fc692a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0E0E0E; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.card { max-width:600px; margin:0 auto; padding:22px 0; }
.hdr { display:flex; align-items:center; gap:12px; padding:0 30px; }
.av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#f7b267,#f4845f); }
.aname { font-size:15px; font-weight:600; }
.ts { font-size:13px; color:#666; margin-left:auto; }
.atitle { font-size:17px; font-weight:600; padding:10px 30px 0; }
.map { margin:12px 30px 0; height:220px; border-radius:6px; position:relative; overflow:hidden;
background:#E8E5DD; }
svg { width:100%; height:100%; display:block; }
.stats { display:flex; margin:0 30px; border-top:1px solid #F0F0F0; }
.stat { flex:1; text-align:center; padding:14px 0; border-right:1px solid #F0F0F0; }
.stat:last-child { border-right:none; }
.stat b { display:block; font-size:17px; font-weight:700; }
.stat span { font-size:11px; font-weight:600; text-transform:uppercase; color:#666; letter-spacing:.5px; }
.kudos-row { display:flex; align-items:center; gap:16px; padding:14px 30px 0; }
.kudos { color:#FC4C02; font-size:15px; font-weight:600; }
.comment { color:#666; font-size:15px; }
.view { margin-left:auto; color:#FC4C02; font-size:13px; font-weight:600; }
.side-list { max-width:280px; margin:0 auto; padding-top:10px; }
.seg-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:0.5px solid #E5E5E5; }
.rank { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#0E0E0E; }
</style></head>
<body>
<div class="card">
<div class="hdr"><div class="av"></div><div class="aname">Casey Reardon</div><div style="margin-left:8px; font-size:11px; font-weight:700; color:#FC4C02; letter-spacing:.2px;">Strava (iOS)</div><div class="ts">2 hours ago</div></div>
<div class="atitle">Tuesday Morning Run</div>
<div class="map">
<svg viewBox="0 0 560 220">
<rect width="560" height="220" fill="#E8E5DD"/>
<path d="M20,180 L100,150 L150,170 L220,90 L280,110 L340,50 L410,70 L470,30 L540,60" fill="none" stroke="rgba(252,76,2,0.3)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20,180 L100,150 L150,170 L220,90 L280,110 L340,50 L410,70 L470,30 L540,60" fill="none" stroke="#FC4C02" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="20" cy="180" r="6" fill="#fff" stroke="#FC4C02" stroke-width="2"/>
<circle cx="540" cy="60" r="6" fill="#FC4C02" stroke="#fff" stroke-width="2"/>
</svg>
</div>
<div class="stats">
<div class="stat"><b>8.2</b><span>Distance</span></div>
<div class="stat"><b>1:14:23</b><span>Time</span></div>
<div class="stat"><b>9:03</b><span>Pace</span></div>
</div>
<div class="kudos-row"><div class="kudos">👍 27</div><div class="comment">💬 5</div><div class="view">View Activity</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffcc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffcc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6509; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #614cc2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffcc00; color: #614cc2;
border: 1px solid #614cc2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffcc00; color: #111111;
border: 1px solid #d9ae03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6509; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e6b81f; color: #614cc2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#151515; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",Arial,sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; }
.util { flex:0 0 28px; display:flex; justify-content:flex-end; gap:18px; padding:0 32px; align-items:center;
background:#ffffff; }
.util a { font-size:13px; color:#666666; text-decoration:none; }
.mainnav { flex:0 0 56px; display:flex; align-items:center; padding:0 32px; gap:26px; background:#ffffff;
border-bottom:1px solid #f2f2f2; }
.mainnav .item { font-size:15px; color:rgba(0,0,0,0.87); position:relative; height:100%; display:flex; align-items:center; }
.mainnav .item.act { color:#614cc2; font-weight:600; }
.mainnav .item.act::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:#ffe066; }
.mainnav .spacer { flex:1; }
.mainnav .badge { background:#ffcc00; color:#000000; font-size:12px; font-weight:600; border-radius:3px;
padding:2px 6px; }
.hero { flex:0 0 180px; display:flex; gap:20px; padding:18px 32px 0; align-items:center; }
.kbcard { width:280px; height:150px; border-radius:16px; flex:0 0 280px;
background:linear-gradient(135deg,#1c1c1c 0%, #3a3a3a 60%, #151515 100%);
box-shadow:rgba(0,0,0,0.16) 0px 1px 3px 0px; padding:18px; color:#ffffff; position:relative; }
.kbcard .cardbrand { font-size:14px; font-weight:600; color:#ffe066; }
.kbcard .cardno { position:absolute; bottom:40px; left:18px; font-size:15px; letter-spacing:2px; color:#f0f0f0; }
.kbcard .cardname { position:absolute; bottom:18px; left:18px; font-size:12px; color:#cfcfcf; }
.paybtnwrap { flex:1; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.paybtnwrap .crumb { background:#faeaad; color:#333333; font-size:14px; padding:4px 10px; border-radius:0; }
.paybtn { height:56px; padding:0 30px; background:#ffcc00; color:#000000; border:none; border-radius:4px;
font-size:18px; font-weight:600; display:flex; align-items:center; }
.labelrow { flex:0 0 34px; display:flex; align-items:center; padding:0 32px 0; }
.labelrow .lbl { font-size:18px; font-weight:600; color:#614cc2; }
.grid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 32px 20px; overflow:hidden; }
.card { background:#ffffff; border-radius:16px; box-shadow:rgba(0,0,0,0.16) 0px 1px 3px 0px;
display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:0 18px;
gap:8px; position:relative; }
.card .ic { width:26px; height:26px; border-radius:8px; background:#f9fafe; border:1px solid #614cc2; }
.card .lbl2 { font-size:14px; color:#333333; font-weight:400; }
.card .dot { position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; background:#ffcc00; }
</style></head>
<body>
<div class="app">
<div class="util"><a>Sign up</a><a>Support</a></div>
<div class="mainnav">
<div class="item">My KB</div>
<div class="item">Benefits</div>
<div class="item">Finance</div>
<div class="item act">Card</div>
<div class="item">Service</div>
<div class="item">Life</div>
<div class="spacer"></div>
<div class="badge">3</div>
</div>
<div class="hero">
<div class="kbcard">
<div class="cardbrand">KB Pay</div>
<div class="cardno">5312 •••• •••• 9021</div>
<div class="cardname">JAMIE R.</div>
</div>
<div class="paybtnwrap">
<div class="crumb">Card > Tap to Pay</div>
<button class="paybtn">Tap to Pay</button>
</div>
</div>
<div class="labelrow"><div class="lbl">Popular menu</div></div>
<div class="grid">
<div class="card"><div class="ic"></div><div class="lbl2">Transfer</div></div>
<div class="card"><div class="ic"></div><div class="lbl2">Card bill</div><div class="dot"></div></div>
<div class="card"><div class="ic"></div><div class="lbl2">Points</div></div>
<div class="card"><div class="ic"></div><div class="lbl2">Loan</div></div>
<div class="card"><div class="ic"></div><div class="lbl2">Benefits</div></div>
<div class="card"><div class="ic"></div><div class="lbl2">Support</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #050505; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #050505; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #898989; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #050505; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #050505; color: #f5f5f5;
border: 1px solid #2b2b2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #898989; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040404; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gaudiy</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#333333; box-sizing:border-box; font-family: "Noto Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #000000; }
.logo { font-size:16px; font-weight:700; color:#050505; }
.nav-links { display:flex; gap:24px; }
.nav-links span { font-size:13px; color:#333333; }
.nav-links span.active { color:#050505; font-weight:700; }
.hero { padding:22px 28px 20px; display:flex; align-items:flex-end; justify-content:space-between; }
.hero-h { font-family:"Noto Sans JP", sans-serif; font-size:36px; font-weight:700; line-height:1.2; letter-spacing:-1.6px; color:#333333; margin:0; max-width:560px; }
.hero-cta { background:#000000; color:#ffffff; padding:9px 18px; font-size:14px; font-weight:400; white-space:nowrap; }
.band { background:#eeeeee; padding:16px 28px 18px; }
.band-label { font-family:"Noto Sans JP", sans-serif; font-size:15px; font-weight:700; letter-spacing:0.9px; color:#333333; margin:0 0 12px; }
.pressrow { display:flex; gap:12px; }
.press-card { flex:1; background:#ffffff; border:1px solid #000000; padding:10px 13px 9px; }
.press-tag { font-size:11px; color:#777777; margin-bottom:5px; }
.press-title { font-size:13px; color:#333333; line-height:1.4; margin:0; }
.feed { padding:16px 28px 0; }
.feed-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.feed-label { font-family:"Noto Sans JP", sans-serif; font-size:15px; font-weight:700; letter-spacing:0.9px; color:#333333; }
.feed-more { font-size:12px; color:#555555; }
.feedgrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.fan-card { border:2px solid #050505; padding:12px 15px 13px; display:flex; align-items:center; gap:12px; }
.avatar { width:36px; height:36px; background:#050505; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#ffffff; font-size:14px; font-weight:700; }
.fan-info { flex:1; }
.fan-name { font-size:13px; font-weight:700; color:#050505; margin-bottom:2px; }
.fan-note { font-size:12px; color:#555555; }
.fan-token { font-size:12px; font-weight:700; color:#050505; border:1px solid #050505; padding:2px 8px; white-space:nowrap; }
</style>
</head>
<body>
<div class="nav">
<div class="logo">Gaudiy</div>
<div class="nav-links">
<span class="active">Community</span>
<span>Tech Blog</span>
<span>AI Lab</span>
<span>Member note</span>
</div>
</div>
<div class="hero">
<div class="hero-h">With fans, advance the era.</div>
<div class="hero-cta">View details</div>
</div>
<div class="band">
<div class="band-label">Creating a nation of fans</div>
<div class="pressrow">
<div class="press-card">
<div class="press-tag">2026.02.14 — Partnership</div>
<p class="press-title">Major entertainment group joins as strategic partner</p>
</div>
<div class="press-card">
<div class="press-tag">2026.01.30 — Funding</div>
<p class="press-title">Pre-Series C round closed with legacy IP backers</p>
</div>
<div class="press-card">
<div class="press-tag">2025.11.08 — Product</div>
<p class="press-title">Fanlink launches digital collectible co-creation tool</p>
</div>
</div>
</div>
<div class="feed">
<div class="feed-head">
<div class="feed-label">Community feed</div>
<div class="feed-more">View all →</div>
</div>
<div class="feedgrid">
<div class="fan-card">
<div class="avatar">R</div>
<div class="fan-info">
<div class="fan-name">Alex R.</div>
<div class="fan-note">unlocked a new collectible tier</div>
</div>
<div class="fan-token">+120 FAN</div>
</div>
<div class="fan-card">
<div class="avatar">M</div>
<div class="fan-info">
<div class="fan-name">Jamie M.</div>
<div class="fan-note">co-created a community poll</div>
</div>
<div class="fan-token">+80 FAN</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0cd25f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0cd25f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8ce5b2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #05f067; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0cd25f; color: #000000;
border: 1px solid #05f067; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0cd25f; color: #000000;
border: 1px solid #31d877; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8ce5b2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0bd760; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:'Nunito','Segoe UI Rounded','Segoe UI',Verdana,sans-serif; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; background:#ffffff; }
nav { height:64px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #eef2ee; }
.logomark { width:30px; height:30px; border-radius:10px; background:#0cd25f; position:relative; flex:0 0 auto; }
.logomark::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
color:#ffffff; font-size:16px; font-weight:800; }
.brandwrap { display:flex; align-items:center; gap:10px; }
.brand { font-size:19px; font-weight:800; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:700; color:#2c3e50; opacity:0.55; }
.pill-cta { background:#05f067; color:#262626; border:none; border-radius:999px; padding:10px 22px;
font-weight:800; font-size:13px; white-space:nowrap; }
main { flex:1 1 auto; display:flex; gap:34px; padding:26px 40px; overflow:hidden; }
.phone { width:270px; height:452px; flex:0 0 auto; background:#2c3e50; border-radius:38px; padding:12px;
box-shadow: 0 18px 40px rgba(44,62,80,0.18); }
.screen { width:100%; height:100%; background:#ffffff; border-radius:28px; padding:26px 20px 22px;
display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; overflow:hidden; }
.screen::before { content:''; position:absolute; top:-40px; right:-40px; width:140px; height:140px;
border-radius:50%; background:#e6faef; }
.callmeta { position:relative; font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
color:#019d91; }
.avatar { position:relative; width:78px; height:78px; border-radius:50%; background:#e6faef;
display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; color:#0cd25f;
margin-top:6px; }
.callnum { position:relative; font-size:21px; font-weight:800; letter-spacing:-0.3px; }
.callloc { position:relative; font-size:12px; color:#6e6e6e; margin-top:-6px; }
.spamtag { position:relative; background:#f53f90; color:#ffffff; font-size:11px; font-weight:800;
letter-spacing:0.02em; padding:6px 14px; border-radius:999px; margin-top:6px; }
.callrow { position:relative; display:flex; gap:34px; margin-top:auto; margin-bottom:6px; }
.callbtn { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:20px; font-weight:800; color:#ffffff; }
.callbtn.decline { background:#2c3e50; }
.callbtn.accept { background:#0cd25f; }
.calllabel { position:relative; font-size:11px; color:#9096a2; font-weight:700; }
.side { flex:1 1 auto; display:flex; flex-direction:column; gap:14px; min-width:0; overflow:hidden; }
.badge { align-self:flex-start; background:#000000; color:#ffffff; border-radius:999px; padding:5px 13px;
font-size:10px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
h1 { font-size:34px; font-weight:800; line-height:1.06; letter-spacing:-0.8px; margin:2px 0 0; max-width:480px; }
.lede { font-size:15px; color:#3a3a3a; margin:0; max-width:440px; line-height:1.5; }
.ctarow { display:flex; gap:12px; align-items:center; margin-top:2px; }
.btn-primary { background:#05f067; color:#262626; border:none; border-radius:999px; padding:14px 26px;
font-weight:800; font-size:14px; }
.btn-secondary { background:rgba(255,255,255,0.8); color:#262626; border:1.5px solid #2c3e50; border-radius:999px;
padding:13px 26px; font-weight:800; font-size:14px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.stat { border:1px solid #eef2ee; border-radius:18px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.tag { align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:0.05em; padding:3px 9px; border-radius:999px; }
.tag.pink { background:#fde6f0; color:#f53f90; }
.tag.teal { background:#dcf3f1; color:#019d91; }
.tag.green { background:#e6faef; color:#0cd25f; }
.stat b { font-size:22px; font-weight:800; letter-spacing:-0.4px; }
.stat span { font-size:11px; color:#6e6e6e; font-weight:700; }
.premium { align-self:flex-start; background:#e6faef; color:#262626; border:none; border-radius:40px;
padding:11px 22px; font-weight:700; font-size:13px; margin-top:2px; }
footer { flex:0 0 auto; height:52px; border-top:1px solid #eef2ee; padding:0 40px; display:flex;
align-items:center; justify-content:space-between; font-size:11px; color:#6e6e6e; font-weight:700; }
</style></head>
<body>
<div class="page">
<nav>
<div class="brandwrap"><div class="logomark"></div><p class="brand">Gogolook</p></div>
<div class="navlinks"><span>Protect</span><span>Business</span><span>Pricing</span><span>Support</span></div>
<button class="pill-cta">Get Gogolook</button>
</nav>
<main>
<div class="phone">
<div class="screen">
<span class="callmeta">Incoming call</span>
<div class="avatar">?</div>
<div class="callnum">+1 (702) 555 0148</div>
<div class="callloc">Las Vegas, NV · Mobile carrier</div>
<span class="spamtag">Suspected Spam · 93%</span>
<div class="callrow">
<div>
<div class="callbtn decline">✕</div>
<div class="calllabel">Decline</div>
</div>
<div>
<div class="callbtn accept">✓</div>
<div class="calllabel">Accept</div>
</div>
</div>
</div>
</div>
<div class="side">
<span class="badge">Trusted by millions</span>
<h1>Know who's calling — before you answer.</h1>
<p class="lede">A friendly caller-ID and spam shield that keeps unknown numbers from ruining your day, with zero technical fuss.</p>
<div class="ctarow">
<button class="btn-primary">Download free</button>
<button class="btn-secondary">Watch demo</button>
</div>
<div class="stats">
<div class="stat"><span class="tag pink">Scam DB</span><b>1.8B+</b><span>numbers checked</span></div>
<div class="stat"><span class="tag teal">Blocked</span><b>42M</b><span>spam calls / month</span></div>
<div class="stat"><span class="tag green">Trust</span><b>98%</b><span>user satisfaction</span></div>
</div>
<button class="premium">Explore Premium →</button>
</div>
</main>
<footer>
<span>© Gogolook</span>
<span>Gogolook · Protect · Business · Legal</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 300; line-height: 1.3; letter-spacing: 0.08em; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.65; letter-spacing: 0.02em; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.20em; background: #191919; color: #fafafa;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.20em; background: transparent; color: #191919;
border: 1px solid #191919; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.65; letter-spacing: 0.02em; background: #fafafa; color: #191919;
border: 1px solid #c2c2c2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; background: transparent; color: #777777;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#191919; box-sizing:border-box;
font-family:Raleway, sans-serif; }
* { box-sizing:border-box; }
nav { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 42px;
border-bottom:1px solid #dedede; }
.brand { font-size:16px; font-weight:200; letter-spacing:0.18em; text-transform:uppercase; }
.navlinks { display:flex; gap:30px; font-size:11px; font-weight:300; letter-spacing:0.12em; text-transform:uppercase; color:#777777; }
.navlinks span.on { color:#191919; }
.cart-txt { font-size:11px; font-weight:300; letter-spacing:0.1em; text-transform:uppercase; }
main { display:flex; height:572px; }
.gallery { width:430px; background:#ffffff; display:flex; align-items:center; justify-content:center; position:relative; }
.ring-disp { width:150px; height:150px; border-radius:50%; border:14px solid #dedede; position:relative; }
.ring-disp::after { content:''; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
width:22px; height:22px; border-radius:50%; background:#191919; }
.necklace { position:absolute; width:200px; height:2px; background:#dedede; top:280px;
border-radius:9999px; }
.info { flex:1; padding:44px 46px; display:flex; flex-direction:column; gap:16px; }
.cat { font-size:10.5px; font-weight:300; letter-spacing:0.14em; text-transform:uppercase; color:#777777; }
h1 { font-size:24px; font-weight:200; margin:0; letter-spacing:0.04em; line-height:1.4; }
.desc { font-size:13px; font-weight:300; color:#555555; line-height:1.7; max-width:340px; letter-spacing:0.02em; }
.spec-row { display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:300; letter-spacing:0.08em;
text-transform:uppercase; color:#555555; }
.spec-row span b { color:#191919; font-weight:500; }
.price-row { display:flex; align-items:baseline; gap:10px; padding-top:6px; }
.price { font-size:15px; font-weight:300; letter-spacing:0.04em; }
.btn-row { display:flex; gap:0; margin-top:auto; }
.btn-primary { flex:1; background:#191919; color:#fafafa; border:none; padding:15px 18px;
font-size:11px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; }
.note { font-size:10.5px; font-weight:300; letter-spacing:0.06em; color:#a0a0a0; text-transform:uppercase; }
</style></head>
<body>
<nav>
<div class="brand">Agmes</div>
<div class="navlinks"><span class="on">Rings</span><span>Necklaces</span><span>Earrings</span><span>Bracelets</span></div>
<div class="cart-txt">Bag (0)</div>
</nav>
<main>
<div class="gallery"><div class="ring-disp"></div><div class="necklace"></div></div>
<div class="info">
<span class="cat">Signet — Sterling Silver</span>
<h1>Wide Band Signet Ring</h1>
<p class="desc">Hand-cast in recycled sterling silver, finished with a hammered surface that catches light without demanding it.</p>
<div class="spec-row">
<span>Material — <b>Sterling Silver</b></span>
<span>Made in — <b>New York City</b></span>
</div>
<div class="price-row"><span class="price">$385.00</span></div>
<div class="btn-row"><button class="btn-primary">Add to Bag</button></div>
<span class="note">Made to order · 2–3 weeks</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4af1c; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4af1c; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #775816; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e49b00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4af1c; color: #000000;
border: 1px solid #e49b00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f4af1c; color: #111111;
border: 1px solid #d0961a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #775816; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f1ac18; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#323232; box-sizing:border-box;
font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
header { height:50px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 20px;
border-bottom:1px solid #eaeaea; }
.logo { font-size:16px; font-weight:700; color:#323232; }
.search { background:#eaeaea; border-radius:4px; padding:0 5px; height:32px; display:flex; align-items:center;
font-size:14px; color:#8b8a8a; width:220px; }
.btn-amber { background:#f4af1c; color:#ffffff; border-radius:4px; height:32px; padding:0 16px; display:flex;
align-items:center; font-size:14px; font-weight:700; }
.body { flex:1 1 auto; display:flex; min-height:0; }
.sidebar { width:236px; flex:0 0 auto; border-right:1px solid #eaeaea; display:flex; flex-direction:column; }
.sidebar .stitle { font-size:12px; color:#8b8a8a; padding:12px 14px 6px; }
.srow { height:55px; border-bottom:1px solid #eaeaea; display:flex; align-items:center; justify-content:space-between;
padding:0 14px; }
.srow.hover { background:rgba(0,0,0,0.04); }
.sname { font-size:14px; color:#323232; }
.scode { font-size:11px; color:#8b8a8a; }
.sprice { text-align:right; }
.sprice .p { font-size:14px; font-weight:700; }
.sprice .d { font-size:11px; }
.rise { color:#f3746d; }
.fall { color:#6c9c46; }
.main { flex:1 1 auto; padding:14px 20px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.tickerrow { display:flex; align-items:baseline; gap:14px; }
.tcode { font-size:20px; font-weight:700; color:#323232; }
.tname { font-size:13px; color:#8b8a8a; }
.tprice { font-size:24px; font-weight:700; }
.tdelta { font-size:14px; font-weight:700; }
.chartcard { background:#ffffff; border-radius:4px; box-shadow:0 2px 2px 0 rgba(0,0,0,.08), 0 2px 7px 0 rgba(0,0,0,.1);
padding:14px 16px; flex:1 1 auto; min-height:0; }
.chartcard svg { width:100%; height:100%; display:block; }
.lowerrow { display:flex; gap:14px; }
.infocard { flex:1; background:#eaeaea; border-radius:8px; padding:12px 14px; }
.infocard .ititle { font-size:12px; color:#8b8a8a; margin-bottom:8px; }
.irow { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; color:#323232; }
.tradecard { flex:1.2; background:#ffffff; border-radius:4px; box-shadow:0 2px 2px 0 rgba(0,0,0,.08), 0 2px 7px 0 rgba(0,0,0,.1);
padding:14px 16px; display:flex; flex-direction:column; gap:8px; justify-content:center; }
.tradebtns { display:flex; gap:8px; }
.btn-buy { flex:1; background:#f3746d; color:#ffffff; border-radius:4px; height:32px; display:flex; align-items:center;
justify-content:center; font-size:14px; font-weight:700; }
.btn-sell { flex:1; background:#6c9c46; color:#ffffff; border-radius:4px; height:32px; display:flex; align-items:center;
justify-content:center; font-size:14px; font-weight:700; }
.qtyrow { display:flex; align-items:center; gap:8px; }
.qty { flex:1; background:#eaeaea; border-radius:4px; height:32px; display:flex; align-items:center; padding:0 5px;
font-size:16px; color:#323232; }
</style></head>
<body>
<div class="wrap">
<header>
<div class="logo">Fugle</div>
<div class="search">Search ticker or company</div>
<div class="btn-amber">Start Trading</div>
</header>
<div class="body">
<div class="sidebar">
<div class="stitle">WATCHLIST</div>
<div class="srow hover">
<div><div class="sname">TSMC</div><div class="scode">2330</div></div>
<div class="sprice"><div class="p">1,015</div><div class="d rise">+2.14%</div></div>
</div>
<div class="srow">
<div><div class="sname">MediaTek</div><div class="scode">2454</div></div>
<div class="sprice"><div class="p">1,320</div><div class="d fall">-0.87%</div></div>
</div>
<div class="srow">
<div><div class="sname">Hon Hai</div><div class="scode">2317</div></div>
<div class="sprice"><div class="p">205.5</div><div class="d rise">+1.02%</div></div>
</div>
<div class="srow">
<div><div class="sname">Fubon Fin</div><div class="scode">2881</div></div>
<div class="sprice"><div class="p">92.4</div><div class="d fall">-0.35%</div></div>
</div>
<div class="srow">
<div><div class="sname">CTBC Fin</div><div class="scode">2891</div></div>
<div class="sprice"><div class="p">44.9</div><div class="d rise">+0.68%</div></div>
</div>
</div>
<div class="main">
<div class="tickerrow">
<span class="tcode">2330</span><span class="tname">Taiwan Semiconductor</span>
<span class="tprice rise">1,015</span><span class="tdelta rise">+21.5 (+2.14%)</span>
</div>
<div class="chartcard">
<svg viewBox="0 0 900 190" preserveAspectRatio="none">
<line x1="0" y1="47" x2="900" y2="47" stroke="#eaeaea" stroke-width="1"/>
<line x1="0" y1="95" x2="900" y2="95" stroke="#eaeaea" stroke-width="1"/>
<line x1="0" y1="142" x2="900" y2="142" stroke="#eaeaea" stroke-width="1"/>
<polyline points="0,120 90,110 180,130 270,90 360,100 450,60 540,75 630,40 720,55 810,20 900,35"
fill="none" stroke="#f3746d" stroke-width="2"/>
<polygon points="0,120 90,110 180,130 270,90 360,100 450,60 540,75 630,40 720,55 810,20 900,35 900,190 0,190"
fill="#f4af1c" opacity="0.08"/>
</svg>
</div>
<div class="lowerrow">
<div class="infocard">
<div class="ititle">ORDER BOOK</div>
<div class="irow"><span>Bid</span><span class="rise">1,014</span></div>
<div class="irow"><span>Ask</span><span class="fall">1,016</span></div>
<div class="irow"><span>Volume</span><span>48.2M</span></div>
</div>
<div class="tradecard">
<div class="tradebtns"><div class="btn-buy">Buy</div><div class="btn-sell">Sell</div></div>
<div class="qtyrow"><div class="qty">1,000 shares</div><div class="btn-amber" style="height:32px;">Submit</div></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5100; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5100; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faab87; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1cfbce; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5100; color: #000000;
border: 1px solid #1cfbce; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5100; color: #f5f5f5;
border: 1px solid #fd6b27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faab87; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db6c21; color: #1cfbce;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2e3137; box-sizing:border-box;
font-family:"Pretendard", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { padding:22px 40px 10px; }
.hero h1 { font-size:24px; font-weight:700; color:#000000; margin:0 0 12px; }
.search { background:#fff; border:2px solid #222222; border-radius:30px; height:52px; padding:0 20px;
display:flex; align-items:center; font-size:16px; color:#969fac; margin-bottom:12px; }
.region-row { display:flex; gap:8px; flex-wrap:wrap; }
.rpill { background:#f0f4ff; color:#2e3137; border:1px solid rgba(0,0,0,0.04); border-radius:24px;
height:34px; padding:0 16px; display:flex; align-items:center; font-size:13px; }
.section { padding:10px 40px 0; }
.section h2 { font-size:18px; font-weight:700; color:#000; margin:0 0 10px; }
.list { display:flex; flex-direction:column; gap:0; }
.row { display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid #dfe3e6; }
.thumb { width:64px; height:64px; border-radius:12px; flex-shrink:0; }
.th1 { background:linear-gradient(135deg,#ffd6c2,#ff8a5c); }
.th2 { background:linear-gradient(135deg,#c9e8ff,#4b9cfb); }
.th3 { background:linear-gradient(135deg,#e0ffe0,#5cbf7d); }
.info { flex:1; }
.info .name { font-size:16px; font-weight:700; color:#2e3137; }
.info .meta { font-size:12px; color:#6d7583; }
.stats { text-align:right; }
.stats .waiting { font-size:12px; font-weight:700; color:#1cfbce; }
.stats .rating { font-size:12px; font-weight:700; color:#131517; }
.stats .rev { font-size:11px; color:#969fac; }
.promo { margin:12px 40px 0; background:#ffece8; border-radius:12px; padding:14px 18px; display:flex;
justify-content:space-between; align-items:center; }
.promo .txt { font-size:15px; font-weight:700; color:#ff5100; }
.promo .media { display:flex; gap:8px; }
.promo .media div { width:60px; height:40px; border-radius:12px; }
.m1 { background:#fff7eb; } .m2 { background:#f0f0f0; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #dfe3e6; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#969fac; }
</style></head>
<body>
<div class="hero">
<h1>What should we eat today? Restaurant search is Tabling</h1>
<div class="search">Search for a restaurant</div>
<div class="region-row">
<span class="rpill">Nationwide</span><span class="rpill">Seoul South</span><span class="rpill">Busan</span><span class="rpill">Daegu</span>
</div>
</div>
<div class="section">
<h2>Popular waiting spots by region</h2>
<div class="list">
<div class="row"><div class="thumb th1"></div><div class="info"><div class="name">Hanok Grill House</div><div class="meta">Korean · Cheongjin-dong</div></div>
<div class="stats"><div class="waiting">17 teams waiting</div><div class="rating">4.6</div><div class="rev">(2,172)</div></div></div>
<div class="row"><div class="thumb th2"></div><div class="info"><div class="name">Ocean Noodle Bar</div><div class="meta">Seafood · Haeundae</div></div>
<div class="stats"><div class="waiting">45 teams waiting</div><div class="rating">4.8</div><div class="rev">(3,590)</div></div></div>
<div class="row"><div class="thumb th3"></div><div class="info"><div class="name">Maple Bakery Café</div><div class="meta">Café · Itaewon</div></div>
<div class="stats"><div class="waiting">6 teams waiting</div><div class="rating">4.5</div><div class="rev">(981)</div></div></div>
</div>
</div>
<div class="promo">
<span class="txt">More great restaurant picks, check the Tabling app!</span>
<div class="media"><div class="m1"></div><div class="m2"></div></div>
</div>
<footer><span>© Tabling</span><span>Tabling · TOP100 · App Download</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6d6e71; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #a32035; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fbfbfb; color: #a32035;
border: 1px solid #a32035; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #231f20;
border: 1px solid #e0e0e0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6e71; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a32035; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbfb; color:#231f20; box-sizing:border-box;
font-family:'Lato', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.poppins { font-family:'Poppins', Arial, Helvetica, sans-serif; }
.util { flex:0 0 auto; height:28px; background:#a32035; color:#fff; font-size:11px; display:flex; align-items:center;
justify-content:center; letter-spacing:0.3px; }
nav { flex:0 0 auto; height:58px; background:#231f20; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; }
main { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.hero { flex:1 1 auto; background:#231f20; color:#fff; display:flex; align-items:center; padding:0 30px;
min-height:0; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:rgba(10,0,0,0.45); }
.hero::after { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 75% 60%, rgba(163,32,53,0.35), transparent 55%),
linear-gradient(160deg,#3a3a3a,#111 70%); }
.hero-copy { position:relative; z-index:1; max-width:420px; }
.overline { color:#e0455c; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; margin:0 0 8px; }
.hero-copy h1 { font-size:34px; margin:0 0 8px; font-weight:700; line-height:1.15; }
.hero-copy p { font-size:14px; color:#dcdcdc; margin:0 0 14px; }
.btnrow { display:flex; gap:10px; }
.btn-primary { background:#a32035; color:#fff; border:none; border-radius:8px; padding:14px 28px; font-weight:600; font-size:15px; }
.btn-ghost { background:transparent; color:#fff; border:1px solid #fff; border-radius:8px; padding:13px 27px; font-weight:600; font-size:15px; }
.features { flex:0 0 auto; display:flex; gap:12px; padding:16px 30px 18px; }
.feat { flex:1; background:#f5f5f5; border-radius:12px; padding:12px 14px; }
.feat .ic { width:28px; height:28px; border-radius:6px; background:#a32035; margin-bottom:8px; }
.feat h3 { font-size:13px; margin:0 0 4px; }
.feat p { font-size:11px; color:#515151; margin:0; }
footer { flex:0 0 auto; height:52px; background:#231f20; color:#eeeeee; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<div class="util">Find a Dealer Near You · 1-800-555-0134</div>
<nav>
<p class="brand poppins">Arctic Spas</p>
<div class="navlinks poppins"><span>Hot Tubs</span><span>Swim Spas</span><span>Accessories</span><span>Compare</span></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<p class="overline">Frontier Series</p>
<h1 class="poppins">Built for every weather.</h1>
<p>All-weather insulation, full-foam construction, and jet configurations engineered for cold climates.</p>
<div class="btnrow">
<button class="btn-primary poppins">Configure Yours</button>
<button class="btn-ghost poppins">Find a Dealer</button>
</div>
</div>
</div>
<div class="features">
<div class="feat"><div class="ic"></div><h3 class="poppins">All-Weather Insulation</h3><p>Holds temperature in sub-zero climates.</p></div>
<div class="feat"><div class="ic"></div><h3 class="poppins">Onzen Filtration</h3><p>Continuous water purification system.</p></div>
<div class="feat"><div class="ic"></div><h3 class="poppins">54 Jet Configuration</h3><p>Fully customizable hydrotherapy zones.</p></div>
</div>
</main>
<footer>
<span>© Arctic Spas</span>
<span>Warranty · Financing · Dealer Locator</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#000000; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#ffffff; font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:24px; color:#d4d4d4; font-size:14px; }
.navlinks span:first-child { color:#fff; font-weight:700; }
.dialog-btn { background:transparent; border:1px solid #ffffff; color:#ffffff; border-radius:6px; padding:0 12px; height:32px; font-size:13px; display:flex; align-items:center; }
.toolbar { display:flex; align-items:center; justify-content:space-between; padding:20px 32px 12px; }
.toolbar h1 { font-size:20px; font-weight:600; margin:0; }
.filters { display:flex; gap:8px; }
.filter { border:1px solid #d4d4d4; border-radius:6px; padding:5px 14px; font-size:12px; color:#666; }
.filter.active { background:#000; color:#fff; border-color:#000; }
.list { padding:0 32px; }
.job { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid #d4d4d4; }
.job .logo { width:40px; height:40px; border-radius:6px; margin-right:14px; flex-shrink:0; }
.l1 { background:linear-gradient(135deg,#111,#444); }
.l2 { background:linear-gradient(135deg,#fc5d11,#a83b06); }
.l3 { background:linear-gradient(135deg,#222,#5a5a5a); }
.l4 { background:linear-gradient(135deg,#3a3a3a,#111); }
.job .info { display:flex; align-items:center; flex:1; }
.job .txt { flex:1; }
.job .txt h4 { font-size:16px; font-weight:400; margin:0 0 3px; color:#222; }
.job .txt p { font-size:12px; color:#808080; margin:0; }
.job .tag { font-size:11px; color:#666; background:#f2f2f2; border-radius:4px; padding:3px 10px; margin-right:10px; }
.job .apply { border:1px solid #000; background:transparent; color:#000; border-radius:6px; padding:0 14px; height:32px; font-size:13px; }
.side { position:absolute; top:104px; right:32px; width:220px; background:#f2f2f2; border-radius:8px; padding:18px; }
.side h5 { font-size:13px; font-weight:700; margin:0 0 10px; }
.side p { font-size:12px; color:#666; line-height:1.6; margin:0 0 12px; }
.side .cta { background:#000; color:#fff; border-radius:6px; text-align:center; padding:9px 0; font-size:13px; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #d4d4d4; padding:12px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#808080; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Remember</span>
<div class="navlinks"><span>Job Openings</span><span>Careers</span><span>Community</span></div>
<span class="dialog-btn">For Business</span>
</nav>
<div class="toolbar">
<h1>Find Opportunities That Fit You</h1>
<div class="filters"><span class="filter active">All</span><span class="filter">Engineering</span><span class="filter">Design</span><span class="filter">Marketing</span></div>
</div>
<div class="list">
<div class="job">
<div class="info"><span class="logo l1"></span><div class="txt"><h4>Backend Engineer (Java/Spring)</h4><p>Technovation · Seoul, Gangnam-gu · 3+ years experience</p></div></div>
<span class="tag">D-7</span>
<span class="apply">Apply</span>
</div>
<div class="job">
<div class="info"><span class="logo l2"></span><div class="txt"><h4>Product Manager</h4><p>BridgeWorks · Seoul, Seongdong-gu · Any experience level</p></div></div>
<span class="tag">Ongoing</span>
<span class="apply">Apply</span>
</div>
<div class="job">
<div class="info"><span class="logo l3"></span><div class="txt"><h4>UX Researcher</h4><p>MomentLab · Pangyo · 2+ years experience</p></div></div>
<span class="tag">D-3</span>
<span class="apply">Apply</span>
</div>
<div class="job">
<div class="info"><span class="logo l4"></span><div class="txt"><h4>Sales Operations Manager</h4><p>ClearRoute · Seoul, Yeongdeungpo-gu · 5+ years experience</p></div></div>
<span class="tag">D-14</span>
<span class="apply">Apply</span>
</div>
</div>
<div class="side">
<h5>Start Your Career With a Business Card</h5>
<p>Get job offers through your business card network.</p>
<div class="cta">Register My Card</div>
</div>
<footer>
<span>© Remember & Company</span>
<span>Job Openings · Careers · Talent Info</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1890ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1890ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92c8fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0f0f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1890ff; color: #0f0f0f;
border: 1px solid #0f0f0f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1890ff; color: #f5f5f5;
border: 1px solid #3ba0fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92c8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #177bd9; color: #0f0f0f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#27272a; box-sizing:border-box;
font-family:"Pretendard","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e4e4e7; }
.logo { font-size:18px; font-weight:600; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:600; color:#171717; }
.cta-sm { background:#1890ff; color:#ffffff; border-radius:4px; padding:8px 14px; font-size:12px;
font-weight:600; }
.hero { text-align:center; padding:34px 40px 24px; }
.pill { display:inline-block; background:#ffffff; border:1px solid #e4e4e7; border-radius:50px;
padding:6px 18px; font-size:12px; font-weight:600; margin-bottom:14px; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-0.4px; line-height:1.3; margin:0 0 8px; }
.hero h1 span { color:#1890ff; }
.hero p { font-size:14px; color:#3f3f46; margin:0 0 16px; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-dark { background:#0f0f0f; color:#ffffff; border-radius:4px; padding:12px 22px; font-size:12px;
font-weight:600; }
.btn-white { background:#ffffff; color:#171717; border:1px solid #e4e4e7; border-radius:4px;
padding:12px 22px; font-size:12px; font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:10px 40px 24px; }
.card { background:#fafafa; border-radius:16px; padding:16px; }
.card h3 { font-size:14px; font-weight:600; margin:0 0 6px; color:#27272a; }
.card p { font-size:11px; color:#71717a; margin:0; line-height:1.4; }
.navy { background:#001946; padding:26px 40px; text-align:center; color:#ffffff; }
.navy .num { font-size:64px; font-weight:400; letter-spacing:-2px; margin:0; font-family:"Poppins",sans-serif; }
.navy .lbl { font-size:12px; color:#a1a1aa; margin-top:4px; }
.plans { display:flex; gap:14px; justify-content:center; margin-top:16px; }
.plan { background:#001946; border-radius:20px; box-shadow:rgba(255,255,255,0.12) 0px 0px 2px 0px inset;
padding:14px 18px; width:150px; font-size:12px; }
footer { border-top:1px solid #e4e4e7; padding:12px 40px; font-size:11px; color:#a1a1aa;
text-align:center; }
</style></head>
<body>
<nav>
<span class="logo">Greeting</span>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span></div>
<span class="cta-sm">Request a Demo</span>
</nav>
<section class="hero">
<span class="pill">The #1 Hiring Management Platform</span>
<h1>Beyond hiring management, to <span>hiring success</span></h1>
<p>10,000+ companies grow with Greeting.</p>
<div class="row">
<button class="btn-dark">Request a Demo</button>
<button class="btn-white">Start Free Trial</button>
</div>
</section>
<div class="cards">
<div class="card"><h3>Careers Page Builder</h3><p>Design a first impression that wins over candidates.</p></div>
<div class="card"><h3>Direct Sourcing</h3><p>Secure talent without being boxed in by a single strategy.</p></div>
<div class="card"><h3>Talent Pool Management</h3><p>Run and optimize your talent pool with data-driven insights.</p></div>
</div>
<div class="navy">
<p class="num">10,000+</p>
<p class="lbl">companies grow with Greeting</p>
<div class="plans">
<div class="plan">Starter</div>
<div class="plan">Growth</div>
<div class="plan">Enterprise</div>
</div>
</div>
<footer>© Greeting · Product · Company · Legal</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a73e8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a73e8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92baef; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d93025; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a73e8; color: #000000;
border: 1px solid #d93025; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a73e8; color: #f5f5f5;
border: 1px solid #3d88ea; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92baef; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3968c9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#202124; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; padding:22px 16px; position:relative; border-right:1px solid #DADCE0; }
.navtitle { font-size:20px; font-weight:500; margin-bottom:14px; }
.banner { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.daynum { width:52px; height:52px; border-radius:50%; background:#1A73E8; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:22px; }
.daylbl { font-size:11px; font-weight:500; letter-spacing:0.5px; color:#5F6368; text-transform:uppercase; }
.evcard { display:flex; margin:0 0 8px; border-radius:4px; overflow:hidden; background:#fff; }
.bar { width:4px; flex-shrink:0; }
.evbody { flex:1; padding:10px 12px; background:#fff; }
.evtitle { font-size:14px; font-weight:500; }
.evtime { font-size:13px; color:#5F6368; font-variant-numeric:tabular-nums; }
.monthgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-top:16px; }
.mcell { text-align:center; font-size:11px; padding:5px 0; position:relative; }
.mcell .n { display:inline-block; width:20px; height:20px; line-height:20px; border-radius:50%; }
.mcell.today .n { background:#1A73E8; color:#fff; }
.mcell .dots { display:flex; gap:1px; justify-content:center; margin-top:1px; }
.mcell .dots span { width:3px; height:3px; border-radius:50%; }
.fab { position:absolute; bottom:20px; right:20px; width:52px; height:52px; border-radius:50%; background:#1A73E8;
color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px;
box-shadow:rgba(60,64,67,0.3) 0 4px 8px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:500; letter-spacing:-0.2px; margin:0; }
.brand span { color:#1A73E8; }
.tag { font-size:14px; color:#5F6368; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:4px; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#5F6368; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:400; font-variant-numeric:tabular-nums; }
.typeblock .t2 { font-size:13px; color:#5F6368; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:500; padding:6px 12px; border-radius:4px;
background:#F1F3F4; border:1px solid #DADCE0; color:#5F6368; }
.footer { margin-top:auto; border-top:1px solid #DADCE0; padding-top:16px; font-size:11px; color:#80868B; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<p class="navtitle">May 2026</p>
<div class="banner"><div class="daynum">14</div><div><div class="daylbl">THU · MAY</div></div></div>
<div class="evcard"><div class="bar" style="background:#3F51B5"></div><div class="evbody"><div class="evtitle">Design Review</div><div class="evtime">9:00 – 9:30 AM</div></div></div>
<div class="evcard"><div class="bar" style="background:#188038"></div><div class="evbody"><div class="evtitle">Run 5k — Goal</div><div class="evtime">6:30 – 7:00 AM</div></div></div>
<div class="evcard"><div class="bar" style="background:#F9AB00"></div><div class="evbody"><div class="evtitle">Submit expense report</div><div class="evtime">All day · Task</div></div></div>
<div class="monthgrid">
<div class="mcell" style="color:#80868B">S</div><div class="mcell" style="color:#80868B">M</div><div class="mcell" style="color:#80868B">T</div><div class="mcell" style="color:#80868B">W</div><div class="mcell" style="color:#80868B">T</div><div class="mcell" style="color:#80868B">F</div><div class="mcell" style="color:#80868B">S</div>
<div class="mcell"><span class="n">10</span></div><div class="mcell"><span class="n">11</span><div class="dots"><span style="background:#188038"></span></div></div><div class="mcell"><span class="n">12</span></div><div class="mcell"><span class="n">13</span><div class="dots"><span style="background:#3F51B5"></span><span style="background:#F9AB00"></span></div></div><div class="mcell today"><span class="n">14</span><div class="dots"><span style="background:#3F51B5"></span></div></div><div class="mcell"><span class="n">15</span></div><div class="mcell"><span class="n">16</span></div>
</div>
<div class="fab">+</div>
</div>
<div class="info">
<div>
<h1 class="brand">Google Calendar (iOS)<span>.</span></h1>
<p class="tag">Material You density — a four-color event system, tabular time columns, and the FAB at Material Level 6.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#1A73E8"></div><small>#1A73E8</small></div>
<div class="sw"><div class="chip2" style="background:#D93025"></div><small>#D93025</small></div>
<div class="sw"><div class="chip2" style="background:#F9AB00"></div><small>#F9AB00</small></div>
<div class="sw"><div class="chip2" style="background:#188038"></div><small>#188038</small></div>
<div class="sw"><div class="chip2" style="background:#3F51B5"></div><small>#3F51B5</small></div>
</div>
<div class="typeblock">
<div class="t1">9:00 – 9:30 AM</div>
<div class="t2">Google Sans + SF Pro Text · tabular figures on every time and day number</div>
</div>
<div class="taglist">
<span>Schedule day banner</span><span>4pt left color bar</span><span>24-color calendar palette</span>
<span>Today = filled blue circle</span><span>Material dual shadow</span>
</div>
<div class="footer">White canvas #FFFFFF · avoid Bold — hierarchy comes from color, not weight</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040404; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:'SFProDisplay-Bold',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.2px; }
.btn-primary { background:#fff; color:#000; border:none; border-radius:9999px; padding:10px 22px; font-size:13px; font-weight:700; }
main { height:calc(640px - 66px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; position:relative; }
.glow { position:absolute; width:420px; height:420px; border-radius:9999px;
background:radial-gradient(circle,rgba(0,255,150,0.16),transparent 70%); top:60px; }
.hmd { width:210px; height:130px; border-radius:36px; position:relative; z-index:2;
background:linear-gradient(160deg,#3a3a3a,#0a0a0a); box-shadow:0 30px 60px rgba(0,0,0,0.6); }
.hmd::before { content:''; position:absolute; left:24px; top:34px; width:70px; height:62px; border-radius:20px;
background:radial-gradient(circle,#00ff88,#003322 75%); }
.hmd::after { content:''; position:absolute; right:24px; top:34px; width:70px; height:62px; border-radius:20px;
background:radial-gradient(circle,#00ff88,#003322 75%); }
h1 { font-size:34px; font-weight:700; letter-spacing:-0.6px; margin:0; z-index:2; }
.sub { font-size:14px; color:#999999; z-index:2; max-width:440px; text-align:center; }
.specs { display:flex; gap:26px; z-index:2; margin-top:6px; }
.spec { text-align:center; }
.spec b { display:block; font-size:18px; font-weight:700; }
.spec span { font-size:11px; color:#666; letter-spacing:0.3px; }
.row { display:flex; gap:12px; z-index:2; margin-top:6px; }
.btn-buy { background:#fff; color:#000; border:none; border-radius:9999px; padding:14px 32px; font-size:14px; font-weight:700; }
.btn-out { background:transparent; color:#fff; border:1px solid #333; border-radius:9999px; padding:14px 26px; font-size:14px; font-weight:600; }
.price { font-size:13px; color:#999; z-index:2; }
</style></head>
<body>
<nav><div class="brand">Bigscreen Beyond</div><button class="btn-primary">Buy Now</button></nav>
<main>
<div class="glow"></div>
<div class="hmd"></div>
<h1>Beyond</h1>
<p class="sub">The world's smallest PC VR headset. Machined aluminum, custom-molded facial interface, per-eye OLED microdisplays.</p>
<div class="specs">
<div class="spec"><b>127g</b><span>WEIGHT</span></div>
<div class="spec"><b>2560×2560</b><span>PER EYE</span></div>
<div class="spec"><b>90 Hz</b><span>REFRESH</span></div>
</div>
<span class="price">From $1,019</span>
<div class="row"><button class="btn-buy">Buy Now</button><button class="btn-out">Get Scanned</button></div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",-apple-system,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
header { height:56px; background:#000000; display:flex; align-items:center; gap:16px; padding:0 20px; }
.brand { color:#fff; font-size:16px; font-weight:700; letter-spacing:0.04em; margin:0; }
.search { flex:1; max-width:420px; height:32px; background:#fff; border-radius:4px; display:flex;
align-items:center; padding:0 12px; font-size:12px; color:#999999; }
.search::before { content:'⌕'; margin-right:6px; color:#666666; }
.hicons { margin-left:auto; display:flex; gap:18px; color:#fff; font-size:14px; position:relative; }
.cartdot { position:absolute; top:-6px; right:-8px; width:14px; height:14px; border-radius:50%;
background:#e60012; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.page { display:flex; flex-direction:column; width:960px; height:640px; }
.body { display:flex; flex:1; min-height:0; }
.media { width:420px; flex-shrink:0; position:relative; background:#f5f5f5; }
.imgbox { position:absolute; inset:0; background:linear-gradient(155deg,#eeeeee,#dcdcdc); }
.imgbox::before { content:''; position:absolute; inset:40px; border:1px solid #dddddd; }
.badge-sale { position:absolute; top:14px; left:14px; background:#e60012; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.02em; border-radius:2px; padding:2px 6px; }
.heart { position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%;
background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; font-size:14px; color:#000; }
.dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:5px; }
.dots span { width:5px; height:5px; border-radius:50%; background:#ccc; }
.dots span.on { background:#000; }
.info { flex:1; min-width:0; padding:20px 24px 0; display:flex; flex-direction:column; }
.brandname { font-size:13px; font-weight:700; letter-spacing:0.04em; margin:0 0 4px; }
.itemtitle { font-size:14px; font-weight:400; line-height:1.5; color:#333333; margin:0 0 12px; max-width:420px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.price-sale { font-size:22px; font-weight:700; color:#e60012; }
.price-orig { font-size:13px; color:#999999; text-decoration:line-through; }
.price-off { font-size:12px; font-weight:700; color:#e60012; }
.price-note { font-size:12px; color:#999999; margin-bottom:16px; }
.lowstock { display:inline-flex; align-self:flex-start; border:1px solid #e60012; color:#e60012; font-size:11px;
font-weight:700; border-radius:2px; padding:2px 6px; margin-bottom:14px; }
.filtertabs { display:flex; gap:20px; border-bottom:1px solid #e5e5e5; margin-bottom:14px; }
.ftab { font-size:14px; font-weight:700; color:#666666; padding-bottom:9px; }
.ftab.act { color:#000000; border-bottom:2px solid #000000; }
.specs { display:flex; flex-direction:column; gap:8px; max-width:420px; }
.spec-row { display:flex; justify-content:space-between; font-size:12px; color:#666666; }
.spec-row b { color:#333333; font-weight:400; }
.points { margin-top:auto; margin-bottom:14px; font-size:12px; color:#666666; }
.points b { color:#e60012; font-weight:700; }
.ctabar { height:56px; background:#ffffff; border-top:1px solid #e5e5e5; display:flex; align-items:center;
gap:10px; padding:0 24px; }
.btn-fav { width:110px; height:40px; border:1px solid #000000; border-radius:4px; background:#fff; color:#000;
font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.btn-cart { flex:1; height:40px; border-radius:4px; background:#000000; color:#fff; font-size:14px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.rail { background:#f5f5f5; flex-shrink:0; height:126px; padding:12px 24px; box-sizing:border-box; }
.rail h5 { font-size:11px; font-weight:700; color:#666666; letter-spacing:0.02em; margin:0 0 8px; }
.rgrid { display:flex; gap:8px; }
.rthumb { width:60px; height:80px; flex-shrink:0; background:#e5e5e5; position:relative; }
.rbadge { position:absolute; top:4px; left:4px; background:#000; color:#fff; font-size:9px; font-weight:700;
border-radius:2px; padding:1px 4px; }
</style></head>
<body>
<div class="page">
<header>
<p class="brand">ZOZOTOWN</p>
<div class="search">Search brands, items, keywords</div>
<div class="hicons"><span>♡</span><span>🛍<span class="cartdot">3</span></span></div>
</header>
<div class="body">
<div class="media">
<div class="imgbox"></div>
<span class="badge-sale">SALE</span>
<span class="heart">♡</span>
<div class="dots"><span class="on"></span><span></span><span></span><span></span></div>
</div>
<div class="info">
<p class="brandname">NORTH COAST STUDIO</p>
<p class="itemtitle">Oversized Wool-Blend Chesterfield Coat, Long Length</p>
<div class="price-row">
<span class="price-sale">¥16,800</span>
<span class="price-orig">¥24,000</span>
<span class="price-off">30% OFF</span>
</div>
<div class="price-note">Free shipping · Arrives as soon as tomorrow</div>
<span class="lowstock">Almost Sold Out</span>
<div class="filtertabs">
<span class="ftab act">Details</span>
<span class="ftab">Size</span>
<span class="ftab">Reviews 128</span>
</div>
<div class="specs">
<div class="spec-row"><span>Color</span><b>Charcoal Gray</b></div>
<div class="spec-row"><span>Material</span><b>Wool 60% / Polyester 40%</b></div>
<div class="spec-row"><span>Size</span><b>ONE SIZE (Length 100cm)</b></div>
</div>
<div class="points">Earn <b>168 pts</b> in rewards</div>
</div>
</div>
<div class="rail">
<h5>Customers who viewed this item also viewed</h5>
<div class="rgrid">
<div class="rthumb"></div>
<div class="rthumb"><span class="rbadge">NEW</span></div>
<div class="rthumb"></div>
<div class="rthumb"></div>
<div class="rthumb"></div>
<div class="rthumb"><span class="rbadge">NEW</span></div>
<div class="rthumb"></div>
<div class="rthumb"></div>
<div class="rthumb"></div>
<div class="rthumb"></div>
</div>
</div>
<div class="ctabar">
<div class="btn-fav">Add to Favorites</div>
<div class="btn-cart">Add to Cart</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0d13; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0d13; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8d8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a238ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0d13; color: #a238ff;
border: 1px solid #a238ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f0d13; color: #f5f5f5;
border: 1px solid #343237; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8d8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #271439; color: #a238ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0F0D13; color:#FFFFFF; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; flex-direction:column; align-items:center; padding:20px 0 0; position:relative; background:radial-gradient(circle at 50% -10%, #1a1522 0%, #0F0D13 55%); }
.topbar { width:380px; display:flex; align-items:center; justify-content:space-between; padding:0 4px 18px; }
.chev { font-size:20px; color:#fff; }
.ctx { text-align:center; }
.ctx .over { font-size:11px; font-weight:700; letter-spacing:0.4pt; color:#A29CB0; text-transform:uppercase; }
.ctx .title { font-size:13px; font-weight:700; color:#fff; margin-top:2px; }
.more { color:#fff; font-size:18px; letter-spacing:2px; }
.art { width:380px; height:380px; border-radius:16px; position:relative; overflow:hidden;
background: radial-gradient(circle at 85% 8%, rgba(255,255,255,0.28), transparent 40%),
radial-gradient(circle at 8% 92%, rgba(124,40,196,0.65), transparent 55%),
linear-gradient(135deg, #A238FF 0%, #C71F8E 45%, #FF0092 100%);
box-shadow: 0 24px 48px -20px rgba(162,56,255,0.55);
}
.badge { position:absolute; top:16px; left:16px; background:rgba(15,13,19,0.55); backdrop-filter:blur(8px); border-radius:999px; padding:7px 13px 7px 11px; display:flex; align-items:center; gap:5px; }
.badge .bolt { color:#fff; font-size:13px; }
.badge .txt { font-size:12px; font-weight:800; letter-spacing:0.4pt; color:#fff; }
.eq { position:absolute; bottom:22px; left:18px; right:18px; display:flex; align-items:flex-end; gap:4px; height:56px; }
.eq span { flex:1; background:rgba(255,255,255,0.62); border-radius:3px 3px 0 0; }
.meta { width:380px; margin-top:22px; }
.track-title { font-size:26px; font-weight:800; letter-spacing:-0.4pt; display:flex; align-items:center; justify-content:space-between; }
.heart { color:#FF0092; font-size:20px; }
.artist { font-size:15px; font-weight:500; color:#A29CB0; margin-top:4px; }
.scrub { width:380px; margin-top:22px; }
.track { height:4px; background:#221E2B; border-radius:2px; position:relative; }
.fill { position:absolute; left:0; top:0; height:4px; width:38%; background:linear-gradient(90deg,#A238FF,#FF0092); border-radius:2px; }
.knob { position:absolute; left:38%; top:50%; width:13px; height:13px; background:#fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 2px 6px rgba(0,0,0,0.5); }
.times { display:flex; justify-content:space-between; margin-top:8px; font-size:11px; font-weight:500; color:#A29CB0; font-variant-numeric:tabular-nums; }
.transport { width:380px; margin-top:26px; display:flex; align-items:center; justify-content:space-between; }
.tbtn { color:#A29CB0; font-size:22px; }
.play { width:68px; height:68px; border-radius:50%; background:linear-gradient(135deg,#A238FF,#FF0092); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -8px rgba(255,0,146,0.6); }
.play span { color:#fff; font-size:24px; margin-left:3px; }
</style>
</head>
<body>
<div class="stage">
<div class="topbar">
<div class="chev">⌄</div>
<div class="ctx"><div class="over">FLOW · YOUR MIX</div><div class="title">Made for you</div></div>
<div class="more">⋯</div>
</div>
<div class="art">
<div class="badge"><span class="bolt">⚡</span><span class="txt">FLOW</span></div>
<div class="eq">
<span style="height:38%"></span><span style="height:70%"></span><span style="height:52%"></span>
<span style="height:88%"></span><span style="height:34%"></span><span style="height:64%"></span>
<span style="height:92%"></span><span style="height:48%"></span><span style="height:60%"></span>
<span style="height:40%"></span><span style="height:76%"></span><span style="height:56%"></span>
</div>
</div>
<div class="meta">
<div class="track-title">Deezer (iOS) Flow<span class="heart">♥</span></div>
<div class="artist">Various Artists · Personalized Mix</div>
</div>
<div class="scrub">
<div class="track"><div class="fill"></div><div class="knob"></div></div>
<div class="times"><span>1:24</span><span>-2:56</span></div>
</div>
<div class="transport">
<span class="tbtn">🔀</span>
<span class="tbtn">⏮</span>
<div class="play"><span>▶</span></div>
<span class="tbtn">⏭</span>
<span class="tbtn">🔁</span>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fff299; color: #1a1a1a;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f5f5f5; color: #1a1a1a;
border: 1px solid #fff299; border-radius: 9999px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d3efcd; color: #1a1a1a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#1a1a1a; box-sizing:border-box;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #f0f0f0; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:8px; font-size:14px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; }
.navlinks span { padding:8px 16px; border-radius:999px; }
.navlinks .active { background:#fff299; color:#1a1a1a; }
.search { width:150px; height:40px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:18px 30px; min-height:0; }
.hero { flex:0 0 auto; margin-bottom:14px; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 4px; }
.hero p { font-size:14px; color:#4a4a4a; margin:0; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; min-height:0; }
.card { background:#ffffff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.04); display:flex;
flex-direction:column; overflow:hidden; position:relative; }
.thumb { aspect-ratio:1/1; }
.t1 { background:#fcd6d7; }
.t2 { background:#d3efcd; }
.t3 { background:#fff299; }
.t4 { background:#3a5792; }
.badge { position:absolute; top:8px; left:8px; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:2px 8px; border-radius:999px; }
.badge.new { background:#d3efcd; color:#1a1a1a; }
.badge.sale { background:#c72e2f; color:#fff; }
.heart { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:999px; background:rgba(255,255,255,0.85); }
.info { padding:10px 12px 12px; }
.info h3 { font-size:14px; font-weight:500; margin:0 0 4px; }
.info .price { font-size:13px; color:#4a4a4a; margin:0; }
footer { flex:0 0 auto; height:52px; background:#f5f5f5; color:#4a4a4a; border-top:1px solid #e5e7eb;
display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Areaware</p>
<div class="navlinks"><span class="active">Puzzles</span><span>Home Goods</span><span>Gifts</span></div>
<div class="search"></div>
</nav>
<main>
<div class="hero">
<h1>Objects with a little personality</h1>
<p>Design goods for the apartment that feels lived in.</p>
</div>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="heart"></div><div class="thumb t1"></div>
<div class="info"><h3>Marbled Shell Puzzle</h3><p class="price">$26.00</p></div></div>
<div class="card"><div class="heart"></div><div class="thumb t2"></div>
<div class="info"><h3>Sage Ceramic Tray</h3><p class="price">$34.00</p></div></div>
<div class="card"><span class="badge sale">Sale</span><div class="heart"></div><div class="thumb t3"></div>
<div class="info"><h3>Sun Puzzle, 500pc</h3><p class="price">$22.00</p></div></div>
<div class="card"><div class="heart"></div><div class="thumb t4"></div>
<div class="info"><h3>Navy Bookend Pair</h3><p class="price">$48.00</p></div></div>
</div>
</main>
<footer>
<span>© Areaware</span>
<span>Shipping · Returns · Wholesale</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5865f2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5865f2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aeb4f4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4752c4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: 1px solid #4752c4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5865f2; color: #f5f5f5;
border: 1px solid #717cf2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aeb4f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5562eb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#313338; color:#DBDEE1; box-sizing:border-box;
font-family:"gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
.rail { width:72px; background:#1E1F22; display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:8px; }
.rail .icon { width:48px; height:48px; border-radius:16px; background:linear-gradient(135deg,#5865F2,#EB459E);
display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; }
.rail .icon.plain { background:#2B2D31; border-radius:50%; }
.sidebar { width:240px; background:#2B2D31; display:flex; flex-direction:column; }
.sidebar .head { height:48px; display:flex; align-items:center; padding:0 16px; font-weight:600; font-size:16px;
color:#F2F3F5; border-bottom:1px solid #1E1F22; }
.sidebar .cat { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; color:#949BA4;
padding:16px 16px 6px; }
.sidebar .chan { font-size:15px; color:#949BA4; padding:6px 16px; margin:0 8px; border-radius:4px; }
.sidebar .chan.active { background:rgba(78,80,88,0.6); color:#fff; }
.sidebar .chan b { font-weight:400; opacity:0.6; margin-right:4px; }
.main { flex:1; display:flex; flex-direction:column; }
.topbar { height:48px; display:flex; align-items:center; padding:0 16px; border-bottom:1px solid #1E1F22;
font-weight:600; color:#F2F3F5; font-size:15px; }
.topbar b { opacity:0.5; font-weight:400; margin-right:6px; }
.messages { flex:1; padding:16px; display:flex; flex-direction:column; gap:16px; }
.msg { display:flex; gap:12px; }
.msg .av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#57F287,#5865F2); flex-shrink:0; }
.msg .body .name { font-size:16px; font-weight:600; color:#F2F3F5; }
.msg .body .name span { font-weight:400; color:#949BA4; font-size:12px; margin-left:8px; }
.msg .body p { margin:2px 0 0; font-size:16px; line-height:1.375; color:#DBDEE1; }
.embed { background:#2B2D31; border-left:4px solid #5865F2; border-radius:4px; padding:12px 16px; margin-top:6px;
max-width:400px; }
.embed .t { font-size:14px; font-weight:600; color:#00A8FC; }
.embed .d { font-size:13px; color:#949BA4; margin-top:4px; }
.composer { margin:0 16px 16px; background:#383A40; border-radius:8px; padding:11px 16px; font-size:16px; color:#6D6F78; }
</style></head>
<body>
<div class="shell">
<div class="rail">
<div class="icon">Discord</div>
<div class="icon plain">+</div>
<div class="icon plain">💬</div>
</div>
<div class="sidebar">
<div class="head">Discord Server</div>
<div class="cat">Information</div>
<div class="chan"><b>#</b>welcome</div>
<div class="chan"><b>#</b>rules</div>
<div class="cat">Text Channels</div>
<div class="chan active"><b>#</b>general</div>
<div class="chan"><b>#</b>show-and-tell</div>
<div class="chan"><b>#</b>off-topic</div>
</div>
<div class="main">
<div class="topbar"><b>#</b>general</div>
<div class="messages">
<div class="msg">
<div class="av"></div>
<div class="body">
<div class="name">Maya <span>Today at 9:41 AM</span></div>
<p>anyone up for game night later? thinking 8pm</p>
</div>
</div>
<div class="msg">
<div class="av"></div>
<div class="body">
<div class="name">Devon <span>Today at 9:44 AM</span></div>
<p>in. sending the invite link now</p>
<div class="embed"><div class="t">game-night-invite.gg</div><div class="d">Voice channel · starts 8:00 PM</div></div>
</div>
</div>
</div>
<div class="composer">Message #general</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d253d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d253d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.1; letter-spacing: -0.22px; margin: 0; color: #0d253d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; letter-spacing: -0.42px; margin: 0; color: #64748d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; background: #533afd; color: #ffffff;
border: none; border-radius: 9999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; background: #ffffff; color: #533afd;
border: 1px solid #533afd; border-radius: 9999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; background: #ffffff; color: #0d253d;
border: 1px solid #c2c8ce; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #64748d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.15; letter-spacing: 0.1px; background: #b9b9f9; color: #4434d4;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d253d; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight:300; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric: tabular-nums; }
.meshwrap { position:relative; height:280px; overflow:hidden;
background:
radial-gradient(ellipse 500px 260px at 8% 0%, #f5e9d4 0%, transparent 55%),
radial-gradient(ellipse 480px 260px at 35% -10%, #ffb199 0%, transparent 55%),
radial-gradient(ellipse 520px 280px at 62% 5%, #c9b4fa 0%, transparent 55%),
radial-gradient(ellipse 520px 300px at 88% -5%, #533afd 0%, transparent 60%),
radial-gradient(ellipse 400px 260px at 100% 30%, #ea2261 0%, transparent 55%); }
nav { position:relative; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:400; font-size:15px; }
.navlinks { display:flex; gap:20px; font-size:13.5px; font-weight:400; }
.pillbtn { background:#533afd; color:#fff; border:none; border-radius:9999px; padding:8px 16px; font-size:14px; font-weight:400; }
.herotext { position:relative; z-index:2; padding:14px 32px 0; }
.herotext h1 { font-size:48px; font-weight:300; letter-spacing:-.96px; line-height:1.05; margin:0 0 12px; max-width:480px; }
.herotext p { font-size:15px; font-weight:300; margin:0 0 16px; max-width:400px; color:#273951; }
.dashwrap { margin:-40px 32px 20px; position:relative; z-index:3; background:#fff; border-radius:16px;
box-shadow:rgba(0,55,112,.08) 0 8px 24px, rgba(0,55,112,.04) 0 2px 6px; padding:16px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.dpanel { background:#1c1e54; border-radius:8px; padding:10px; }
.dpanel .lbl { color:rgba(255,255,255,.6); font-size:9.5px; margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.dpanel .val { color:#fff; font-size:20px; font-weight:400; letter-spacing:-.42px; }
.dpanel.table .row { display:flex; justify-content:space-between; font-size:10.5px; color:rgba(255,255,255,.8); padding:3px 0; }
.dpanel.chart .bars { display:flex; align-items:flex-end; gap:4px; height:40px; margin-top:4px; }
.dpanel.chart .bar { flex:1; background:#665efd; border-radius:2px 2px 0 0; }
.cream { background:#f5e9d4; border-radius:12px; margin:0 32px 20px; padding:18px 24px; }
.cream h3 { font-size:22px; font-weight:300; margin:0 0 4px; }
.cream p { font-size:13px; color:#273951; margin:0; }
footer { display:flex; justify-content:space-between; padding:12px 32px; font-size:11px; color:#64748d; border-top:1px solid #e3e8ee; }
</style></head>
<body>
<div class="meshwrap">
<nav>
<div class="brand">Stripe</div>
<div class="navlinks"><span>Payments</span><span>Billing</span><span>Connect</span><span>Pricing</span></div>
<button class="pillbtn">Sign in</button>
</nav>
<div class="herotext">
<h1>Financial infrastructure<br>to grow your revenue</h1>
<p>Join millions of companies using Stripe to accept payments online and in person.</p>
</div>
</div>
<div class="dashwrap">
<div class="dpanel">
<div class="lbl">Balance</div>
<div class="val tnum">$84,204.29</div>
</div>
<div class="dpanel table">
<div class="lbl">Recent payments</div>
<div class="row"><span>Acme Inc.</span><span class="tnum">$420.00</span></div>
<div class="row"><span>Globex Co.</span><span class="tnum">$1,204.50</span></div>
<div class="row"><span>Initech</span><span class="tnum">$89.90</span></div>
</div>
<div class="dpanel chart">
<div class="lbl">Volume</div>
<div class="bars">
<div class="bar" style="height:40%"></div><div class="bar" style="height:65%"></div>
<div class="bar" style="height:50%"></div><div class="bar" style="height:80%"></div>
<div class="bar" style="height:100%"></div><div class="bar" style="height:70%"></div>
</div>
</div>
</div>
<div class="cream">
<h3>Built for developers</h3>
<p>Sohne-thin type, tabular figures, and composited dashboards — the brand's quiet financial signature.</p>
</div>
<footer>
<span>© Stripe</span>
<span>Stripe · Docs · Pricing · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f54211; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f54211; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f5a48e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262626; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f54211; color: #262626;
border: 1px solid #262626; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f54211; color: #f5f5f5;
border: 1px solid #f55f35; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f5a48e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d43e14; color: #262626;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif; }
* { box-sizing:border-box; }
.layout { display:flex; height:640px; }
.rail { width:220px; flex:none; padding:20px 14px; display:flex; flex-direction:column; gap:6px; border-right:1px solid #f1f1f1; }
.brand { font-size:18px; font-weight:700; margin:0 8px 14px; color:#262626; }
.rail-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:20px; font-size:14px; font-weight:500; color:#262626; }
.rail-item .dot { width:10px; height:10px; border-radius:50%; }
.rail-item.blue { background:#dcf5ff; }
.rail-item.pink { background:#fee2ec; }
.rail-item.peach { background:#fff5ec; }
.rail-item.plain { background:transparent; color:#656565; }
.main { flex:1; display:flex; flex-direction:column; }
nav { height:56px; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:0 28px; border-bottom:1px solid #f1f1f1; }
.btn-signup { background:#ffffff; color:#262626; border:1px solid #d3d3d3; border-radius:36px; padding:0 20px; height:36px; font-size:14px; }
.btn-login { background:#262626; color:#ffffff; border:1px solid #262626; border-radius:36px; padding:0 20px; height:36px; font-size:14px; }
.hero { padding:36px 60px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.hero h1 { font-size:30px; font-weight:700; margin:0; color:#262626; }
.hero p { font-size:14px; color:#656565; margin:0; }
.composer-wrap { padding:18px 60px 0; }
.composer { background:#ffffff; border:1px solid #d3d3d3; border-radius:20px; padding:16px 18px; box-shadow:rgba(0,0,0,0.1) 0px 0px 15px 0px; display:flex; flex-direction:column; gap:12px; }
.composer .ph { font-size:16px; color:#c5c5c5; }
.composer-row { display:flex; gap:8px; align-items:center; justify-content:space-between; }
.role-chip { display:inline-flex; align-items:center; gap:6px; background:#ffffff; border:1px solid #f1f1f1; border-radius:999px; padding:4px 6px 4px 10px; font-size:13px; color:#262626; }
.send-dot { width:30px; height:30px; border-radius:12px; background:#f54211; }
.chips { display:flex; gap:10px; padding:16px 60px 0; flex-wrap:wrap; }
.tool-chip { border:1px solid #171717; border-radius:300px; height:32px; padding:0 16px; font-size:13px; color:#262626; display:flex; align-items:center; }
.cards { display:flex; gap:14px; padding:20px 60px 0; }
.oc { flex:1; border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.oc h4 { margin:0; font-size:13px; font-weight:600; color:#262626; }
.oc p { margin:0; font-size:11px; color:#656565; line-height:1.4; }
footer { margin-top:auto; padding:10px 60px 16px; font-size:11px; color:#c5c5c5; text-align:center; }
</style></head>
<body>
<div class="layout">
<div class="rail">
<p class="brand">Wrtn</p>
<div class="rail-item plain"><span class="dot" style="background:#262626"></span>Home</div>
<div class="rail-item blue"><span class="dot" style="background:#22b3e0"></span>Tools</div>
<div class="rail-item pink"><span class="dot" style="background:#ff77a6"></span>Perks</div>
<div class="rail-item peach"><span class="dot" style="background:#f8a35f"></span>Saved</div>
</div>
<div class="main">
<nav>
<button class="btn-signup">Sign Up Free</button>
<button class="btn-login">Log In</button>
</nav>
<section class="hero">
<h1>Trusted by 5 million users worldwide</h1>
<p>The latest AI, free for everyone — get started with Wrtn</p>
</section>
<div class="composer-wrap">
<div class="composer">
<span class="ph">Ask me anything</span>
<div class="composer-row">
<span class="role-chip">✦ Choose a persona</span>
<span class="send-dot"></span>
</div>
</div>
</div>
<div class="chips">
<span class="tool-chip">Image Generation</span>
<span class="tool-chip">Writing Assistant</span>
<span class="tool-chip">Code Explainer</span>
<span class="tool-chip">Trip Planner</span>
</div>
<div class="cards">
<div class="oc" style="background:#dcf5ff;"><h4>Open Space · Tools</h4><p>From image generation to research, all in one place.</p></div>
<div class="oc" style="background:#fee2ec;"><h4>Open Space · Perks</h4><p>New credits and events every day.</p></div>
<div class="oc" style="background:#fff5ec;"><h4>Open Space · Saved</h4><p>Collect the results you love.</p></div>
</div>
<footer>© Wrtn · Company · Service · News · Careers</footer>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fbfb; color: #2a2a2a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fbfb; color: #2a2a2a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; color: #2a2a2a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #ff0000; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #e1e1e1; color: #2a2a2a;
border: 1px solid #ff0000; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2a2a2a;
border: 1px solid #c5c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #2a2a2a; color: #f9fbfb;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9fbfb; color:#2a2a2a; box-sizing:border-box;
font-family:'Arial Narrow', Arial, 'Franklin Gothic Medium', sans-serif; font-stretch:condensed; }
* { box-sizing:border-box; }
nav { height:52px; background:#e1e1e1; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:2px solid #c0c0c0; }
.brand { font-size:18px; font-weight:700; letter-spacing:0.5px; margin:0; color:#2a2a2a; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#5f5f5f; }
.partno { font-size:12px; color:#767676; }
main { display:flex; height:588px; }
.stage { width:320px; background:#e1e1e1; display:flex; align-items:center; justify-content:center; border-right:2px solid #c0c0c0; }
.shredder { width:150px; height:190px; position:relative; }
.body-top { width:150px; height:70px; background:linear-gradient(180deg,#c0c0c0,#a4a4a4); border-radius:4px 4px 0 0; }
.slot { width:110px; height:8px; background:#2a2a2a; margin:16px auto 0; border-radius:2px; position:relative; }
.warn { position:absolute; right:-2px; top:-22px; background:#ff0000; color:#fff; font-size:8px; font-weight:700; padding:2px 4px; }
.body-bin { width:150px; height:120px; background:linear-gradient(180deg,#e1e1e1,#c0c0c0); border:2px solid #a4a4a4; border-top:none; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:10px; }
.model { font-size:12px; color:#767676; margin:0; }
h1 { font-size:24px; font-weight:700; margin:0; letter-spacing:0.2px; }
table.specs { width:100%; border-collapse:collapse; margin-top:6px; font-size:12px; }
table.specs td { border:1px solid #c1c1c1; padding:6px 10px; }
table.specs td.k { background:#e1e1e1; font-weight:700; width:170px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:8px; }
.price { font-size:26px; font-weight:700; color:#ff0000; }
.instock { color:#2e7d32; font-size:12px; font-weight:700; text-transform:uppercase; }
.actions { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#ff0000; color:#fff; border-radius:4px; height:42px; padding:0 24px;
display:flex; align-items:center; font-weight:700; font-size:13px; letter-spacing:0.3px; }
.btn-secondary { background:#fff; border:1px solid #c1c1c1; color:#2a2a2a; border-radius:4px; height:42px;
padding:0 18px; display:flex; align-items:center; font-size:12px; }
.link { color:#0000ff; text-decoration:underline; font-size:12px; margin-top:auto; }
</style></head>
<body>
<nav>
<p class="brand">Aurora Corp</p>
<div class="navlinks"><span>Shredders</span><span>Calculators</span><span>Office Supply</span><span>Support</span></div>
<span class="partno">Model No. AC-4400X</span>
</nav>
<main>
<div class="stage">
<div class="shredder">
<div class="body-top"><div class="slot"><span class="warn">DANGER</span></div></div>
<div class="body-bin"></div>
</div>
</div>
<div class="info">
<p class="model">SKU AC-4400X · In Stock</p>
<h1>AC-4400X Cross-Cut Paper Shredder — 12 Sheet</h1>
<table class="specs">
<tr><td class="k">Sheet Capacity</td><td>12 sheets, continuous duty</td></tr>
<tr><td class="k">Cut Type</td><td>Cross-cut, 5/32" x 1-1/2"</td></tr>
<tr><td class="k">Bin Capacity</td><td>9 gallons</td></tr>
<tr><td class="k">Warranty</td><td>5-year limited, cutter head</td></tr>
</table>
<div class="price-row"><span class="price">$189.00</span><span class="instock">In Stock</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Request Quote</div>
</div>
<span class="link">View full specification sheet (PDF)</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #304cb2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #304cb2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9ca9d7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e51d23; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #304cb2; color: #ffffff;
border: 1px solid #e51d23; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #304cb2; color: #f5f5f5;
border: 1px solid #5067bd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca9d7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4d449b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E1726; color:#EAF0FA; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.wrap { padding:30px 44px; }
.title { font-size:26px; font-weight:900; }
.board-card { margin-top:20px; border-radius:20px; padding:22px 26px; position:relative;
background: linear-gradient(135deg,#304CB2,#243C8E); box-shadow: rgba(48,76,178,0.30) 0 14px 30px -16px; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:1.2px; color:rgba(255,255,255,.78); text-transform:uppercase; }
.board-row { display:flex; align-items:baseline; gap:12px; margin-top:6px; }
.grp { font-size:76px; font-weight:900; color:#F9B612; line-height:1; }
.num { font-size:46px; font-weight:800; color:#fff; line-height:1; }
.cap { font-size:13px; font-weight:500; color:rgba(255,255,255,.85); margin-top:6px; }
.divider { height:1px; background:rgba(255,255,255,.18); margin:14px 0; }
.footer-cols { display:flex; gap:44px; }
.fcol span { display:block; font-size:11px; font-weight:600; text-transform:uppercase; color:rgba(255,255,255,.7); }
.fcol b { font-size:16px; font-weight:700; }
.flight-strip { margin-top:18px; background:#16223A; border:1px solid #2A3A57; border-radius:16px; padding:16px 20px; }
.route-row { display:flex; align-items:center; justify-content:space-between; }
.code { font-size:26px; font-weight:800; }
.mini-route { flex:1; text-align:center; }
.mini-line { height:2px; background:#F9B612; width:70%; margin:0 auto; }
.nonstop { font-size:10px; font-weight:700; text-transform:uppercase; color:#9DAAC4; margin-top:4px; }
.meta-row { display:flex; justify-content:space-between; font-size:12px; color:#9DAAC4; margin-top:10px; }
.cta { margin-top:20px; background:#F9B612; color:#1A1A1A; height:52px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; }
</style></head>
<body>
<div class="wrap">
<div class="title">Southwest (iOS) · Your trip</div>
<div class="board-card">
<div class="eyebrow">Boarding position</div>
<div class="board-row"><div class="grp">A</div><div class="num">23</div></div>
<div class="cap">Board in group A, position 23</div>
<div class="divider"></div>
<div class="footer-cols">
<div class="fcol"><span>Boarding starts</span><b>4:25 PM</b></div>
<div class="fcol"><span>Confirmation</span><b>K9F2Q2</b></div>
</div>
</div>
<div class="flight-strip">
<div class="route-row">
<div class="code">DAL</div>
<div class="mini-route"><div class="mini-line"></div><div class="nonstop">Nonstop · 2h 35m</div></div>
<div class="code">MDW</div>
</div>
<div class="meta-row"><span>WN 2418 · Mon, Jun 9</span><span>Gate B14 · 4:55 PM</span></div>
</div>
<div class="cta">Check in</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e8e8e8; }
.brand { font-size:15px; font-weight:400; letter-spacing:0.24em; text-transform:uppercase; }
.navlinks { display:flex; gap:30px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#7a7a7a; }
.navlinks span.on { color:#313131; }
.cart-txt { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#313131; }
main { display:flex; height:574px; }
.gallery { width:430px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; position:relative; }
.bottle { width:110px; height:230px; background:#313131; border-radius:2px; position:relative; }
.bottle::before { content:''; position:absolute; top:-16px; left:38px; width:34px; height:20px; background:#1a1a1a; }
.bottle .label { position:absolute; top:60px; left:8px; right:8px; bottom:60px; background:#f5f5f5;
display:flex; align-items:center; justify-content:center; }
.label span { font-size:8px; letter-spacing:0.16em; text-transform:uppercase; color:#313131; text-align:center; }
.info { flex:1; padding:40px 44px; display:flex; flex-direction:column; gap:16px; }
.cat { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#7a7a7a; }
h1 { font-size:24px; font-weight:400; margin:0; letter-spacing:-0.2px; line-height:1.35; }
.desc { font-size:14px; color:#4a4a4a; line-height:1.65; max-width:340px; }
.price-row { display:flex; align-items:baseline; gap:10px; padding-top:4px; }
.price { font-size:16px; font-weight:500; }
.size-row { display:flex; gap:8px; }
.size { border:1px solid #d4d4d4; padding:8px 16px; font-size:12px; }
.size.on { border-color:#313131; background:#313131; color:#fff; }
.btn-row { display:flex; gap:0; margin-top:auto; }
.btn-primary { flex:1; background:#313131; color:#fff; border:none; padding:14px 18px;
font-size:13px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; }
.note { font-size:11.5px; color:#a0a0a0; letter-spacing:0.02em; }
</style></head>
<body>
<nav>
<div class="brand">Aesop</div>
<div class="navlinks"><span class="on">Skin</span><span>Hair</span><span>Body</span><span>Fragrance</span></div>
<div class="cart-txt">Bag (0)</div>
</nav>
<main>
<div class="gallery">
<div class="bottle"><div class="label"><span>Parsley Seed<br>Anti-Oxidant<br>Serum</span></div></div>
</div>
<div class="info">
<span class="cat">Skin Care — Serum</span>
<h1>Parsley Seed Anti-Oxidant Facial Treatment</h1>
<p class="desc">A lightweight, oil-based serum formulated to help defend skin against environmental assault, leaving it clear, calm, and comfortable.</p>
<div class="price-row"><span class="price">$77.00</span></div>
<div class="size-row">
<span class="size on">30ml</span>
<span class="size">60ml</span>
</div>
<div class="btn-row"><button class="btn-primary">Add to Bag</button></div>
<span class="note">Complimentary samples with every order</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #990521; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #990521; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #755847; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:'alfaforni','Montserrat',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#212934; }
.brand { font-size:19px; font-weight:700; color:#fff; letter-spacing:0.03em; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#c3c3c3; font-weight:600; }
.cart { background:#990521; color:#fff; font-size:12px; font-weight:700; padding:8px 16px; border-radius:2px; }
main { display:flex; height:576px; }
.gallery { width:410px; background:linear-gradient(180deg,#f5f5f5 0%,#efefef 100%); position:relative;
display:flex; align-items:center; justify-content:center; }
.oven { width:200px; height:150px; background:#755847; border-radius:60% 60% 20px 20px / 90% 90% 20px 20px;
position:relative; box-shadow:0 20px 40px rgba(0,0,0,0.2); }
.oven::before { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
width:80px; height:50px; background:#1a1a1a; border-radius:40px 40px 4px 4px; }
.flame { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:40px; height:50px;
background:radial-gradient(circle at 50% 100%, #de4528, #d0382e 60%, transparent 100%); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
opacity:0.85; }
.badge-heritage { position:absolute; top:22px; left:22px; background:#990521; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.04em; padding:5px 12px; text-transform:uppercase; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#777777; }
h1 { font-size:23px; font-weight:700; margin:0; line-height:1.28; color:#212934; }
.stars { font-size:12px; color:#d4a017; }
.stars .n { color:#777777; margin-left:6px; font-size:11.5px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:700; color:#990521; }
.desc { font-size:13.5px; color:#3e3e3e; line-height:1.55; max-width:340px; }
.fuel-row { display:flex; gap:8px; }
.fuel { border:1px solid #c3c3c3; border-radius:6px; padding:7px 14px; font-size:12px; }
.fuel.on { border-color:#990521; color:#990521; background:#fdf1f2; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#990521; color:#fff; border:none; border-radius:2px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #212934; color:#212934; background:#fff; border-radius:2px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#777777; }
</style></head>
<body>
<nav>
<div class="brand">Alfa Forni</div>
<div class="navlinks"><span>Wood Ovens</span><span>Gas Ovens</span><span>Accessories</span><span>Recipes</span></div>
<div class="cart">Cart (0)</div>
</nav>
<main>
<div class="gallery">
<span class="badge-heritage">Made in Italy</span>
<div class="oven"></div><div class="flame"></div>
</div>
<div class="info">
<span class="cat">Wood-Fired Oven</span>
<h1>Alfa Forni Classico 2 Pizze Oven</h1>
<div class="stars">★★★★★ <span class="n">4.9 · 420 reviews</span></div>
<div class="price-row"><span class="price">$2,499.00</span></div>
<p class="desc">Handcrafted refractory-brick oven reaching 900°F in 15 minutes — bake two Neapolitan pizzas at once.</p>
<div class="fuel-row">
<span class="fuel on">Wood</span>
<span class="fuel">Gas + Wood</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Book a Demo</button>
</div>
<span class="meta">Free curbside delivery in the US</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0062df; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0062df; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b3eb; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003597; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0062df; color: #ffffff;
border: 1px solid #003597; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0062df; color: #f5f5f5;
border: 1px solid #277ae3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b3eb; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #005bd3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e9ecf1; color:#1a2434; box-sizing:border-box;
font-family:Roboto,"Noto Sans KR",AppleSDGothicNeo-Regular,"Malgun Gothic",Dotum,sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; flex-direction:column; width:960px; height:640px; }
header { height:56px; background:#ffffff; border-bottom:1px solid #d6d8db; display:flex; align-items:center;
padding:0 24px; gap:28px; }
.brand { font-weight:700; font-size:17px; color:#1a2434; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#565d6a; }
.navlinks span:first-child { color:#0062df; font-weight:700; }
.spacer { flex:1; }
.searchbox { background:#f4f5f7; border-radius:4px; padding:6px 12px; font-size:12px; color:#8e929b; width:220px; }
main { flex:1; display:flex; gap:1px; background:#d6d8db; }
.pairs { width:250px; background:#ffffff; overflow:hidden; }
.pairs .ph { padding:10px 14px; font-size:11px; color:#8e929b; border-bottom:1px solid #d6d8db; }
.pair-row { display:flex; justify-content:space-between; align-items:center; padding:8px 14px;
font-size:12px; border-bottom:1px solid #f4f5f7; }
.pair-row.active { background:#f4f5f7; }
.pair-name { color:#1a2434; font-weight:500; }
.pair-name b { color:#8e929b; font-weight:400; font-size:10px; display:block; }
.up { color:#dd3c44; font-weight:700; }
.down { color:#1375ec; font-weight:700; }
.center { flex:1; background:#ffffff; display:flex; flex-direction:column; }
.ticker { padding:16px 24px 10px; display:flex; align-items:baseline; gap:14px; border-bottom:1px solid #d6d8db; }
.ticker .sym { font-size:16px; font-weight:700; }
.ticker .price { font-size:30px; font-weight:700; color:#dd3c44; }
.ticker .chg { font-size:13px; color:#dd3c44; font-weight:700; }
.ticker .sub { font-size:11px; color:#565d6a; margin-left:auto; text-align:right; line-height:1.5; }
.chart { flex:1; margin:14px 24px; background:linear-gradient(180deg,#f4f5f7,#ffffff); border:1px solid #d6d8db;
border-radius:4px; position:relative; overflow:hidden; }
.chart svg { position:absolute; inset:0; }
.book { width:270px; background:#ffffff; display:flex; flex-direction:column; }
.book .bh { padding:10px 14px; font-size:11px; color:#8e929b; border-bottom:1px solid #d6d8db;
display:flex; justify-content:space-between; }
.row2 { display:flex; justify-content:space-between; padding:4px 14px; font-size:11px; }
.panel { padding:14px; border-top:1px solid #d6d8db; }
.quickrow { display:flex; gap:6px; margin:8px 0; }
.qfill { border:1px solid #d6d8db; border-radius:4px; padding:1px 8px; font-size:12px; height:28px;
display:flex; align-items:center; color:#1a2434; background:#ffffff; }
.buysell { display:flex; gap:8px; margin-top:8px; }
.buy { flex:1; background:#dd3c44; color:#ffffff; border-radius:4px; text-align:center; padding:10px 0;
font-size:13px; font-weight:700; }
.sell { flex:1; background:#1375ec; color:#ffffff; border-radius:4px; text-align:center; padding:10px 0;
font-size:13px; font-weight:700; }
</style></head>
<body>
<div class="app">
<header>
<span class="brand">Upbit</span>
<div class="navlinks"><span>Exchange</span><span>Investments</span><span>NFT</span><span>Support</span></div>
<div class="spacer"></div>
<div class="searchbox">Search markets</div>
</header>
<main>
<div class="pairs">
<div class="ph">KRW MARKET</div>
<div class="pair-row active"><span class="pair-name">BTC<b>Bitcoin</b></span><span class="up">142,300,000</span></div>
<div class="pair-row"><span class="pair-name">ETH<b>Ethereum</b></span><span class="down">5,214,000</span></div>
<div class="pair-row"><span class="pair-name">XRP<b>Ripple</b></span><span class="up">812</span></div>
<div class="pair-row"><span class="pair-name">SOL<b>Solana</b></span><span class="up">231,400</span></div>
<div class="pair-row"><span class="pair-name">ADA<b>Cardano</b></span><span class="down">612</span></div>
<div class="pair-row"><span class="pair-name">DOGE<b>Dogecoin</b></span><span class="up">198</span></div>
<div class="pair-row"><span class="pair-name">AVAX<b>Avalanche</b></span><span class="down">41,200</span></div>
</div>
<div class="center">
<div class="ticker">
<span class="sym">BTC/KRW</span>
<span class="price">142,300,000</span>
<span class="chg">+2.84%</span>
<span class="sub">24H High 143,900,000<br>24H Low 137,050,000</span>
</div>
<div class="chart">
<svg viewBox="0 0 600 220" preserveAspectRatio="none">
<polyline points="0,150 40,140 80,160 120,120 160,130 200,90 240,110 280,70 320,95 360,60 400,80 440,50 480,65 520,40 560,55 600,30"
fill="none" stroke="#dd3c44" stroke-width="2"/>
</svg>
</div>
<div class="panel">
<div style="font-size:12px;color:#565d6a;">Quick fill</div>
<div class="quickrow">
<span class="qfill">10%</span><span class="qfill">25%</span><span class="qfill">50%</span><span class="qfill">100%</span>
</div>
<div class="buysell"><div class="buy">Buy</div><div class="sell">Sell</div></div>
</div>
</div>
<div class="book">
<div class="bh"><span>Price(KRW)</span><span>Qty(BTC)</span></div>
<div class="row2" style="color:#1375ec;"><span>142,340,000</span><span>0.042</span></div>
<div class="row2" style="color:#1375ec;"><span>142,330,000</span><span>0.118</span></div>
<div class="row2" style="color:#1375ec;"><span>142,320,000</span><span>0.203</span></div>
<div class="row2" style="background:#f4f5f7; font-weight:700;"><span>142,300,000</span><span>—</span></div>
<div class="row2" style="color:#dd3c44;"><span>142,290,000</span><span>0.301</span></div>
<div class="row2" style="color:#dd3c44;"><span>142,280,000</span><span>0.087</span></div>
<div class="row2" style="color:#dd3c44;"><span>142,270,000</span><span>0.145</span></div>
<div class="bh" style="margin-top:auto;"><span>Support</span><span>Notice</span></div>
</div>
</main>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa687; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8717; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4500; color: #000000;
border: 1px solid #ff8717; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4500; color: #f5f5f5;
border: 1px solid #fd6127; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa687; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff5004; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F6F7F8; color:#1A1A1B; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:44px; background:#fff; border-bottom:1px solid #EDEFF1; display:flex; align-items:center;
padding:0 28px; gap:14px; }
.av-me { width:26px; height:26px; border-radius:50%; background:#FF4500; }
.brand { font-size:17px; font-weight:600; letter-spacing:-0.2px; margin:0; color:#FF4500; }
.switcher { margin-left:auto; font-size:13px; color:#7C7C7C; display:flex; align-items:center; gap:6px; }
.layout { display:flex; height:596px; }
.feed { flex:1; padding:12px 20px; overflow:hidden; }
.card { background:#fff; border-radius:16px; padding:12px; margin-bottom:8px; }
.head { display:flex; align-items:center; gap:6px; font-size:12px; color:#7C7C7C; margin-bottom:8px; }
.sub-av { width:20px; height:20px; border-radius:50%; }
.sub-av.g { background:#24A0ED; } .sub-av.o { background:#FF4500; } .sub-av.p { background:#0079D3; }
.subname { font-weight:600; color:#1A1A1B; }
.title { font-size:18px; font-weight:600; margin:0 0 8px; line-height:1.25; letter-spacing:-0.2px; }
.flair { display:inline-block; font-size:11px; font-weight:600; background:#F3B200; color:#000; border-radius:4px;
padding:3px 6px; margin-bottom:8px; }
.flair.oc { background:#46D160; color:#fff; }
.preview { height:100px; border-radius:16px; margin-bottom:10px; }
.p1 { background:linear-gradient(135deg,#ffd8a8,#ff922b); }
.p2 { background:linear-gradient(135deg,#a5d8ff,#4dabf7); }
.actionrow { display:flex; align-items:center; gap:14px; }
.votecol { display:flex; align-items:center; gap:4px; background:#F2F3F5; border-radius:16px; padding:4px 8px; }
.votecol .up { color:#FF8717; font-weight:700; }
.votecol .karma { font-size:12px; font-weight:700; color:#1A1A1B; }
.votecol .down { color:#7193FF; font-weight:700; }
.meta-icon { font-size:12px; color:#878A8C; display:flex; align-items:center; gap:4px; }
.side { width:230px; padding:14px 18px; border-left:1px solid #EDEFF1; background:#fff; }
.side-card { border:1px solid #EDEFF1; border-radius:12px; padding:12px; margin-bottom:10px; }
.side-title { font-size:12px; font-weight:700; letter-spacing:0.5px; color:#7C7C7C; text-transform:uppercase; margin-bottom:8px; }
.rec { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; font-weight:600; }
.rec-av { width:20px; height:20px; border-radius:50%; }
.joinbtn { font-size:11px; font-weight:600; color:#fff; background:#FF4500; border-radius:24px; padding:4px 12px; margin-left:auto; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:49px; background:#fff; border-top:1px solid #EDEFF1;
display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:11px; font-weight:500; color:#878A8C; }
.tab.active { color:#FF4500; }
</style></head>
<body>
<nav>
<span class="av-me"></span>
<p class="brand">Reddit (iOS)</p>
<div class="switcher">Home ▾</div>
</nav>
<div class="layout">
<div class="feed">
<div class="card">
<div class="head"><span class="sub-av o"></span><span class="subname">r/AskReddit</span> · 2h ago · 125 comments</div>
<h3 class="title">What's a skill that seems useless until you suddenly need it?</h3>
<span class="flair">Discussion</span>
<div class="actionrow">
<div class="votecol"><span class="up">▲</span><span class="karma">14.2K</span><span class="down">▼</span></div>
<span class="meta-icon">💬 3.1K</span>
<span class="meta-icon">↗ Share</span>
<span class="meta-icon">🔖 Save</span>
</div>
</div>
<div class="card">
<div class="head"><span class="sub-av g"></span><span class="subname">r/AnimalCrossing</span> · 5h ago · 48 comments</div>
<h3 class="title">Finally finished my Japanese garden island — 3 years in the making</h3>
<span class="flair oc">OC</span>
<div class="preview p1"></div>
<div class="actionrow">
<div class="votecol"><span class="up">▲</span><span class="karma">2.4K</span><span class="down">▼</span></div>
<span class="meta-icon">💬 48</span>
<span class="meta-icon">↗ Share</span>
<span class="meta-icon">🔖 Save</span>
</div>
</div>
<div class="card">
<div class="head"><span class="sub-av p"></span><span class="subname">r/programming</span> · 1d ago · 210 comments</div>
<h3 class="title">Why boring technology wins in production, ten years later</h3>
<div class="preview p2"></div>
<div class="actionrow">
<div class="votecol"><span class="up">▲</span><span class="karma">891</span><span class="down">▼</span></div>
<span class="meta-icon">💬 210</span>
<span class="meta-icon">↗ Share</span>
</div>
</div>
</div>
<div class="side">
<div class="side-card">
<div class="side-title">Community info</div>
<div class="rec"><span class="rec-av" style="background:#FF4500"></span>r/AskReddit<span class="joinbtn">Joined</span></div>
<div class="rec"><span class="rec-av" style="background:#24A0ED"></span>r/AnimalCrossing<span class="joinbtn">Join</span></div>
<div class="rec"><span class="rec-av" style="background:#0079D3"></span>r/programming<span class="joinbtn">Join</span></div>
</div>
</div>
</div>
<div class="tabbar">
<span class="tab active">Home</span>
<span class="tab">Communities</span>
<span class="tab">+</span>
<span class="tab">Chat</span>
<span class="tab">Inbox</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #cfe700; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #001da3; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #ffffff; color: #212121;
border: 1px solid #001da3; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #d9d9d9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #cfe700; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #e5ff01; color: #212121;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f5ef; color:#212121; box-sizing:border-box;
font-family:'Figtree',Inter,system-ui,sans-serif; }
* { box-sizing:border-box; }
.announce { height:34px; background:#e5ff01; color:#212121; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:600; letter-spacing:.3px; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#fff; border-bottom:1px solid #ededed; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:-.3px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; }
.cart { font-size:13px; font-weight:600; color:#001da3; }
.hero { background:#212121; color:#fff; padding:34px 40px; display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:38px; font-weight:700; letter-spacing:-1px; margin:0 0 8px; line-height:1.1; }
.hero h1 mark { background:#e5ff01; color:#212121; padding:2px 4px; border-radius:2px; }
.hero p { font-size:14px; color:#9e9e9e; margin:0; max-width:340px; }
.btn { display:inline-block; background:#001da3; color:#fff; font-size:14px; font-weight:600; padding:12px 26px; border-radius:4px; margin-top:14px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 40px; }
.card { background:#f2f2f2; border:1px solid #d9d9d9; border-radius:4px; padding:14px; }
.card-img { height:90px; background:linear-gradient(135deg,#001da3,#374fd6); border-radius:2px; margin-bottom:10px; position:relative; }
.card-img::after { content:''; position:absolute; right:10px; bottom:10px; width:40px; height:6px; background:#e5ff01; border-radius:2px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 4px; }
.price-row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.price { font-size:16px; font-weight:700; }
.stepper { display:flex; align-items:center; border:1px solid #d9d9d9; border-radius:999px; font-size:13px; font-weight:600; overflow:hidden; }
.stepper span { padding:4px 10px; }
.stepper .mid { border-left:1px solid #d9d9d9; border-right:1px solid #d9d9d9; }
footer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#212121; color:#d9d9d9;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:12px; }
footer a { color:#d9d9d9; }
</style></head>
<body>
<div class="announce">Free shipping on orders over $75 · Ends Sunday</div>
<nav>
<p class="brand">Baronfig</p>
<div class="navlinks"><span>Notebooks</span><span>Bags</span><span>Desk Accessories</span></div>
<div class="cart">Cart (2)</div>
</nav>
<section class="hero">
<div>
<h1>Tools for <mark>Thinkers</mark></h1>
<p>Notebooks and desk goods built for the person who takes ideas seriously.</p>
<span class="btn">Shop the Confidant</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"></div>
<h3>Confidant Notebook — Dot Grid</h3>
<div class="price-row">
<span class="price">$34</span>
<div class="stepper"><span>−</span><span class="mid">1</span><span>+</span></div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<h3>Squire Rollerball Pen</h3>
<div class="price-row">
<span class="price">$28</span>
<div class="stepper"><span>−</span><span class="mid">1</span><span>+</span></div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<h3>Vellum Sleeve — 13"</h3>
<div class="price-row">
<span class="price">$58</span>
<div class="stepper"><span>−</span><span class="mid">1</span><span>+</span></div>
</div>
</div>
</div>
<footer>
<span>© Baronfig</span>
<a>Notebooks</a><a>Journals</a><a>Bags</a><a>Support</a>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60023; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #e60023;
border: 1px solid #e60023; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fbd6dc; color: #e60023;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.screen { position:relative; width:960px; height:640px; overflow:hidden; padding-top:12px; }
.search-pill { position:absolute; top:12px; left:16px; right:16px; height:44px; background:#FFFFFF;
box-shadow:rgba(0,0,0,0.08) 0 2px 8px; border-radius:500px; display:flex; align-items:center;
padding:0 18px; z-index:5; gap:10px; }
.search-ic { font-size:16px; color:#111111; }
.search-ph { font-size:15px; color:#767676; }
.masonry { position:absolute; top:70px; bottom:56px; left:16px; right:16px; overflow:hidden;
display:flex; gap:8px; }
.col { flex:1; display:flex; flex-direction:column; gap:8px; }
.pin { position:relative; border-radius:16px; overflow:hidden; }
.pin img-area { display:block; }
.pin-h1 { height:210px; background:linear-gradient(160deg,#f6c453,#e88a3b); }
.pin-h2 { height:140px; background:linear-gradient(160deg,#8fd3c7,#4aa8a0); }
.pin-h3 { height:250px; background:linear-gradient(160deg,#c99adf,#8a5bb8); }
.pin-h4 { height:170px; background:linear-gradient(160deg,#f79ca0,#e6607a); }
.pin-h5 { height:120px; background:linear-gradient(160deg,#9fc7f2,#4f7fd6); }
.pin-h6 { height:230px; background:linear-gradient(160deg,#f2e28a,#d9b23c); }
.save-btn { position:absolute; top:8px; right:8px; background:#E60023; color:#fff; font-size:12px;
font-weight:700; padding:8px 16px; border-radius:500px; }
.video-badge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.55); color:#fff; font-size:9px;
font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:8px; letter-spacing:0.4px; }
.pin-caption { padding:6px 2px 0; }
.pin-title { font-size:14px; font-weight:500; line-height:1.3; }
.pin-creator { display:flex; align-items:center; gap:6px; margin-top:6px; }
.avatar { width:20px; height:20px; border-radius:50%; background:#e0607a; }
.uname { font-size:12px; color:#767676; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:#FFFFFF;
border-top:1px solid #E9E9E9; display:flex; align-items:center; justify-content:space-around; }
.tab-ic { width:26px; height:26px; border-radius:6px; background:#767676; }
.tab-ic.active { background:#111111; }
.tab-create { width:48px; height:48px; border-radius:14px; background:#E60023; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:400; }
.brandmark { position:absolute; bottom:66px; right:20px; font-size:11px; font-weight:700; color:#111111;
opacity:0.55; z-index:5; }
</style></head>
<body>
<div class="screen">
<div class="search-pill"><span class="search-ic">🔍</span><span class="search-ph">Search for ideas</span></div>
<div class="masonry">
<div class="col">
<div class="pin pin-h1"><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">Golden hour kitchen remodel with warm oak cabinetry</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">homebyhannah</span></div></div>
<div class="pin pin-h4" style="margin-top:14px"><div class="video-badge">Video</div><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">5-minute desk stretch routine</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">moveflowco</span></div></div>
<div class="pin pin-h5" style="margin-top:14px"><div class="save-btn">Save</div></div>
</div>
<div class="col">
<div class="pin pin-h2"><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">Minimalist entryway styling ideas</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">studio.lin</span></div></div>
<div class="pin pin-h3" style="margin-top:14px"><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">Autumn palette editorial fashion shoot inspiration board</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">edenwears</span></div></div>
</div>
<div class="col">
<div class="pin pin-h6"><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">Hand-lettered wedding invitation set</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">inkandquill</span></div></div>
<div class="pin pin-h1" style="height:150px; margin-top:14px"><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">Ceramic vase collection, earthy tones</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">clay.form</span></div></div>
</div>
</div>
<div class="brandmark">Pinterest (iOS)</div>
<div class="tabbar">
<div class="tab-ic active"></div>
<div class="tab-ic"></div>
<div class="tab-create">+</div>
<div class="tab-ic"></div>
<div class="tab-ic"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3eaeff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3eaeff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #25587c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5a8c; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3eaeff; color: #000000;
border: 1px solid #ff5a8c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3eaeff; color: #111111;
border: 1px solid #3795d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #25587c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5da1ed; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-weight:700; font-size:17px; color:#232f4d; }
.navlinks { display:flex; gap:24px; font-size:15px; color:#4f5971; }
.navlinks span.on { color:#3eaeff; }
.hero { padding:30px 40px 20px; text-align:center; }
.grad-text { font-size:34px; font-weight:600; line-height:1.3; margin:0 0 10px;
background:linear-gradient(270deg,#ff5a8c 20%,#dc6eff 60%,#00c8fa 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:inline-block; }
.hero h1 { color:#232f4d; font-size:20px; margin:0; font-weight:600; }
.bar { height:4px; width:120px; margin:16px auto; border-radius:9999px;
background:linear-gradient(to right,#3eaeff,#ff5a8c,#dc6eff); }
.value { background:#f5f8fb; padding:26px 40px; }
.value h2 { font-size:22px; color:#232f4d; margin:0 0 16px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#fff; border:1px solid #dee0e4; border-radius:16px; padding:16px; }
.card .stat { font-size:22px; font-weight:600;
background:linear-gradient(270deg,#ff5a8c,#dc6eff,#00c8fa); -webkit-background-clip:text;
background-clip:text; -webkit-text-fill-color:transparent; }
.card p { font-size:12.5px; color:#4f5971; margin:6px 0 0; line-height:1.5; }
.press { padding:24px 40px; }
.press h3 { font-size:16px; color:#232f4d; margin:0 0 12px; font-weight:600; }
.plist { display:flex; gap:14px; }
.pcard { flex:1; border:1px solid #dee0e4; border-radius:16px; padding:14px; }
.pcard .img { height:50px; border-radius:8px; background:linear-gradient(135deg,#3eaeff,#4970f5); margin-bottom:8px; }
.pcard h4 { font-size:13px; margin:0; color:#232f4d; }
</style></head>
<body>
<nav>
<span class="brand">Dr.diary</span>
<div class="navlinks"><span>Platform</span><span class="on">Solution</span><span>Brand</span><span>News</span><span>Contact</span></div>
</nav>
<section class="hero">
<div class="grad-text">Leading with data</div>
<h1>Hyper-personalized chronic care</h1>
<div class="bar"></div>
</section>
<section class="value">
<h2>What Dr.diary stands for</h2>
<div class="grid">
<div class="card"><div class="stat">24/7</div><p>Track continuous glucose monitoring data in real time.</p></div>
<div class="card"><div class="stat">Simple</div><p>Health management made easy and engaging, not a lifelong chore.</p></div>
<div class="card"><div class="stat">Together</div><p>Chronic care in partnership with public health centers and university hospitals.</p></div>
</div>
</section>
<section class="press">
<h3>Latest news</h3>
<div class="plist">
<div class="pcard"><div class="img"></div><h4>Public health center CGM pilot expands</h4></div>
<div class="pcard"><div class="img"></div><h4>Joint research on AI-driven chronic care</h4></div>
<div class="pcard"><div class="img"></div><h4>GluArt expands into overseas distribution channels</h4></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1d23; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1d23; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929496; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3464f4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1d23; color: #3464f4;
border: 1px solid #3464f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1d23; color: #f5f5f5;
border: 1px solid #3d4045; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929496; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e2844; color: #3464f4;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>IGAWorks</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#373f49; box-sizing:border-box;
font-family:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e5e7eb; background:#ffffff; }
.brand { font-size:20px; font-weight:900; letter-spacing:-0.5px; color:#1a1d23; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; }
.navlinks span { color:#4f5864; }
.navlinks span.active { color:#1a1d23; font-weight:500; }
.cta-ink { background:#1a1d23; color:#ffffff; border:none; border-radius:12px;
height:38px; padding:0 20px; font-size:14px; font-weight:500; display:inline-flex; align-items:center;
white-space:nowrap; box-shadow:none; }
.hero { display:flex; align-items:flex-start; justify-content:space-between; gap:28px;
padding:28px 40px 20px; }
.hero-left { max-width:460px; }
.badge-red { display:inline-flex; align-items:center; background:rgba(239,67,67,0.1); color:#ef4343;
border-radius:9999px; padding:4px 12px; font-size:12px; font-weight:600; box-shadow:none; }
.hero h1 { font-size:44px; font-weight:900; line-height:1.1; color:#1a1d23; margin:12px 0 0; letter-spacing:-0.5px; }
.hero p { font-size:15px; line-height:1.5; color:#373f49; margin:12px 0 0; max-width:410px; }
.hero-cta-row { display:flex; align-items:center; gap:16px; margin-top:16px; }
.cta-outline { background:#ffffff; color:#1a1d23; border:1px solid #e5e7eb; border-radius:12px;
height:38px; padding:0 18px; font-size:14px; font-weight:500; display:inline-flex; align-items:center;
box-shadow:none; white-space:nowrap; }
.link-blue { color:#3464f4; font-size:14px; font-weight:500; }
.data-panel { width:330px; height:198px; background:#f2f5f8; border-radius:12px; padding:16px 18px;
box-shadow:none; flex-shrink:0; position:relative; }
.data-panel .row-top { display:flex; align-items:center; justify-content:space-between; }
.data-panel .label { font-size:11px; font-weight:600; letter-spacing:0.06em; color:#4f5864; text-transform:uppercase; }
.live-pill { background:rgba(23,207,99,0.12); color:#17cf63; border-radius:9999px; padding:3px 10px;
font-size:11px; font-weight:700; }
.stat { font-size:28px; font-weight:900; color:#1a1d23; margin-top:10px; }
.stat-caption { font-size:12px; color:#4f5864; margin-top:2px; }
.bars { display:flex; align-items:flex-end; gap:7px; height:66px; margin-top:14px; }
.bar { width:22px; border-radius:4px 4px 0 0; background:#1a1d23; }
.bar.now { background:#3464f4; }
.solutions { padding:20px 40px 24px; }
.sol-label { font-size:12px; font-weight:600; letter-spacing:0.06em; color:#4f5864; text-transform:uppercase;
margin:0 0 14px; }
.sol-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sol-card { background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; padding:18px;
box-shadow:none; display:flex; flex-direction:column; gap:8px; }
.sol-tag { font-size:11px; font-weight:600; letter-spacing:0.05em; color:#4f5864; text-transform:uppercase; }
.sol-card h3 { font-size:18px; font-weight:700; color:#1a1d23; margin:0; }
.sol-card p { font-size:13px; line-height:1.5; color:#373f49; margin:0; }
.sol-btn { align-self:flex-start; margin-top:auto; background:#ffffff; color:#1a1d23; border:1px solid #e5e7eb;
border-radius:12px; height:30px; padding:0 14px; font-size:13px; font-weight:500; box-shadow:none; }
.newsletter { background:#f4f4f6; border-top:1px solid #e5e7eb; padding:14px 40px;
display:flex; align-items:center; justify-content:space-between; }
.nl-left b { display:block; font-size:14px; font-weight:700; color:#1a1d23; }
.nl-left span { display:block; font-size:12px; color:#4f5864; margin-top:2px; }
.nl-right { display:flex; align-items:center; gap:10px; }
.nl-input { background:#ffffff; border:1px solid #e5e7eb; border-radius:8px; height:36px; padding:0 14px;
font-size:13px; color:#4f5864; width:190px; display:flex; align-items:center; box-shadow:none; }
.nl-btn { background:#3464f4; color:#ffffff; border:none; border-radius:8px; height:36px; padding:0 18px;
font-size:13px; font-weight:500; box-shadow:none; white-space:nowrap; }
.copyright { font-size:11px; color:#4f5864; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">IGAWorks</p>
<div class="navlinks">
<span class="active">Solution</span><span>Data</span><span>Culture</span><span>Blog</span>
</div>
<button class="cta-ink">Contact Us</button>
</nav>
<section class="hero">
<div class="hero-left">
<span class="badge-red">LIVE MARKET DATA</span>
<h1>Built on Data.<br>Driven by AI.</h1>
<p>The measurement and audience infrastructure behind 4,000+ global brands.</p>
<div class="hero-cta-row">
<button class="cta-outline">Explore Solutions</button>
<span class="link-blue">See the data →</span>
</div>
</div>
<div class="data-panel">
<div class="row-top">
<span class="label">Market Index</span>
<span class="live-pill">● Live</span>
</div>
<div class="stat">+184.6%</div>
<div class="stat-caption">YoY audience growth</div>
<div class="bars">
<div class="bar" style="height:26px"></div>
<div class="bar" style="height:38px"></div>
<div class="bar" style="height:32px"></div>
<div class="bar" style="height:48px"></div>
<div class="bar" style="height:40px"></div>
<div class="bar now" style="height:62px"></div>
</div>
</div>
</section>
<section class="solutions">
<p class="sol-label">Solutions by IGAWorks</p>
<div class="sol-grid">
<div class="sol-card">
<span class="sol-tag">Data Infrastructure</span>
<h3>Audience Analytics</h3>
<p>Independent measurement and attribution across the entire mobile funnel.</p>
<button class="sol-btn">View Solution</button>
</div>
<div class="sol-card">
<span class="sol-tag">AI Action & Creative</span>
<h3>AI Creative Studio</h3>
<p>Generate and test performance creative at scale, guided by live data.</p>
<button class="sol-btn">View Solution</button>
</div>
<div class="sol-card">
<span class="sol-tag">Media & Network</span>
<h3>Audience Network</h3>
<p>Reach verified, high-intent audiences across a trusted media network.</p>
<button class="sol-btn">View Solution</button>
</div>
</div>
</section>
<section class="newsletter">
<div class="nl-left">
<b>Get weekly insights.</b>
<span>Data and AI, every Monday.</span>
</div>
<div class="nl-right">
<span class="nl-input">[email protected]</span>
<button class="nl-btn">Subscribe</button>
<span class="copyright">© IGAWorks</span>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #c96442; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #c96442; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e1b4a4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f4ed; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c96442; color: #f5f4ed;
border: 1px solid #f5f4ed; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #c96442; color: #f5f5f5;
border: 1px solid #d07b5f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e1b4a4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d07b5d; color: #f5f4ed;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f4ed; color:#141413; box-sizing:border-box;
font-family:Georgia, "Times New Roman", serif; }
* { box-sizing:border-box; }
.sans { font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.nav .brand { font-weight:600; font-size:17px; }
.nav .links { display:flex; gap:22px; font-size:14px; color:#5e5d59; }
.navbtn { background:#c96442; color:#fff; border-radius:8px; padding:8px 18px; font-size:14px; }
.hero { text-align:center; padding:20px 60px 0; }
.hero h1 { font-size:44px; font-weight:500; line-height:1.15; margin:0 0 14px; }
.hero p { font-size:16px; color:#5e5d59; margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:26px 32px 0; }
.card { background:#ffffff; border:1px solid #f0eee6; border-radius:24px; padding:22px; }
.card .swatch { width:32px; height:32px; border-radius:10px; margin-bottom:12px; }
.sw1{background:#c96442;} .sw2{background:#30302e;} .sw3{background:#e8e6dc;border:1px solid #d8d6cc;}
.card h4 { font-size:16px; font-weight:600; margin:0 0 6px; }
.card p { font-size:12px; color:#5e5d59; margin:0; line-height:1.5; }
.pricing { margin:20px 32px 0; background:#30302e; border-radius:24px; padding:26px 34px; color:#fff;
display:flex; align-items:center; justify-content:space-between; }
.pricing h3 { font-size:20px; margin:0 0 4px; }
.pricing p { font-size:12px; color:#c7c5bd; margin:0; }
.pricebtn { background:#c96442; color:#fff; border-radius:8px; padding:10px 22px; font-size:13px; }
</style></head>
<body class="sans">
<nav class="nav">
<div class="brand">Claude (Anthropic)</div>
<div class="links"><span>Overview</span><span>Team</span><span>Enterprise</span><span>Pricing</span></div>
<button class="navbtn">Start chatting</button>
</nav>
<div class="hero">
<h1>Bring documents, tools, and web knowledge together</h1>
<p class="sans">A thinking partner for the work that actually matters.</p>
</div>
<div class="cards">
<div class="card"><div class="swatch sw1"></div><h4 class="sans">Claude for Work</h4><p>Draft, research, and reason across your team's context.</p></div>
<div class="card"><div class="swatch sw2"></div><h4 class="sans">Claude Code</h4><p>An agentic coding partner that reads and writes real codebases.</p></div>
<div class="card"><div class="swatch sw3"></div><h4 class="sans">API & Console</h4><p>Build reliable, steerable AI systems on the Claude API.</p></div>
</div>
<div class="pricing sans">
<div><h3>Claude Pro</h3><p>More usage, priority access, and early features.</p></div>
<div class="pricebtn">See plans</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #593bfb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #593bfb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #afa1f8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5ce0b8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #593bfb; color: #5ce0b8;
border: 1px solid #5ce0b8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #593bfb; color: #f5f5f5;
border: 1px solid #7259fa; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #afa1f8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5955f0; color: #5ce0b8;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0F0F12; color:#F2F1F6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { display:flex; width:960px; height:640px; }
.photocol { width:560px; height:640px; position:relative; background:linear-gradient(160deg,#2a2733,#0F0F12 70%); }
.dots { position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
.dots i { width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,0.45); }
.dots i.on { width:18px; background:#fff; }
.floatbtn { position:absolute; top:18px; width:38px; height:38px; border-radius:50%; background:rgba(15,15,18,0.55); display:flex; align-items:center; justify-content:center; }
.fb1 { left:18px; } .fb2 { right:64px; } .fb3 { right:18px; color:#5CE0B8; }
.detail { flex:1; display:flex; flex-direction:column; padding:24px 30px; position:relative; }
.title { font-size:23px; font-weight:800; }
.specs { display:flex; gap:10px; margin:14px 0; }
.spec { flex:1; background:#1A1A1F; border:1px solid #2D2D35; border-radius:12px; padding:10px; text-align:center; }
.spec .v { font-size:13px; font-weight:700; }
.spec .l { font-size:10px; color:#A4A2B3; margin-top:2px; }
.spec .ic { color:#5CE0B8; font-size:16px; }
.host { display:flex; align-items:center; gap:12px; background:#1A1A1F; border:1px solid #2D2D35; border-radius:14px; padding:12px 14px; margin-bottom:14px; }
.hav { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#593BFB,#5CE0B8); }
.hname { font-size:15px; font-weight:700; }
.allstar { background:rgba(92,224,184,0.16); color:#5CE0B8; font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; margin-left:8px; }
.hsub { font-size:12px; color:#A4A2B3; margin-top:2px; }
.bookbar { margin-top:auto; display:flex; align-items:center; padding-top:14px; border-top:1px solid #2D2D35; }
.price { font-size:20px; font-weight:800; }
.priceunit { font-size:13px; color:#A4A2B3; }
.esttotal { font-size:11px; color:#5CE0B8; margin-top:2px; }
.ctabtn { margin-left:auto; background:#593BFB; color:#fff; font-weight:800; font-size:16px; padding:14px 32px; border-radius:10px; }
</style></head>
<body>
<div class="stage">
<div class="photocol">
<div class="floatbtn fb1">‹</div>
<div class="floatbtn fb2">↗</div>
<div class="floatbtn fb3">♡</div>
<div class="dots"><i class="on"></i><i></i><i></i><i></i></div>
</div>
<div class="detail">
<div class="title">Turo (iOS) · 2023</div>
<div class="specs">
<div class="spec"><div class="ic">⚡</div><div class="v">Electric</div><div class="l">Fuel</div></div>
<div class="spec"><div class="ic">👤</div><div class="v">5 seats</div><div class="l">Capacity</div></div>
<div class="spec"><div class="ic">⚙</div><div class="v">Auto</div><div class="l">Transmission</div></div>
</div>
<div class="host">
<div class="hav"></div>
<div><div class="hname">Marcus J. <span class="allstar">★ ALL-STAR</span></div><div class="hsub">214 trips · Responds in ~10 min</div></div>
</div>
<p style="font-size:14px;color:#A4A2B3;line-height:1.5">Clean, quiet, and quick off the line — perfect for a coastal weekend. Free cancellation up to 24h before your trip.</p>
<div class="bookbar">
<div><div class="price">$83<span class="priceunit"> / day</span></div><div class="esttotal">$249 est. total · 3 days</div></div>
<div class="ctabtn">Continue</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Akkurat,"Source Sans Pro",-apple-system,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #000000; }
.brand { font-weight:700; font-size:20px; letter-spacing:-0.5px; font-stretch:condensed; }
.navlinks { display:flex; gap:18px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.btn { background:#e90c17; color:#ffffff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
padding:10px 20px; border-radius:2px; }
.lead { display:flex; gap:24px; padding:20px 32px; border-bottom:1px solid #cccccc; }
.lead .main { flex:2; }
.kicker { color:#e90c17; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.lead h1 { font-size:38px; font-weight:700; line-height:0.98; margin:8px 0 10px; letter-spacing:-0.5px; }
.deck { font-size:17px; color:#333333; margin:0; line-height:1.36; font-style:italic; }
.byline { font-size:12px; font-weight:700; text-transform:uppercase; color:#767676; margin-top:10px; }
.lead .side { flex:1; display:flex; flex-direction:column; gap:14px; }
.story { border-top:1px solid #cccccc; padding-top:10px; }
.story .kicker { font-size:11px; }
.story h4 { font-size:16px; font-weight:600; margin:6px 0 4px; line-height:1.15; }
.story .by { font-size:11px; font-weight:700; text-transform:uppercase; color:#767676; }
.river { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:14px 32px; }
.rcard { border-right:1px solid #cccccc; padding:0 16px; }
.rcard:last-child { border-right:none; }
.rimg { height:70px; background:#f4f4f4; margin-bottom:8px; }
.rcard h4 { font-size:16px; font-weight:600; margin:0 0 6px; line-height:1.1; }
.flag { background:#e90c17; color:#ffffff; font-size:11px; font-weight:700; text-transform:uppercase; padding:3px 8px; display:inline-block; margin-bottom:6px; }
</style></head>
<body>
<nav>
<span class="brand">WIRED</span>
<div class="navlinks"><span>Security</span><span>Business</span><span>Science</span><span>Culture</span><span>Gear</span></div>
<span class="btn">Subscribe</span>
</nav>
<section class="lead">
<div class="main">
<span class="kicker">Artificial Intelligence</span>
<h1>The AI Boom Has a Water Problem</h1>
<p class="deck">New data centers built to train the next generation of models are quietly straining the aquifers beneath them.</p>
<div class="byline">By Dana Whitfield</div>
</div>
<div class="side">
<div class="story"><span class="kicker">Security</span><h4>A phishing kit is teaching itself to write better emails</h4><span class="by">By Marcus Feld</span></div>
<div class="story"><span class="kicker">Science</span><h4>The quiet return of nuclear-powered spacecraft</h4><span class="by">By Priya Anand</span></div>
</div>
</section>
<section class="river">
<div class="rcard"><div class="rimg"></div><span class="flag">Business</span><h4>Inside the chip shortage nobody saw coming twice</h4></div>
<div class="rcard"><div class="rimg"></div><span class="flag">Culture</span><h4>Why every streaming app now looks the same</h4></div>
<div class="rcard"><div class="rimg"></div><span class="flag">Gear</span><h4>We tested the phone everyone said was dead on arrival</h4></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #328af6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #328af6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9dc5f5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #469f68; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #328af6; color: #000000;
border: 1px solid #469f68; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #328af6; color: #f5f5f5;
border: 1px solid #519bf6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9dc5f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #358ddf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a2128; box-sizing:border-box;
font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e2e5e9; background:#ffffff; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:24px; font-size:12px; color:#1a2128; }
.navlinks span:first-child { color:#328af6; font-weight:700; }
.nav-right { display:flex; gap:8px; align-items:center; }
.btn-neutral { background:#f1f5f9; color:#1a2128; border:none; border-radius:8px; height:32px; padding:0 14px;
font-size:13px; font-weight:700; }
.btn-primary { background:#328af6; color:#ffffff; border:none; border-radius:8px; height:32px; padding:0 14px;
font-size:13px; font-weight:700; }
.headband { flex:0 0 84px; background:#f1f5f9; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; }
.headband h1 { font-size:24px; font-weight:700; line-height:1.3; margin:0; letter-spacing:-0.3px; }
.headband p { font-size:13px; color:#4c5967; margin:4px 0 0; }
.headband .badge { background:#edf5ff; color:#328af6; border-radius:8px; padding:5px 10px; font-size:12px; font-weight:700; }
.content { flex:1 1 auto; display:flex; gap:18px; padding:18px 36px 22px; min-height:0; }
.cyclecard { width:270px; flex:0 0 270px; background:#ffffff; border-radius:12px; box-shadow:rgba(0,0,0,0.08) 0px 8px 36px 0px;
padding:20px; display:flex; flex-direction:column; gap:12px; }
.cyclecard h2 { font-size:16px; font-weight:700; margin:0; }
.ring-wrap { display:flex; align-items:center; gap:16px; }
.ring { width:88px; height:88px; border-radius:9999px; flex:0 0 88px;
background: conic-gradient(#328af6 0deg 252deg, #e2e5e9 252deg 360deg);
display:flex; align-items:center; justify-content:center; }
.ring-inner { width:64px; height:64px; border-radius:9999px; background:#ffffff; display:flex; align-items:center; justify-content:center;
font-size:18px; font-weight:700; color:#1a2128; }
.ring-meta div:first-child { font-size:12px; color:#677583; }
.ring-meta div:last-child { font-size:13px; font-weight:700; margin-top:2px; }
.mini-stats { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.mini-row { display:flex; justify-content:space-between; font-size:12px; color:#4c5967; border-top:1px solid #e2e5e9; padding-top:8px; }
.mini-row b { color:#1a2128; }
.cta-block { margin-top:auto; background:#469f68; color:#ffffff; border-radius:8px; text-align:center;
font-size:13px; font-weight:700; padding:10px; }
.listcard { flex:1 1 auto; background:#ffffff; border-radius:12px; box-shadow:rgba(0,0,0,0.08) 0px 8px 36px 0px;
padding:18px 20px; display:flex; flex-direction:column; min-width:0; }
.listcard h2 { font-size:16px; font-weight:700; margin:0 0 10px; }
.row { display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid #e2e5e9; }
.row:first-of-type { border-top:none; }
.avatar { width:34px; height:34px; border-radius:9999px; flex:0 0 34px; }
.a1 { background:#5d3dd5; } .a2 { background:#ffd750; } .a3 { background:#c7317b; }
.a4 { background:#469f68; } .a5 { background:#328af6; }
.who { flex:1; min-width:0; }
.who b { font-size:14px; display:block; }
.who span { font-size:12px; color:#677583; }
.score { font-size:13px; font-weight:700; color:#1a2128; width:46px; text-align:right; }
.status { border-radius:8px; padding:4px 10px; font-size:11px; font-weight:700; width:96px; text-align:center; }
.status.done { background:#edf5ff; color:#328af6; }
.status.progress { background:#fff8e6; color:#a67c00; }
.status.notstarted { background:#f1f5f9; color:#677583; }
</style></head>
<body>
<nav>
<p class="brand">Lemonbase</p>
<div class="navlinks"><span>Performance</span><span>Engagement</span><span>Pricing</span><span>Leadership</span></div>
<div class="nav-right">
<button class="btn-neutral">Log in</button>
<button class="btn-primary">Contact Sales</button>
</div>
</nav>
<section class="headband">
<div>
<h1>Change for high performance.</h1>
<p>Every tool your team needs for evaluation, goals, and feedback — in one place.</p>
</div>
<span class="badge">Q3 REVIEW CYCLE</span>
</section>
<section class="content">
<div class="cyclecard">
<h2>Review Cycle Progress</h2>
<div class="ring-wrap">
<div class="ring"><div class="ring-inner">70%</div></div>
<div class="ring-meta"><div>Completed</div><div>84 / 120 reviews</div></div>
</div>
<div class="mini-stats">
<div class="mini-row"><span>Self-review submitted</span><b>96</b></div>
<div class="mini-row"><span>Manager review submitted</span><b>84</b></div>
<div class="mini-row"><span>Calibration pending</span><b>12</b></div>
</div>
<div class="cta-block">Talk to an Expert</div>
</div>
<div class="listcard">
<h2>Team Evaluations</h2>
<div class="row"><div class="avatar a1"></div><div class="who"><b>Jihoon Kang</b><span>Product Team · L4</span></div><div class="score">4.6 / 5</div><div class="status done">Completed</div></div>
<div class="row"><div class="avatar a2"></div><div class="who"><b>Soyeon Baek</b><span>Design Team · L3</span></div><div class="score">4.2 / 5</div><div class="status done">Completed</div></div>
<div class="row"><div class="avatar a3"></div><div class="who"><b>Minji Cho</b><span>People Team · L5</span></div><div class="score">—</div><div class="status progress">In Progress</div></div>
<div class="row"><div class="avatar a4"></div><div class="who"><b>Doyeon Lim</b><span>Engineering · L4</span></div><div class="score">4.8 / 5</div><div class="status done">Completed</div></div>
<div class="row"><div class="avatar a5"></div><div class="who"><b>Junho Park</b><span>Sales Team · L2</span></div><div class="score">—</div><div class="status notstarted">Not Started</div></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #221155;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #221155;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #221155; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d85030; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #d85030;
border: 1px solid #d85030; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #221155;
border: 1px solid #c8c4d4; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #f5f5f6; color: #767676;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#221155; box-sizing:border-box;
font-family:'Gotham','GothamBook', Arial, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
/* ---- nav ---- */
nav { flex:0 0 58px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e0e0e0; background:#ffffff; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; color:#3d3d3d; }
.navlinks span.active { color:#221155; border-bottom:2px solid #d85030; padding-bottom:18px; }
.navicons { display:flex; align-items:center; gap:14px; }
.icon-dot { width:30px; height:30px; border-radius:4px; border:1px solid #e0e0e0; display:flex;
align-items:center; justify-content:center; font-size:12px; color:#767676; }
/* ---- hero ---- */
.hero { flex:0 0 170px; background:#221155; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; position:relative; overflow:hidden; }
.hero-copy { max-width:500px; z-index:2; }
.badge-tag { display:inline-block; background:#0a7cff; color:#ffffff; font-size:10px; font-weight:700;
letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:2px; margin-bottom:10px; }
.hero h1 { font-size:30px; font-weight:700; line-height:1.15; margin:0 0 8px; letter-spacing:-0.4px; color:#ffffff; }
.hero p { font-size:13px; color:#c9c2df; margin:0 0 14px; line-height:1.4; max-width:420px; }
.hero-actions { display:flex; gap:10px; }
.btn-primary { background:#d85030; color:#ffffff; border:none; border-radius:4px;
padding:10px 20px; font-weight:600; font-size:13px; letter-spacing:0.4px; text-transform:uppercase; white-space:nowrap; }
.btn-outline-navy { background:transparent; color:#ffffff; border:1.5px solid #ffffff; border-radius:4px;
padding:9px 18px; font-weight:600; font-size:13px; letter-spacing:0.4px; text-transform:uppercase; white-space:nowrap; }
.hero-rig { position:relative; width:230px; height:120px; z-index:1; flex-shrink:0; }
.rig-arm { position:absolute; background:linear-gradient(180deg,#4a3d78,#33285c); border-radius:3px; }
.rig-a1 { width:14px; height:90px; left:20px; top:10px; }
.rig-a2 { width:110px; height:14px; left:20px; top:10px; }
.rig-a3 { width:14px; height:60px; left:116px; top:10px; }
.rig-mon { width:88px; height:64px; right:0; top:28px; background:linear-gradient(135deg,#3d3160,#241a45);
border:2px solid #5c4e8f; border-radius:4px; }
.rig-mon::after { content:''; position:absolute; inset:8px; background:#0a7cff; opacity:0.25; border-radius:2px; }
/* ---- pills ---- */
.pillbar { flex:0 0 42px; display:flex; align-items:center; gap:8px; padding:0 32px; background:#f5f5f6;
border-bottom:1px solid #e0e0e0; }
.pill { font-size:12px; font-weight:600; padding:5px 14px; border-radius:9999px; border:1px solid #e0e0e0;
background:#f5f5f6; color:#3d3d3d; white-space:nowrap; }
.pill.active { background:#d85030; color:#ffffff; border-color:#d85030; }
/* ---- cards ---- */
.cards { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 32px; overflow:hidden; }
.card { border:1px solid #e0e0e0; border-radius:4px; padding:14px; display:flex; flex-direction:column; gap:8px;
background:#ffffff; }
.card:hover, .card { border-color:#e0e0e0; }
.swatch { height:74px; border-radius:4px; background:#f5f5f6; position:relative; overflow:hidden; }
.swatch::after { content:''; position:absolute; inset:0; margin:auto; width:60%; height:46%;
background:linear-gradient(135deg,#d9d9dc,#c3c3c8); border-radius:3px; }
.card .modelno { font-size:10px; font-weight:700; color:#767676; letter-spacing:0.5px; text-transform:uppercase; }
.card h3 { font-size:14px; font-weight:600; margin:0; line-height:1.25; color:#221155; }
.specrow { display:flex; flex-wrap:wrap; gap:5px; }
.spec-badge { font-size:9.5px; font-weight:500; color:#767676; background:#f5f5f6; border:1px solid #e0e0e0;
border-radius:2px; padding:2px 6px; white-space:nowrap; }
.card-cta { margin-top:auto; font-size:11px; font-weight:600; color:#d85030; border:1px solid #d85030;
border-radius:4px; padding:6px 10px; text-align:center; text-transform:uppercase; letter-spacing:0.3px; }
/* ---- footer ---- */
footer { flex:0 0 46px; background:#221155; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-size:11px; color:#c9c2df; }
footer a, footer span.link { color:#4593ed; }
</style></head>
<body>
<nav>
<p class="brand">Atdec</p>
<div class="navlinks">
<span class="active">Desk Mounts</span><span>Wall Mounts</span><span>Ceiling Mounts</span>
<span>Floor Stands</span><span>Accessories</span>
</div>
<div class="navicons">
<div class="icon-dot">Q</div>
<div class="icon-dot">A</div>
</div>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="badge-tag">AWMS Series</span>
<h1>Engineered to hold. Built to spec.</h1>
<p>VESA-compliant mounting systems for broadcast studios, trading floors, and enterprise AV rollouts.</p>
<div class="hero-actions">
<button class="btn-primary">Request Quote</button>
<button class="btn-outline-navy">Download Catalog</button>
</div>
</div>
<div class="hero-rig">
<div class="rig-arm rig-a1"></div>
<div class="rig-arm rig-a2"></div>
<div class="rig-arm rig-a3"></div>
<div class="rig-mon"></div>
</div>
</section>
<div class="pillbar">
<span class="pill">All</span>
<span class="pill active">Desk Mounts</span>
<span class="pill">Wall Mounts</span>
<span class="pill">Ceiling Mounts</span>
<span class="pill">Floor Stands</span>
<span class="pill">Accessories</span>
</div>
<section class="cards">
<div class="card">
<div class="swatch"></div>
<span class="modelno">AWMS-2B</span>
<h3>Single Monitor Desk Arm</h3>
<div class="specrow">
<span class="spec-badge">9 kg Load</span>
<span class="spec-badge">VESA 75–100</span>
</div>
<div class="card-cta">View Specs</div>
</div>
<div class="card">
<div class="swatch"></div>
<span class="modelno">CPM-500</span>
<h3>Ceiling Projector Mount</h3>
<div class="specrow">
<span class="spec-badge">25 kg Load</span>
<span class="spec-badge">IP54 Rated</span>
</div>
<div class="card-cta">View Specs</div>
</div>
<div class="card">
<div class="swatch"></div>
<span class="modelno">CT-8000</span>
<h3>Heavy-Duty Mobile TV Cart</h3>
<div class="specrow">
<span class="spec-badge">75 kg Load</span>
<span class="spec-badge">VESA 400×200</span>
</div>
<div class="card-cta">View Specs</div>
</div>
</section>
<footer>
<span>© Atdec</span>
<span><span class="link">Mounts</span> · <span class="link">Support</span> · <span class="link">Company</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #aba1fa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #aba1fa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #56527a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #aba1fa; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #aba1fa; color: #111111;
border: 1px solid #928ad5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #56527a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #9087d2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; font-family:"Inter", "Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
.split { display:flex; height:100%; }
.corp { width:400px; background:#ffffff; display:flex; flex-direction:column; justify-content:center; padding:0 34px; }
.corp .brand { font-size:14px; margin-bottom:18px; letter-spacing:0.4px; }
.corp h1 { font-size:42px; font-weight:400; line-height:1.2; margin:0 0 16px; }
.corp .code { font-family:monospace; font-size:12px; color:#333; background:#f7f7f7; padding:8px 10px; border-radius:4px; }
.corp .navrow { display:flex; gap:16px; font-size:12px; margin-top:26px; color:#000; }
.prod { flex:1; background:#090719; color:#fff; display:flex; flex-direction:column; }
.prodnav { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; }
.prodnav .links { display:flex; gap:16px; font-size:13px; }
.prodnav .links span:not(:first-child) { opacity:0.5; }
.lang { border:3px solid #aba1fa; color:#aba1fa; border-radius:8px; padding:6px 12px; font-size:11px; font-weight:700; }
.prodhero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:0 20px; text-align:center; }
.prodhero h2 { font-size:26px; margin:0; color:#aba1fa; font-weight:700; }
.chips { display:flex; gap:10px; }
.chip { border-radius:28px; padding:10px 20px; font-size:14px; font-weight:700; }
.chip.on { background:#030112; color:#fff; }
.chip.off { background:#cecdd5; color:#030112; }
.cta { background:#ffffff; color:#150e2d; border:none; border-radius:20px; padding:12px 30px; font-size:15px; font-weight:700; }
</style></head>
<body>
<div class="split">
<div class="corp">
<div class="brand">POZAlabs</div>
<h1>Ignite your creativity</h1>
<div class="code">with POZAlabs as technology:<br> expand(your_creativity)</div>
<div class="navrow"><span>About</span><span>Service</span><span>Research</span><span>Recruit</span></div>
</div>
<div class="prod">
<div class="prodnav">
<div class="links"><span>MUSIA</span><span>PRODUCTS</span><span>PRICING</span><span>SUPPORT</span></div>
<div class="lang">ENGLISH</div>
</div>
<div class="prodhero">
<h2>MUSIA ONE</h2>
<div class="chips">
<div class="chip on">Songwriting</div>
<div class="chip off">Instrument</div>
<div class="chip off">Download</div>
</div>
<button class="cta">TRY FOR FREE</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c0e14; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0c0e14;
border: 1px solid #0c0e14; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8d8d9; color: #0c0e14;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#10131A; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric:tabular-nums; }
.wrap { display:flex; height:640px; }
.left { width:400px; padding:20px 22px; overflow:hidden; position:relative; }
.brand { font-size:16px; font-weight:900; margin-bottom:14px; }
.od-card { background:#F4F5F8; border:1px solid #E3E5EC; border-radius:14px; padding:12px 14px; margin-bottom:16px; }
.od-row { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:15px; font-weight:600; }
.dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dot.from { background:#8A93A3; }
.dot.to { background:#2B5BFF; }
.od-line { width:2px; height:14px; background:#E3E5EC; margin-left:4px; }
.route { background:#F4F5F8; border:1px solid #E3E5EC; border-radius:16px; padding:14px 16px; margin-bottom:12px; }
.route.best { border-color:#00C281; }
.route-head { display:flex; align-items:baseline; margin-bottom:10px; }
.eta { font-size:22px; font-weight:800; }
.etamin { font-size:13px; font-weight:600; color:#5A6473; margin-left:4px; }
.tag { margin-left:auto; font-size:10px; font-weight:800; letter-spacing:0.4px; text-transform:uppercase;
padding:4px 9px; border-radius:999px; background:rgba(0,194,129,0.18); color:#00C281; }
.tag.blue { background:rgba(43,91,255,0.14); color:#2B5BFF; }
.legstrip { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.chip { display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:8px; color:#fff;
font-size:11px; font-weight:800; }
.arrow { color:#8A93A3; font-size:11px; }
.disrupt { display:flex; align-items:center; gap:8px; background:rgba(255,138,0,0.14); border:1px solid #FF8A00;
border-radius:10px; padding:9px 12px; font-size:13px; font-weight:700; color:#C96500; margin-top:6px; }
.go { position:absolute; left:22px; right:22px; bottom:20px; height:54px; border-radius:27px; background:#00C281;
display:flex; align-items:center; justify-content:center; gap:8px; color:#003322; font-size:18px; font-weight:900;
letter-spacing:0.4px; box-shadow:0 10px 22px -10px rgba(0,194,129,0.7); }
.right { flex:1; position:relative; background:linear-gradient(160deg,#EAF0FB,#DCE6F7); overflow:hidden; }
.mapline { position:absolute; border-radius:4px; }
.l1 { width:6px; height:210px; left:120px; top:60px; background:#00B894; transform:rotate(12deg); }
.l2 { width:6px; height:180px; left:220px; top:180px; background:#2B5BFF; transform:rotate(-18deg); }
.l3 { width:6px; height:150px; left:300px; top:320px; background:#E8453C; transform:rotate(30deg); }
.pin { position:absolute; width:16px; height:16px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
.pin.a { background:#8A93A3; left:112px; top:50px; }
.pin.b { background:#2B5BFF; left:292px; top:454px; }
.board { position:absolute; right:24px; top:24px; width:230px; background:#1E212B; border-radius:14px; overflow:hidden; }
.board-row { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid #282C38; }
.board-row:last-child { border-bottom:none; }
.lbadge { width:34px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:11px; font-weight:900; flex-shrink:0; }
.bdest { font-size:13px; font-weight:600; color:#ECEEF3; flex:1; }
.bmin { font-size:15px; font-weight:800; }
</style></head>
<body>
<div class="wrap">
<div class="left">
<div class="brand">Citymapper (iOS)</div>
<div class="od-card">
<div class="od-row"><span class="dot from"></span> Home — Maple St</div>
<div class="od-line"></div>
<div class="od-row"><span class="dot to"></span> Tate Modern</div>
</div>
<div class="route best">
<div class="route-head"><span class="eta tnum">24</span><span class="etamin">min</span><span class="tag">Fastest</span></div>
<div class="legstrip">
<span class="chip" style="background:#00B894;">🚶 4</span>
<span class="arrow">›</span>
<span class="chip" style="background:#2B5BFF;">◉ Victoria</span>
<span class="arrow">›</span>
<span class="chip" style="background:#00B894;">🚶 6</span>
</div>
</div>
<div class="route">
<div class="route-head"><span class="eta tnum">31</span><span class="etamin">min</span><span class="tag blue">Cheapest</span></div>
<div class="legstrip">
<span class="chip" style="background:#00B894;">🚶 8</span>
<span class="arrow">›</span>
<span class="chip" style="background:#E8453C;">🚌 63</span>
</div>
<div class="disrupt">⚠ Victoria line: minor delays</div>
</div>
<div class="go">▶ GO</div>
</div>
<div class="right">
<div class="mapline l1"></div>
<div class="mapline l2"></div>
<div class="mapline l3"></div>
<div class="pin a"></div>
<div class="pin b"></div>
<div class="board">
<div class="board-row"><div class="lbadge" style="background:#2B5BFF;">VIC</div><div class="bdest">Brixton</div><div class="bmin" style="color:#00C281;">4</div></div>
<div class="board-row"><div class="lbadge" style="background:#E8453C;">63</div><div class="bdest">Kings Cross</div><div class="bmin" style="color:#FF8A00;">2</div></div>
<div class="board-row"><div class="lbadge" style="background:#8E44D8;">NR</div><div class="bdest">Clapham Jn</div><div class="bmin" style="color:#00C281;">9</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.4; background: #e60012; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #e60012; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; line-height: 1.3; background: #e60012; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:'Courier New',Courier,'Lucida Sans Typewriter','Lucida Typewriter',monospace; }
* { box-sizing:border-box; }
nav { height:56px; border-bottom:2px solid #000000; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:17px; font-weight:700; letter-spacing:.05em; }
.navlinks { display:flex; gap:24px; font-size:11px; text-transform:uppercase; color:#666666; }
.navlinks span.on { color:#e60012; }
.search { border:1px solid #cccccc; border-radius:9999px; padding:6px 16px; font-size:11px; width:150px; }
.wrap { display:flex; height:522px; }
.exploded { width:460px; border-right:2px solid #000000; position:relative; display:flex; align-items:center; justify-content:center; }
.part { position:absolute; }
.shell { width:170px; height:100px; border-radius:50px/44px; background:#f5f5f5; border:2px solid #000; top:210px; left:60px; }
.dpad { width:52px; height:52px; background:#444444; top:150px; left:100px; clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%); }
.btn-a { width:22px; height:22px; border-radius:50%; background:#e60012; top:170px; right:120px; }
.btn-b { width:22px; height:22px; border-radius:50%; background:#0066cc; top:196px; right:150px; }
.btn-x { width:22px; height:22px; border-radius:50%; background:#ffcc00; top:196px; right:98px; }
.btn-y { width:22px; height:22px; border-radius:50%; background:#00cc66; top:222px; right:120px; }
.callout { position:absolute; font-size:9px; color:#666666; }
.c1 { top:130px; left:20px; }
.c2 { top:340px; right:30px; }
.info { flex:1; padding:32px 36px; display:flex; flex-direction:column; gap:14px; }
.info .cat { font-size:11px; color:#666666; text-transform:uppercase; }
.info h1 { font-size:22px; font-weight:700; margin:0; }
.colorway-row { display:flex; gap:8px; }
.colorway { width:26px; height:26px; border-radius:50%; border:2px solid #000; }
.cw1{background:#e60012}.cw2{background:#0066cc}.cw3{background:#ffcc00}.cw4{background:#000000}
.spec-list { font-size:11px; color:#333333; line-height:1.9; border-top:2px solid #000; border-bottom:2px solid #000; padding:10px 0; }
.desc { font-size:12px; color:#333333; line-height:1.6; max-width:420px; }
.price { font-size:20px; font-weight:700; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#000000; color:#fff; border:none; padding:13px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.btn-wish { border:2px solid #000; padding:13px 18px; font-size:12px; }
footer { height:62px; border-top:2px solid #000000; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:10px; color:#666666; }
</style></head>
<body>
<nav>
<p class="brand">8bitdo</p>
<div class="navlinks"><span>Controllers</span><span class="on">Pro 2</span><span>Retro</span><span>Support</span></div>
<span class="search">SEARCH_</span>
</nav>
<div class="wrap">
<div class="exploded">
<div class="part shell"></div>
<div class="part dpad"></div>
<div class="part btn-a"></div>
<div class="part btn-b"></div>
<div class="part btn-x"></div>
<div class="part btn-y"></div>
<span class="callout c1">D-PAD_MODULE</span>
<span class="callout c2">SHELL_ABS_1.2MM</span>
</div>
<div class="info">
<span class="cat">CONTROLLER // WIRED+WIRELESS</span>
<h1>Pro 2 Controller</h1>
<div class="colorway-row">
<div class="colorway cw1"></div><div class="colorway cw2"></div><div class="colorway cw3"></div><div class="colorway cw4"></div>
</div>
<div class="spec-list">
LATENCY....... 4ms BT<br>
BATTERY....... 20HR<br>
PLATFORM...... SWITCH/PC/ANDROID
</div>
<p class="desc">Every part earns its place. Hall-effect sticks, mechanical L/R buttons, and a 6-axis motion sensor packed into a shell built like a small machine.</p>
<span class="price">$24.99</span>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">+</button>
</div>
</div>
</div>
<footer><span>© 8bitdo</span><span>WARRANTY // SUPPORT // FIRMWARE</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; letter-spacing: -0.25px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #1a5fa8; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #ffffff; color: #1a5fa8;
border: 1px solid #1a5fa8; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.36; letter-spacing: 0.2px; background: #c0392b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'Courier New',Courier,'Lucida Console',monospace; }
nav { height:56px; background:#313131; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#c9c9c9; }
.navlinks span.on { color:#e05c00; }
.partsearch { background:#ffffff; border-radius:6px; padding:7px 16px; font-size:11px; color:#767676; width:210px; }
.breadcrumb { height:24px; padding:6px 30px 0; font-size:11px; color:#767676; }
.wrap { display:flex; height:500px; padding:12px 30px; gap:26px; }
.photo { width:280px; flex-shrink:0; background:#f5f5f5; border-radius:6px; display:flex; align-items:center; justify-content:center; position:relative; }
.unit { width:180px; height:200px; border-radius:6px; background:linear-gradient(160deg,#dfe4e8,#a0bddb 60%,#1a5fa8 100%); position:relative; }
.unit::before { content:''; position:absolute; inset:16px; border:2px solid rgba(255,255,255,.5); border-radius:3px; }
.quote-badge { position:absolute; top:14px; left:14px; background:#e05c00; color:#fff; font-size:10px; font-weight:700; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:10px; }
.model-no { font-size:11px; color:#767676; }
.info h1 { font-size:20px; font-weight:700; margin:0; line-height:1.3; }
.spec-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; border-top:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; padding:10px 0; font-size:11px; }
.spec-grid div b { display:block; font-size:13px; color:#1a5fa8; }
.desc { font-size:12.5px; color:#444444; line-height:1.6; max-width:460px; }
.badges-row { display:flex; gap:8px; }
.badges-row span { font-size:10.5px; border:1px solid #d6d6d6; border-radius:4px; padding:4px 10px; color:#444; }
.price-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.price { font-size:20px; font-weight:700; color:#313131; }
.btn-buy { background:#1a5fa8; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:12px; font-weight:700; }
.btn-quote { background:#e05c00; color:#fff; border:none; border-radius:4px; padding:12px 20px; font-size:12px; font-weight:700; }
footer { height:60px; background:#f5f5f5; display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:10.5px; color:#767676; }
</style></head>
<body>
<nav>
<p class="brand">AC Direct</p>
<div class="navlinks"><span>Split Systems</span><span class="on">Air Handlers</span><span>Filtration</span><span>Support</span></div>
<span class="partsearch mono">Part # lookup…</span>
</nav>
<div class="breadcrumb">HVAC Equipment / Air Handlers / Fan Coil Units</div>
<div class="wrap">
<div class="photo"><span class="quote-badge">Ships in 3–5 Days</span><div class="unit"></div></div>
<div class="info">
<span class="model-no mono">MODEL: FCU-2400-V2</span>
<h1>2-Ton Vertical Fan Coil Unit, Cleanroom Rated</h1>
<div class="spec-grid">
<div>Airflow<b>2400 CFM</b></div>
<div>Filtration<b>MERV 13</b></div>
<div>Voltage<b>208/230V</b></div>
</div>
<p class="desc">Direct-to-facility unit for HVAC contractors and cleanroom operators. Spec sheet, submittal data, and CAD drawings available on request.</p>
<div class="badges-row"><span>ETL Listed</span><span>2-Yr Warranty</span><span>Net-30 Available</span></div>
<div class="price-row">
<span class="price">$2,140.00</span>
<button class="btn-buy">Add to Cart</button>
<button class="btn-quote">Get a Quote</button>
</div>
</div>
</div>
<footer><span>© AC Direct</span><span>Spec Sheets · Submittal Data · Contractor Accounts</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #13ab67; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #13ab67; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fd4b5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #13ab67; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #13ab67; color: #f5f5f5;
border: 1px solid #37b77e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fd4b5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #39b87f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #D1D6D4; }
.brand { font-size:17px; font-weight:600; color:#0C4129; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#000; }
.actions { display:flex; gap:10px; align-items:center; }
.login { color:#13AB67; font-size:14px; background:none; border:none; font-weight:400; }
.signup { background:#13AB67; color:#fff; border:none; border-radius:4px; height:32px; padding:0 16px; font-size:14px; }
.layout { display:flex; height:calc(640px - 56px); }
.sidebar { width:230px; border-right:1px solid #D1D6D4; padding:24px 20px; }
.sidebar h2 { font-size:38px; font-weight:600; color:#0C4129; margin:0 0 8px; line-height:1.1; }
.sidebar p { font-size:13px; color:#378060; margin:0 0 20px; }
.filtergroup { margin-bottom:18px; }
.filtergroup .lbl { font-size:12px; font-weight:600; color:#000; margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em; }
.chip { display:inline-block; background:#E2E6E4; color:#0E0E0F; border-radius:4px; padding:5px 10px; font-size:12px; margin:0 6px 6px 0; }
.main { flex:1; padding:24px 28px; }
.job { border:1px solid #D1D6D4; border-radius:4px; padding:16px 18px; margin-bottom:12px; display:flex;
justify-content:space-between; align-items:center; }
.job .co { width:38px; height:38px; border-radius:4px; margin-right:14px; flex-shrink:0; }
.c1 { background:#13AB67; }
.c2 { background:#0C4129; }
.c3 { background:#378060; }
.job .info { display:flex; align-items:center; flex:1; }
.job .t { font-size:15px; font-weight:600; color:#000; }
.job .s { font-size:12px; color:#757575; margin-top:2px; }
.job .salary { font-size:13px; color:#0C4129; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Cake</p>
<div class="navlinks"><span>Jobs</span><span>Resume Builder</span><span>Companies</span></div>
<div class="actions"><button class="login">Log In</button><button class="signup">Sign Up</button></div>
</nav>
<div class="layout">
<aside class="sidebar">
<h2>Find your<br>next job</h2>
<p>Trusted by talent across Asia</p>
<div class="filtergroup">
<div class="lbl">Job Type</div>
<span class="chip">Full-time</span><span class="chip">Remote</span><span class="chip">Internship</span>
</div>
<div class="filtergroup">
<div class="lbl">Function</div>
<span class="chip">Engineering</span><span class="chip">Design</span><span class="chip">Marketing</span>
</div>
</aside>
<main class="main">
<div class="job"><div class="info"><div class="co c1"></div><div><div class="t">Frontend Engineer</div><div class="s">Taipei · Cake Technologies</div></div></div><div class="salary">$60K–80K</div></div>
<div class="job"><div class="info"><div class="co c2"></div><div><div class="t">Product Designer</div><div class="s">Remote · Growth Studio</div></div></div><div class="salary">$50K–70K</div></div>
<div class="job"><div class="info"><div class="co c3"></div><div><div class="t">Recruiting Partner</div><div class="s">Taipei · Talent Co.</div></div></div><div class="salary">$45K–65K</div></div>
<div class="job"><div class="info"><div class="co c1"></div><div><div class="t">AI Resume Reviewer</div><div class="s">Hybrid · Cake Labs</div></div></div><div class="salary">$55K–75K</div></div>
</main>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa5014; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa5014; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f7ab90; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa5014; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa5014; color: #f5f5f5;
border: 1px solid #f96a38; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f7ab90; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d24311; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", "Malgun Gothic", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #dcdcdc; }
.brand { font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:14px; font-weight:500; color:#000000; }
.cta { background:#fa5014; color:#ffffff; border:none; border-radius:3px; height:36px; padding:0 20px;
font-size:13px; font-weight:700; box-shadow:rgba(0,0,0,0.2) 0px 2px 10px 0px; }
.statrow { display:flex; gap:14px; padding:16px 28px; }
.stat { flex:1; background:#ffffff; border-radius:16px; box-shadow:rgba(0,0,0,0.1) 0px 2px 20px 0px;
padding:14px 18px; position:relative; overflow:hidden; }
.stat .ghost { position:absolute; right:6px; bottom:-14px; font-size:64px; font-weight:700; color:#000000; opacity:0.05; }
.stat .num { font-size:24px; font-weight:700; margin:0; position:relative; }
.stat .lbl { font-size:12px; color:#666666; margin:4px 0 0; position:relative; }
.main { display:flex; gap:0; height:400px; }
.queue { width:340px; padding:0 28px; overflow:hidden; }
.queue h3 { font-size:14px; font-weight:700; margin:0 0 10px; }
.row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0f0f0; }
.row .id { font-size:12px; color:#999999; width:56px; }
.row .addr { font-size:13px; color:#111111; flex:1; }
.pill { font-size:11px; font-weight:700; border-radius:9999px; padding:3px 10px; }
.pill.dispatch { background:#fff0ea; color:#fa5014; }
.pill.done { background:#f6f6f6; color:#999999; }
.mapzone { flex:1; margin-right:28px; background:#f6f6f6; border-radius:12px; position:relative; overflow:hidden; }
.route { position:absolute; left:12%; top:30%; width:60%; height:2px; border-top:2px dashed #fa5014; transform:rotate(8deg); }
.pin { position:absolute; width:14px; height:14px; border-radius:50%; background:#fa5014; box-shadow:0 0 0 4px rgba(250,80,20,0.18); }
.pin1{ left:14%; top:26%; } .pin2{ left:44%; top:44%; } .pin3{ left:72%; top:34%; }
.rider { position:absolute; width:10px; height:10px; border-radius:50%; background:#2d3ce6; }
.rider1{ left:30%; top:56%; } .rider2{ left:60%; top:60%; }
</style></head>
<body>
<nav>
<p class="brand">Barogo</p>
<div class="navlinks"><span>Dispatch</span><span>Riders</span><span>Stores</span><span>About</span></div>
<button class="cta">Contact sales</button>
</nav>
<div class="statrow">
<div class="stat"><span class="ghost">24</span><p class="num">1,842</p><p class="lbl">Active dispatches today</p></div>
<div class="stat"><span class="ghost">08</span><p class="num">6.4 min</p><p class="lbl">Avg. pickup time</p></div>
<div class="stat"><span class="ghost">99</span><p class="num">1,206</p><p class="lbl">Riders online now</p></div>
</div>
<div class="main">
<div class="queue">
<h3>Dispatch queue</h3>
<div class="row"><span class="id">#4821</span><span class="addr">Gangnam-daero 123, Store A</span><span class="pill dispatch">Dispatching</span></div>
<div class="row"><span class="id">#4820</span><span class="addr">Yeoksam-ro 45, Store B</span><span class="pill done">Delivered</span></div>
<div class="row"><span class="id">#4819</span><span class="addr">Seocho-daero 210, Store C</span><span class="pill dispatch">Dispatching</span></div>
<div class="row"><span class="id">#4818</span><span class="addr">Nonhyeon-ro 88, Store D</span><span class="pill done">Delivered</span></div>
<div class="row"><span class="id">#4817</span><span class="addr">Teheran-ro 152, Store E</span><span class="pill dispatch">Dispatching</span></div>
</div>
<div class="mapzone">
<div class="route"></div>
<div class="pin pin1"></div><div class="pin pin2"></div><div class="pin pin3"></div>
<div class="rider rider1"></div><div class="rider rider2"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00d5ce; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00d5ce; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096966; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #22d3d6; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00d5ce; color: #000000;
border: 1px solid #22d3d6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00d5ce; color: #111111;
border: 1px solid #03b6b0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096966; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #05d5cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#000000; box-sizing:border-box;
font-family:"Pretendard","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; }
.logo { font-size:19px; font-weight:700; color:#00d5ce; }
.navlinks { display:flex; gap:20px; font-size:15px; color:#111111; }
.navlinks .active { font-weight:600; }
.search { background:#ffffff; border:1px solid #e8e8e8; border-radius:8px; height:32px; width:180px;
display:flex; align-items:center; padding:0 12px; font-size:14px; color:#aaaaaa; }
.section { padding:20px 36px 6px; }
.section h2 { font-size:18px; font-weight:600; letter-spacing:-0.2px; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:0 36px 20px; }
.card { background:#ffffff; border-radius:16px; box-shadow:rgba(0,0,0,0.08) 0px 2px 8px 0px;
border:1px solid #e8e8e8; padding:10px; }
.card .thumb { height:70px; border-radius:8px; background:linear-gradient(135deg,#eefbfb,#00a5aa); margin-bottom:8px; }
.card h3 { font-size:13px; font-weight:600; margin:0 0 6px; }
.card .rate { color:#ffaa3c; font-size:12px; font-weight:600; }
.mint { background:#eefbfb; margin:0 36px 20px; border-radius:16px; padding:16px; }
.mint h2 { font-size:18px; font-weight:600; margin:0 0 10px; }
.rowcards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.rowcards .card { box-shadow:none; }
</style></head>
<body>
<nav>
<span class="logo">Hwahae</span>
<div class="navlinks"><span class="active">Home</span><span>Rankings</span><span>Awards</span></div>
<span class="search">Search cosmetics or brands</span>
</nav>
<div class="section">
<h2>Rankings chosen directly by our customers</h2>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><h3>Moisture Cream</h3><span class="rate">★ 4.8</span></div>
<div class="card"><div class="thumb"></div><h3>Sunscreen</h3><span class="rate">★ 4.7</span></div>
<div class="card"><div class="thumb"></div><h3>Cleansing Foam</h3><span class="rate">★ 4.6</span></div>
<div class="card"><div class="thumb"></div><h3>Toner</h3><span class="rate">★ 4.9</span></div>
</div>
<div class="mint">
<h2>Rankings matched to your skin type</h2>
<div class="rowcards">
<div class="card"><div class="thumb"></div><h3>Calming Serum</h3><span class="rate">★ 4.7</span></div>
<div class="card"><div class="thumb"></div><h3>Gentle Lotion</h3><span class="rate">★ 4.5</span></div>
<div class="card"><div class="thumb"></div><h3>Hydrating Ampoule</h3><span class="rate">★ 4.8</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00704a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00704a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b9a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a862; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00704a; color: #ffffff;
border: 1px solid #00a862; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00704a; color: #f5f5f5;
border: 1px solid #278565; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b9a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00794e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#1e1e1e; box-sizing:border-box;
font-family:"SoDo Sans", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e8e8e8; }
.brand { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; }
.siren { width:34px; height:34px; border-radius:50%; background:#00704a; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; }
.row { display:flex; gap:10px; }
.out { border:1px solid #00704a; color:#00704a; border-radius:9999px; padding:9px 18px; font-size:13px; font-weight:600; }
.fill { background:#00704a; color:#fff; border-radius:9999px; padding:9px 18px; font-size:13px; font-weight:600; }
.hero { background:#1e3932; color:#fff; padding:34px 40px; display:flex; align-items:center; gap:30px; }
.hero .txt h1 { font-size:38px; font-weight:700; line-height:1.1; margin:0 0 12px; max-width:420px; }
.hero .txt p { font-size:15px; color:#d4e9e2; margin:0 0 16px; }
.cta-w { display:inline-block; background:#fafafa; color:#00704a; border-radius:9999px; padding:12px 24px; font-size:14px; font-weight:600; }
.photo { flex:1; height:150px; border-radius:20px; background:linear-gradient(135deg,#00a862,#1e3932); }
.band { padding:22px 40px; background:#f1f8f4; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border:1px solid #e8e8e8; border-radius:16px; overflow:hidden; }
.cimg { height:70px; background:linear-gradient(135deg,#d4e9e2,#00a862); }
.cbody { padding:12px 14px; }
.cbody h4 { font-size:14px; font-weight:600; margin:0 0 4px; }
.cbody .price { font-size:14px; font-weight:700; color:#00704a; }
.tag { display:inline-block; background:#d4e9e2; color:#00704a; border-radius:9999px; font-size:10px; padding:2px 8px; margin-top:4px; }
.rewards { margin:0 40px 0; background:linear-gradient(135deg,#00704a,#1e3932); color:#fff; border-radius:16px; padding:18px 22px;
display:flex; justify-content:space-between; align-items:center; }
.rewards h3 { font-size:16px; margin:0; }
.rewards .stars { font-size:22px; font-weight:700; color:#cba258; }
</style></head>
<body>
<nav>
<p class="brand"><span class="siren"></span>Starbucks</p>
<div class="navlinks"><span>Menu</span><span>Rewards</span><span>Gift Cards</span></div>
<div class="row"><span class="out">Sign in</span><span class="fill">Join now</span></div>
</nav>
<section class="hero">
<div class="txt">
<h1>Good with money starts here.</h1>
<p>Order now — earn Stars with every cup.</p>
<span class="cta-w">Order now</span>
</div>
<div class="photo"></div>
</section>
<section class="band">
<div class="card"><div class="cimg"></div><div class="cbody"><h4>Iced Matcha Latte</h4><div class="price">$5.25</div><span class="tag">New</span></div></div>
<div class="card"><div class="cimg"></div><div class="cbody"><h4>Pike Place Roast</h4><div class="price">$2.95</div><span class="tag">Classic</span></div></div>
<div class="card"><div class="cimg"></div><div class="cbody"><h4>Honey Oat Latte</h4><div class="price">$5.75</div><span class="tag">Limited Time</span></div></div>
</section>
<div class="rewards"><h3>You've earned 25 Stars</h3><span class="stars">★ 350</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0b0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0b0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.33; margin: 0; color: #0a0b0d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7c828a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.15; background: #0052ff; color: #ffffff;
border: none; border-radius: 100px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.15; background: #eef0f3; color: #0a0b0d;
border: 1px solid #0052ff; border-radius: 100px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0a0b0d;
border: 1px solid #c2c2c2; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c828a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.5; background: #eef0f3; color: #0a0b0d;
border-radius: 100px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0b0d; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:400; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:20px; font-size:13px; }
.btnp { background:#0052ff; color:#fff; border-radius:100px; padding:9px 18px; font-size:13px; font-weight:600; }
.herodark { position:relative; height:300px; background:#0a0b0d; color:#fff; display:flex; align-items:center;
padding:0 32px; overflow:hidden; gap:26px; }
.herodark .left { flex:1; }
.herodark h1 { font-size:44px; font-weight:400; letter-spacing:-1.1px; line-height:1.02; margin:0 0 12px; }
.herodark p { font-size:14px; color:#c7c9cc; margin:0 0 16px; max-width:340px; }
.stack { position:relative; width:300px; height:220px; }
.mock { position:absolute; width:260px; height:150px; background:#16181c; border-radius:24px; padding:18px; }
.mock1 { top:0; left:20px; transform:rotate(-4deg); z-index:1; opacity:0.7; }
.mock2 { top:40px; left:0; transform:rotate(2deg); z-index:2; }
.mock .row2 { display:flex; justify-content:space-between; font-size:11px; color:#a8acb3; margin-bottom:10px; }
.mock .price { font-size:20px; font-family:"Courier New", monospace; margin-bottom:6px; }
.mock .chart { height:50px; background:linear-gradient(180deg, rgba(5,177,105,0.25), transparent); position:relative; }
.mock .chart::after { content:''; position:absolute; left:0; right:0; top:50%; height:1.5px; background:#05b169;
clip-path:polygon(0 60%,20% 30%,40% 55%,60% 15%,80% 40%,100% 5%,100% 100%,0 100%); }
.assettable { padding:20px 32px; }
.arow { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid #dee1e6; }
.arow:first-child { font-size:11px; color:#7c828a; border-bottom:1px solid #dee1e6; }
.aic { width:26px; height:26px; border-radius:999px; margin-right:10px; display:inline-block; vertical-align:middle; }
.a-btc { background:#f7931a; } .a-eth { background:#627eea; } .a-sol { background:#9945ff; }
.aname { font-weight:600; font-size:13px; }
.aprice { font-family:"Courier New", monospace; font-size:13px; }
.up { color:#05b169; } .down { color:#cf202f; }
</style></head>
<body>
<nav>
<div class="brand">Coinbase</div>
<div class="navlinks"><span>Cryptocurrencies</span><span>Individuals</span><span>Institutions</span><span>Developers</span></div>
<span class="btnp">Get started</span>
</nav>
<div class="herodark">
<div class="left">
<h1>316,258,026<br>users trust us</h1>
<p>The most trusted way to buy, sell, and manage crypto.</p>
<span class="btnp">Get started</span>
</div>
<div class="stack">
<div class="mock mock1"><div class="row2"><span>ETH</span><span>+1.2%</span></div><div class="price">$3,142.08</div><div class="chart"></div></div>
<div class="mock mock2"><div class="row2"><span>BTC</span><span class="up">+2.14%</span></div><div class="price">$83,214.50</div><div class="chart"></div></div>
</div>
</div>
<div class="assettable">
<div class="arow"><span>Asset</span><span>Price</span><span>24h Change</span></div>
<div class="arow"><span><span class="aic a-btc"></span><span class="aname">Bitcoin BTC</span></span><span class="aprice">$83,214.50</span><span class="aprice up">+2.14%</span></div>
<div class="arow"><span><span class="aic a-eth"></span><span class="aname">Ethereum ETH</span></span><span class="aprice">$3,142.08</span><span class="aprice down">-0.87%</span></div>
<div class="arow"><span><span class="aic a-sol"></span><span class="aname">Solana SOL</span></span><span class="aprice">$168.42</span><span class="aprice up">+5.62%</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3e6ae1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3e6ae1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a3b6ec; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3e6ae1; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3e6ae1; color: #f5f5f5;
border: 1px solid #5b80e4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3b6ec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d82e6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#393c41; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:280px; background:linear-gradient(160deg,#e9e9ea,#c9cbce 60%,#a6a9ad); position:relative; }
nav { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center;
padding:16px 40px; }
.navlinks { display:flex; gap:16px; }
.navlinks span { color:#fff; font-size:14px; font-weight:500; background:rgba(0,0,0,0.35); border-radius:4px;
padding:4px 16px; }
.hero h1 { position:absolute; left:40px; top:80px; font-size:48px; font-weight:500; color:#171a20; margin:0; }
.hero-ctas { position:absolute; left:40px; top:160px; display:flex; gap:8px; }
.cta-primary { background:#3e6ae1; color:#fff; border-radius:4px; padding:10px 20px; font-size:14px; font-weight:500; }
.cta-outline { background:#fff; color:#393c41; border-radius:4px; padding:10px 20px; font-size:14px; font-weight:500; }
.dots { position:absolute; bottom:16px; left:40px; display:flex; gap:6px; }
.dot { width:8px; height:8px; border-radius:8px; background:#ffffff; }
.dot.off { background:#d0d1d2; }
.cards { display:flex; gap:0; padding:22px 40px 0; }
.card { flex:1; background:#f4f4f4; border-radius:8px; padding:32px 24px 48px; margin-right:16px; }
.card:last-child { margin-right:0; }
.card h2 { font-size:26px; font-weight:500; color:#171a20; margin:0 0 8px; }
.card p { font-size:15px; color:#393c41; margin:0; line-height:1.4; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #f4f4f4; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#5c5e62; }
</style></head>
<body>
<div class="hero">
<nav>
<div class="navlinks"><span>Model S</span><span>Model 3</span><span>Model X</span><span>Model Y</span></div>
<div class="navlinks"><span>Shop</span></div>
</nav>
<h1>Model 3</h1>
<div class="hero-ctas"><div class="cta-primary">Order Now</div><div class="cta-outline">Demo Drive</div></div>
<div class="dots"><div class="dot"></div><div class="dot off"></div><div class="dot off"></div></div>
</div>
<div class="cards">
<div class="card"><h2>Performance</h2><p>Zero to 60 mph in as little as 2.9 seconds.</p></div>
<div class="card"><h2>Range</h2><p>Up to 363 miles of estimated range.</p></div>
</div>
<footer><span>© Tesla</span><span>Tesla · Support · Shop</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3ecf8e; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3ecf8e; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #256649; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #24b47e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3ecf8e; color: #000000;
border: 1px solid #24b47e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3ecf8e; color: #111111;
border: 1px solid #37b17a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #256649; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3acb8b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171717; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dfdfdf; }
.brand { font-weight:500; font-size:15px; }
.brand .dot { color:#3ecf8e; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#171717; }
.btngreen { background:#3ecf8e; color:#171717; border:none; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { padding:34px 32px 20px; text-align:center; }
.hero h1 { font-size:44px; font-weight:500; letter-spacing:-1.3px; line-height:1.1; margin:0 0 12px; }
.hero p { font-size:14px; color:#707070; margin:0 0 16px; }
.heroctas { display:flex; gap:10px; justify-content:center; }
.btnoutline { background:#fff; color:#171717; border:1px solid #c7c7c7; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.mockwrap { display:grid; grid-template-columns:1.2fr 1fr; gap:14px; padding:8px 32px 20px; }
.panel { background:#1c1c1c; border-radius:12px; padding:14px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.panel .tabs { display:flex; gap:8px; margin-bottom:8px; }
.panel .tab { font-size:9.5px; color:#9a9a9a; padding:3px 8px; border-radius:4px; }
.panel .tab.active { background:#202020; color:#fff; }
pre { color:#e0e0e0; font-size:11px; line-height:1.5; margin:0; }
.tok { color:#3ecf8e; }
.table { background:#1c1c1c; border-radius:12px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.trow { display:flex; justify-content:space-between; font-size:10.5px; color:#e0e0e0; padding:5px 0;
border-bottom:1px solid #2a2a2a; }
.trow:last-child { border-bottom:none; }
.trow .idc { color:#3ecf8e; }
.featgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 32px 18px; }
.fcard { border:1px solid #dfdfdf; border-radius:12px; padding:14px; }
.fcard h3 { font-size:14px; margin:0 0 4px; }
.fcard p { font-size:11px; color:#707070; margin:0; }
footer { display:flex; justify-content:space-between; padding:12px 32px; font-size:11px; color:#707070;
border-top:1px solid #dfdfdf; }
</style></head>
<body>
<nav>
<div class="brand">Supabase</div>
<div class="navlinks"><span>Product</span><span>Developers</span><span>Pricing</span></div>
<button class="btngreen">Start your project</button>
</nav>
<section class="hero">
<h1>Build in a weekend<br>Scale to millions</h1>
<p>The Postgres development platform. Open source alternative to Firebase.</p>
<div class="heroctas">
<button class="btngreen">Start your project</button>
<button class="btnoutline">Documentation</button>
</div>
</section>
<div class="mockwrap">
<div class="panel mono">
<div class="tabs"><span class="tab active">SQL Editor</span><span class="tab">Table</span></div>
<pre><span class="tok">select</span> * <span class="tok">from</span> users
<span class="tok">where</span> active = true
<span class="tok">order by</span> created_at <span class="tok">desc</span>;</pre>
</div>
<div class="table mono">
<div class="trow"><span class="idc">id</span><span>name</span><span>role</span></div>
<div class="trow"><span>1</span><span>ada</span><span>admin</span></div>
<div class="trow"><span>2</span><span>grace</span><span>editor</span></div>
<div class="trow"><span>3</span><span>alan</span><span>viewer</span></div>
</div>
</div>
<div class="featgrid">
<div class="fcard"><h3>Database</h3><p>Every project is a full Postgres database.</p></div>
<div class="fcard"><h3>Auth</h3><p>Add user sign ups and logins in minutes.</p></div>
<div class="fcard"><h3>Storage</h3><p>Store and serve large files, images, videos.</p></div>
</div>
<footer>
<span>© Supabase</span>
<span>Supabase · Docs · GitHub · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f171e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f171e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9194; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a242f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f171e; color: #ffffff;
border: 1px solid #1a242f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f171e; color: #f5f5f5;
border: 1px solid #343b40; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9194; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #111921; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0F171E; color:#FFFFFF; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.billboard { position:relative; width:960px; height:340px; overflow:hidden;
background:linear-gradient(135deg,#1c3448 0%,#0F171E 65%); }
.billboard::before { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 78% 22%, rgba(0,168,225,0.28), transparent 45%),
radial-gradient(circle at 30% 70%, rgba(46,59,71,0.9), transparent 55%); }
.billboard::after { content:''; position:absolute; left:0; right:0; bottom:0; height:220px;
background:linear-gradient(to top, #0F171E 10%, rgba(15,23,30,0) 100%); }
nav { position:absolute; top:0; left:0; right:0; height:48px; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; z-index:5; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navicons { display:flex; gap:18px; align-items:center; }
.avatar { width:26px; height:26px; border-radius:50%; background:#2E3B47; border:1px solid #3a4a58; }
.bb-content { position:absolute; left:32px; bottom:28px; z-index:3; max-width:520px; }
.bb-content h1 { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0 0 8px; line-height:1.1; }
.bb-meta { font-size:13px; color:#AAB7C4; margin:0 0 16px; }
.bb-meta .imdb { color:#F5C518; font-weight:600; }
.bb-actions { display:flex; gap:10px; align-items:center; }
.btn-play { background:#00A8E1; color:#0F171E; border:none; border-radius:8px; padding:11px 22px 11px 18px;
font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; box-shadow:0 8px 24px rgba(0,168,225,0.32); }
.btn-play .tri { width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #0F171E; }
.btn-ghost { background:rgba(255,255,255,0.14); color:#fff; border:none; border-radius:8px; padding:11px 20px; font-weight:600; font-size:14px; }
.xray-pill { background:rgba(255,255,255,0.16); color:#fff; border-radius:6px; padding:6px 14px; font-size:12px; font-weight:700; letter-spacing:0.02em; }
.rows { position:relative; padding:20px 32px 0; z-index:2; }
.row-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.row-head h3 { font-size:18px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.row-head .more { font-size:12px; color:#AAB7C4; font-weight:600; }
.tiles { display:flex; gap:12px; }
.tile { width:110px; border-radius:6px; position:relative; overflow:hidden; }
.tile .art { width:110px; height:150px; border-radius:6px; }
.tile .title { font-size:12px; font-weight:600; margin-top:6px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile .sub { font-size:11px; color:#00A8E1; margin-top:2px; }
.a1 { background:linear-gradient(160deg,#3a2450,#17202b); }
.a2 { background:linear-gradient(160deg,#1f4d3a,#0F171E); }
.a3 { background:linear-gradient(160deg,#5a2a2a,#0F171E); }
.a4 { background:linear-gradient(160deg,#264a5c,#0F171E); }
.a5 { background:linear-gradient(160deg,#4a3f1f,#0F171E); }
.a6 { background:linear-gradient(160deg,#2a2a5a,#0F171E); }
.progress { position:absolute; left:0; bottom:0; width:100%; height:3px; background:rgba(255,255,255,0.25); }
.progress i { display:block; height:100%; width:55%; background:#00A8E1; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:52px; background:rgba(15,23,30,0.94);
display:flex; align-items:center; justify-content:space-around; border-top:1px solid #2E3B47; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:600; color:#AAB7C4; }
.tab.active { color:#00A8E1; }
.tab .dot { width:20px; height:20px; border-radius:5px; background:currentColor; opacity:0.85; }
</style></head>
<body>
<div class="billboard">
<nav>
<p class="brand">Prime Video (iOS)</p>
<div class="navicons"><span class="avatar"></span></div>
</nav>
<div class="bb-content">
<h1>The Citadel Files</h1>
<p class="bb-meta">2024 · 16+ · 1 Season · <span class="imdb">★ 8.4 IMDb</span></p>
<div class="bb-actions">
<button class="btn-play"><span class="tri"></span>Play</button>
<button class="btn-ghost">+ Watchlist</button>
<span class="xray-pill">X-Ray</span>
</div>
</div>
</div>
<div class="rows">
<div class="row-head"><h3>Continue Watching</h3><span class="more">See more</span></div>
<div class="tiles">
<div class="tile"><div class="art a1"><div class="progress"><i></i></div></div><div class="title">Nightfall Bay</div><div class="sub">S2 E4</div></div>
<div class="tile"><div class="art a2"><div class="progress"><i style="width:30%"></i></div></div><div class="title">Harborline</div><div class="sub">S1 E9</div></div>
<div class="tile"><div class="art a3"><div class="progress"><i style="width:80%"></i></div></div><div class="title">Vantage</div><div class="sub">Movie</div></div>
<div class="tile"><div class="art a4"><div class="progress"><i style="width:12%"></i></div></div><div class="title">Cold Circuit</div><div class="sub">S3 E1</div></div>
<div class="tile"><div class="art a5"><div class="progress"><i style="width:65%"></i></div></div><div class="title">The Long Shift</div><div class="sub">S1 E2</div></div>
</div>
<div class="row-head" style="margin-top:18px;"><h3>Included with Prime</h3><span class="more">See more</span></div>
<div class="tiles">
<div class="tile"><div class="art a6" style="height:150px;"></div><div class="title">Redline City</div><div class="sub">Included</div></div>
<div class="tile"><div class="art a3" style="height:150px;"></div><div class="title">Salt & Static</div><div class="sub">Included</div></div>
<div class="tile"><div class="art a2" style="height:150px;"></div><div class="title">Windfall</div><div class="sub">Included</div></div>
<div class="tile"><div class="art a1" style="height:150px;"></div><div class="title">The Understudy</div><div class="sub">Included</div></div>
<div class="tile"><div class="art a4" style="height:150px;"></div><div class="title">Perimeter</div><div class="sub">Included</div></div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="dot"></span>Home</div>
<div class="tab"><span class="dot"></span>Store</div>
<div class="tab"><span class="dot"></span>Live</div>
<div class="tab"><span class="dot"></span>Find</div>
<div class="tab"><span class="dot"></span>Downloads</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Clarkson", Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:16px; font-weight:400; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#fff; }
.cta { background:#ffffff; color:#000000; padding:14px 22px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:20px 40px 26px; }
.hero h1 { font-size:52px; font-weight:300; letter-spacing:-3px; line-height:1.04; margin:0 0 14px; }
.hero p { font-size:15px; color:#cfcfcf; margin:0 0 18px; }
.cta2 { display:inline-block; background:#ffffff; color:#000; padding:16px 26px; font-size:13px; font-weight:500; }
.lightband { background:#ffffff; color:#000; padding:26px 40px; }
.lightband h2 { font-size:30px; font-weight:400; letter-spacing:-1.2px; margin:0 0 14px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#2f2f2f; color:#fff; border-radius:8px; padding:18px; }
.card h3 { font-size:16px; font-weight:400; margin:0 0 6px; }
.card p { font-size:12px; color:#898989; margin:0; }
.pills { display:flex; gap:8px; padding:14px 40px 0; background:#fff; }
.pill { border-radius:100px; padding:6px 16px; font-size:13px; color:#898989; }
.pill.on { background:#dddddd; color:#000; }
</style></head>
<body>
<nav>
<p class="brand">Squarespace</p>
<div class="navlinks"><span>Templates</span><span>Website Design</span><span>Commerce</span><span>Pricing</span></div>
<span class="cta">Get started</span>
</nav>
<section class="hero">
<h1>A website makes it real.</h1>
<p>Make any website template yours with ease.</p>
<span class="cta2">Get started</span>
</section>
<section class="lightband">
<h2>Grow your business</h2>
<div class="pills">
<span class="pill on">Photography</span><span class="pill">Design</span><span class="pill">Education</span><span class="pill">Consulting</span><span class="pill">Art</span>
</div>
<div class="cards" style="margin-top:14px;">
<div class="card"><h3>Extensions</h3><p>Connect the tools you already use.</p></div>
<div class="card"><h3>Payments</h3><p>Accept multiple payment types.</p></div>
<div class="card"><h3>Design Intelligence</h3><p>Editorial-quality layout at every tier.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e6007e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e6007e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee87bf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e6007e; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e6007e; color: #f5f5f5;
border: 1px solid #e82791; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee87bf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf1091; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #ebebeb; background:#ffffff; }
.brand { font-size:19px; font-weight:800; margin:0; letter-spacing:-0.4px; color:#000000; }
.brand span { color:#e6007e; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#000000; }
.cta { background:#e6007e; color:#ffffff; border:none; border-radius:20px; height:40px;
padding:0 30px; font-size:16px; font-weight:400; white-space:nowrap; }
.hero { flex:0 0 128px; display:flex; flex-direction:column; justify-content:center; gap:6px;
padding:0 40px; background:#ffffff; }
.hero .kicker { color:#e6007e; font-size:12px; font-weight:700; letter-spacing:0.04em; }
.hero h1 { font-size:28px; font-weight:700; margin:0; letter-spacing:-0.5px; color:#000000; }
.hero p { font-size:13px; color:#888888; margin:0; }
.plans { flex:1 1 auto; display:flex; gap:16px; padding:0 40px 24px; min-height:0; }
.plan { flex:1; border:1px solid #ebebeb; border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:8px;
background:#ffffff; position:relative; }
.plan.pop { border:2px solid #e6007e; }
.plan .tag { position:absolute; top:-11px; left:16px; background:#e6007e; color:#ffffff; font-size:11px;
font-weight:700; border-radius:20px; padding:3px 10px; }
.plan h3 { font-size:16px; font-weight:700; margin:6px 0 0; color:#000000; }
.plan .price { font-size:22px; font-weight:700; color:#000000; }
.plan .price span { font-size:12px; font-weight:400; color:#888888; }
.plan .sub { font-size:12px; color:#888888; margin-bottom:2px; }
.infrow { border:1px solid #ebebeb; border-radius:8px; padding:12px 14px; height:44px; display:flex;
align-items:center; font-size:12.5px; font-weight:500; color:#222222; background:#f5f5f5; }
.infrow.plain { background:#ffffff; }
.plan .cta-row { margin-top:auto; background:#e6007e; color:#ffffff; border-radius:20px; text-align:center;
padding:9px; font-size:14px; font-weight:400; }
.plan.ghost .cta-row { background:#f5f5f5; color:#888888; }
footer { flex:0 0 40px; border-top:1px solid #ebebeb; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; font-size:12px; color:#888888; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">LG Uplus</p>
<div class="navlinks"><span>Mobile</span><span>Internet & TV</span><span>Smart Home</span><span>Enterprise</span></div>
<button class="cta">Check Plans</button>
</nav>
<section class="hero">
<span class="kicker">SIMPLY. LG Uplus</span>
<h1>Less complexity. More of what matters.</h1>
<p>Compare 5G plans and find the one that fits how you actually use your phone.</p>
</section>
<section class="plans">
<div class="plan ghost">
<h3>5G Basic</h3>
<div class="price">$29<span> / mo</span></div>
<div class="sub">6GB data · Unlimited calls</div>
<div class="infrow plain">Data sharing not included</div>
<div class="infrow plain">Streaming pass not included</div>
<div class="cta-row">Select Plan</div>
</div>
<div class="plan pop">
<span class="tag">Most Popular</span>
<h3>5G Standard</h3>
<div class="price">$49<span> / mo</span></div>
<div class="sub">100GB data · Unlimited calls</div>
<div class="infrow">Family data sharing included</div>
<div class="infrow">Streaming pass included</div>
<div class="cta-row">Select Plan</div>
</div>
<div class="plan ghost">
<h3>5G Premium</h3>
<div class="price">$69<span> / mo</span></div>
<div class="sub">Unlimited data · Unlimited calls</div>
<div class="infrow plain">Roaming data included</div>
<div class="infrow plain">Device protection included</div>
<div class="cta-row">Select Plan</div>
</div>
</section>
<footer>
<span>© LG Uplus</span>
<span>Mobile · Internet & TV · Smart Home · Enterprise</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #292524; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f5; color: #292524;
border: 1px solid #292524; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f5f5f5; color: #111111;
border: 1px solid #d1d1d1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d4d4d4; color: #292524;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#0c0a09; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.orb { position:absolute; border-radius:50%; filter:blur(2px); opacity:0.55; }
.o1 { width:340px; height:340px; left:-90px; top:-100px; background:radial-gradient(circle at 35% 35%, #a7e5d3, transparent 70%); }
.o2 { width:300px; height:300px; right:-80px; top:40px; background:radial-gradient(circle at 60% 40%, #c8b8e0, transparent 70%); }
.o3 { width:260px; height:260px; left:38%; bottom:-140px; background:radial-gradient(circle at 50% 50%, #f4c5a8, transparent 70%); }
nav { position:relative; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { font-family:Georgia,"Times New Roman",serif; font-size:19px; font-weight:400; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#4e4e4e; }
.btn-primary { background:#292524; color:#fff; border:none; border-radius:9999px; padding:9px 20px;
font-size:14px; font-weight:500; white-space:nowrap; }
.hero { position:relative; z-index:2; padding:36px 40px 20px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap:14px; }
.hero h1 { font-family:Georgia,"Times New Roman",serif; font-weight:300; font-size:46px; letter-spacing:-1.2px;
line-height:1.05; margin:0; max-width:640px; color:#0c0a09; }
.hero p { font-size:15px; color:#4e4e4e; margin:0; max-width:460px; }
.orbcards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
padding:14px 40px 20px; }
.orbcard { background:#fafafa; border-radius:24px; padding:20px; text-align:left; overflow:hidden; position:relative;
border:1px solid #e7e5e4; }
.orbcard .glow { position:absolute; width:130px; height:130px; border-radius:50%; top:-50px; right:-40px; opacity:0.6; }
.g1 .glow { background:radial-gradient(circle,#a7e5d3,transparent 70%); }
.g2 .glow { background:radial-gradient(circle,#a8c8e8,transparent 70%); }
.g3 .glow { background:radial-gradient(circle,#e8b8c4,transparent 70%); }
.orbcard .eyebrow { position:relative; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
color:#777169; }
.orbcard h3 { position:relative; font-family:Georgia,"Times New Roman",serif; font-weight:300; font-size:19px; margin:8px 0 6px; }
.orbcard p { position:relative; font-size:12px; color:#4e4e4e; line-height:1.5; margin:0; }
.waveform { position:relative; z-index:2; margin:6px 40px 0; background:#ffffff; border:1px solid #e7e5e4;
border-radius:16px; padding:14px 18px; display:flex; align-items:center; gap:14px; }
.playbtn { width:32px; height:32px; border-radius:50%; background:#292524; flex:0 0 auto; position:relative; }
.playbtn::after { content:''; position:absolute; left:12px; top:9px; border-style:solid; border-width:7px 0 7px 11px;
border-color:transparent transparent transparent #fff; }
.bars { flex:1; display:flex; align-items:center; gap:2px; height:26px; }
.bars i { width:3px; background:#d6d3d1; border-radius:2px; display:inline-block; }
.voicelabel { font-size:12px; color:#777169; white-space:nowrap; }
footer { position:relative; z-index:2; margin-top:auto; border-top:1px solid #e7e5e4; padding:12px 40px;
display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#777169; }
</style></head>
<body>
<div class="orb o1"></div><div class="orb o2"></div><div class="orb o3"></div>
<nav>
<p class="brand">ElevenLabs</p>
<div class="navlinks"><span>Creative</span><span>Agents</span><span>Video</span><span>Pricing</span></div>
<button class="btn-primary">Try free</button>
</nav>
<section class="hero">
<h1>The most realistic voice AI platform</h1>
<p>Create lifelike speech, agents, and audio — in any voice, any language.</p>
</section>
<section class="orbcards">
<div class="orbcard g1"><div class="glow"></div><span class="eyebrow">Text to Speech</span><h3>Any voice, instantly</h3><p>Generate natural speech in 30+ languages from a single line of text.</p></div>
<div class="orbcard g2"><div class="glow"></div><span class="eyebrow">Conversational AI</span><h3>Agents that listen</h3><p>Build voice agents that sound human and respond in real time.</p></div>
<div class="orbcard g3"><div class="glow"></div><span class="eyebrow">Dubbing</span><h3>Speak every language</h3><p>Translate and dub video into dozens of languages automatically.</p></div>
</section>
<div class="waveform">
<div class="playbtn"></div>
<div class="bars">
<i style="height:8px"></i><i style="height:16px"></i><i style="height:22px"></i><i style="height:12px"></i>
<i style="height:20px"></i><i style="height:26px"></i><i style="height:14px"></i><i style="height:18px"></i>
<i style="height:10px"></i><i style="height:24px"></i><i style="height:16px"></i><i style="height:9px"></i>
<i style="height:19px"></i><i style="height:15px"></i><i style="height:22px"></i><i style="height:11px"></i>
<i style="height:17px"></i><i style="height:13px"></i><i style="height:21px"></i><i style="height:9px"></i>
</div>
<span class="voicelabel">Rachel — narration</span>
</div>
<footer>
<span>© ElevenLabs</span>
<span>ElevenLabs · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00e8c5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00e8c5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #097262; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21fce3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00e8c5; color: #000000;
border: 1px solid #21fce3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00e8c5; color: #111111;
border: 1px solid #03c6a8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #097262; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #05ebca; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box; font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
.brand { font-weight:900; font-size:15px; }
.navlinks { display:flex; gap:20px; font-size:12px; }
.navlinks span:first-child { color:#00e8c5; }
.btn-login { background:#fff; color:#171b21; border:none; border-radius:50px; padding:9px 16px; font-size:12px; }
.megahero { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 0; }
.mega { font-size:120px; font-weight:800; margin:0; line-height:0.9; }
.subline { font-size:16px; color:#e6e6e6; margin-top:10px; }
.chips { display:flex; justify-content:center; gap:10px; padding:20px 0; }
.chip-mint { background:#00e8c5; color:#171b21; border-radius:50px; padding:12px 18px; font-size:12px; }
.chip-white { background:#fff; color:#171b21; border-radius:30px; padding:10px 16px; font-size:12px; }
.chip-bright { background:#21fce3; color:#171b21; border-radius:1000px; padding:10px 16px; font-size:12px; }
.footer { display:flex; justify-content:center; gap:10px; padding:14px 0; }
.social { background:#121212; color:#fff; border-radius:3px; padding:8px 12px; font-size:12px; }
</style></head>
<body>
<nav>
<div class="brand">Quotabook</div>
<div class="navlinks"><span>Financial Consulting</span><span>Pricing</span><span>About Us</span></div>
<button class="btn-login">Log In</button>
</nav>
<div class="megahero">
<h1 class="mega">EQUITY</h1>
<div class="subline">The only all-in-one cap table platform</div>
</div>
<div class="chips">
<div class="chip-mint">Instant Payments</div>
<div class="chip-white">Digital Platform</div>
<div class="chip-bright">Shareholder Registry</div>
</div>
<div class="footer">
<div class="social">LinkedIn</div>
<div class="social">Blog</div>
<div class="social">Stories</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #080a0f; color: #1d1d1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #080a0f; color: #1d1d1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0; color: #1d1d1f; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #00befa; color: #000000;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: transparent; color: #00befa;
border: 1px solid #00befa; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1d1d1f;
border: 1px solid #0d0f13; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #00befa; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#080a0f; color:#f2f2f2; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#f2f2f2; }
.navlinks .active { color:#00befa; border-bottom:2px solid #00befa; padding-bottom:4px; }
.icons { display:flex; gap:14px; align-items:center; }
.icons span { width:16px; height:16px; border-radius:999px; border:1px solid #75787f; display:inline-block; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:0 32px; min-height:0; }
.hero { flex:1 1 auto; display:flex; align-items:center; gap:28px; min-height:0; }
.hero-copy { flex:1; }
.hero-copy .kicker { color:#00db84; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; margin:0 0 8px; }
.hero-copy h1 { font-size:34px; font-weight:700; letter-spacing:-1px; margin:0 0 10px; line-height:1.12; }
.hero-copy p { color:#9ca3af; font-size:14px; margin:0 0 16px; max-width:360px; }
.hero-copy button { background:#00befa; color:#ffffff; border:none; border-radius:999px; padding:13px 28px;
font-size:15px; font-weight:600; }
.hero-art { flex:0 0 300px; height:220px; border-radius:20px; position:relative;
background:radial-gradient(circle at 30% 30%, rgba(0,190,250,0.35), transparent 60%), #101319;
border:1px solid #22262e; }
.hero-art::after { content:''; position:absolute; left:24px; right:24px; bottom:24px; height:6px; border-radius:999px;
background:linear-gradient(90deg,#00db84,#00befa); }
.specs { flex:0 0 auto; display:flex; gap:14px; padding:16px 0 20px; }
.spec { flex:1; background:#f5f5f7; color:#1d1d1f; border-radius:12px; padding:14px 16px; }
.spec .label { font-size:12px; color:#75787f; text-transform:uppercase; letter-spacing:0.5px; margin:0 0 4px; }
.spec .value { font-family:SFMono-Regular, Consolas, monospace; font-size:16px; font-weight:600; margin:0; }
.badge-row { display:flex; gap:8px; margin-top:8px; }
.badge { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; color:#fff; }
.badge.new { background:#00befa; }
.badge.eco { background:#00db84; }
footer { flex:0 0 auto; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-size:12px; color:#9ca3af; border-top:1px solid #1a1d24; }
</style></head>
<body>
<nav>
<p class="brand">Anker</p>
<div class="navlinks"><span class="active">Charging</span><span>Power Banks</span><span>Cables</span><span>Soundcore</span></div>
<div class="icons"><span></span><span></span></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<p class="kicker">GaN Prime 100W</p>
<h1>Never be unpowered again.</h1>
<p>A charger small enough for your pocket, fast enough for three devices at once.</p>
<button>Shop Now</button>
<div class="badge-row"><span class="badge new">New</span><span class="badge eco">Eco</span></div>
</div>
<div class="hero-art"></div>
</div>
<div class="specs">
<div class="spec"><p class="label">Output</p><p class="value">100W</p></div>
<div class="spec"><p class="label">Ports</p><p class="value">3 (2×C, 1×A)</p></div>
<div class="spec"><p class="label">Weight</p><p class="value">153g</p></div>
</div>
</main>
<footer>
<span>© Anker</span>
<span>Support · Warranty · Community</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191919; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #191919; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040404; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#EDEDED; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace; }
.topbar { height:44px; display:flex; align-items:center; padding:0 24px; gap:10px; border-bottom:0.5px solid #2E2E2E; }
.tri { width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:14px solid #EDEDED; }
.pname { font-size:17px; font-weight:600; }
.avatar { margin-left:auto; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#7928CA,#0070F3); }
.main { display:flex; height:calc(640px - 44px - 52px); }
.col { flex:1; padding:20px 24px; }
.sectitle { font-size:22px; font-weight:700; margin-bottom:12px; }
.card { background:#0A0A0A; border:1px solid #2E2E2E; border-radius:12px; padding:14px; margin-bottom:10px; }
.row1 { display:flex; align-items:center; gap:8px; }
.dot { width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 3px rgba(12,206,107,0.15); }
.dot.b { background:#F5A623; box-shadow:0 0 0 3px rgba(245,166,35,0.15); }
.dot.r { background:#0CCE6B; }
.dot.e { background:#E5484D; box-shadow:0 0 0 3px rgba(229,72,77,0.15); }
.state { font-size:14px; font-weight:600; }
.state.b { color:#F5A623; }
.state.e { color:#E5484D; }
.envtag { margin-left:auto; background:#1A1A1A; border:1px solid #333333; color:#A1A1A1; font-size:10px; padding:3px 7px; border-radius:5px; }
.url { font-size:13px; margin-top:8px; }
.row3 { display:flex; justify-content:space-between; margin-top:6px; font-size:13px; color:#A1A1A1; }
.analytics { background:#111111; border-radius:12px; padding:16px; }
.bars { display:flex; align-items:flex-end; gap:10px; height:100px; margin-top:12px; }
.bar { flex:1; background:#0070F3; border-radius:3px 3px 0 0; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:52px; background:rgba(0,0,0,0.92); border-top:0.5px solid #2E2E2E; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:10px; color:#707070; }
.tab.on { color:#fff; }
</style></head>
<body>
<div class="topbar"><div class="tri"></div><div class="pname">Vercel (iOS)</div><div class="avatar"></div></div>
<div class="main">
<div class="col">
<div class="sectitle">Deployments</div>
<div class="card"><div class="row1"><span class="dot r"></span><span class="state">Ready</span><span class="envtag">Production</span></div>
<div class="url mono">brand-name-git-main.vercel.app</div>
<div class="row3"><span class="mono">main · 4a91f2c</span><span>2m ago</span></div></div>
<div class="card"><div class="row1"><span class="dot b"></span><span class="state b">Building</span><span class="envtag">Preview</span></div>
<div class="url mono">brand-name-pr-88.vercel.app</div>
<div class="row3"><span class="mono">feat/nav · 9c02aa1</span><span>just now</span></div></div>
<div class="card"><div class="row1"><span class="dot e"></span><span class="state e">Error</span><span class="envtag">Preview</span></div>
<div class="url mono">brand-name-pr-84.vercel.app</div>
<div class="row3"><span class="mono">fix/build · 11dfe30</span><span>1h ago</span></div></div>
</div>
<div class="col">
<div class="sectitle">Analytics</div>
<div class="analytics">
<div class="mono" style="font-size:11px;color:#707070">WEB VITALS · LCP (ms)</div>
<div class="bars">
<div class="bar" style="height:40%"></div><div class="bar" style="height:60%"></div><div class="bar" style="height:35%"></div>
<div class="bar" style="height:80%"></div><div class="bar" style="height:55%"></div><div class="bar" style="height:70%"></div>
<div class="bar" style="height:45%"></div><div class="bar" style="height:65%"></div>
</div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab on">Overview</div><div class="tab">Deployments</div><div class="tab">Analytics</div><div class="tab">Settings</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #816bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #816bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c1b7fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6e58ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #816bff; color: #000000;
border: 1px solid #6e58ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #816bff; color: #f5f5f5;
border: 1px solid #9481fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c1b7fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7e68ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#f7f7f7; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #323232; }
.brand { font-size:17px; font-weight:700; color:#f7f7f7; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:700; color:#e2e2e2; }
.navlinks .on { color:#816bff; }
.navbtns { display:flex; align-items:center; gap:10px; }
.search-dot { width:32px; height:32px; border-radius:50%; background:#242537; }
.badge { position:relative; width:32px; height:32px; border-radius:50%; background:#242537; }
.badge::after { content:'3'; position:absolute; top:-3px; right:-3px; width:17px; height:17px; border-radius:50%;
background:#816bff; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.hero { position:relative; height:280px; margin:16px 32px 0; border-radius:8px; overflow:hidden;
background:linear-gradient(120deg,#242537 0%,#191b2a 55%,#000000 100%); display:flex; align-items:flex-end; }
.hero::before { content:''; position:absolute; right:-40px; top:-40px; width:280px; height:280px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, rgba(129,107,255,0.45), transparent 70%); }
.hero .content { position:relative; padding:24px 28px; max-width:520px; }
.hero .kicker { font-size:12px; font-weight:700; color:#816bff; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }
.hero h1 { font-size:32px; font-weight:700; margin:0 0 8px; line-height:1.25; }
.hero p { font-size:14px; color:#ababab; margin:0 0 16px; line-height:1.5; }
.hero .row { display:flex; gap:10px; }
.btn-primary { background:#816bff; color:#ffffff; border-radius:4px; height:44px; padding:0 20px;
font-size:15px; font-weight:700; display:flex; align-items:center; }
.btn-slight { background:rgba(240,237,255,0.12); color:#c9bfff; border-radius:4px; height:44px; padding:0 20px;
font-size:15px; font-weight:700; display:flex; align-items:center; }
.section { padding:18px 32px 4px; display:flex; align-items:baseline; justify-content:space-between; }
.section h2 { font-size:18px; font-weight:700; margin:0; }
.section span { font-size:12px; color:#8a8a8a; }
.rowgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; padding:0 32px 18px; }
.thumb { border-radius:4px; overflow:hidden; }
.thumb .art { height:96px; position:relative; }
.t1 .art { background:linear-gradient(160deg,#816bff,#3d2f8f); }
.t2 .art { background:linear-gradient(160deg,#f16361,#5a1f1f); }
.t3 .art { background:linear-gradient(160deg,#3f8f7c,#123c33); }
.t4 .art { background:linear-gradient(160deg,#8f7a3f,#3c2f12); }
.t5 .art { background:linear-gradient(160deg,#3f6b8f,#12233c); }
.t6 .art { background:linear-gradient(160deg,#8f3f7a,#3c1230); }
.art .ep { position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,0.55); color:#fff; font-size:9px;
font-weight:700; padding:2px 6px; border-radius:2px; }
.tname { font-size:11px; margin-top:6px; color:#f7f7f7; font-weight:400; line-height:1.3; }
</style></head>
<body>
<nav>
<div class="brand">Laftel</div>
<div class="navlinks"><span class="on">Home</span><span>Ranking</span><span>New</span><span>Genres</span><span>Store</span></div>
<div class="navbtns"><span class="search-dot"></span><span class="badge"></span></div>
</nav>
<div class="hero">
<div class="content">
<div class="kicker">Seasonal · Ep 12 out now</div>
<h1>Midnight Cartographers</h1>
<p>A quiet team of mapmakers stumbles into a war between two worlds neither of them can leave.</p>
<div class="row"><span class="btn-primary">▶ Watch Now</span><span class="btn-slight">+ Add to List</span></div>
</div>
</div>
<div class="section"><h2>Picked by our biggest fan curators</h2><span>See all</span></div>
<div class="rowgrid">
<div class="thumb t1"><div class="art"><span class="ep">EP 12</span></div><div class="tname">Midnight Cartographers</div></div>
<div class="thumb t2"><div class="art"><span class="ep">EP 4</span></div><div class="tname">Iron Orchard Requiem</div></div>
<div class="thumb t3"><div class="art"><span class="ep">EP 1</span></div><div class="tname">Salt Garden</div></div>
<div class="thumb t4"><div class="art"><span class="ep">EP 24</span></div><div class="tname">The Last Delivery</div></div>
<div class="thumb t5"><div class="art"><span class="ep">EP 8</span></div><div class="tname">Paper Constellations</div></div>
<div class="thumb t6"><div class="art"><span class="ep">EP 2</span></div><div class="tname">Neon Wisteria</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #dedede; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fc8259; color: #000000;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #121212; color: #ffffff;
border: 1px solid #fc8259; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #dedede; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fc8259; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
background:rgba(18,18,18,.7); border-bottom:1px solid #2a2a2a; }
.brand { font-size:15px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.navlinks { display:flex; gap:24px; font-size:11px; color:#dedede; text-transform:uppercase; letter-spacing:.06em; }
.navlinks span.on { color:#fc8259; }
.cart { font-size:11px; color:#dedede; }
.wrap { display:flex; height:530px; padding:26px 30px; gap:28px; align-items:stretch; }
.photo { width:340px; flex-shrink:0; border-radius:12px; background:radial-gradient(circle at 40% 30%, #2a2a2a 0%, #050505 75%);
position:relative; display:flex; align-items:center; justify-content:center; }
.prop { width:120px; height:160px; border-radius:6px; background:linear-gradient(160deg,#fc8259,#7a3620); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.sale-badge { position:absolute; top:16px; left:16px; background:#fc8259; color:#121212; font-size:10px; font-weight:700; padding:5px 10px; border-radius:9999px; }
.card { flex:1; background:#ffffff; color:#121212; border-radius:12px; padding:28px 30px; display:flex; flex-direction:column; gap:12px; }
.film-tag { font-size:11px; color:#dedede; background:#121212; display:inline-block; padding:3px 10px; border-radius:9999px; width:fit-content; }
.card h1 { font-size:23px; font-weight:600; margin:0; }
.price { font-size:19px; font-weight:600; }
.opt-row { display:flex; gap:8px; }
.opt { border:1px solid #dedede; border-radius:9999px; padding:7px 16px; font-size:12px; }
.opt.on { background:#121212; color:#fff; border-color:#121212; }
.desc { font-size:12.5px; color:#2a2a2a; line-height:1.6; max-width:400px; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#fc8259; color:#ffffff; border:none; border-radius:9999px; padding:13px; font-size:13px; font-weight:600; }
.btn-wish { border:1px solid #121212; border-radius:9999px; padding:13px 18px; font-size:13px; }
footer { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:11px; color:#dedede; }
</style></head>
<body>
<nav>
<p class="brand">A24 Shop</p>
<div class="navlinks"><span>Films</span><span class="on">Apparel</span><span>Objects</span><span>Books</span></div>
<span class="cart">Bag (2)</span>
</nav>
<div class="wrap">
<div class="photo"><span class="sale-badge">Limited Run</span><div class="prop"></div></div>
<div class="card">
<span class="film-tag">Prop Replica</span>
<h1>Lobby Card Print, No. 07</h1>
<span class="price">$38.00</span>
<div class="opt-row">
<span class="opt on">11×17</span>
<span class="opt">18×24</span>
</div>
<p class="desc">A screen-accurate reprint of the original theatrical lobby card, numbered in a run this small — like a prop from the film itself, under a spotlight in your own room.</p>
<div class="buy-row">
<button class="btn-buy">Add to Bag</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© A24 Shop</span><span>Shipping · Returns · Newsletter</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa687; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d93900; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4500; color: #000000;
border: 1px solid #d93900; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4500; color: #f5f5f5;
border: 1px solid #fd6127; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa687; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f94300; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F6F8F9; color:#333D42; box-sizing:border-box;
font-family:-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; gap:18px; padding:0 28px;
box-shadow:0px 4px 14px rgba(0,0,0,0.1); position:relative; z-index:2; }
.brand { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:700; color:#181C1F; }
.brand .snoo { width:26px; height:26px; border-radius:50%; background:#FF4500; }
.search { flex:1; max-width:380px; height:36px; background:#F8F8F8; border-radius:9999px; display:flex; align-items:center; padding:0 14px; font-size:13px; color:#5C6C74; }
.navr { margin-left:auto; display:flex; gap:10px; }
.btn { border-radius:9999px; height:34px; padding:0 16px; font-size:13px; font-weight:600; display:flex; align-items:center; }
.btn.primary { background:#D93900; color:#fff; }
.btn.secondary { background:#E5EBEE; color:#181C1F; }
.tabs { display:flex; gap:20px; padding:10px 28px; background:#fff; border-bottom:1px solid #E5EBEE; font-size:13px; }
.tab { color:#5C6C74; }
.tab.active { color:#181C1F; font-weight:600; }
.feed { display:flex; gap:16px; padding:16px 28px; }
.col { flex:1; display:flex; flex-direction:column; gap:12px; }
.post { background:#FFFFFF; border:1px solid rgba(0,0,0,0.2); border-radius:16px; padding:14px;
box-shadow:0 0.0625rem 0.25rem 0 rgba(0,0,0,0.149); }
.post .meta { font-size:11px; color:#5C6C74; margin:0 0 6px; display:flex; gap:6px; align-items:center; }
.post .meta .flair { background:#E5EBEE; color:#333D42; border-radius:9999px; padding:1px 8px; font-size:10px; font-weight:600; }
.post h4 { font-size:15px; font-weight:600; margin:0 0 8px; color:#181C1F; line-height:1.3; }
.post .thumb { height:70px; border-radius:8px; margin-bottom:8px; }
.thumb.t1 { background:linear-gradient(135deg,#FF4500,#AE2C00); }
.thumb.t2 { background:linear-gradient(135deg,#1870F4,#0A2F6C); }
.thumb.t3 { background:linear-gradient(135deg,#6A5CFF,#3a2ba0); }
.post .foot { display:flex; align-items:center; gap:10px; font-size:12px; color:#5C6C74; }
.vote { display:flex; align-items:center; gap:4px; background:#F6F8F9; border-radius:9999px; padding:3px 10px; }
.vote .up { color:#FF4500; font-weight:700; }
.vote .down { color:#6A5CFF; font-weight:700; }
.side { width:200px; }
.sidecard { background:#fff; border:1px solid rgba(0,0,0,0.2); border-radius:16px; padding:14px; }
.sidecard h5 { font-size:12px; font-weight:700; text-transform:uppercase; color:#5C6C74; margin:0 0 10px; }
.sidecard .row { display:flex; align-items:center; gap:8px; font-size:12px; color:#333D42; margin-bottom:10px; }
.sidecard .sw { width:20px; height:20px; border-radius:50%; flex-shrink:0; }
.sw.a { background:#FF4500; } .sw.b { background:#1870F4; } .sw.c { background:#008A10; }
.sidecard .join { background:#D93900; color:#fff; border-radius:9999px; font-size:11px; font-weight:600; padding:4px 10px; margin-left:auto; }
</style></head>
<body>
<nav>
<span class="brand"><span class="snoo"></span>Reddit</span>
<span class="search">Search Reddit</span>
<div class="navr"><span class="btn secondary">Sign Up</span><span class="btn primary">Log In</span></div>
</nav>
<div class="tabs">
<span class="tab active">Best</span><span class="tab">Hot</span><span class="tab">New</span><span class="tab">Top</span>
</div>
<div class="feed">
<div class="col">
<div class="post">
<p class="meta">r/webdev · <span class="flair">Discussion</span></p>
<div class="thumb t1"></div>
<h4>What's the one CSS trick you wish you knew earlier?</h4>
<div class="foot"><span class="vote"><span class="up">▲</span> 4.2k <span class="down">▼</span></span><span>318 comments</span></div>
</div>
<div class="post">
<p class="meta">r/dataisbeautiful · <span class="flair">OC</span></p>
<div class="thumb t2"></div>
<h4>[OC] Global coffee consumption by country, 2026</h4>
<div class="foot"><span class="vote"><span class="up">▲</span> 1.9k <span class="down">▼</span></span><span>142 comments</span></div>
</div>
</div>
<div class="col">
<div class="post">
<p class="meta">r/movies · <span class="flair">Review</span></p>
<div class="thumb t3"></div>
<h4>Just watched the new sci-fi everyone's talking about — no spoilers</h4>
<div class="foot"><span class="vote"><span class="up">▲</span> 887 <span class="down">▼</span></span><span>76 comments</span></div>
</div>
<div class="post">
<p class="meta">r/askscience</p>
<h4>Why does the sky turn orange right after sunset but not before?</h4>
<div class="foot"><span class="vote"><span class="up">▲</span> 2.3k <span class="down">▼</span></span><span>210 comments</span></div>
</div>
</div>
<div class="side">
<div class="sidecard">
<h5>Trending Today</h5>
<div class="row"><span class="sw a"></span> r/technology <span class="join">Join</span></div>
<div class="row"><span class="sw b"></span> r/space <span class="join">Join</span></div>
<div class="row"><span class="sw c"></span> r/cooking <span class="join">Join</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c4cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c4cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87dfe3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c4cc; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c4cc; color: #000000;
border: 1px solid #27ccd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87dfe3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29cdd4; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F8F7F6; color:#23221F; box-sizing:border-box;
font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; border-bottom:1px solid #EDEBE6; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; color:#00C4CC; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#4E4C49; }
.cta { background:#00C4CC; color:#ffffff; border-radius:6px; padding:0 18px; height:36px; display:flex; align-items:center; font-size:15px; font-weight:700; }
.hero { padding:30px 40px 20px; }
.hero h1 { font-size:28px; font-weight:700; margin:0 0 8px; }
.hero p { font-size:14px; color:#4E4C49; margin:0; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:20px 40px 0; }
.card { background:#ffffff; border:1px solid #EDEBE6; border-radius:8px; padding:18px; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 10px; }
.row { display:flex; gap:8px; }
.field { flex:1; border:1px solid #AAA69F; border-radius:4px; height:36px; }
.notices { display:flex; gap:10px; padding:20px 40px 0; }
.notice { flex:1; border-radius:4px; padding:10px 14px; font-size:13px; }
.info { background:#DDF2FB; color:#1376A0; }
.success { background:#E6F2C8; color:#378445; }
.warn { background:#FAF2D0; color:#F56121; }
</style></head>
<body>
<nav>
<p class="brand">SmartHR</p>
<div class="navlinks"><span>Employees</span><span>Labor Procedures</span><span>Year-End Tax</span></div>
<span class="cta">Save</span>
</nav>
<section class="hero">
<h1>Anyone, efficiently, without getting lost</h1>
<p>All of labor administration, brought into one platform.</p>
</section>
<div class="cards">
<div class="card"><h3>Onboarding</h3><div class="row"><div class="field"></div><div class="field"></div></div></div>
<div class="card"><h3>Year-End Tax Adjustment</h3><div class="row"><div class="field"></div><div class="field"></div></div></div>
</div>
<div class="notices">
<div class="notice info">The filing deadline is the end of this month</div>
<div class="notice success">Saved successfully</div>
<div class="notice warn">Some documents are still missing</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff7e36; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff7e36; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4222; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6f0f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff7e36; color: #000000;
border: 1px solid #ff6f0f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff7e36; color: #111111;
border: 1px solid #d96d30; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4222; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7c30; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Karrot detail mock</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212124; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
* { box-sizing:border-box; }
.wrap { width:960px; height:640px; display:flex; flex-direction:column; }
.photo { position:relative; height:300px; overflow:hidden; background:linear-gradient(160deg,#fff5f0,#f2f3f6); flex:0 0 300px; }
.photo .shape1 { position:absolute; width:260px; height:200px; border-radius:24px; left:110px; top:60px;
background:linear-gradient(150deg,#e7c9a8,#c99a6b); }
.photo .shape2 { position:absolute; width:90px; height:90px; border-radius:16px; left:400px; top:100px;
background:linear-gradient(150deg,#f2b28a,#ff9e66); }
.photo .backbtn { position:absolute; left:20px; top:20px; width:36px; height:36px; border-radius:999px;
background:rgba(255,255,255,0.9); }
.photo .wordmark { position:absolute; left:66px; top:26px; font-size:14px; font-weight:700; color:#212124;
background:rgba(255,255,255,0.9); border-radius:999px; padding:6px 14px; }
.photo .strip { position:absolute; left:20px; bottom:20px; display:flex; gap:6px; }
.photo .strip span { width:40px; height:40px; border-radius:8px; background:rgba(255,255,255,0.9); border:2px solid transparent; }
.photo .strip span.on { border-color:#ff6f0f; }
.photo .count { position:absolute; right:20px; bottom:20px; background:rgba(0,0,0,0.55); color:#ffffff;
font-size:12px; font-weight:400; border-radius:999px; padding:4px 10px; }
.body { flex:1; padding:18px 24px 0 24px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.body h1 { margin:0; font-size:24px; font-weight:700; line-height:1.28; color:#212124; }
.price { font-size:20px; font-weight:700; color:#212124; }
.meta { font-size:13px; font-weight:400; color:#868b94; }
.seller { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #eaebee; border-bottom:1px solid #eaebee; }
.avatar { width:40px; height:40px; border-radius:999px; background:linear-gradient(150deg,#ffd8b8,#ff9e66); flex:0 0 40px; }
.sellerinfo .name { font-size:14px; font-weight:600; color:#212124; }
.sellerinfo .temp { font-size:12px; font-weight:400; color:#ff6f0f; margin-top:2px; }
.desc { font-size:14px; font-weight:400; line-height:1.5; color:#5b5e64; }
.actionbar { margin-top:auto; flex:0 0 76px; display:flex; align-items:center; gap:12px; padding:0 24px;
border-top:1px solid #eaebee; }
.fav { width:44px; height:44px; border-radius:12px; border:1px solid #eaebee; display:flex; align-items:center; justify-content:center; }
.heart { width:18px; height:18px; position:relative; }
.heart::before,.heart::after { content:''; position:absolute; top:0; width:9px; height:14px; border-radius:9px 9px 0 0;
background:#868b94; }
.heart::before { left:0; transform:rotate(-45deg); transform-origin:right; }
.heart::after { right:0; transform:rotate(45deg); transform-origin:left; }
.chat { flex:1; height:44px; border-radius:999px; background:#ff6f0f; color:#ffffff; font-size:14px; font-weight:600;
display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="wrap">
<div class="photo">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="backbtn"></div>
<div class="wordmark">Karrot</div>
<div class="strip"><span class="on"></span><span></span><span></span><span></span></div>
<div class="count">1 / 4</div>
</div>
<div class="body">
<h1>Wooden bookshelf, barely used</h1>
<div class="price">$45</div>
<div class="meta">Chelsea, Manhattan · 2 hr ago · 128 views</div>
<div class="seller">
<div class="avatar"></div>
<div class="sellerinfo"><div class="name">Jordan</div><div class="temp">Manner temp 36.5°C</div></div>
</div>
<div class="desc">Solid oak bookshelf, 5 shelves. No scratches, smoke-free home. Pickup only, happy to help carry it down.</div>
</div>
<div class="actionbar">
<div class="fav"><div class="heart"></div></div>
<div class="chat">Chat</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f8f6; color: #101010;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f8f6; color: #101010;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0; color: #101010; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f9f8f6; color: #101010;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f8f6; color: #333333;
border: 1px solid #bfbebc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fbcd0a; color: #101010;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f8f6; color:#101010; box-sizing:border-box;
font-family:'Space Grotesk','Nunito Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #dddddd; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.search { background:#f9f8f6; border:1px solid #dddddd; border-radius:999px; padding:9px 20px; font-size:12px; color:#666666; width:200px; }
.hero { padding:24px 36px; display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:30px; font-weight:700; margin:0 0 8px; letter-spacing:-.3px; }
.hero p { font-size:13px; color:#333333; margin:0; max-width:320px; font-family:'Nunito Sans',sans-serif; }
.btn-pill { display:inline-block; background:#108474; color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; padding:12px 24px; border-radius:999px; margin-top:12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 36px 16px; }
.card { background:#fff; border-radius:8px; overflow:hidden; }
.card-img { height:104px; background:linear-gradient(135deg,#101010,#108474); position:relative; }
.badge { position:absolute; top:8px; left:8px; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.badge.new { background:#fbcd0a; color:#101010; }
.badge.best { background:#a89cc8; color:#fff; }
.cbody { padding:10px 12px; font-family:'Nunito Sans',sans-serif; }
.cbody h3 { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; margin:0 0 4px; }
.stars { color:#fbcd0a; font-size:11px; }
.price { font-size:15px; font-weight:700; margin-top:4px; font-family:'Space Grotesk',sans-serif; }
footer { position:absolute; bottom:0; left:0; right:0; height:48px; background:#101010; color:#888888;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; font-family:'Nunito Sans',sans-serif; }
</style></head>
<body>
<nav>
<p class="brand">Beardbrand</p>
<div class="navlinks"><span>Beard Oil</span><span>Grooming</span><span>Blades</span><span>Kits</span></div>
<div class="search">Search...</div>
</nav>
<section class="hero">
<div>
<h1>A Rugged, Refined Grooming System</h1>
<p>Beard oils and utilitarian tools for the modern bearded man — sturdy, unpretentious, effective.</p>
<span class="btn-pill">Shop Beard Oil</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge new">New</span></div>
<div class="cbody"><h3>Utility Beard Oil</h3><div class="stars">★★★★★ 4.8</div><div class="price">$29</div></div>
</div>
<div class="card">
<div class="card-img"><span class="badge best">Best Seller</span></div>
<div class="cbody"><h3>Beard Softener</h3><div class="stars">★★★★★ 4.9</div><div class="price">$24</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Sea Salt Spray</h3><div class="stars">★★★★☆ 4.6</div><div class="price">$26</div></div>
</div>
</div>
<footer>
<span>© Beardbrand</span>
<span>Beardbrand · Ingredients · Shipping · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #1d1d1b; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #4a4a4a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #cd4c20; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #ffffff; color: #1d1d1b;
border: 1px solid #1d1d1b; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1b;
border: 1px solid #d0d1d0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4a4a4a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 1px; background: #1d1d1b; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d1d1b; box-sizing:border-box;
font-family:'Lato', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'GTUltra', 'GTUltraFine', Georgia, serif; }
nav { height:64px; border-bottom:1px solid #d0d1d0; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; letter-spacing:0.3px; color:#4a4a4a; }
.navlinks span:first-child { color:#cd4c20; }
.crumb { font-size:12px; color:#9b9b9b; padding:8px 36px 0; }
.crumb b { color:#1d1d1b; font-weight:400; }
.body { display:flex; }
.sidebar { width:170px; border-right:1px solid #d0d1d0; padding:14px 16px; flex-shrink:0; }
.sidebar h4 { font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; margin:0 0 8px; }
.filt { font-size:12px; color:#4a4a4a; display:flex; align-items:center; gap:6px; margin-bottom:7px; }
.filt .box { width:13px; height:13px; border:1px solid #d0d1d0; display:inline-block; }
.filt.on .box { background:#cd4c20; border-color:#cd4c20; }
.filt.on { color:#1d1d1b; font-weight:600; }
.swrow { display:flex; gap:6px; margin-top:6px; }
.sw { width:16px; height:16px; border-radius:9999px; border:1px solid #d0d1d0; }
.sw.active { border:2px solid #1d1d1b; }
.main { flex:1; padding:14px 28px 0; }
.hero-mini { background:#f7f7f7; padding:20px 24px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
.hero-mini h1 { font-size:26px; font-weight:400; margin:0; max-width:340px; line-height:1.15; }
.hero-mini p { font-size:13px; color:#222; margin:6px 0 0; max-width:300px; }
.btn-primary { background:#cd4c20; color:#fff; border:none; border-radius:4px; padding:12px 22px;
font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; height:44px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { border:1px solid #d0d1d0; padding:14px; }
.thumb { aspect-ratio:4/3; background:#f7f7f7; position:relative; margin-bottom:8px; }
.t1::after { content:''; position:absolute; inset:20px; background:linear-gradient(150deg,#e2c3ab,#cd4c20); }
.t2::after { content:''; position:absolute; inset:20px; background:linear-gradient(150deg,#dedede,#9b9b9b); }
.t3::after { content:''; position:absolute; inset:20px; background:linear-gradient(150deg,#1d1d1b,#4a4a4a); }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
padding:3px 6px; z-index:2; }
.badge.new { background:#1d1d1b; color:#fff; }
.badge.sale { background:#eb340a; color:#fff; }
.card h3 { font-size:14px; font-weight:600; margin:0 0 2px; }
.card .price { font-size:14px; margin:0; }
footer { background:#1d1d1b; color:#9b9b9b; font-size:12px; padding:14px 36px; display:flex;
justify-content:space-between; align-items:center; margin-top:14px; }
footer a { color:#9b9b9b; margin-left:14px; }
</style></head>
<body>
<nav>
<p class="brand serif">Bellroy Work</p>
<div class="navlinks"><span>Work</span><span>Bags</span><span>Desk</span><span>Tech</span></div>
</nav>
<div class="crumb">Home / Work / <b>Desk Organizers</b></div>
<div class="body">
<div class="sidebar">
<h4>Material</h4>
<div class="filt on"><span class="box"></span>Leather</div>
<div class="filt"><span class="box"></span>Fabric</div>
<div class="filt"><span class="box"></span>Recycled Nylon</div>
<h4 style="margin-top:14px;">Color</h4>
<div class="swrow"><div class="sw active" style="background:#cd4c20;"></div><div class="sw" style="background:#1d1d1b;"></div><div class="sw" style="background:#9b9b9b;"></div></div>
<h4 style="margin-top:14px;">Price</h4>
<div class="filt"><span class="box"></span>$50–$100</div>
<div class="filt on"><span class="box"></span>$100–$150</div>
</div>
<div class="main">
<div class="hero-mini">
<div>
<h1 class="serif">Desk carry, engineered plainly</h1>
<p>Pouches, pencil cases, and leather organizers built to disappear on a clean desk.</p>
</div>
<button class="btn-primary">Shop Desk</button>
</div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<h3>Leather Desk Pouch</h3>
<p class="price">$99</p>
</div>
<div class="card">
<div class="thumb t2"><span class="badge sale">Sale</span></div>
<h3>Recycled Pencil Case</h3>
<p class="price">$59</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<h3>Tech Kit Organizer</h3>
<p class="price">$119</p>
</div>
</div>
</div>
</div>
<footer>
<span>© Bellroy Work</span>
<div><a href="#">Products</a><a href="#">Support</a><a href="#">Legal</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #368727; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #368727; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9fc498; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00754a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #368727; color: #000000;
border: 1px solid #00754a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #368727; color: #f5f5f5;
border: 1px solid #559948; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9fc498; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d842d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0E1411; color:#E8EFE9; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; font-variant-numeric:tabular-nums; }
.stage { width:960px; height:640px; padding:24px 36px 0; }
.greet { font-size:13px; font-weight:500; color:#9DB0A2; }
.h1 { font-size:26px; font-weight:700; margin-top:2px; }
.totallbl { font-size:12px; font-weight:500; color:#9DB0A2; margin-top:16px; }
.balance { font-size:34px; font-weight:800; letter-spacing:-0.6pt; margin-top:4px; }
.daych { font-size:13px; font-weight:600; color:#15B374; margin-top:6px; }
.daych .m { color:#9DB0A2; font-weight:400; }
.spark { margin-top:16px; height:80px; position:relative; }
.sparksvg { width:100%; height:100%; }
.rangepills { display:flex; gap:8px; margin-top:8px; }
.rp { font-size:11px; font-weight:600; padding:5px 12px; border-radius:999px; background:#1F2C24; color:#9DB0A2; }
.rp.on { background:#368727; color:#fff; }
.rows { margin-top:20px; }
.row { display:flex; align-items:center; padding:12px 0; border-bottom:0.5px solid #26342B; }
.chip38 { width:38px; height:38px; border-radius:10px; background:#1F2C24; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; margin-right:14px; }
.rmid { flex:1; }
.rmid .sym { font-size:15px; font-weight:600; }
.rmid .nm { font-size:12px; color:#9DB0A2; margin-top:2px; }
.rval { text-align:right; }
.rval .v { font-size:16px; font-weight:700; }
.rval .p { font-size:12px; font-weight:600; margin-top:2px; }
.gain { color:#15B374; } .loss { color:#E5544B; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:11px;font-weight:700;letter-spacing:1pt;text-transform:uppercase;color:#368727;margin-bottom:4px">Fidelity (iOS)</div>
<div class="greet">Good morning</div>
<div class="h1">Accounts</div>
<div class="totallbl">Total account value</div>
<div class="balance">$428,164.92</div>
<div class="daych">▲ +$3,841.20 <span class="m">(+0.90%) today</span></div>
<div class="spark">
<svg class="sparksvg" viewBox="0 0 400 80" preserveAspectRatio="none">
<defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4FB23B" stop-opacity="0.32"/><stop offset="100%" stop-color="#4FB23B" stop-opacity="0"/></linearGradient></defs>
<path d="M0,60 L40,50 L80,55 L120,35 L160,40 L200,20 L240,28 L280,15 L320,22 L360,8 L400,12 L400,80 L0,80 Z" fill="url(#g)"/>
<path d="M0,60 L40,50 L80,55 L120,35 L160,40 L200,20 L240,28 L280,15 L320,22 L360,8 L400,12" fill="none" stroke="#4FB23B" stroke-width="2"/>
</svg>
</div>
<div class="rangepills"><span class="rp on">1D</span><span class="rp">1W</span><span class="rp">1M</span><span class="rp">1Y</span><span class="rp">5Y</span><span class="rp">All</span></div>
<div class="rows">
<div class="row"><div class="chip38">VOO</div><div class="rmid"><div class="sym">VOO</div><div class="nm">Vanguard S&P 500 ETF</div></div><div class="rval"><div class="v">$512.30</div><div class="p gain">+1.24%</div></div></div>
<div class="row"><div class="chip38">AAPL</div><div class="rmid"><div class="sym">AAPL</div><div class="nm">Apple Inc.</div></div><div class="rval"><div class="v">$228.40</div><div class="p loss">−0.62%</div></div></div>
<div class="row"><div class="chip38">FXAIX</div><div class="rmid"><div class="sym">FXAIX</div><div class="nm">Fidelity 500 Index Fund</div></div><div class="rval"><div class="v">$198.75</div><div class="p gain">+0.88%</div></div></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.18; letter-spacing: -0.44px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ff385c; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #222222;
border: 1px solid #ff385c; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; background: #ffffff; color: #222222;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #ebebeb; background:#ffffff; }
.brand { font-size:19px; font-weight:700; color:#ff385c; letter-spacing:-0.3px; }
.tabs { display:flex; gap:26px; align-items:center; }
.tab { font-size:14px; font-weight:600; color:#6a6a6a; display:flex; align-items:center; gap:6px; }
.tab.active { color:#222222; position:relative; padding-bottom:19px; }
.tab.active::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:#222222; }
.new-tag { background:#ffffff; border:1px solid #dddddd; color:#222; font-size:8px; font-weight:700;
letter-spacing:0.3px; text-transform:uppercase; padding:1px 6px; border-radius:999px; }
.navcta { background:#ff385c; color:#fff; border-radius:999px; padding:9px 18px; font-size:14px; font-weight:600; }
.searchwrap { display:flex; justify-content:center; padding:20px 0 14px; }
.searchbar { display:flex; align-items:stretch; background:#fff; border:1px solid #dddddd; border-radius:999px;
box-shadow:0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06); overflow:hidden; }
.seg { padding:11px 22px; display:flex; flex-direction:column; gap:1px; min-width:120px; }
.seg + .seg { border-left:1px solid #ebebeb; }
.seg .lbl { font-size:11px; font-weight:700; color:#222; }
.seg .val { font-size:12px; color:#929292; }
.orb { width:40px; height:40px; border-radius:999px; background:#ff385c; align-self:center; margin:6px 10px 6px 4px;
display:flex; align-items:center; justify-content:center; }
.orb svg { width:16px; height:16px; }
.catstrip { display:flex; gap:26px; justify-content:center; padding:2px 0 14px; }
.cat { font-size:12px; font-weight:600; color:#929292; padding-bottom:8px; }
.cat.active { color:#222; border-bottom:2px solid #222; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:0 32px; }
.card { display:flex; flex-direction:column; gap:8px; }
.photo { position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; }
.p1 .photo { background:linear-gradient(155deg,#f6d365,#fda085 55%,#f6d365); }
.p2 .photo { background:linear-gradient(155deg,#89f7fe,#66a6ff 55%,#89f7fe); }
.p3 .photo { background:linear-gradient(155deg,#a1c4fd,#c2e9fb 60%); }
.fav-badge { position:absolute; top:10px; left:10px; background:#fff; border-radius:999px; padding:4px 10px;
font-size:11px; font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
.heart { position:absolute; top:10px; right:10px; width:24px; height:24px; }
.heart svg { width:22px; height:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.meta-row { display:flex; justify-content:space-between; font-size:15px; font-weight:600; }
.meta-sub { font-size:14px; color:#6a6a6a; }
.price { font-size:14px; }
.price b { font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">Airbnb</div>
<div class="tabs">
<div class="tab active">Homes</div>
<div class="tab">Experiences <span class="new-tag">NEW</span></div>
<div class="tab">Services <span class="new-tag">NEW</span></div>
</div>
<div class="navcta">Sign up</div>
</nav>
<div class="searchwrap">
<div class="searchbar">
<div class="seg"><span class="lbl">Where</span><span class="val">Search destinations</span></div>
<div class="seg"><span class="lbl">Check in</span><span class="val">Add dates</span></div>
<div class="seg"><span class="lbl">Check out</span><span class="val">Add dates</span></div>
<div class="seg"><span class="lbl">Who</span><span class="val">Add guests</span></div>
<div class="orb"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.2" y2="16.2"/></svg></div>
</div>
</div>
<div class="catstrip">
<span class="cat active">Amazing views</span>
<span class="cat">Cabins</span>
<span class="cat">Trending</span>
<span class="cat">Beachfront</span>
<span class="cat">Design</span>
</div>
<div class="grid">
<div class="card p1">
<div class="photo"><span class="fav-badge">Guest favorite</span>
<span class="heart"><svg viewBox="0 0 32 32"><path d="M16 28s-11-7-13.5-13.5C.5 9 3 4 8 4c3 0 5 2 8 6 3-4 5-6 8-6 5 0 7.5 5 5.5 10.5C27 21 16 28 16 28z" fill="rgba(255,255,255,0.9)"/></svg></span>
</div>
<div class="meta-row"><span>Cottage in Wilmington</span><span>★ 4.91</span></div>
<div class="meta-sub">2 nights · Nov 12–14</div>
<div class="price"><b>$142</b> night</div>
</div>
<div class="card p2">
<div class="photo"><span class="heart"><svg viewBox="0 0 32 32"><path d="M16 28s-11-7-13.5-13.5C.5 9 3 4 8 4c3 0 5 2 8 6 3-4 5-6 8-6 5 0 7.5 5 5.5 10.5C27 21 16 28 16 28z" fill="rgba(255,255,255,0.55)" stroke="#fff" stroke-width="1"/></svg></span></div>
<div class="meta-row"><span>Villa in Santorini</span><span>★ 4.98</span></div>
<div class="meta-sub">5 nights · Dec 3–8</div>
<div class="price"><b>$389</b> night</div>
</div>
<div class="card p3">
<div class="photo"><span class="fav-badge">Guest favorite</span>
<span class="heart"><svg viewBox="0 0 32 32"><path d="M16 28s-11-7-13.5-13.5C.5 9 3 4 8 4c3 0 5 2 8 6 3-4 5-6 8-6 5 0 7.5 5 5.5 10.5C27 21 16 28 16 28z" fill="rgba(255,255,255,0.55)" stroke="#fff" stroke-width="1"/></svg></span>
</div>
<div class="meta-row"><span>Cabin near Athens</span><span>★ 4.87</span></div>
<div class="meta-sub">3 nights · Jan 9–12</div>
<div class="price"><b>$96</b> night</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
/* left rail — federated identity, always visible */
.rail { width:230px; flex-shrink:0; border-right:1px solid #C0CDD9; padding:22px 18px; display:flex; flex-direction:column; gap:18px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand .mark { width:30px; height:30px; border-radius:8px; background:#6364FF; }
.brand h1 { font-size:19px; font-weight:700; margin:0; letter-spacing:-0.3pt; }
.switcher { display:flex; gap:14px; border-bottom:1px solid #C0CDD9; padding-bottom:10px; }
.switcher span { font-size:14px; color:#606984; padding-bottom:8px; }
.switcher span.on { color:#6364FF; font-weight:600; border-bottom:2px solid #6364FF; }
.profile { margin-top:auto; display:flex; align-items:center; gap:10px; }
.avatar-sq { width:38px; height:38px; border-radius:8px; background:linear-gradient(135deg,#dceeb1,#c5b0f4); }
.profile .who b { display:block; font-size:14px; }
.profile .who span { font-size:12px; color:#606984; }
.compose-fab { position:absolute; left:196px; bottom:22px; width:52px; height:52px; border-radius:999px; background:#6364FF;
box-shadow:rgba(99,100,255,0.35) 0 6px 20px; display:flex; align-items:center; justify-content:center; }
.compose-fab .pencil { width:18px; height:18px; border:2px solid #fff; border-radius:3px; transform:rotate(45deg); }
/* timeline */
.feed { flex:1; overflow:hidden; padding:0 0 0 0; }
.feed-head { padding:18px 26px 8px; border-bottom:1px solid #C0CDD9; }
.feed-head h2 { margin:0; font-size:22px; font-weight:700; letter-spacing:-0.3pt; }
.toot { padding:16px 26px; border-bottom:1px solid #C0CDD9; display:flex; gap:12px; }
.toot .av { width:46px; height:46px; border-radius:8px; flex-shrink:0; }
.toot .body { flex:1; min-width:0; }
.toot .headrow { display:flex; align-items:baseline; gap:6px; }
.toot .headrow b { font-size:16px; font-weight:600; }
.toot .headrow .handle { font-size:14px; color:#606984; }
.toot .headrow .time { margin-left:auto; font-size:13px; color:#606984; }
.toot p.text { margin:6px 0 10px; font-size:16px; line-height:1.45; }
.toot p.text .mention { color:#6364FF; }
.actions { display:flex; justify-content:space-between; max-width:340px; }
.actions .a { display:flex; align-items:center; gap:6px; font-size:13px; color:#606984; }
.actions .a .ic { width:16px; height:16px; border:2px solid #606984; border-radius:3px; }
.actions .a.boost .ic { border-color:#2DCE89; background:#2DCE89; }
.actions .a.boost { color:#2DCE89; }
.actions .a.fav .ic { border-color:#CA8F04; background:#CA8F04; border-radius:2px; }
.actions .a.fav { color:#CA8F04; }
.cw { background:#F2F3F8; border-radius:8px; padding:12px 14px; margin:6px 0 10px; }
.cw .warn { font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; }
.cw .warn .eye { width:14px; height:10px; border:2px solid #000; border-radius:50%; }
.cw .more { margin-top:8px; font-size:14px; font-weight:700; letter-spacing:0.2pt; color:#6364FF; text-transform:uppercase; }
.avatar-1 { background:linear-gradient(135deg,#efd4d4,#c5b0f4); }
.avatar-2 { background:linear-gradient(135deg,#dceeb1,#c8e6cd); }
.avatar-3 { background:linear-gradient(135deg,#c5b0f4,#dceeb1); }
</style></head>
<body>
<div class="shell">
<div class="rail">
<div class="brand"><div class="mark"></div><h1>Mastodon (iOS)</h1></div>
<div class="switcher"><span class="on">Home</span><span>Local</span><span>Federated</span></div>
<div class="profile">
<div class="avatar-sq"></div>
<div class="who"><b>Eugen</b><span>@[email protected]</span></div>
</div>
</div>
<div class="feed">
<div class="feed-head"><h2>Home</h2></div>
<div class="toot">
<div class="av avatar-1"></div>
<div class="body">
<div class="headrow"><b>Marta Reyes</b><span class="handle">@[email protected]</span><span class="time">2h</span></div>
<p class="text">Migrated my whole photography archive to the fediverse this weekend — feels good to own my own timeline again. <span class="mention">#fediverse</span></p>
<div class="actions">
<div class="a"><div class="ic"></div>12</div>
<div class="a boost"><div class="ic"></div>34</div>
<div class="a fav"><div class="ic"></div>58</div>
<div class="a"><div class="ic"></div></div>
</div>
</div>
</div>
<div class="toot">
<div class="av avatar-2"></div>
<div class="body">
<div class="headrow"><b>Deck Notes</b><span class="handle">@[email protected]</span><span class="time">4h</span></div>
<div class="cw">
<div class="warn"><div class="eye"></div>spoilers: season finale reaction</div>
<div class="more">SHOW MORE</div>
</div>
<div class="actions">
<div class="a"><div class="ic"></div>3</div>
<div class="a"><div class="ic"></div>7</div>
<div class="a"><div class="ic"></div>21</div>
<div class="a"><div class="ic"></div></div>
</div>
</div>
</div>
<div class="toot">
<div class="av avatar-3"></div>
<div class="body">
<div class="headrow"><b>Ilya Petrov</b><span class="handle">@[email protected]</span><span class="time">6h</span></div>
<p class="text">Reminder that the federated timeline is the whole point — you're not just talking to your instance, you're talking to the network. <span class="mention">@[email protected]</span> said it best.</p>
<div class="actions">
<div class="a"><div class="ic"></div>2</div>
<div class="a boost"><div class="ic"></div>9</div>
<div class="a"><div class="ic"></div>15</div>
<div class="a"><div class="ic"></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="compose-fab"><div class="pencil"></div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181d26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181d26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.35; letter-spacing: 0.12px; margin: 0; color: #181d26; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.25; margin: 0; color: #41454d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; background: #181d26; color: #ffffff;
border: none; border-radius: 12px; padding: 16px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; background: #ffffff; color: #181d26;
border: 1px solid #181d26; border-radius: 12px;
padding: 16px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.25; background: #ffffff; color: #181d26;
border: 1px solid #c5c6c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #41454d; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dfdfe1; color: #181d26;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181d26; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dddddd; }
.brand { font-size:17px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#333840; }
.navcta { display:flex; gap:10px; align-items:center; }
.btn-primary { background:#181d26; color:#fff; border-radius:12px; padding:9px 18px; font-size:13px; font-weight:500; }
.btn-outline { background:#fff; color:#181d26; border:1px solid #dddddd; border-radius:12px; padding:9px 18px; font-size:13px; font-weight:500; }
.hero { padding:26px 32px 20px; }
.hero h1 { font-size:34px; font-weight:400; line-height:1.15; margin:0 0 8px; max-width:560px; }
.hero p { font-size:14px; color:#333840; margin:0 0 14px; }
.hero .row { display:flex; gap:10px; }
.coral { margin:0 32px 16px; background:#aa2d00; border-radius:12px; padding:26px 32px; color:#fff;
display:flex; align-items:center; justify-content:space-between; gap:24px; }
.coral .txt h2 { font-size:24px; font-weight:400; margin:0 0 8px; max-width:360px; line-height:1.2; }
.coral .txt p { font-size:13px; opacity:0.9; margin:0 0 12px; max-width:340px; }
.coral .btn-white { background:#fff; color:#181d26; border-radius:12px; padding:8px 16px; font-size:13px; font-weight:500; display:inline-block; }
.coral .art { width:170px; height:100px; border-radius:10px; background:
repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 34px),
repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 22px), #7a2200; }
.demorow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px; }
.demo { border-radius:10px; padding:14px; height:112px; display:flex; flex-direction:column; justify-content:space-between; }
.demo .lbl { font-size:12px; font-weight:600; }
.demo .bar { height:6px; border-radius:4px; background:rgba(0,0,0,0.15); }
.demo .bar.b2 { width:60%; }
.d1 { background:#fcab79; }
.d2 { background:#a8d8c4; }
.d3 { background:#f5e9d4; }
.d4 { background:#f4d35e; }
</style></head>
<body>
<nav>
<div class="brand">Airtable</div>
<div class="navlinks"><span>Platform</span><span>Solutions</span><span>Resources</span><span>Pricing</span></div>
<div class="navcta"><span class="btn-outline">Book demo</span><span class="btn-primary">Sign up for free</span></div>
</nav>
<div class="hero">
<h1>Production apps<br>at prototype speed</h1>
<p>Connect your data, build workflows, ship the app your team actually needs.</p>
<div class="row"><span class="btn-primary">Sign up for free</span><span class="btn-outline">Book demo</span></div>
</div>
<div class="coral">
<div class="txt">
<h2>The path to 10× every person in your organization</h2>
<p>Turn spreadsheets of intent into shipped software — no engineering queue required.</p>
<span class="btn-white">See how it works</span>
</div>
<div class="art"></div>
</div>
<div class="demorow">
<div class="demo d1"><span class="lbl">Launch tracker</span><div class="bar"></div><div class="bar b2"></div></div>
<div class="demo d2"><span class="lbl">Content calendar</span><div class="bar"></div><div class="bar b2"></div></div>
<div class="demo d3"><span class="lbl">Product roadmap</span><div class="bar"></div><div class="bar b2"></div></div>
<div class="demo d4"><span class="lbl">Deal pipeline</span><div class="bar"></div><div class="bar b2"></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #088a29; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #088a29;
border: 1px solid #088a29; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7ecdd; color: #088a29;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#111113; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace; }
.app { display:flex; width:960px; height:640px; }
.listcol { width:360px; border-right:1px solid #E2E2E5; }
.lc-head { padding:20px 20px 10px; font-size:32px; font-weight:800; }
.row { display:flex; align-items:center; gap:12px; height:64px; padding:0 20px; border-bottom:1px solid #E2E2E5; }
.av { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
.rinfo { flex:1; }
.rname { font-size:15px; font-weight:500; }
.rmeta { display:flex; align-items:center; gap:6px; margin-top:3px; }
.dots { display:flex; gap:3px; }
.dots span { width:7px; height:7px; border-radius:50%; }
.rcap { font-size:14px; color:#6B6B70; }
.side { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:#F4F4F6; }
.idbadge { font-size:11px; letter-spacing:2px; color:#088A29; font-weight:700; }
.qr { width:200px; height:200px; background:#fff; border-radius:12px; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); padding:16px; gap:3px; }
.qr div { background:#088A29; }
.qr div:nth-child(3n) { background:transparent; }
.qr div:nth-child(5n) { background:transparent; }
.idtext { font-size:20px; font-weight:700; letter-spacing:2px; background:#fff; padding:10px 20px; border-radius:8px; }
.idcap { font-size:13px; color:#6B6B70; max-width:260px; text-align:center; }
.verifybtn { background:#088A29; color:#fff; padding:14px 28px; border-radius:10px; font-size:16px; font-weight:600; }
</style></head>
<body>
<div class="app">
<div class="listcol">
<div class="lc-head">Chats</div>
<div class="row"><div class="av" style="background:#4A4A4A">JK</div>
<div class="rinfo"><div class="rname">Jonas K.</div>
<div class="rmeta"><div class="dots"><span style="background:#15A33A"></span><span style="background:#15A33A"></span><span style="background:#15A33A"></span></div><span class="rcap">Verified · ECHOX9P2</span></div></div></div>
<div class="row"><div class="av" style="background:#6B6B70">MA</div>
<div class="rinfo"><div class="rname">Maria A.</div>
<div class="rmeta"><div class="dots"><span style="background:#EF8B2C"></span><span style="background:#EF8B2C"></span><span style="background:#EF8B2C"></span></div><span class="rcap">Server-matched</span></div></div></div>
<div class="row"><div class="av" style="background:#8993A4">?</div>
<div class="rinfo"><div class="rname">Unknown ID BQ7XZP2K</div>
<div class="rmeta"><div class="dots"><span style="background:#E5453A"></span><span style="background:#E5453A"></span><span style="background:#E5453A"></span></div><span class="rcap">Unknown</span></div></div></div>
</div>
<div class="side">
<div class="idbadge">YOUR THREEMA ID</div>
<div class="qr"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="idtext mono">ECHOX9P2</div>
<div class="idcap">Scan in person to reach three green dots · no phone number, no email — Threema (iOS)</div>
<div class="verifybtn">Scan QR</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f4ed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f4ed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #797774; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d97757; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f8f4ed; color: #d97757;
border: 1px solid #d97757; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f8f4ed; color: #111111;
border: 1px solid #d3d0ca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #797774; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f3e0d5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F8F4ED; color:#2D2520; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; width:960px; height:640px; }
/* ---- sidebar: conversation history ---- */
.side { width:220px; flex:0 0 220px; background:#F0EAE0; border-right:1px solid #DDD2BD;
display:flex; flex-direction:column; padding:18px 14px; }
.newchat { display:flex; align-items:center; gap:8px; background:#FBF9F4; border:1px solid #DDD2BD;
border-radius:12px; padding:10px 14px; font-size:13px; font-weight:500; color:#2D2520; }
.newchat .plus { font-size:15px; color:#D97757; }
.grouplabel { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4pt;
color:#8A7E72; margin:18px 0 6px 6px; }
.convo { padding:9px 10px; border-radius:8px; font-size:12.5px; color:#2D2520; margin-bottom:2px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.convo.active { background:#E8E0D2; border-left:3px solid #D97757; padding-left:7px; font-weight:500; }
.convo .time { display:block; font-size:10.5px; color:#8A7E72; margin-top:2px; }
/* ---- main chat ---- */
.main { flex:1; display:flex; flex-direction:column; background:#F8F4ED; }
.topbar { height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:space-between;
padding:0 22px; }
.topbar .title { font-size:16px; font-weight:600; }
.topbar .dots { color:#8A7E72; font-size:16px; letter-spacing:2px; }
.modelchip { align-self:flex-start; margin:0 22px 14px; display:inline-flex; align-items:center; gap:6px;
background:#F0EAE0; border-radius:16px; padding:6px 12px; width:fit-content; }
.modelchip .star { color:#D97757; font-size:13px; }
.modelchip .name { font-size:12px; font-weight:500; }
.modelchip .chev { font-size:9px; color:#8A7E72; }
.thread { flex:1; padding:0 26px; display:flex; flex-direction:column; gap:22px; overflow:hidden; }
.userpill { align-self:flex-end; max-width:78%; background:#F0EAE0; border-radius:18px;
padding:11px 16px; font-size:13.5px; line-height:1.5; }
.assistant { display:flex; gap:12px; }
.avatar { flex:0 0 20px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center;
justify-content:center; color:#D97757; font-size:15px; margin-top:2px; }
.abody { flex:1; }
.sender { font-size:11.5px; font-weight:500; color:#5A4F44; margin-bottom:5px; }
.sender .model { color:#8A7E72; font-weight:400; }
.serifbody { font-family:Georgia,'Times New Roman',serif; font-size:14.5px; line-height:1.6; color:#2D2520; }
.serifbody h3 { font-size:16px; margin:0 0 6px; font-weight:600; }
.serifbody p { margin:0 0 8px; }
.cursor { display:inline-block; width:6px; height:14px; background:#D97757; border-radius:1px;
vertical-align:text-bottom; margin-left:2px; }
.inputbar { flex:0 0 74px; margin:10px 22px 20px; background:#FBF9F4; border:1.5px solid #D97757;
border-radius:20px; display:flex; align-items:center; padding:12px 12px 12px 18px; gap:10px; }
.inputbar .ph { flex:1; font-size:13.5px; color:#8A7E72; }
.clip { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
color:#5A4F44; font-size:14px; }
.send { width:38px; height:38px; border-radius:50%; background:#D97757; display:flex; align-items:center;
justify-content:center; color:#FBF9F4; font-size:15px; }
</style></head>
<body>
<div class="shell">
<div class="side">
<div class="newchat"><span class="plus">＋</span> New chat</div>
<div class="grouplabel">Today</div>
<div class="convo active">Claude (iOS) paper aesthetic<span class="time">2:14 PM</span></div>
<div class="convo">Tiempos vs Styrene pairing<span class="time">11:02 AM</span></div>
<div class="grouplabel">Yesterday</div>
<div class="convo">Artifact tray layout ideas<span class="time">Yesterday</span></div>
<div class="convo">Warm syntax palette check<span class="time">Yesterday</span></div>
</div>
<div class="main">
<div class="topbar"><span class="title">Paper aesthetic</span><span class="dots">⋯</span></div>
<div class="modelchip"><span class="star">✻</span><span class="name">Claude Opus 4.5</span><span class="chev">▾</span></div>
<div class="thread">
<div class="userpill">Why does Claude (iOS) use a serif for its own replies instead of a sans like everyone else?</div>
<div class="assistant">
<div class="avatar">✻</div>
<div class="abody">
<div class="sender">Claude (iOS) <span class="model">· Opus 4.5</span></div>
<div class="serifbody">
<h3>It's a typographic role‑asymmetry</h3>
<p>Serif for me, sans for you — the pairing itself is the brand decision. Tiempos reads as essay, not chatbot.<span class="cursor"></span></p>
</div>
</div>
</div>
</div>
<div class="inputbar"><span class="ph">Reply to Claude (iOS)…</span><span class="clip">📎</span><span class="send">↑</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #698796; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #f4b153; color: #111827;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #325d75;
border: 1px solid #2299dd; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111827;
border: 1px solid #d1d5db; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #698796; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.6px; background: #325d75; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111827; box-sizing:border-box;
font-family:'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace; }
* { box-sizing:border-box; }
nav { height:56px; background:#1f2937; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { color:#f4b153; font-size:16px; font-weight:700; margin:0; letter-spacing:0.5px; }
.navlinks { display:flex; gap:20px; font-family:Georgia, serif; }
.navlinks span { color:#e5e7eb; font-size:12px; }
.searchbox { background:#111827; border:1px solid #325d75; border-radius:2px; height:30px; padding:0 12px;
display:flex; align-items:center; font-size:11px; color:#698796; width:220px; }
main { display:flex; height:584px; }
.stage { width:310px; background:#1f2937; display:flex; align-items:center; justify-content:center; position:relative; }
.instrument { width:220px; height:150px; background:#0d1420; border:3px solid #325d75; border-radius:4px; position:relative; }
.screen { position:absolute; top:14px; left:14px; right:14px; height:60px; background:#08110a; border:1px solid #325d75; }
.needle { position:absolute; top:34px; left:24px; width:100px; height:2px; background:#f4b153; transform:rotate(-8deg); }
.knob { position:absolute; bottom:14px; width:22px; height:22px; border-radius:999px; background:#325d75; border:2px solid #698796; }
.k1 { left:20px; } .k2 { left:52px; } .k3 { left:84px; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:10px; }
.breadcrumb { font-size:11px; color:#6b7280; }
h1 { font-size:19px; font-weight:700; margin:0; font-family:Georgia, serif; color:#111827; }
table.specs { width:100%; border-collapse:collapse; margin-top:4px; font-size:11px; }
table.specs td { border:1px solid #e5e7eb; padding:5px 9px; }
table.specs td.k { background:#f3f4f6; font-weight:700; width:170px; color:#325d75; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:22px; font-weight:700; color:#f4b153; }
.actions { display:flex; gap:10px; }
.btn-primary { background:#f4b153; color:#111827; border-radius:2px; height:42px; padding:0 22px; display:flex;
align-items:center; font-weight:700; font-size:12px; }
.btn-secondary { background:#fff; border:1px solid #d1d5db; color:#111827; border-radius:2px; height:42px;
padding:0 16px; display:flex; align-items:center; font-size:12px; }
.note { margin-top:auto; font-size:11px; color:#6b7280; border-top:1px solid #e5e7eb; padding-top:10px; }
</style></head>
<body>
<nav>
<p class="brand">B And K Precision</p>
<div class="navlinks"><span>Oscilloscopes</span><span>Power Supplies</span><span>Meters</span></div>
<div class="searchbox">model, part no., or spec…</div>
</nav>
<main>
<div class="stage">
<div class="instrument"><div class="screen"><div class="needle"></div></div><div class="knob k1"></div><div class="knob k2"></div><div class="knob k3"></div></div>
</div>
<div class="info">
<p class="breadcrumb">Power Supplies / Bench DC / Dual Output</p>
<h1>Model 9130 Triple-Output DC Power Supply</h1>
<table class="specs">
<tr><td class="k">Output</td><td>0-30V/3A x2, 0-5V/3A x1</td></tr>
<tr><td class="k">Regulation</td><td>±0.01% line, ±0.02% load</td></tr>
<tr><td class="k">Interface</td><td>USB, RS-232, GPIB optional</td></tr>
<tr><td class="k">Warranty</td><td>3-year standard</td></tr>
</table>
<div class="price-row"><span class="price">$895.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Download Manual</div>
</div>
<div class="note">Calibration certificate available on request at time of order.</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa4747; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #fa4747;
border: 1px solid #fa4747; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fee2e2; color: #fa4747;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1D1D1F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; padding:22px 16px; position:relative; }
.navtitle { font-size:20px; font-weight:700; margin-bottom:12px; }
.legend { height:10px; border-radius:5px; background:linear-gradient(90deg,#34C759,#A8E6B8,#F5F5F7,#FFC7C7,#FA4747);
margin-bottom:6px; }
.legendlbl { display:flex; justify-content:space-between; font-size:10px; color:#6E6E73; margin-bottom:10px; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:16px; }
.cell { height:44px; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center;
font-size:12px; font-weight:600; }
.cell .p { font-size:8px; font-weight:600; }
.cell.sel { outline:2px solid #1D1D1F; outline-offset:-2px; }
.farecard { border:1px solid #E5E5EA; border-radius:16px; padding:14px; box-shadow:rgba(0,0,0,0.06) 0 4px 16px; }
.frow { display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:2px; }
.fmeta { font-size:11px; color:#6E6E73; margin-bottom:8px; }
.price { font-size:28px; font-weight:700; letter-spacing:-0.5px; }
.verdict { display:inline-block; background:#34C759; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
padding:4px 10px; border-radius:999px; margin-left:8px; }
.confbar { display:flex; gap:4px; margin:10px 0 4px; }
.confbar span { flex:1; height:6px; border-radius:3px; background:#34C759; }
.confbar span.e { background:#E5E5EA; }
.conftxt { font-size:11px; color:#6E6E73; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:rgba(255,255,255,0.96);
border-top:0.5px solid #E5E5EA; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#6E6E73; text-align:center; }
.tab.on { color:#FA4747; font-weight:700; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.brand span { color:#FA4747; }
.tag { font-size:14px; color:#6E6E73; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:8px; border:1px solid #E5E5EA; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6E6E73; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; letter-spacing:-0.4px; }
.typeblock .t2 { font-size:13px; color:#6E6E73; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#F5F5F7; border:1px solid #E5E5EA; color:#6E6E73; }
.footer { margin-top:auto; border-top:1px solid #E5E5EA; padding-top:16px; font-size:11px; color:#A1A1A6; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<p class="navtitle">SFO → JFK</p>
<div class="legend"></div>
<div class="legendlbl"><span>Buy</span><span>Wait</span></div>
<div class="cal">
<div class="cell" style="background:#34C759;color:#fff">10<span class="p">$189</span></div>
<div class="cell" style="background:#A8E6B8">11<span class="p">$212</span></div>
<div class="cell" style="background:#F5F5F7">12<span class="p">$247</span></div>
<div class="cell sel" style="background:#F5F5F7">13<span class="p">$247</span></div>
<div class="cell" style="background:#FFC7C7">14<span class="p">$298</span></div>
<div class="cell" style="background:#FA4747;color:#fff">15<span class="p">$355</span></div>
<div class="cell" style="background:#FFC7C7">16<span class="p">$302</span></div>
</div>
<div class="farecard">
<div class="frow"><span>SFO → JFK</span><span>United · Nonstop · 5h 42m</span></div>
<div class="fmeta">United · Nonstop · 5h 42m</div>
<div><span class="price">$247</span><span class="verdict">Wait</span></div>
<div class="confbar"><span></span><span></span><span></span><span class="e"></span></div>
<div class="conftxt">Hopper is 87% confident — likely cheaper soon</div>
</div>
<div class="tabbar"><div class="tab on">Home</div><div class="tab">Watches</div><div class="tab">Trips</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Hopper (iOS)<span>.</span></h1>
<p class="tag">A calendar that answers "buy now or wait?" — a green-to-red heatmap and a colored verdict pill on every fare.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#FA4747"></div><small>#FA4747</small></div>
<div class="sw"><div class="chip2" style="background:#34C759"></div><small>#34C759</small></div>
<div class="sw"><div class="chip2" style="background:#FFC7C7"></div><small>#FFC7C7</small></div>
<div class="sw"><div class="chip2" style="background:#A8E6B8"></div><small>#A8E6B8</small></div>
<div class="sw"><div class="chip2" style="background:#F5F5F7"></div><small>#F5F5F7</small></div>
</div>
<div class="typeblock">
<div class="t1">$247</div>
<div class="t2">Inter · 28pt / 700 · the predicted price is always the hero, paired with a verdict pill</div>
</div>
<div class="taglist">
<span>Prediction heatmap</span><span>Buy/Wait verdict pill</span><span>Confidence bar</span>
<span>Watch-price toggle</span><span>Bunny mascot</span>
</div>
<div class="footer">Clean white canvas · red/green is a strict semantic pair, never decorative</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ebebeb; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ebebeb; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #2f7bbf; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #272727;
border: 1px solid #2f7bbf; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #404040;
border: 1px solid #bababa; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ebebeb; color:#272727; box-sizing:border-box;
font-family:-apple-system, Arial, BlinkMacSystemFont, "Helvetica Neue", Oxygen, Roboto, "Segoe UI", Ubuntu, sans-serif; }
* { box-sizing:border-box; }
nav { height:48px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 20px; border-bottom:1px solid #dedede; }
.brand { font-size:20px; font-weight:700; color:#272727; }
.navlinks { display:flex; gap:18px; font-size:13px; font-weight:600; color:#404040; }
.searchbox { display:flex; align-items:center; background:#f5f5f5; border:1px solid #dedede; border-radius:8px;
padding:0 10px; height:32px; width:220px; font-size:12px; color:#737373; }
.catnav { height:36px; background:#ffffff; border-bottom:1px solid #dedede; display:flex; align-items:center;
gap:8px; padding:0 20px; }
.cat { font-size:12px; font-weight:600; color:#737373; padding:5px 12px; border-radius:2px; }
.cat.active { background:#2f7bbf; color:#ffffff; }
.crumb { font-size:11px; color:#737373; padding:6px 20px 0; }
.crumb b { color:#272727; font-weight:600; }
main { display:flex; padding:10px 20px 0; gap:20px; height:454px; }
.gallery { width:340px; display:flex; flex-direction:column; gap:8px; }
.mainshot { flex:1; background:#ffffff; border:1px solid #dedede; border-radius:2px; position:relative;
overflow:hidden; display:flex; align-items:center; justify-content:center; }
.mainshot .box { width:210px; height:270px; border-radius:2px; position:relative;
background:linear-gradient(160deg,#f4f7fa 0%,#dfe9f2 45%,#c7dbec 100%); border:1px solid #c3d3e0; }
.mainshot .box::before { content:''; position:absolute; left:14px; right:14px; top:16px; height:150px;
border-radius:2px; background:linear-gradient(150deg,#2f7bbf,#163959); opacity:.9; }
.mainshot .box::after { content:''; position:absolute; left:26px; right:26px; bottom:20px; height:10px;
background:#bfbfbf; border-radius:2px; }
.badges-float { position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; }
.thumbs { display:flex; gap:6px; }
.thumb { flex:1; height:52px; background:#ffffff; border:1px solid #dedede; border-radius:2px; }
.thumb.sel { border-color:#2f7bbf; border-width:2px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
padding:2px 6px; border-radius:2px; color:#fff; }
.b-preorder { background:#f68b1f; }
.b-limited { background:#de5052; }
.b-new { background:#62a1d8; }
.badgerow { display:flex; gap:6px; }
h1 { font-size:19px; font-weight:600; margin:2px 0 0; line-height:1.3; }
.sku { font-family:Courier, monospace; font-size:11px; color:#737373; }
.stars { font-size:12px; color:#f68b1f; }
.stars span.n { color:#737373; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:24px; font-weight:700; color:#272727; }
.release { font-size:12px; color:#404040; background:#f5f5f5; border:1px solid #dedede; border-radius:4px; padding:4px 10px; }
.release b { color:#272727; }
.variants { display:flex; gap:8px; margin-top:4px; }
.chip { font-size:12px; font-weight:600; color:#404040; background:#ffffff; border:1px solid #dedede;
border-radius:2px; padding:7px 14px; }
.chip.sel { border-color:#2f7bbf; border-width:2px; color:#2f7bbf; }
.qty { display:flex; align-items:center; border:1px solid #dedede; border-radius:2px; height:36px; width:96px; }
.qty div { flex:1; text-align:center; font-size:13px; }
.cta-row { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#2f7bbf; color:#fff; font-size:14px; font-weight:600; border-radius:4px; height:36px;
padding:0 22px; display:flex; align-items:center; justify-content:center; }
.btn-secondary { background:#ffffff; color:#272727; font-size:14px; font-weight:600; border-radius:4px; height:36px;
padding:0 18px; border:1px solid #dedede; display:flex; align-items:center; justify-content:center; }
.specs { margin-top:6px; background:#f5f5f5; border-radius:4px; padding:10px 14px; display:grid;
grid-template-columns:1fr 1fr; gap:6px 16px; }
.spec-item { font-size:11px; }
.spec-item .lab { color:#737373; text-transform:uppercase; letter-spacing:.4px; font-size:10px; }
.spec-item .val { color:#272727; font-weight:600; font-size:12px; }
footer { position:absolute; bottom:0; left:0; right:0; height:26px; background:#163959; color:#bada7a;
display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:10px; }
body { position:relative; }
</style></head>
<body>
<nav>
<span class="brand">Amiami</span>
<div class="navlinks"><span>Figures</span><span>Model Kits</span><span>Pre-Order</span><span>Games</span><span>Sale</span></div>
<div class="searchbox">Search inventory…</div>
</nav>
<div class="catnav">
<span class="cat active">Figures</span><span class="cat">Nendoroid</span><span class="cat">Scale Figures</span><span class="cat">Prize Items</span>
</div>
<div class="crumb">Home / Figures / Scale Figures / <b>1/7 Starlight Aria — Night Bloom Ver.</b></div>
<main>
<div class="gallery">
<div class="mainshot">
<div class="badges-float">
<span class="badge b-preorder">Pre-Order</span>
<span class="badge b-limited">Limited</span>
</div>
<div class="box"></div>
</div>
<div class="thumbs">
<div class="thumb sel"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div>
</div>
</div>
<div class="info">
<div class="badgerow"><span class="badge b-new">New Listing</span></div>
<h1>1/7 Scale Figure — Starlight Aria: Night Bloom Ver.</h1>
<div class="sku">SKU FIGR-88213-JP · Manufacturer: Lumen Craft</div>
<div class="stars">★★★★☆ <span class="n">4.3 (128 reviews)</span></div>
<div class="price-row">
<span class="price">¥18,480</span>
<span class="release">Release: <b>Mar 2027</b> · Payment due on release</span>
</div>
<div class="variants">
<span class="chip sel">Standard Edition</span>
<span class="chip">Deluxe + Diorama Base</span>
</div>
<div class="cta-row">
<div class="qty"><div>−</div><div>1</div><div>+</div></div>
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Add to Wishlist</div>
</div>
<div class="specs">
<div class="spec-item"><div class="lab">Scale</div><div class="val">1/7 Non-scale base</div></div>
<div class="spec-item"><div class="lab">Height</div><div class="val">Approx. 260mm</div></div>
<div class="spec-item"><div class="lab">Material</div><div class="val">PVC, ABS</div></div>
<div class="spec-item"><div class="lab">Sculptor</div><div class="val">Studio Kaen</div></div>
</div>
</div>
</main>
<footer><span>© Amiami</span><span>Import fees may apply at checkout</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #1990c6; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #000000;
border: 1px solid #1990c6; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dfeff7; color: #1990c6;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #cccccc; }
.logo { display:flex; align-items:center; gap:10px; }
.mark { width:28px; height:28px; background:#cc0000; position:relative; }
.mark::before { content:''; position:absolute; inset:6px; background:#ffffff; }
.wordmark { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:24px; font-size:14px; }
main { padding:24px 32px 0; display:flex; gap:32px; }
.left { width:420px; }
.imgbox { height:300px; border:1px solid #cccccc; display:flex; align-items:center; justify-content:center;
color:#999999; font-size:12px; }
.meta-line { font-size:14px; font-style:italic; color:#666666; margin-top:16px; }
.desc { font-size:16px; color:#333333; line-height:1.5; margin-top:16px; }
.right { flex:1; }
h1 { font-size:24px; font-weight:700; margin:0; line-height:1.33; }
.tagline { font-size:14px; color:#666666; margin-top:6px; }
.price { font-size:20px; font-weight:700; margin-top:16px; }
.facts { margin-top:16px; font-size:14px; color:#333333; line-height:1.9; }
.facts b { color:#000000; }
.btnrow { display:flex; gap:12px; margin-top:20px; }
.btn-primary { background:#1990c6; color:#ffffff; font-size:16px; font-weight:700; height:44px;
padding:0 24px; display:flex; align-items:center; }
.btn-secondary { background:#ffffff; color:#000000; border:1px solid #000000; font-size:16px; font-weight:700;
height:44px; padding:0 23px; display:flex; align-items:center; }
.related { margin-top:24px; font-size:14px; }
.related a { color:#1990c6; text-decoration:underline; display:block; margin-top:6px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:14px 32px; border-top:1px solid #cccccc;
font-size:14px; color:#666666; }
footer a { color:#1990c6; text-decoration:underline; }
</style></head>
<body>
<nav>
<div class="logo"><span class="mark"></span><span class="wordmark">Amigo Games</span></div>
<div class="navlinks"><span>Games</span><span>About</span><span>Press</span><span>Contact</span></div>
</nav>
<main>
<div class="left">
<div class="imgbox">Box Art</div>
<div class="meta-line">Released — For immediate distribution</div>
<div class="desc">A cooperative strategy card game for players who prefer to win or lose together. No decoration, no gimmicks — just the mechanism, printed clearly and shipped on time.</div>
</div>
<div class="right">
<h1>Meridian Line — Card Game</h1>
<div class="tagline">By Amigo Games · 3rd Printing</div>
<div class="price">$24.99</div>
<div class="facts">
<div>[2–5 Players]</div>
<div>[30–45 Min]</div>
<div>[Ages 10+]</div>
<div><b>In stock</b> — ships within 2 business days</div>
</div>
<div class="btnrow">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Learn More</div>
</div>
<div class="related">
Related Titles:
<a>Saboteur — Duel</a>
<a>The Game — Extreme</a>
<a>Meridian Line — Expansion Pack</a>
</div>
</div>
</main>
<footer>Amigo Games · Press & Sales Inquiries: <a>[email protected]</a></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #202020;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #202020;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #202020; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fff200; color: #202020;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #202020;
border: 1px solid #fff200; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #202020;
border: 1px solid #c7c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ed1c24; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202020; box-sizing:border-box;
font-family:Arial, Helvetica, Verdana, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
border-bottom:1px solid #d7d7d7; }
.brand { font-family:'standard0765Regular',Arial,Helvetica,sans-serif; font-size:22px; }
.navlinks { display:flex; gap:18px; font-size:14px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.navlinks .on { border-bottom:3px solid #fff200; padding-bottom:14px; }
.cart { width:32px; height:32px; border-radius:9999px; background:#fff200; position:relative; }
.cart .badge { position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:9999px;
background:#ed1c24; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.searchbar { height:40px; margin:10px 24px 0; border:2px solid #d7d7d7; border-radius:4px; display:flex;
align-items:center; padding:0 14px; font-size:13px; color:#777777; }
main { display:flex; gap:20px; padding:12px 24px 0; height:470px; }
.left { width:230px; display:flex; flex-direction:column; gap:8px; }
.sleeve { height:230px; background:#f3f3f3; border:1px solid #d7d7d7; position:relative; display:flex;
align-items:center; justify-content:center; overflow:hidden; }
.vinyl { width:170px; height:170px; border-radius:9999px; background:
repeating-radial-gradient(circle,#141414 0px,#141414 2px,#1f1f1f 3px,#1f1f1f 5px);
position:relative; box-shadow:0 6px 14px rgba(0,0,0,.25); }
.vinyl::before { content:''; position:absolute; inset:38%; border-radius:9999px;
background:linear-gradient(160deg,#ed1c24,#7a0e12); }
.vinyl::after { content:''; position:absolute; inset:47%; border-radius:9999px; background:#202020; }
.badges-float { position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:5px; }
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
padding:2px 6px; border-radius:2px; color:#202020; }
.b-sale { background:#ed1c24; color:#fff; }
.b-used { background:#202020; color:#fff200; }
.genres { display:flex; gap:6px; flex-wrap:wrap; }
.genre { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#777777;
background:#f3f3f3; border-radius:4px; padding:4px 8px; }
.genre.on { background:#202020; color:#fff; }
.right { flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.crumb { font-size:11px; color:#777777; }
h1 { font-family:'standard0758Regular',Arial,Helvetica,sans-serif; font-size:22px; font-weight:400; margin:2px 0 0; }
.artist { font-size:14px; font-weight:700; color:#404040; }
.stars { font-size:12px; color:#202020; }
.stars span.n { color:#777777; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:20px; font-weight:700; }
.price-old { font-size:13px; color:#777777; text-decoration:line-through; }
.formats { display:flex; gap:8px; margin-top:2px; }
.chip { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; background:#ffffff;
border:2px solid #202020; padding:7px 14px; }
.chip.sel { background:#202020; color:#fff200; border-color:#202020; }
.cta-row { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#fff200; color:#202020; font-size:14px; font-weight:700; text-transform:uppercase;
letter-spacing:.5px; border-radius:4px; height:40px; padding:0 24px; display:flex; align-items:center; }
.btn-secondary { background:#ffffff; color:#202020; border:2px solid #202020; font-size:14px; font-weight:700;
text-transform:uppercase; letter-spacing:.5px; border-radius:4px; height:40px; padding:0 20px;
display:flex; align-items:center; }
.specs { margin-top:4px; background:#f3f3f3; border:1px solid #d7d7d7; padding:10px 14px; display:grid;
grid-template-columns:1fr 1fr; gap:6px 16px; }
.spec-item { font-size:11px; }
.spec-item .lab { color:#777777; text-transform:uppercase; letter-spacing:.4px; font-size:10px; }
.spec-item .val { color:#202020; font-weight:700; font-size:12px; }
footer { position:absolute; bottom:0; left:0; right:0; height:34px; background:#36043c; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 24px; font-size:11px; }
footer b { color:#fff200; text-transform:uppercase; letter-spacing:.5px; }
</style></head>
<body>
<nav>
<span class="brand">Amoeba Music</span>
<div class="navlinks"><span class="on">Vinyl</span><span>CDs</span><span>Movies</span><span>Merch</span></div>
<div class="cart"><span class="badge">3</span></div>
</nav>
<div class="searchbar">Search artist, title, or catalog #…</div>
<main>
<div class="left">
<div class="sleeve">
<div class="badges-float">
<span class="badge b-sale">Sale</span>
<span class="badge b-used">Used — VG+</span>
</div>
<div class="vinyl"></div>
</div>
<div class="genres">
<span class="genre on">Post-Punk</span><span class="genre">Import</span><span class="genre">Reissue</span>
</div>
</div>
<div class="right">
<div class="crumb">Home / Vinyl / Post-Punk / <b>Nocturne Static</b></div>
<h1>Nocturne Static</h1>
<div class="artist">Glass Harbor</div>
<div class="stars">★★★★☆ <span class="n">4.4 (67 reviews)</span></div>
<div class="price-row">
<span class="price">$21.99</span>
<span class="price-old">$27.99</span>
</div>
<div class="formats">
<span class="chip sel">180g LP</span>
<span class="chip">CD</span>
<span class="chip">Cassette</span>
</div>
<div class="cta-row">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">In-Store Pickup</div>
</div>
<div class="specs">
<div class="spec-item"><div class="lab">Label</div><div class="val">Harbor Line Records</div></div>
<div class="spec-item"><div class="lab">Pressing</div><div class="val">2027 Reissue, 180g</div></div>
<div class="spec-item"><div class="lab">Condition</div><div class="val">Sleeve: VG+ / Disc: NM</div></div>
<div class="spec-item"><div class="lab">Catalog #</div><div class="val">HLR-0442</div></div>
</div>
</div>
</main>
<footer><span>© Amoeba Music</span><span>Buy · Sell · Trade — <b>walk-ins welcome</b></span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #008cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #008cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0077fe; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008cff; color: #000000;
border: 1px solid #0077fe; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #008cff; color: #f5f5f5;
border: 1px solid #279dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0089ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#ffffff; border-bottom:1px solid #ededed; }
.brand { font-size:19px; font-weight:700; margin:0; color:#101a2e; }
.tabs { display:flex; gap:10px; }
.tab { font-size:16px; font-weight:700; padding:0 16px; height:40px; display:flex; align-items:center; border-radius:5px; }
.tab.filled { background:#008cff; color:#ffffff; }
.tab.outline { background:#ffffff; color:#008cff; box-shadow:#008cff 0px 0px 0px 1px inset; }
.login { font-size:16px; color:#000000; padding:0 12px; }
.hero { padding:36px 36px 22px; }
.hero h1 { font-size:40px; font-weight:700; line-height:1.4; margin:0 0 8px; color:#101a2e; }
.hero .sub { font-size:16px; color:#5f6976; margin:0; }
.filters { display:flex; gap:10px; padding:0 36px 22px; }
.pill { border-radius:30px; padding:12px 22px; font-size:14px; height:46px; display:flex; align-items:center; }
.pill.active { background:#0077fe; color:#000000; }
.pill.inactive { background:#ffffff; color:#000000; border:1px solid #c1cad2; }
.products { display:flex; gap:14px; padding:0 36px; margin-bottom:20px; }
.pcard { flex:1; background:#f5f8fa; border-radius:12px; padding:18px 0; text-align:center; }
.pcard .title { font-size:22px; font-weight:700; color:#1c2638; }
.devices { display:flex; gap:12px; padding:0 36px; }
.dcard { flex:1; background:#ffffff; border:1px solid #919ba5; border-radius:8px; height:64px;
display:flex; align-items:center; justify-content:center; font-size:14px; color:#000000; }
</style></head>
<body>
<nav>
<p class="brand">Payhere</p>
<div class="tabs">
<span class="tab filled">Card Terminal</span>
<span class="tab outline">Table Order</span>
</div>
<span class="login">Log In</span>
</nav>
<section class="hero">
<h1>The #1 mobile POS<br>The new future of your store, Payhere</h1>
<p class="sub">One all-in-one terminal for printing, scanning, and kiosk mode</p>
</section>
<section class="filters">
<span class="pill active">NFC</span>
<span class="pill inactive">Contactless Pay</span>
<span class="pill inactive">Prepaid Vouchers</span>
<span class="pill inactive">Standalone Payment</span>
</section>
<section class="products">
<div class="pcard"><span class="title">Card Terminal</span></div>
<div class="pcard"><span class="title">Table Order</span></div>
<div class="pcard"><span class="title">Kiosk</span></div>
<div class="pcard"><span class="title">Internet Package</span></div>
</section>
<section class="devices">
<div class="dcard">Galaxy</div>
<div class="dcard">iPhone·iPad</div>
<div class="dcard">Windows</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden; display:flex; }
/* left image pane */
.km-media { flex:0 0 440px; background:#f5f5f5; position:relative; display:flex; align-items:center; justify-content:center; }
.km-box { width:300px; height:300px; position:relative; }
.km-shoe { position:absolute; left:24px; right:24px; top:70px; height:150px;
background:linear-gradient(100deg,#222222 0%, #4e4e4e 45%, #222222 100%);
clip-path:polygon(2% 70%, 10% 40%, 30% 22%, 55% 14%, 80% 18%, 96% 38%, 98% 70%, 92% 92%, 8% 92%); }
.km-shoe::after { content:""; position:absolute; left:6%; right:6%; bottom:-6px; height:20px;
background:#ffffff; border:1px solid #222222; border-radius:0 0 8px 8px; }
.km-swoop { position:absolute; left:60px; top:118px; width:150px; height:44px; border-radius:0 40px 40px 0;
background:rgba(255,255,255,0.18); }
.km-thumbstrip { position:absolute; left:24px; bottom:20px; display:flex; gap:8px; }
.km-thumb { width:44px; height:44px; border:1px solid #f0f0f0; background:#ffffff; }
.km-thumb.on { border:2px solid #222222; }
/* right info pane */
.km-info { flex:1; padding:26px 30px; display:flex; flex-direction:column; overflow:hidden; }
.km-brand-row { display:flex; align-items:center; justify-content:space-between; }
.km-brand { font-size:16px; font-weight:700; color:#222222; margin:0; }
.km-heart { font-size:13px; color:#4e4e4e; border:1px solid rgba(0,0,0,0.6); border-radius:8px; height:30px;
display:flex; align-items:center; padding:0 10px; font-weight:300; }
.km-title { font-size:20px; font-weight:400; color:#222222; margin:10px 0 2px; }
.km-sku { font-size:13px; color:#4e4e4e; margin:0 0 14px; }
.km-tabs { display:flex; gap:0; border-bottom:1px solid #f0f0f0; margin-bottom:16px; }
.km-tab { padding:13px 0; margin-right:26px; font-size:16px; color:#222222; font-weight:400; }
.km-tab.on { font-weight:700; border-bottom:2px solid #222222; }
.km-price-block { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px; }
.km-price-lbl { font-size:13px; color:#4e4e4e; }
.km-price-val { font-size:24px; font-weight:700; color:#000000; }
.km-price-side { text-align:right; }
.km-sizes { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.km-size { min-width:44px; height:30px; padding:0 8px; border-radius:6px; border:1px solid #f0f0f0;
display:flex; align-items:center; justify-content:center; font-size:13px; color:#4e4e4e; background:#ffffff; }
.km-size.on { background:#f4f4f4; color:#222222; border-radius:30px; font-weight:700; }
.km-bidbox { display:flex; gap:10px; margin-bottom:16px; }
.km-input { flex:1; height:44px; border:1px solid #f0f0f0; border-radius:6px; display:flex; align-items:center;
padding:0 12px; font-size:14px; color:#4e4e4e; }
.km-actions { display:flex; gap:10px; margin-top:auto; }
.km-btn-primary { flex:1; height:52px; background:#000000; color:#ffffff; border-radius:6px; font-size:15px; font-weight:700; }
.km-btn-outline { flex:1; height:52px; background:#ffffff; color:#222222; border:1px solid #222222; border-radius:6px; font-size:15px; font-weight:700; }
.km-authnote { display:flex; align-items:center; gap:8px; font-size:12px; color:#4e4e4e; margin-top:12px; }
.km-authnote .chk { width:16px; height:16px; border-radius:50%; background:#222222; color:#ffffff;
display:flex; align-items:center; justify-content:center; font-size:10px; }
</style></head>
<body>
<div class="stage">
<div class="km-media">
<div class="km-box">
<div class="km-shoe"><div class="km-swoop"></div></div>
<div class="km-thumbstrip">
<div class="km-thumb on"></div>
<div class="km-thumb"></div>
<div class="km-thumb"></div>
<div class="km-thumb"></div>
</div>
</div>
</div>
<div class="km-info">
<div class="km-brand-row">
<p class="km-brand">Northline Athletics</p>
<div class="km-heart">♡ Save</div>
</div>
<div class="km-title">Trail Runner 2002 'Slate Fog'</div>
<div class="km-sku">Style code SL-2002-004 · Released 2026</div>
<div class="km-tabs">
<div class="km-tab on">Buy Now</div>
<div class="km-tab">Place Bid</div>
<div class="km-tab">Size Guide</div>
</div>
<div class="km-price-block">
<div>
<div class="km-price-lbl">Instant Buy Price</div>
<div class="km-price-val">$248</div>
</div>
<div class="km-price-side">
<div class="km-price-lbl">Highest Bid</div>
<div class="km-price-val" style="font-size:18px;">$221</div>
</div>
</div>
<div class="km-sizes">
<div class="km-size">US 7</div>
<div class="km-size on">US 8</div>
<div class="km-size">US 9</div>
<div class="km-size">US 9.5</div>
<div class="km-size">US 10</div>
<div class="km-size">US 11</div>
</div>
<div class="km-bidbox">
<div class="km-input">Enter your bid amount</div>
<div class="km-input" style="flex:0 0 90px; justify-content:center;">USD</div>
</div>
<div class="km-actions">
<button class="km-btn-outline">Place Bid</button>
<button class="km-btn-primary">Buy Now $248</button>
</div>
<div class="km-authnote"><span class="chk">✓</span> Inspected and authenticated by KREAM before delivery</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0057ae; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0057ae; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87aed5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0875e1; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0057ae; color: #ffffff;
border: 1px solid #0875e1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0057ae; color: #f5f5f5;
border: 1px solid #2770b9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87aed5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #015cb6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#022043; box-sizing:border-box;
font-family:"Acid Grotesk", Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#ffffff; border-bottom:1px solid #dfe2e6; }
.brand { font-size:19px; font-weight:800; margin:0; color:#022043; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:700; color:#022043; }
.navlinks span:first-child { color:#0875e1; }
.btn-primary { background:#0057ae; color:#ffffff; border:none; border-radius:24px; padding:0 20px; height:38px;
font-size:14px; font-weight:700; }
.hero { position:relative; z-index:2; padding:26px 36px 18px; display:flex; flex-direction:column; gap:10px; max-width:640px; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:0.08em; color:#022043; text-transform:uppercase; }
.hero h1 { font-size:40px; font-weight:800; letter-spacing:-0.8px; line-height:1.14; margin:0; color:#022043; }
.hero p { font-size:15px; color:#494949; margin:0; max-width:520px; }
.row { display:flex; gap:10px; margin-top:6px; }
.btn-secondary { background:#ffffff; color:#022043; border:2px solid #022043; border-radius:24px; padding:0 20px; height:44px;
font-size:14px; font-weight:700; }
.btn-primary-lg { background:#0057ae; color:#ffffff; border:none; border-radius:24px; padding:0 24px; height:44px;
font-size:14px; font-weight:700; }
.band { position:relative; z-index:2; background:#f0f1f2; margin:6px 0 0; padding:18px 36px; display:grid;
grid-template-columns:repeat(3,1fr); gap:14px; }
.resource { background:#ffffff; border:1px solid #b6c1cc; border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.badge { align-self:flex-start; background:#d7eafc; color:#004387; border-radius:999px; padding:3px 10px; font-size:11px; font-weight:700; }
.resource h3 { margin:0; font-size:15px; font-weight:800; color:#0057ae; }
.resource p { margin:0; font-size:12px; color:#494949; line-height:1.4; }
.lower { position:relative; z-index:2; display:grid; grid-template-columns:1.2fr 0.8fr; gap:16px; padding:18px 36px 16px; }
.tint { background:#d7eafc; border-radius:8px; padding:18px; }
.tint .eyebrow2 { font-size:12px; font-weight:700; letter-spacing:0.08em; color:#004387; text-transform:uppercase; }
.tint h2 { font-size:24px; font-weight:800; color:#022043; margin:6px 0 8px; }
.tint p { font-size:13px; color:#022043; margin:0 0 10px; max-width:400px; }
.canvas-panel { border:1px solid #dfe2e6; border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.canvas-panel h4 { margin:0; font-size:12px; color:#787878; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.cinput { border:1px solid #7b858f; border-radius:4px; height:34px; display:flex; align-items:center; padding:0 12px; font-size:13px; color:#5e6a75; }
.cbtn { background:#f38b00; color:#ffffff; border:none; border-radius:999px; height:32px; padding:0 18px; font-size:13px; font-weight:700; align-self:flex-start; }
footer { position:relative; z-index:2; border-top:1px solid #dfe2e6; padding:12px 36px; display:flex;
justify-content:space-between; font-size:12px; color:#787878; }
</style></head>
<body>
<nav>
<p class="brand">Workday</p>
<div class="navlinks"><span>Products</span><span>Industries</span><span>Customers</span><span>Resources</span></div>
<button class="btn-primary">Contact Sales</button>
</nav>
<section class="hero">
<span class="eyebrow">Human Capital Management Software</span>
<h1>Superintelligence for work.</h1>
<p>The enterprise AI platform for HR, finance, and IT — one system of record, continuously updated.</p>
<div class="row">
<button class="btn-primary-lg">Play Demo</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="band">
<div class="resource"><span class="badge">Report</span><h3>The ROI of one platform</h3><p>See how unifying HR and finance drives measurable value across the enterprise.</p></div>
<div class="resource"><span class="badge">Guide</span><h3>Overcoming legacy ERP</h3><p>A practical playbook for moving off rigid, on-premise systems.</p></div>
<div class="resource"><span class="badge">Webinar</span><h3>Meet Sana in action</h3><p>Watch the AI layer surface insights across people and money.</p></div>
</section>
<section class="lower">
<div class="tint">
<span class="eyebrow2">ROI Value Calculator</span>
<h2>Built for people, not just records</h2>
<p>Estimate the time and cost savings of moving finance and HR onto a single continuously updated platform.</p>
<button class="btn-primary-lg">Read Report</button>
</div>
<div class="canvas-panel">
<h4>Search Canvas</h4>
<div class="cinput">Search components…</div>
<h4>Admin Console</h4>
<button class="cbtn">Run report</button>
</div>
</section>
<footer>
<span>© Workday</span>
<span>Workday · Products · Resources · Partners · Company</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0770e3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0770e3;
border: 1px solid #0770e3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7e8fb; color: #0770e3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0E1B2C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.wrap { display:flex; height:100%; }
.left { width:340px; padding:28px; border-right:1px solid #E2E7EC; }
.brand { font-size:15px; font-weight:800; margin-bottom:18px; }
.brand span { color:#0770E3; }
.search-card { background:#fff; border:1px solid #E2E7EC; border-radius:16px; overflow:hidden; }
.field { padding:14px 16px; border-bottom:1px solid #E2E7EC; position:relative; }
.field:last-child { border-bottom:none; }
.flabel { font-size:11px; font-weight:600; text-transform:uppercase; color:#8B97A3; letter-spacing:.2px; }
.fval { font-size:15px; font-weight:600; margin-top:2px; }
.swap { position:absolute; right:16px; top:-15px; width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid #E2E7EC; display:flex; align-items:center; justify-content:center; font-size:12px; color:#5C6B7A; }
.search-btn { margin-top:16px; height:50px; border-radius:12px; background:#0770E3; color:#fff; font-size:16px; font-weight:700;
display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(7,112,227,0.7); }
.month-hdr { margin-top:24px; font-size:16px; font-weight:700; }
.month-sub { font-size:11px; color:#5C6B7A; margin-top:2px; margin-bottom:10px; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.day { aspect-ratio:1; border-radius:7px; background:#F5F7FA; border:1px solid #E2E7EC; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.day b { font-size:10px; }
.day span { font-size:7px; font-weight:600; margin-top:1px; }
.g { color:#00A698; } .a { color:#FFB81C; } .r { color:#E5392E; }
.day.sel { background:#0770E3; border-color:#0770E3; }
.day.sel b, .day.sel span { color:#fff; }
.right { flex:1; padding:28px 30px; }
.tabs { display:flex; gap:24px; margin-bottom:16px; }
.tab { font-size:14px; font-weight:600; color:#5C6B7A; padding-bottom:8px; }
.tab.on { color:#0E1B2C; border-bottom:2px solid #0770E3; }
.result { background:#F5F7FA; border:1px solid #E2E7EC; border-radius:14px; padding:16px; margin-bottom:12px; display:flex; align-items:center; }
.seg { flex:1; }
.time { font-size:17px; font-weight:700; }
.code { font-size:12px; font-weight:600; color:#5C6B7A; }
.mid { flex:1.4; text-align:center; }
.dur { font-size:11px; color:#8B97A3; }
.line { height:1px; background:#E2E7EC; position:relative; margin:4px 0; }
.line::after { content:''; position:absolute; right:0; top:-2px; width:5px; height:5px; border-radius:50%; background:#0770E3; }
.stop { font-size:10px; font-weight:600; color:#00A698; }
.fare { text-align:right; }
.price { font-size:19px; font-weight:800; }
.ret { font-size:11px; color:#5C6B7A; }
</style></head>
<body>
<div class="wrap">
<div class="left">
<div class="brand">Skyscanner (iOS)</div>
<div class="search-card">
<div class="field"><div class="flabel">From</div><div class="fval">London LHR</div>
<div class="swap">⇅</div>
</div>
<div class="field"><div class="flabel">To</div><div class="fval">Barcelona BCN</div></div>
<div class="field"><div class="flabel">Depart · Return</div><div class="fval">12 Oct — 17 Oct</div></div>
</div>
<div class="search-btn">Search flights</div>
<div class="month-hdr">Cheapest month — October</div>
<div class="month-sub">Green is a good deal · prices per person</div>
<div class="cal">
<div class="day"><b>1</b><span class="a">£81</span></div>
<div class="day"><b>2</b><span class="g">£42</span></div>
<div class="day"><b>3</b><span class="g">£38</span></div>
<div class="day sel"><b>12</b><span>£42</span></div>
<div class="day"><b>13</b><span class="r">£152</span></div>
<div class="day"><b>14</b><span class="a">£95</span></div>
<div class="day"><b>15</b><span class="g">£44</span></div>
</div>
</div>
<div class="right">
<div class="tabs"><div class="tab on">Best · £42</div><div class="tab">Cheapest · £38</div><div class="tab">Fastest · 2h 05m</div></div>
<div class="result">
<div class="seg"><div class="time">07:25</div><div class="code">LHR</div></div>
<div class="mid"><div class="dur">2h 15m</div><div class="line"></div><div class="stop">Direct</div></div>
<div class="seg"><div class="time">10:40</div><div class="code">BCN</div></div>
<div class="fare"><div class="price">£42</div><div class="ret">return</div></div>
</div>
<div class="result">
<div class="seg"><div class="time">11:10</div><div class="code">LHR</div></div>
<div class="mid"><div class="dur">4h 40m</div><div class="line"></div><div class="stop" style="color:#FFB81C;">1 stop</div></div>
<div class="seg"><div class="time">15:50</div><div class="code">BCN</div></div>
<div class="fare"><div class="price">£38</div><div class="ret">return</div></div>
</div>
<div class="result">
<div class="seg"><div class="time">18:05</div><div class="code">LHR</div></div>
<div class="mid"><div class="dur">2h 05m</div><div class="line"></div><div class="stop">Direct</div></div>
<div class="seg"><div class="time">21:10</div><div class="code">BCN</div></div>
<div class="fare"><div class="price">£81</div><div class="ret">return</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e92434; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e92434; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f0979e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0203e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e92434; color: #000000;
border: 1px solid #f0203e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e92434; color: #f5f5f5;
border: 1px solid #eb4553; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f0979e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ea2336; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141414; color:#F2EDED; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Poppins', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; display:flex; align-items:center; justify-content:center; }
/* full-bleed profile card is the hero */
.card { position:relative; width:400px; height:600px; border-radius:20px; overflow:hidden;
background:linear-gradient(160deg,#3a2a4a,#5a2f3a 45%,#7a4a3a 100%); box-shadow:0 12px 28px rgba(0,0,0,0.55); }
.story { position:absolute; top:12px; left:12px; right:12px; display:flex; gap:5px; z-index:3; }
.story .seg { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.35); }
.story .seg.on { background:#FFFFFF; }
.scrim { position:absolute; left:0; right:0; bottom:0; height:56%; background:linear-gradient(to bottom, transparent, rgba(20,20,20,0.95)); z-index:1; }
.meta { position:absolute; left:20px; right:20px; bottom:98px; z-index:2; color:#fff; }
.namerow { display:flex; align-items:baseline; gap:8px; }
.namerow .name { font-size:26px; font-weight:700; letter-spacing:-0.3pt; }
.namerow .age { font-size:22px; font-weight:500; color:rgba(255,255,255,0.9); }
.namerow .verify { width:15px; height:15px; border-radius:50%; background:#1FB6FF; display:inline-block; }
.job { font-size:14px; font-weight:500; color:rgba(255,255,255,0.9); margin-top:4px; }
.distance { font-size:14px; color:rgba(255,255,255,0.75); margin-top:4px; display:flex; align-items:center; gap:6px; }
.distance .dot { width:7px; height:7px; border-radius:50%; background:#2ECC71; }
.chips { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.chip { font-size:12px; font-weight:600; color:#fff; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.28); border-radius:999px; padding:5px 12px; }
.dock { position:absolute; left:0; right:0; bottom:20px; display:flex; justify-content:center; align-items:center; gap:16px; z-index:3; }
.circ { border-radius:50%; background:#1E1E1E; border:1px solid #322C2C; box-shadow:0 6px 16px rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.circ.rewind { width:44px; height:44px; }
.circ.rewind .g { width:16px; height:16px; border:2px solid #D6A75B; border-radius:50%; border-right-color:transparent; }
.circ.pass { width:56px; height:56px; }
.circ.pass .g { width:20px; height:20px; position:relative; }
.circ.pass .g::before, .circ.pass .g::after { content:''; position:absolute; top:9px; left:0; width:20px; height:3px; background:#A89E9E; }
.circ.pass .g::before { transform:rotate(45deg); }
.circ.pass .g::after { transform:rotate(-45deg); }
.circ.superlike { width:48px; height:48px; }
.circ.superlike .g { width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:16px solid #1FB6FF; }
.circ.like { width:56px; height:56px; background:#F0203E; border:none; }
.circ.like .g { width:22px; height:20px; background:#fff;
clip-path:polygon(50% 100%, 8% 55%, 0% 32%, 8% 10%, 26% 0%, 50% 18%, 74% 0%, 92% 10%, 100% 32%, 92% 55%); }
.circ.boost { width:44px; height:44px; }
.circ.boost .g { width:14px; height:20px; background:#B36BD8; clip-path:polygon(60% 0, 0 55%, 40% 55%, 20% 100%, 100% 40%, 55% 40%); }
.side { position:absolute; top:26px; left:26px; z-index:4; font-size:22px; font-weight:800; color:#F0203E; letter-spacing:-0.4pt; }
.side b { font-weight:800; }
</style></head>
<body>
<div class="stage">
<div class="side">Match (iOS)</div>
<div class="card">
<div class="story"><div class="seg on"></div><div class="seg on"></div><div class="seg"></div><div class="seg"></div></div>
<div class="scrim"></div>
<div class="meta">
<div class="namerow"><span class="name">Sofia</span><span class="age">27</span><span class="verify"></span></div>
<div class="job">Product Designer · Brooklyn</div>
<div class="distance"><span class="dot"></span>Active now · 3 miles away</div>
<div class="chips"><span class="chip">Hiking</span><span class="chip">Jazz</span><span class="chip">Ramen</span><span class="chip">Design</span></div>
</div>
<div class="dock">
<div class="circ rewind"><div class="g"></div></div>
<div class="circ pass"><div class="g"></div></div>
<div class="circ superlike"><div class="g"></div></div>
<div class="circ like"><div class="g"></div></div>
<div class="circ boost"><div class="g"></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #09aa5c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #09aa5c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bd3b0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00de5a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #09aa5c; color: #000000;
border: 1px solid #00de5a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #09aa5c; color: #f5f5f5;
border: 1px solid #2fb674; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bd3b0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #08b25c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e1e23; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"NanumSquareNeo", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; border-bottom:1px solid #dcdee0; }
.brand { font-size:18px; font-weight:700; margin:0; color:#1e1e23; }
.navlinks { display:flex; gap:26px; font-size:16px; color:#767678; }
.btnSecondary { background:#ffffff; color:#1e1e23; border:1px solid #dcdee0; border-radius:6px; padding:10px 13px;
font-size:16px; font-weight:500; }
.stepBar { display:flex; align-items:center; gap:8px; padding:16px 40px 0; font-size:12px; color:#767678; }
.stepBar b { color:#09aa5c; }
main { display:flex; gap:24px; padding:16px 40px 0; height:410px; }
.colLeft { flex:1.2; display:flex; flex-direction:column; gap:14px; }
.orderCard { background:#f6f8fa; border-radius:20px; padding:20px 22px; }
.orderCard h3 { font-size:16px; font-weight:600; color:#1e1e23; margin:0 0 12px; }
.lineItem { display:flex; justify-content:space-between; font-size:14px; color:#404048; padding:7px 0; }
.lineItem b { color:#1e1e23; font-weight:600; }
.divider { height:1px; background:#dcdee0; margin:6px 0; }
.totalRow { display:flex; justify-content:space-between; font-size:18px; font-weight:700; color:#1e1e23; padding-top:4px; }
.badgeGreen { display:inline-flex; align-items:center; background:#eef9f3; color:#09aa5c; border-radius:9999px;
padding:5px 14px; font-size:12px; width:fit-content; }
.guideCard { background:#eef9f3; border-radius:12px; padding:18px 20px; color:#404048; font-size:13px; line-height:1.5; }
.guideCard b { color:#09aa5c; }
.colRight { width:280px; flex:0 0 auto; }
.payPanel { background:#ffffff; border:1px solid #dcdee0; border-radius:20px; padding:22px; }
.payPanel h4 { font-size:16px; font-weight:600; margin:0 0 12px; color:#1e1e23; }
.field { border:1px solid #dcdee0; border-radius:6px; height:44px; display:flex; align-items:center;
padding:0 12px; font-size:16px; color:#1e1e23; margin-bottom:10px; }
.field.focus { border:1px solid #09aa5c; }
.payBtn { background:#09aa5c; color:#ffffff; border-radius:8px; height:52px; width:100%; display:flex;
align-items:center; justify-content:center; font-size:16px; font-weight:700; margin-top:6px; }
.amountLine { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.amountLine .amt { font-size:24px; font-weight:700; color:#1e1e23; }
.amountLine .lbl { font-size:13px; color:#767678; }
footer { height:36px; border-top:1px solid #dcdee0; padding:0 40px; display:flex; align-items:center;
justify-content:space-between; font-size:12px; color:#767678; background:#ffffff; }
footer a { color:#007eff; }
</style></head>
<body>
<nav>
<p class="brand">Naver Pay</p>
<div class="navlinks"><span>Shop</span><span>Benefits</span><span>Support</span></div>
<button class="btnSecondary">Log In</button>
</nav>
<div class="stepBar">Cart → <b>Payment</b> → Confirmation</div>
<main>
<div class="colLeft">
<div class="orderCard">
<h3>Order Summary</h3>
<div class="lineItem"><span>Wireless Noise-Canceling Headphones</span><b>$189.00</b></div>
<div class="lineItem"><span>Shipping</span><b>Free</b></div>
<div class="divider"></div>
<div class="lineItem"><span>Points Applied</span><b>-$5.00</b></div>
<div class="totalRow"><span>Total</span><span>$184.00</span></div>
</div>
<span class="badgeGreen">+2% Points on this purchase</span>
<div class="guideCard">Pay instantly using your existing <b>Naver Pay</b> account — no need to re-enter your card details. Points are credited automatically after checkout.</div>
</div>
<div class="colRight">
<div class="payPanel">
<h4 class="display">Confirm Payment</h4>
<div class="amountLine"><span class="lbl">Amount due</span><span class="amt">$184.00</span></div>
<div class="field">010 - •••• - ••••</div>
<div class="field focus">Verification code</div>
<div class="payBtn">Pay Now</div>
</div>
</div>
</main>
<footer>
<span>© Naver Pay</span>
<span><a>Merchant Center</a> · <a>Help</a> · <a>Terms</a></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #030303; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #030303; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #000000; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:14px; letter-spacing:-0.16px; color:#c9ccd1; }
.btn { background:#000; color:#fff; border:1px solid #27272a; border-radius:4px; padding:6px 14px; font-size:13px; }
.reel { display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:180px 180px; gap:4px; padding:0 4px; }
.frame { position:relative; overflow:hidden; }
.frame.f1 { grid-row:1/3; background:linear-gradient(160deg,#1a1a2e,#5c3d7a 40%,#c9556d 75%,#f2a154); }
.frame.f2 { background:linear-gradient(160deg,#0d2b3e,#1a5276); }
.frame.f3 { background:linear-gradient(200deg,#3a2a1a,#8a5a2e,#d4a24e); }
.frame.f4 { background:linear-gradient(160deg,#1a1a1a,#404040); }
.frame.f5 { background:linear-gradient(200deg,#1a1a1a,#767d88); }
.frame .caption { position:absolute; left:12px; bottom:10px; font-size:11px; letter-spacing:0.35px; text-transform:uppercase; color:#fff; font-weight:450; }
.frame.f1 h1 { position:absolute; left:16px; bottom:36px; right:16px; font-size:34px; line-height:1; letter-spacing:-1.2px; margin:0; }
.row2 { display:flex; gap:16px; padding:16px 32px; }
.col { flex:1; }
.col .lab { font-size:11px; text-transform:uppercase; letter-spacing:0.35px; color:#7d848e; margin:0 0 8px; }
.col h3 { font-size:20px; font-weight:400; line-height:1; margin:0 0 6px; }
.col p { font-size:13px; color:#767d88; line-height:1.4; margin:0; }
footer { border-top:1px solid #27272a; padding:10px 32px; display:flex; justify-content:space-between; font-size:11px; color:#767d88; }
</style></head>
<body>
<nav>
<span class="brand">RunwayML</span>
<div class="navlinks"><span>Product</span><span>Research</span><span>Enterprise</span><span>Pricing</span></div>
<span class="btn">Sign in</span>
</nav>
<div class="reel">
<div class="frame f1"><h1>Tools for<br>human imagination.</h1></div>
<div class="frame f2"><span class="caption">Gen-4 · Video</span></div>
<div class="frame f3"><span class="caption">Act-Two · Motion</span></div>
<div class="frame f4"><span class="caption">Aleph · Editing</span></div>
<div class="frame f5"><span class="caption">Frames · Image</span></div>
</div>
<div class="row2">
<div class="col"><p class="lab">Generative Video</p><h3>Gen-4</h3><p>Create consistent characters and worlds across every shot.</p></div>
<div class="col"><p class="lab">Video Editing</p><h3>Aleph</h3><p>Edit any video with a single instruction — no timeline required.</p></div>
<div class="col"><p class="lab">Research</p><h3>General World Models</h3><p>Building systems that understand the visual world.</p></div>
</div>
<footer>
<span>© RunwayML</span>
<span>Product · Research · Enterprise · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262629; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #262629; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #060607; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:22px; font-weight:700; letter-spacing:0.3px; margin:0; }
.addbtn { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.12);
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }
main { display:flex; gap:24px; padding:8px 32px 0; height:556px; }
/* ---- left: the card stack, Wallet's one true signature ---- */
.stack { position:relative; width:432px; height:280px; margin-top:4px; }
.card { position:absolute; left:0; width:400px; border-radius:10px; box-shadow:rgba(0,0,0,0.5) 0 8px 24px; }
.card3 { top:170px; height:110px; z-index:1;
background:linear-gradient(120deg,#8a5a1e,#3a2a12); }
.card3 .band { height:38px; border-radius:10px 10px 0 0; background:rgba(0,0,0,0.18); }
.card3 .issuer { padding:10px 16px 0; font-size:12px; font-weight:600; color:rgba(255,255,255,0.85); }
.card2 { top:90px; height:150px; z-index:2;
background:linear-gradient(160deg,#1A2D4F,#0E1B30); padding:16px; }
.card2 .issuer { font-size:16px; font-weight:600; }
.card2 .last4 { position:absolute; bottom:16px; right:16px; font-size:15px; letter-spacing:0.5px; color:rgba(255,255,255,0.9); }
.card2 .holder { position:absolute; bottom:16px; left:16px; font-size:11px; letter-spacing:0.6px; text-transform:uppercase; color:rgba(255,255,255,0.75); }
.card1 { top:0; height:220px; z-index:3; padding:18px;
background:linear-gradient(135deg,#E8E8EB 0%,#A8A8AD 55%,#3D3D3F 100%); }
.card1 .top { display:flex; justify-content:space-between; align-items:flex-start; }
.card1 .chip { width:26px; height:20px; border-radius:4px; background:#C7AC73; }
.card1 .aplogo { font-size:16px; font-weight:700; color:#ffffff; }
.card1 .issuer { position:absolute; top:52px; left:18px; font-size:15px; font-weight:600; color:#1a1a1a; }
.card1 .holder { position:absolute; bottom:18px; left:18px; font-size:11px; letter-spacing:0.6px; text-transform:uppercase; color:#1a1a1a; }
.card1 .cash { position:absolute; bottom:14px; right:14px; width:28px; height:28px; border-radius:50%;
background:#FF3B30; color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
/* ---- right: expanded Apple Card detail ---- */
.detail { flex:1; padding-top:4px; }
.dhead { font-size:13px; font-weight:600; letter-spacing:0.5px; color:#A0A0A5; text-transform:uppercase; margin:0 0 4px; }
.balance { font-size:38px; font-weight:700; margin:0 0 2px; }
.balsub { font-size:12px; color:#A0A0A5; margin:0 0 22px; }
.sectiontitle { font-size:12px; font-weight:600; letter-spacing:0.6px; color:#A0A0A5; text-transform:uppercase; margin:0 0 6px; }
.txn { display:flex; align-items:center; padding:12px 0; border-bottom:0.5px solid #262629; }
.txn .dot { width:32px; height:32px; border-radius:50%; margin-right:12px; flex:0 0 auto; }
.txn .who { font-size:15px; }
.txn .when { font-size:12px; color:#A0A0A5; margin-top:2px; }
.txn .amt { margin-left:auto; text-align:right; font-size:15px; font-weight:500; }
.txn .cash2 { font-size:10px; color:#FF3B30; margin-top:2px; }
.toolbar { margin-top:14px; height:52px; border-radius:14px; background:rgba(255,255,255,0.06);
display:flex; align-items:center; justify-content:center; gap:26px; }
.toolbar .tb { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.12);
display:flex; align-items:center; justify-content:center; font-size:14px; }
footer { height:28px; border-top:0.5px solid #262629; margin:0 32px; padding-top:6px;
display:flex; justify-content:space-between; font-size:11px; color:#A0A0A5; }
</style></head>
<body>
<nav>
<p class="brand">Apple Wallet (iOS)</p>
<div class="addbtn">+</div>
</nav>
<main>
<div class="stack">
<div class="card card3">
<div class="band"></div>
<div class="issuer">BOS → SFO · Boarding Pass</div>
</div>
<div class="card card2">
<div class="issuer">Chase Sapphire</div>
<div class="holder">CARDHOLDER</div>
<div class="last4 mono">•••• 4521</div>
</div>
<div class="card card1">
<div class="top">
<div class="chip"></div>
<div class="aplogo">Apple Wallet (iOS)</div>
</div>
<div class="issuer">Card</div>
<div class="holder">CARDHOLDER NAME</div>
<div class="cash">$</div>
</div>
</div>
<div class="detail">
<p class="dhead">Available Balance</p>
<p class="balance mono">$1,284.20</p>
<p class="balsub">as of 9:42 AM today</p>
<p class="sectiontitle">Latest Transactions</p>
<div class="txn">
<div class="dot" style="background:#4573D2"></div>
<div><div class="who">Blue Bottle Coffee</div><div class="when">Aug 12 · 8:14 AM</div></div>
<div class="amt"><div class="mono">$6.50</div><div class="cash2">+$0.13</div></div>
</div>
<div class="txn">
<div class="dot" style="background:#62D26F"></div>
<div><div class="who">Whole Foods Market</div><div class="when">Aug 11 · 6:32 PM</div></div>
<div class="amt"><div class="mono">$84.20</div><div class="cash2">+$1.68</div></div>
</div>
<div class="txn">
<div class="dot" style="background:#F1BD6C"></div>
<div><div class="who">Delta Air Lines</div><div class="when">Aug 9 · 11:02 AM</div></div>
<div class="amt"><div class="mono">$412.00</div><div class="cash2">+$8.24</div></div>
</div>
<div class="toolbar">
<div class="tb">💳</div>
<div class="tb">≡</div>
<div class="tb">···</div>
</div>
</div>
</main>
<footer>
<span>Apple Wallet (iOS)</span>
<span>Card · Cash · Settings</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e10; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e10; color: #f5f5f5;
border: 1px solid #333335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #353536; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E10; color:#ECECEC; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'SF Mono', ui-monospace, Menlo, monospace; }
.shell { position:relative; width:960px; height:640px; display:flex; flex-direction:column; }
.topbar { height:44px; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:1px solid #2E2F33; flex-shrink:0; }
.topbar .whale { width:20px; height:20px; border-radius:5px; background:#4D6BFE; margin-right:8px; }
.topbar-title { font-size:16px; font-weight:700; display:flex; align-items:center; }
.topbar-title span.acc { color:#4D6BFE; }
.topbar-left { position:absolute; left:20px; width:20px; height:20px; border-radius:4px; background:#2E2F33; }
.topbar-right { position:absolute; right:20px; width:20px; height:20px; border-radius:4px; background:#2E2F33; }
.chat { flex:1; padding:20px 60px; display:flex; flex-direction:column; gap:18px; overflow:hidden; }
.turn-user { align-self:flex-end; max-width:65%; background:#1E2240; border:1px solid #2A3360;
color:#ECECEC; font-size:15px; line-height:1.5; padding:12px 16px; border-radius:18px 18px 4px 18px; }
.assistant { display:flex; flex-direction:column; gap:8px; }
.assistant-head { display:flex; align-items:center; gap:8px; }
.assistant-head .whale { width:18px; height:18px; border-radius:5px; background:#4D6BFE; }
.assistant-head span { font-size:13px; font-weight:600; color:#9A9BA0; }
.reasoning { background:#16171A; border-left:2px solid #4D6BFE; border-radius:10px; padding:12px 16px; }
.reasoning-head { font-size:12px; font-weight:600; color:#9A9BA0; margin-bottom:6px; }
.reasoning-head b { color:#4D6BFE; font-weight:600; }
.reasoning-body { font-size:13px; line-height:1.55; font-style:italic; color:#8A8B90; }
.answer-body { font-size:15px; line-height:1.6; color:#ECECEC; }
.answer-actions { display:flex; gap:14px; margin-top:2px; }
.answer-actions span { width:15px; height:15px; border-radius:4px; background:#2E2F33; }
.toggle-row { display:flex; gap:8px; padding:0 60px 8px; }
.toggle { display:flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:600; }
.toggle.on { background:#1E2240; border:1px solid #4D6BFE; color:#4D6BFE; }
.toggle.off { background:#1A1B1E; border:1px solid #2E2F33; color:#9A9BA0; }
.toggle .ic { width:12px; height:12px; border-radius:3px; background:currentColor; }
.composer { padding:0 60px 20px; }
.prompt-pill { height:50px; background:#1A1B1E; border:1px solid #3A3B40; border-radius:25px;
display:flex; align-items:center; padding:0 8px 0 18px; gap:10px; }
.prompt-pill .ph { flex:1; font-size:15px; color:#6A6B70; }
.plusbtn { width:22px; height:22px; border-radius:6px; background:#2E2F33; }
.sendbtn { width:36px; height:36px; border-radius:50%; background:#4D6BFE; display:flex; align-items:center; justify-content:center; }
.sendbtn::before { content:''; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid #fff; }
</style></head>
<body>
<div class="shell">
<div class="topbar">
<div class="topbar-left"></div>
<div class="topbar-title"><span class="whale"></span>DeepSeek (iOS) <span class="acc">Seek</span></div>
<div class="topbar-right"></div>
</div>
<div class="chat">
<div class="turn-user">If a train leaves at 60mph and another at 80mph from 210 miles apart, when do they meet?</div>
<div class="assistant">
<div class="assistant-head"><span class="whale"></span><span>DeepSeek-R1</span></div>
<div class="reasoning">
<div class="reasoning-head"><b>🧠 Thought for 8 seconds</b> · tap to collapse</div>
<div class="reasoning-body">They're approaching each other, so I should add the speeds: 60 + 80 = 140 mph
combined closing speed. Distance is 210 miles. Time = distance / speed = 210 / 140 = 1.5 hours.
Let me double check by computing each train's distance at t=1.5: 60×1.5=90, 80×1.5=120, sum=210. That matches.</div>
</div>
<div class="answer-body">The trains meet after <b>1.5 hours</b>. At that point the first train has covered
90 miles and the second has covered 120 miles — together, exactly the 210 miles between them.</div>
<div class="answer-actions"><span></span><span></span><span></span><span></span></div>
</div>
</div>
<div class="toggle-row">
<div class="toggle on"><span class="ic"></span>DeepThink (R1)</div>
<div class="toggle off"><span class="ic"></span>Search</div>
</div>
<div class="composer">
<div class="prompt-pill">
<div class="plusbtn"></div>
<div class="ph">Message DeepSeek</div>
<div class="sendbtn"></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { position:relative; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#000000; }
.brand { font-size:15px; font-weight:400; letter-spacing:0.1em; text-transform:uppercase; color:#ffffff; margin:0; }
.navlinks { display:flex; gap:26px; font-size:9px; letter-spacing:0.04em; color:#ffffff; opacity:0.85; }
.search-pill { background:rgba(255,255,255,0.16); border-radius:45px; height:30px; padding:0 18px;
color:#ffffff; font-size:9px; display:flex; align-items:center; }
.btn-white { background:#ffffff; color:#000000; border:1px solid #ffffff; border-radius:30px;
padding:8px 18px; font-size:9px; font-weight:350; white-space:nowrap; }
.hero { position:relative; height:280px; background:linear-gradient(160deg,#0f0c13 0%,#000000 70%);
display:flex; align-items:flex-end; padding:36px 40px; overflow:hidden; }
.hero::before { content:''; position:absolute; right:-60px; top:-40px; width:320px; height:320px;
border-radius:9999px; background:radial-gradient(circle at 30% 30%, #94bbff 0%, #002a57 75%); opacity:0.9; }
.hero::after { content:''; position:absolute; left:-40px; bottom:-90px; width:220px; height:220px;
border-radius:9999px; background:#71a0ff; opacity:0.35; }
.hero-inner { position:relative; z-index:2; }
.hero h1 { font-size:56px; font-weight:250; letter-spacing:-3.2px; line-height:0.98; color:#ffffff; margin:0 0 10px; }
.hero p { font-size:13px; color:rgba(255,255,255,0.6); margin:0; max-width:420px; }
.bands { display:flex; height:296px; }
.band { flex:1; padding:26px 26px; display:flex; flex-direction:column; gap:10px; }
.band-white { background:#ffffff; border-right:1px solid #cccccc; }
.band-periwinkle { background:#94bbff; color:#000000; }
.band-sage { background:#9fb08b; color:#000000; }
.band .eyebrow { font-size:9px; letter-spacing:0.05em; text-transform:uppercase; opacity:0.6; }
.band h3 { font-size:26px; font-weight:250; letter-spacing:-1px; margin:6px 0; line-height:1.05; }
.band p { font-size:12px; line-height:1.5; margin:0; opacity:0.85; max-width:220px; }
.stat { font-size:40px; font-weight:250; letter-spacing:-1.6px; margin-top:auto; }
.stat-label { font-size:10px; opacity:0.6; }
.card-mini { border:1px solid #cccccc; border-radius:20px; padding:14px; display:flex; gap:10px; align-items:center; }
.avatar { width:34px; height:34px; border-radius:9999px; background:#71a0ff; flex-shrink:0; }
.card-mini .name { font-size:12px; font-weight:400; }
.card-mini .sub { font-size:10px; color:#999999; }
.pill-btn { background:#000000; color:#ffffff; border-radius:30px; padding:9px 16px; font-size:9px;
font-weight:350; align-self:flex-start; }
footer { height:0; }
</style></head>
<body>
<nav>
<p class="brand">Patreon</p>
<div class="navlinks"><span>Creators</span><span>Features</span><span>Pricing</span><span>Resources</span></div>
<div style="display:flex; gap:10px; align-items:center;">
<span class="search-pill">Find a Creator</span>
<button class="btn-white">Get Started</button>
</div>
</nav>
<section class="hero">
<div class="hero-inner">
<h1>Where podcasts grow</h1>
<p>Start your Patreon for free — membership built for the work you actually make.</p>
</div>
</section>
<section class="bands">
<div class="band band-white">
<span class="eyebrow">Feature</span>
<h3 style="color:#1a1a1a;">Complete creative control</h3>
<p style="color:#3a3a3a;">Set your own tiers, pricing, and posting cadence — no algorithm decides your reach.</p>
<div class="stat" style="color:#1a1a1a;">10%</div>
<div class="stat-label" style="color:#999999;">of what fans give, kept simple</div>
</div>
<div class="band band-periwinkle">
<span class="eyebrow">Community</span>
<h3>Made by people who like color</h3>
<div class="card-mini" style="background:#ffffff;">
<div class="avatar"></div>
<div>
<div class="name">Jamie Lee</div>
<div class="sub">Illustrator · 3 tiers</div>
</div>
</div>
<button class="pill-btn">Get started</button>
</div>
<div class="band band-sage">
<span class="eyebrow">Pricing</span>
<h3>Earning made easy</h3>
<p>Secure payments handled for you. We handle taxes. No setup headaches.</p>
<button class="pill-btn">See plans</button>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a3035;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a3035;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a3035; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5c808a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #226d7a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #226d7a;
border: 1px solid #226d7a; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a3035;
border: 1px solid #c6cbcc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c808a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.5px; background: #e4f5fa; color: #226d7a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a3035; box-sizing:border-box;
font-family:'Segoe UI', 'Open Sans', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#226d7a; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#fff; font-size:17px; font-weight:700; margin:0; letter-spacing:0.2px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.9; font-size:13px; }
.cart { background:#22b8d1; color:#fff; font-size:12px; font-weight:600; border-radius:12px; padding:8px 16px; }
main { display:flex; height:582px; }
.stage { width:320px; background:#e4f5fa; display:flex; align-items:center; justify-content:center; }
.tank { width:60px; height:170px; background:linear-gradient(180deg,#22b8d1,#226d7a); border-radius:10px 10px 20px 20px;
position:relative; box-shadow:0 16px 30px rgba(34,109,122,0.25); }
.tank::before { content:''; position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:20px; height:16px; background:#1a3035; border-radius:4px; }
.fin { width:40px; height:80px; background:#b0e0e9; border-radius:4px; position:absolute; bottom:20px; }
.fin-l { left:-46px; } .fin-r { right:-46px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
h1 { font-size:22px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#2e5059; margin:0; max-width:440px; line-height:1.5; }
table.specs { width:100%; border-collapse:collapse; margin-top:4px; font-size:12px; }
table.specs td { border:1px solid #c8e8ed; padding:6px 10px; }
table.specs td.k { background:#e4f5fa; font-weight:600; width:170px; color:#226d7a; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.price { font-size:24px; font-weight:700; color:#226d7a; }
.actions { display:flex; gap:10px; }
.btn-primary { background:#22b8d1; color:#fff; border-radius:12px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #c8e8ed; color:#226d7a; border-radius:12px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:12px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">B4adventure</p>
<div class="navlinks"><span>Dive Gear</span><span>Camping</span><span>Snorkel</span><span>Bags</span></div>
<span class="cart">Cart · 0</span>
</nav>
<main>
<div class="stage"><div class="tank"><div class="fin fin-l"></div><div class="fin fin-r"></div></div></div>
<div class="info">
<h1>ProDive 12L Aluminum Scuba Tank Kit</h1>
<p class="sub">Complete kit with fins, regulator mount points, and a corrosion-resistant valve — packed the night before, ready at the dock.</p>
<table class="specs">
<tr><td class="k">Capacity</td><td>12 liters / 80 cu ft</td></tr>
<tr><td class="k">Material</td><td>Aircraft-grade aluminum</td></tr>
<tr><td class="k">Rated Pressure</td><td>3000 PSI</td></tr>
</table>
<div class="price-row"><span class="price">$249.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Compare Tanks</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0075eb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0075eb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bbf0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191c1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0075eb; color: #191c1f;
border: 1px solid #191c1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0075eb; color: #f5f5f5;
border: 1px solid #2789ed; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bbf0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0467ca; color: #191c1f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191c1f; box-sizing:border-box;
font-family:"Inter", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:600; }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:500; }
.pill { border-radius:9999px; padding:12px 24px; font-size:14px; font-weight:600; }
.pill.dark { background:#191c1f; color:#fff; }
.hero { padding:16px 32px 24px; text-align:center; }
.hero h1 { font-size:56px; font-weight:500; letter-spacing:-1.4px; line-height:1; margin:0 0 16px; }
.hero p { font-size:16px; color:#5a5f66; margin:0 0 22px; }
.herobtns { display:flex; gap:10px; justify-content:center; }
.pill.light { background:#f4f4f4; color:#000; }
.pill.outline { background:transparent; border:2px solid #191c1f; color:#191c1f; }
.darkband { background:#191c1f; padding:32px; display:flex; gap:20px; }
.darkcard { flex:1; border-radius:20px; padding:24px; background:#232629; }
.darkcard .lab { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; padding:4px 10px; border-radius:9999px; display:inline-block; margin-bottom:10px; }
.lab.blue { background:rgba(73,79,223,0.2); color:#7c81f7; }
.lab.teal { background:rgba(0,168,126,0.2); color:#34d6a8; }
.darkcard h3 { color:#fff; font-size:22px; font-weight:500; margin:0 0 8px; }
.darkcard p { color:#a5a9ad; font-size:13px; margin:0; line-height:1.6; }
.ghost { display:inline-block; margin-top:16px; border:2px solid #f4f4f4; color:#f4f4f4; border-radius:9999px; padding:8px 18px; font-size:13px; }
.lightband { display:flex; gap:20px; padding:24px 32px; }
.lightcard { flex:1; border-radius:20px; background:#f4f4f4; padding:22px; text-align:center; }
.lightcard .num { font-size:32px; font-weight:500; margin:0 0 4px; }
.lightcard p { font-size:12px; color:#5a5f66; margin:0; }
footer { border-top:1px solid #f4f4f4; padding:12px 32px; display:flex; justify-content:space-between; font-size:12px; color:#8d969e; }
</style></head>
<body>
<nav>
<span class="brand">Revolut</span>
<div class="navlinks"><span>Personal</span><span>Business</span><span>Crypto</span><span>Help</span></div>
<span class="pill dark">Get the app</span>
</nav>
<section class="hero">
<h1>One app,<br>all your money</h1>
<p>Spend, save, and invest — in one place, in any currency.</p>
<div class="herobtns">
<span class="pill dark">Get started</span>
<span class="pill outline">Learn more</span>
</div>
</section>
<div class="darkband">
<div class="darkcard">
<span class="lab blue">Spending</span>
<h3>Spend abroad, fee-free</h3>
<p>Real exchange rates in 150+ currencies, no hidden markups.</p>
<span class="ghost">See rates</span>
</div>
<div class="darkcard">
<span class="lab teal">Investing</span>
<h3>Grow your money</h3>
<p>Stocks, ETFs, and crypto — all inside the same app.</p>
<span class="ghost">Start investing</span>
</div>
</div>
<div class="lightband">
<div class="lightcard"><p class="num">45M+</p><p>customers worldwide</p></div>
<div class="lightcard"><p class="num">150+</p><p>currencies supported</p></div>
<div class="lightcard"><p class="num">38</p><p>countries and counting</p></div>
</div>
<footer>
<span>© Revolut Ltd</span>
<span>Personal · Business · Crypto · Help</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #383838; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292b2b; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:640px; }
/* left rail: quick-menu style circular category nav, per DESIGN.md's quick-menu-arrow component */
.rail { width:76px; flex-shrink:0; border-right:1px solid #ecedee; padding:20px 0; display:flex;
flex-direction:column; align-items:center; gap:18px; }
.rail .mark { width:36px; height:36px; border-radius:8px; background:#121212; color:#fff; font-size:13px;
font-weight:700; display:flex; align-items:center; justify-content:center; }
.rail .arrow { width:32px; height:32px; border-radius:50%; border:1px solid #ecedee; background:transparent;
display:flex; align-items:center; justify-content:center; font-size:13px; color:#000; }
.rail .arrow.disabled { color:rgba(16,16,16,0.3); }
.rail .catlabel { writing-mode:vertical-rl; font-size:11px; color:#878f91; letter-spacing:0.02em; margin-top:auto; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
nav { height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #ecedee; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navr { display:flex; align-items:center; gap:16px; font-size:13px; color:#878f91; }
.search { width:220px; height:32px; border:1px solid #ecedee; border-radius:24px; display:flex; align-items:center;
padding:0 14px; font-size:12px; color:#878f91; }
.body { flex:1; min-height:0; display:flex; }
/* product media */
.media { width:380px; flex-shrink:0; background:#ecedee; position:relative; display:flex; align-items:center;
justify-content:center; }
.media .swatches { position:absolute; left:16px; bottom:16px; display:flex; gap:6px; }
.media .swatches span { width:8px; height:8px; border-radius:50%; background:#fff; border:1px solid #cfd2d3; }
.media .swatches span.on { background:#121212; border-color:#121212; }
.media .placeholder { width:220px; height:280px; background:linear-gradient(160deg,#f4f5f5,#e2e4e5);
border-radius:0px; position:relative; }
.media .placeholder::before { content:''; position:absolute; inset:28px; border:1px solid #d7dadb; }
.info { flex:1; min-width:0; padding:22px 28px 0; display:flex; flex-direction:column; }
.brandline { font-size:14px; font-weight:700; color:#121212; margin:0 0 6px; }
.title { font-size:16px; font-weight:400; line-height:normal; color:#292b2b; margin:0 0 12px; max-width:420px; }
.price-row { display:flex; align-items:baseline; gap:8px; margin-bottom:18px; }
.price { font-size:24px; font-weight:700; color:#121212; }
.price-note { font-size:12px; color:#878f91; }
.tabs { display:flex; gap:20px; border-bottom:1px solid #ecedee; }
.tab { padding:0 4px 17.5px; font-size:14px; font-weight:500; color:#878f91; }
.tab.sel { font-weight:600; color:#121212; border-bottom:2px solid #121212; }
.meta { padding:18px 0; display:flex; flex-direction:column; gap:10px; }
.meta-row { display:flex; justify-content:space-between; font-size:13px; color:#606567; max-width:420px; }
.meta-row b { color:#292b2b; font-weight:500; }
.cta-row { margin-top:auto; padding:18px 0 22px; display:flex; gap:10px; }
.btn-outline { flex:1; height:48px; border:1px solid #121212; border-radius:24px; background:#fff; color:#121212;
font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.btn-fill { flex:2; height:48px; border-radius:24px; background:#121212; color:#fff; font-size:14px;
font-weight:600; display:flex; align-items:center; justify-content:center; }
/* recommended row using the product-card token: 0px card, ecedee thumb */
.recs { border-top:1px solid #ecedee; padding:14px 28px 16px; }
.recs h4 { font-size:12px; font-weight:600; color:#878f91; margin:0 0 10px; text-transform:uppercase;
letter-spacing:0.05em; }
.rec-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.rec-card { display:flex; flex-direction:column; gap:6px; }
.rec-thumb { width:100%; aspect-ratio:1/1.2; background:#ecedee; }
.rec-card .rname { font-size:11px; color:#606567; }
.rec-card .rprice { font-size:12px; font-weight:600; color:#121212; }
</style></head>
<body>
<div class="app">
<div class="rail">
<div class="mark">Z</div>
<div class="arrow disabled">‹</div>
<div class="arrow">›</div>
<div class="catlabel">DAILY LOOK</div>
</div>
<div class="main">
<nav>
<p class="brand">ZIGZAG</p>
<div class="navr">
<div class="search">Search brand, item, style</div>
<span>♡</span>
<span>Bag</span>
</div>
</nav>
<div class="body">
<div class="media">
<div class="placeholder"></div>
<div class="swatches"><span class="on"></span><span></span><span></span></div>
</div>
<div class="info">
<p class="brandline">STUDIO NUMÉRO</p>
<p class="title">Wide-fit wool blend trousers with pressed center crease, cropped ankle length</p>
<div class="price-row">
<span class="price">₩68,900</span>
<span class="price-note">Free shipping over ₩30,000</span>
</div>
<div class="tabs">
<span class="tab sel">Details</span>
<span class="tab">Reviews 412</span>
<span class="tab">Size guide</span>
<span class="tab">Q&A</span>
</div>
<div class="meta">
<div class="meta-row"><span>Color</span><b>Charcoal grey</b></div>
<div class="meta-row"><span>Fabric</span><b>Wool 62% / Polyester 38%</b></div>
<div class="meta-row"><span>Fit</span><b>Wide straight, mid-rise</b></div>
</div>
<div class="cta-row">
<div class="btn-outline">Save</div>
<div class="btn-fill">Add to bag</div>
</div>
</div>
</div>
<div class="recs">
<h4>You may also like</h4>
<div class="rec-grid">
<div class="rec-card"><div class="rec-thumb"></div><span class="rname">Cotton crewneck tee</span><span class="rprice">₩22,900</span></div>
<div class="rec-card"><div class="rec-thumb"></div><span class="rname">Belted trench coat</span><span class="rprice">₩142,000</span></div>
<div class="rec-card"><div class="rec-thumb"></div><span class="rname">Suede ankle boots</span><span class="rprice">₩89,000</span></div>
<div class="rec-card"><div class="rec-thumb"></div><span class="rname">Knit vest, cream</span><span class="rprice">₩38,500</span></div>
<div class="rec-card"><div class="rec-thumb"></div><span class="rname">Pleated midi skirt</span><span class="rprice">₩54,900</span></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffe01b; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffe01b; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6e16; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #231e15; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe01b; color: #231e15;
border: 1px solid #231e15; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffe01b; color: #111111;
border: 1px solid #d9bf19; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6e16; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dcc11a; color: #231e15;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231e15; box-sizing:border-box;
font-family:"Graphik Web", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:"Means Web", Georgia, "Times New Roman", serif; }
nav { height:64px; display:flex; align-items:center; gap:26px; padding:0 32px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; font-weight:500; color:#231e15; padding:8px; }
.navbtns { margin-left:auto; display:flex; gap:10px; }
.pill { display:inline-flex; align-items:center; height:36px; padding:0 20px; border-radius:26px;
font-size:13px; font-weight:500; box-shadow: rgb(35,30,21) 0px 0px 0px 1px; }
.pill.fill { background:#ffe01b; color:#231e15; }
.pill.outline { background:transparent; color:#231e15; }
.hero { padding:24px 32px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero h1 { font-size:44px; font-weight:400; line-height:1.02; letter-spacing:-1px; margin:0; max-width:640px; }
.hero p { font-size:16px; font-weight:400; line-height:1.35; color:#403b3b; margin:0; max-width:440px; }
.badge { display:inline-flex; background:#231e15; color:#ffffff; border-radius:8px; padding:4px 12px;
font-size:13px; font-weight:500; margin-top:2px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 32px 24px; }
.card { background:#ffffff; border:1px solid #bcbab6; border-radius:10px; padding:20px 16px; text-align:center; }
.card.featured { box-shadow: rgba(35,30,21,0.15) 0px 0px 20px 3px; border-color:transparent; }
.card h3 { font-family:"Graphik Web",sans-serif; font-size:20px; font-weight:500; letter-spacing:-0.3px; margin:0 0 6px; }
.card .price { font-size:28px; font-weight:700; margin:6px 0; }
.card .price span { font-size:13px; font-weight:400; color:#706d67; }
.card p { font-size:13px; color:#706d67; margin:0 0 12px; }
.card .cta { display:inline-flex; align-items:center; justify-content:center; width:100%; height:36px;
border-radius:26px; font-size:13px; font-weight:500; box-shadow: rgb(35,30,21) 0px 0px 0px 1px; }
.card.featured .cta { background:#ffe01b; color:#231e15; }
.card:not(.featured) .cta { background:transparent; color:#231e15; }
.strip { background:#ebe1cd; padding:14px 32px; display:flex; align-items:center; justify-content:center; }
.strip span { font-size:13px; font-weight:500; color:#231e15; }
</style></head>
<body>
<nav>
<p class="brand">Mailchimp</p>
<div class="navlinks"><span>Marketing Platform</span><span>Automations</span><span>Integrations</span><span>Pricing</span></div>
<div class="navbtns"><div class="pill outline">Log In</div><div class="pill fill">Start Free Trial</div></div>
</nav>
<div class="hero">
<h1 class="serif">Email & SMS marketing<br>minus the learning curve</h1>
<p>Everything a small business needs to look, sound, and sell like a much bigger one.</p>
<div class="badge">Risk-Free · No Credit Card Required</div>
</div>
<div class="cards">
<div class="card"><h3>Free</h3><div class="price">$0</div><p>1 audience, up to 500 contacts</p><div class="cta">Choose Free</div></div>
<div class="card featured"><h3>Standard</h3><div class="price">$20<span>/mo</span></div><p>Automations, A/B testing, custom branding</p><div class="cta">Choose Standard</div></div>
<div class="card"><h3>Essentials</h3><div class="price">$13<span>/mo</span></div><p>Scheduling, basic reporting, 3 audiences</p><div class="cta">Choose Essentials</div></div>
</div>
<div class="strip"><span>Trusted by small businesses worldwide · Cancel anytime</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ed7c35; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #111111;
border: 1px solid #ed7c35; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c0bfbc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.45; letter-spacing: 0.3px; background: #f4f2ee; color: #464646;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf9f5; color:#111111; box-sizing:border-box;
font-family:'Libre Franklin','Franklin Gothic Medium','Arial Narrow',sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'Merriweather',Georgia,'Times New Roman',serif; }
nav { height:56px; background:#faf9f5; border-bottom:1px solid #dedede; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:16px; letter-spacing:.02em; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#767676; }
.navlinks span.on { color:#ed7c35; }
.acct { font-size:11px; color:#767676; }
.wrap { display:flex; height:530px; padding:24px 30px; gap:30px; }
.frame { width:300px; flex-shrink:0; background:#ffffff; border:1px solid #dedede; padding:16px; display:flex;
align-items:center; justify-content:center; }
.print { width:100%; height:100%; background:linear-gradient(135deg,#ed7c35 0%,#faf9f5 45%,#7e1412 100%); position:relative; }
.edition-tag { position:absolute; bottom:10px; left:10px; background:#111111; color:#fff; font-size:10px; padding:4px 8px; }
.info { flex:1; display:flex; flex-direction:column; gap:12px; }
.artist { font-size:12px; color:#767676; }
.info h1 { font-size:26px; font-weight:700; margin:0; font-family:'Merriweather',Georgia,serif; line-height:1.25; }
.edition-line { font-size:13px; color:#363636; }
.edition-line b { color:#ed7c35; }
.price-row { display:flex; align-items:baseline; gap:14px; }
.price { font-size:22px; font-weight:700; }
.price-note { font-size:11px; color:#7e1412; background:#feebeb; padding:3px 8px; border-radius:4px; }
.opt-row { display:flex; gap:8px; }
.opt { border:1px solid #dedede; border-radius:4px; padding:8px 16px; font-size:12px; }
.opt.on { border-color:#ed7c35; color:#ed7c35; }
.desc { font-size:13px; font-family:'Merriweather',Georgia,serif; color:#363636; line-height:1.65; max-width:460px; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#ed7c35; color:#fff; border:none; border-radius:4px; padding:13px; font-size:13px; font-weight:700; letter-spacing:.03em; }
.btn-save { border:1px solid #111111; border-radius:4px; padding:13px 20px; font-size:13px; }
footer { height:54px; background:#f4f2ee; border-top:1px solid #dedede; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:11px; color:#767676; }
</style></head>
<body>
<nav>
<p class="brand">20x200</p>
<div class="navlinks"><span>New Editions</span><span class="on">Photography</span><span>Illustration</span><span>Artists</span></div>
<span class="acct">My Collection</span>
</nav>
<div class="wrap">
<div class="frame">
<div class="print"><span class="edition-tag">40 / 200</span></div>
</div>
<div class="info">
<span class="artist">Photograph by Camila Reyes</span>
<h1>Low Tide, Point Reyes</h1>
<p class="edition-line">Limited edition of <b>200</b> · archival pigment print · signed and numbered</p>
<div class="price-row">
<span class="price">$35.00</span>
<span class="price-note">Only 40 prints remain</span>
</div>
<div class="opt-row">
<span class="opt on">8×10 Unframed</span>
<span class="opt">11×14 Framed</span>
<span class="opt">16×20 Framed</span>
</div>
<p class="desc">One fixed run, one fixed price — when the edition sells out, it's gone for good. Printed on 100% cotton rag paper with archival pigment inks.</p>
<div class="buy-row">
<button class="btn-buy">Add to Collection</button>
<button class="btn-save">Save</button>
</div>
</div>
</div>
<footer><span>© 20x200 — a fixed run, a fixed price</span><span>Framing Guide · Shipping · Artist Program</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #005df9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #005df9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b1f7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005df9; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #005df9; color: #f5f5f5;
border: 1px solid #2775f8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b1f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2977fa; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101828; box-sizing:border-box;
font-family:-apple-system,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:800; margin:0; color:#005df9; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#475467; }
.hero { padding:30px 40px 20px; }
.hero h1 { font-size:32px; font-weight:800; letter-spacing:-0.64px; line-height:1.35; margin:0 0 6px; }
.hero p { font-size:14px; color:#667085; margin:0 0 18px; }
.cta { background:#005df9; color:#101828; border-radius:16px; padding:2px 12px; height:44px; display:inline-flex; align-items:center; font-size:14px; }
.badges { display:flex; gap:8px; padding:0 40px 16px; }
.bd { font-size:11px; font-weight:500; border-radius:12px; padding:2px 8px; }
.bd.red { background:#fff6f5; color:#f44f4f; }
.bd.blue { background:#ebf0ff; color:#005df9; }
.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:0 40px; }
.tile { background:#f8f9fc; border-radius:16px; padding:20px; }
.tile h3 { font-size:16px; margin:0 0 6px; }
.tile .capsule { display:inline-block; background:#f0f4fa; border-radius:20px; padding:8px 14px; font-size:13px; margin-top:10px; }
</style></head>
<body>
<nav>
<p class="brand">Shinhan Card</p>
<div class="navlinks"><span>Cards</span><span>SOL Pay</span><span>Loans</span><span>Events</span></div>
</nav>
<section class="hero">
<h1>Payments that connect<br>everyday life — SOL Pay</h1>
<p>Shinhan Card's digital platform linking financial life and daily life</p>
<span class="cta">Apply Now</span>
</section>
<div class="badges"><span class="bd red">Limited Offer</span><span class="bd blue">New Card</span></div>
<div class="tiles">
<div class="tile"><h3>Deep Dream Credit Card</h3><span class="capsule">See Benefits</span></div>
<div class="tile"><h3>The More Premium</h3><span class="capsule">See Benefits</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fafafa; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #313131;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d32f2f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
header { padding:18px 36px; border-bottom:1px solid #d4d4d4; display:flex; align-items:center; gap:20px; }
.brand { font-size:19px; font-weight:600; letter-spacing:-0.2px; }
.searchbar { flex:1; background:#f0f0f0; border-radius:9999px; padding:9px 18px; font-size:13px; color:#6e6e6e;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.06); }
.catrow { display:flex; gap:22px; padding:10px 36px; border-bottom:1px solid #e6e6e6; font-size:13px; color:#6e6e6e; }
.catrow span.on { color:#313131; font-weight:600; }
main { display:flex; height:calc(640px - 108px - 42px); }
.cover { width:220px; background:#efefec; display:flex; align-items:center; justify-content:center; padding:28px; }
.book { width:150px; height:220px; background:linear-gradient(150deg,#3a352e,#5c554a); border-radius:2px;
box-shadow:0 12px 30px rgba(0,0,0,0.22); position:relative; }
.book::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:6px; background:rgba(255,255,255,0.08); }
.book::after { content:'FIRST\A EDITION'; white-space:pre; position:absolute; top:38px; left:22px; color:#e6dcc8;
font-size:11px; letter-spacing:1.5px; line-height:1.6; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:12px; border-right:1px solid #e6e6e6; }
h1 { font-size:22px; font-weight:600; margin:0; letter-spacing:-0.2px; }
.author { font-size:14px; color:#4a4a4a; }
.stars { color:#f5a623; font-size:13px; }
.rarity { display:inline-flex; gap:6px; align-items:center; }
.badge-rarity { background:#1976d2; color:#fff; font-size:10px; font-weight:600; padding:2px 8px; border-radius:3px; }
.cond { font-size:13px; color:#4a4a4a; }
.listings { border:1px solid #d4d4d4; border-radius:2px; overflow:hidden; }
.listing { display:flex; justify-content:space-between; padding:10px 14px; font-size:13px; border-bottom:1px solid #e6e6e6; }
.listing:last-child { border-bottom:none; }
.listing .seller { color:#6e6e6e; }
.listing .price { font-weight:600; }
.side { width:220px; padding:26px 24px; display:flex; flex-direction:column; gap:14px; }
.side .label { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:#9e9e9e; }
.buybox { border:1px solid #d4d4d4; border-radius:2px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.buyprice { font-size:22px; font-weight:700; }
.buycond { font-size:12px; color:#6e6e6e; }
.btn-cart { background:#3a9b3a; color:#fff; border:none; border-radius:3px; padding:11px 0; font-size:14px; font-weight:600; text-align:center; }
.affiliate { font-size:10px; color:#e07b00; border:1px solid #f0c090; border-radius:3px; padding:3px 8px; text-align:center; }
footer { padding:12px 36px; border-top:1px solid #e6e6e6; font-size:11px; color:#9e9e9e; display:flex; justify-content:space-between; }
</style></head>
<body>
<header>
<div class="brand">Biblio</div>
<div class="searchbar">Search by title, author, or ISBN…</div>
</header>
<div class="catrow"><span class="on">Used & Rare</span><span>Fiction</span><span>History</span><span>Art</span><span>First Editions</span><span>Signed Copies</span></div>
<main>
<div class="cover"><div class="book"></div></div>
<div class="info">
<h1>The Cartographer's Silence</h1>
<div class="author">by Miriam Okafor · Hardcover, 1974</div>
<div class="stars">★★★★☆ <span style="color:#6e6e6e">(38 ratings)</span></div>
<div class="rarity"><span class="badge-rarity">First Edition</span><span class="cond">Very Good in Very Good jacket</span></div>
<p style="font-size:13px; color:#4a4a4a; line-height:1.5; max-width:380px;">A quiet, out-of-print novel of postwar exile, sourced from an estate library in Lisbon. Dust jacket lightly toned at spine.</p>
<div class="listings">
<div class="listing"><span class="seller">Marlowe & Sons Books</span><span class="price">$42.00</span></div>
<div class="listing"><span class="seller">Thornbury Rare Books</span><span class="price">$38.50</span></div>
<div class="listing"><span class="seller">Second Chapter Ltd.</span><span class="price">$55.00</span></div>
</div>
</div>
<div class="side">
<span class="label">Lowest Price</span>
<div class="buybox">
<span class="buyprice">$38.50</span>
<span class="buycond">Very Good · Ships in 3–5 days</span>
<div class="btn-cart">Add to Cart</div>
<div class="affiliate">Also available on Amazon</div>
</div>
</div>
</main>
<footer><span>© Biblio</span><span>Sell Books · Help · Returns</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1033d4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1033d4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9ee6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f67d6; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1033d4; color: #ffffff;
border: 1px solid #2f67d6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1033d4; color: #f5f5f5;
border: 1px solid #3552d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9ee6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #153bd4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box; font-family:"Inter","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-weight:700; font-size:16px; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#fff; }
.ghost { border:1px solid rgba(255,255,255,0.55); background:transparent; color:#fff; border-radius:14px; padding:10px 18px; font-size:14px; }
.hero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:40px 20px; }
.hero h1 { font-size:56px; font-weight:600; margin:0; letter-spacing:0.5px; }
.hero h2 { font-size:16px; font-weight:500; color:#fff; margin:0; opacity:0.85; }
.news { background:#ffffff; color:#1b2230; padding:24px 30px; display:flex; gap:16px; }
.card { flex:1; background:#fbfaf7; border:1px solid rgba(15,18,24,0.1); border-radius:16px; padding:14px; }
.card h3 { font-size:13px; margin:0 0 6px; color:#0e1420; }
.card p { font-size:12px; margin:0; color:#1b2230; }
.chip { display:inline-block; border-radius:999px; font-size:12px; font-weight:600; padding:5px 12px; }
.chip.blue { background:rgba(47,103,214,0.1); color:#234a93; }
.chip.amber { background:rgba(255,175,42,0.12); color:#7a4600; margin-left:6px; }
</style></head>
<body>
<nav>
<div class="brand">Qraft Technologies</div>
<div class="navlinks"><span>About Us</span><span>Businesses</span><span>News</span><span>Careers</span></div>
<button class="ghost">Learn More</button>
</nav>
<div class="hero">
<h1>Transforming Investing with AI</h1>
<h2>Founded in 2016 and backed by SoftBank Group</h2>
</div>
<div class="news">
<div class="card"><h3>Barron's</h3><p>"An AI-driven approach reshaping how institutions manage risk and allocation."</p></div>
<div class="card"><h3>Milestone</h3><span class="chip blue">AI-Enhanced ETF</span><span class="chip amber">Series C</span></div>
<div class="card"><h3>Global Offices</h3><p>Seoul · Tokyo · New York — engineering-led financial infrastructure.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f7; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f7; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202024; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f7; color: #202024;
border: 1px solid #202024; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f5f5f7; color: #111111;
border: 1px solid #d1d1d2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d3d3d5; color: #202024;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F5F5F7; color:#050038; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.board { position:relative; width:960px; height:640px;
background-image: radial-gradient(#D7D7DE 1.6px, transparent 1.6px);
background-size: 26px 26px; }
.topbar { position:absolute; top:0; left:0; right:0; height:48px; display:flex; align-items:center; padding:0 20px; gap:10px; z-index:3; }
.topbar .back { font-size:18px; color:#050038; }
.topbar .brandcrumb { font-size:13px; font-weight:600; color:#6B6B7B; }
.topbar .name { font-size:15px; font-weight:700; }
.topbar .chev { font-size:10px; color:#6B6B7B; }
.topbar .spacer { flex:1; }
.avstack { display:flex; }
.avstack .a { width:26px; height:26px; border-radius:50%; margin-left:-8px; border:2px solid #F5F5F7; }
/* 캔버스 오브젝트들 */
.sticky { position:absolute; width:118px; height:118px; border-radius:4px; box-shadow:0 8px 18px -8px rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; font-size:14px; font-weight:600; color:#2A2A33; }
.s1 { top:96px; left:64px; background:#FEF3B6; transform:rotate(-3deg); }
.s2 { top:88px; left:210px; background:#BCE0F5; transform:rotate(2deg); }
.s3 { top:230px; left:64px; background:#F8C8D8; transform:rotate(-1deg); }
.s4 { top:250px; left:210px; background:#C7E8C7; transform:rotate(3deg); }
.selected { position:absolute; top:82px; left:200px; width:142px; height:142px; border:2px solid #4262FF; border-radius:8px; z-index:2; }
.selected .handle { position:absolute; width:9px; height:9px; background:#fff; border:2px solid #4262FF; border-radius:2px; }
.selected .h-tl { top:-5px; left:-5px; } .selected .h-tr { top:-5px; right:-5px; }
.selected .h-bl { bottom:-5px; left:-5px; } .selected .h-br { bottom:-5px; right:-5px; }
.selected .grip { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); width:32px; height:8px; background:#4262FF; border-radius:4px; }
.frame { position:absolute; top:80px; left:440px; width:280px; height:300px; border:2px dashed #9A9AA4; border-radius:6px; }
.frame .flabel { position:absolute; top:-26px; left:0; font-size:15px; font-weight:700; color:#6B6B7B; }
.frame .shape { position:absolute; top:24px; left:24px; width:100px; height:64px; border:2px solid #050038; border-radius:8px; }
.frame .conn { position:absolute; top:56px; left:124px; width:80px; height:2px; background:#6B6B7B; }
.frame .conn::after { content:'▶'; position:absolute; right:-8px; top:-7px; font-size:10px; color:#6B6B7B; }
.frame .sticky2 { position:absolute; top:130px; left:60px; width:90px; height:90px; background:#DCC9F0; }
.cursor { position:absolute; z-index:5; display:flex; flex-direction:column; align-items:flex-start; }
.cursor .arrow { width:0; height:0; border-left:10px solid #F24822; border-bottom:16px solid transparent; transform:rotate(-8deg); }
.cursor .tag { background:#F24822; color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; margin-top:-4px; margin-left:10px; white-space:nowrap; }
.cur1 { top:210px; left:520px; }
.toolbar { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); background:#FFFFFF; border:1px solid #E3E3E8; border-radius:16px; padding:8px; display:flex; gap:6px; box-shadow:0 14px 32px -12px rgba(0,0,0,0.22); z-index:4; }
.toolbar .tool { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; color:#6B6B7B; }
.toolbar .tool.active { background:#FFD02F; color:#050038; }
.zoom { position:absolute; bottom:24px; right:22px; background:#FFFFFF; border-radius:12px; box-shadow:0 8px 20px -10px rgba(0,0,0,0.16); display:flex; flex-direction:column; align-items:center; padding:6px 0; width:38px; z-index:4; }
.zoom .z { font-size:16px; padding:6px 0; color:#050038; }
.zoom .pct { font-size:11px; font-weight:600; color:#6B6B7B; padding:2px 0; }
</style></head>
<body>
<div class="board">
<div class="topbar">
<span class="back">‹</span><span class="brandcrumb">Miro (iOS) /</span><span class="name">Sprint Planning</span><span class="chev">▾</span>
<span class="spacer"></span>
<div class="avstack">
<div class="a" style="background:#F24822"></div>
<div class="a" style="background:#14AE5C"></div>
<div class="a" style="background:#9747FF"></div>
</div>
</div>
<div class="sticky s1">Define scope</div>
<div class="sticky s2">API contracts</div>
<div class="sticky s3">QA plan</div>
<div class="sticky s4">Ship it 🚀</div>
<div class="selected">
<div class="handle h-tl"></div><div class="handle h-tr"></div>
<div class="handle h-bl"></div><div class="handle h-br"></div>
<div class="grip"></div>
</div>
<div class="frame">
<div class="flabel">Onboarding flow</div>
<div class="shape"></div>
<div class="conn"></div>
<div class="sticky2"></div>
</div>
<div class="cursor cur1"><div class="arrow"></div><div class="tag">Dana</div></div>
<div class="toolbar">
<div class="tool">↖</div>
<div class="tool active">▤</div>
<div class="tool">✎</div>
<div class="tool">◇</div>
<div class="tool">T</div>
<div class="tool">▭</div>
<div class="tool">💬</div>
<div class="tool">+</div>
</div>
<div class="zoom"><span class="z">+</span><span class="pct">100%</span><span class="z">−</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f8fd; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f8fd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfeff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#2E2F32; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
/* ---------- shared bits ---------- */
.spark { position:relative; }
.spark span { position:absolute; top:50%; left:50%; background:#FFC220; border-radius:3px; transform-origin:center; }
.spark-sm { width:28px; height:28px; }
.spark-sm span { width:5px; height:24px; margin:-12px 0 0 -2.5px; }
.spark-sm span:nth-child(1){ transform:rotate(0deg);} .spark-sm span:nth-child(2){ transform:rotate(60deg);} .spark-sm span:nth-child(3){ transform:rotate(120deg);}
.spark-lg { width:56px; height:56px; }
.spark-lg span { width:9px; height:48px; margin:-24px 0 0 -4.5px; border-radius:5px; }
.spark-lg span:nth-child(1){ transform:rotate(0deg);} .spark-lg span:nth-child(2){ transform:rotate(60deg);} .spark-lg span:nth-child(3){ transform:rotate(120deg);}
.star { display:inline-block; width:10px; height:10px; background:#FFB81C;
clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.glass { width:16px; height:16px; border:2px solid #74767C; border-radius:50%; position:relative; }
.glass::after { content:''; position:absolute; width:7px; height:2px; background:#74767C; right:-6px; bottom:1px; transform:rotate(45deg); border-radius:2px; }
/* ---------- right marketing panel ---------- */
.market { position:absolute; left:372px; top:0; width:588px; height:640px; background:#FFFFFF; padding:44px 48px; }
.m-brand { display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.m-brand b { font-size:20px; font-weight:700; letter-spacing:-0.3px; }
.market h1 { font-size:44px; font-weight:700; letter-spacing:-1pt; margin:0 0 10px; line-height:1.05; max-width:460px; }
.market h1 em { font-style:normal; color:#0071DC; }
.market > p.sub { font-size:15px; color:#74767C; margin:0 0 26px; max-width:420px; line-height:1.5; }
.m-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px; }
.m-cat { background:#F2F8FD; border-radius:12px; padding:14px 10px; text-align:center; }
.m-cat .ico { width:34px; height:34px; border-radius:9px; margin:0 auto 8px; }
.m-cat span { font-size:13px; font-weight:600; color:#2E2F32; }
.m-price-card { background:#FFFFFF; border:1px solid #E2E8F0; border-radius:12px; padding:18px 20px; display:flex; align-items:center; gap:20px; box-shadow:0 1px 3px rgba(16,24,40,0.06); }
.m-price-card .thumb { width:64px; height:64px; border-radius:10px; background:linear-gradient(160deg,#D6E9FB,#F2F8FD); flex:none; }
.rollback-tag { display:inline-block; background:#FFC220; color:#2E2F32; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:3px 9px; border-radius:5px; margin-bottom:6px; }
.price-row { display:flex; align-items:baseline; gap:8px; }
.price-row .now { font-size:24px; font-weight:700; color:#2E2F32; }
.price-row .was { font-size:13px; color:#74767C; text-decoration:line-through; }
.save-line { font-size:13px; font-weight:600; color:#2A8703; margin-top:2px; }
.m-price-card .name { font-size:14px; font-weight:600; color:#2E2F32; margin-top:6px; }
/* ---------- phone ---------- */
.phone { position:absolute; left:40px; top:20px; width:300px; height:600px; background:#0B0C0D; border-radius:38px; padding:9px; box-shadow:0 24px 60px rgba(16,24,40,0.28); }
.screen { position:relative; width:100%; height:100%; background:#FFFFFF; border-radius:29px; overflow:hidden; }
.notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#0B0C0D; border-radius:0 0 12px 12px; z-index:9; }
.appbar { height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; padding-top:14px; }
.loc-chip { font-size:12px; font-weight:600; color:#2E2F32; display:flex; align-items:center; gap:4px; }
.loc-chip small { color:#74767C; font-weight:400; }
.appbar .icons { display:flex; gap:10px; color:#74767C; font-size:16px; }
.searchbar { margin:2px 14px 0; height:36px; background:#F5F5F5; border-radius:18px; display:flex; align-items:center; gap:8px; padding:0 12px; }
.searchbar span.ph { font-size:13px; color:#74767C; flex:1; }
.eta-strip { margin:8px 14px 0; font-size:11px; color:#0071DC; font-weight:600; display:flex; align-items:center; gap:6px; }
.eta-strip .dot { width:6px; height:6px; border-radius:50%; background:#0071DC; }
.toggle { margin:8px 14px 0; background:#F2F8FD; border-radius:16px; height:32px; display:flex; padding:3px; }
.toggle .seg { flex:1; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; border-radius:14px; }
.toggle .seg.on { background:#FFFFFF; color:#0071DC; box-shadow:0 1px 3px rgba(16,24,40,0.15); }
.toggle .seg.off { color:#74767C; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:10px 12px 4px; }
.card { border:1px solid #E2E8F0; border-radius:12px; padding:9px; position:relative; }
.card .img { height:52px; background:#F5F5F5; border-radius:8px; margin-bottom:7px; position:relative; overflow:hidden; }
.card .img i { position:absolute; border-radius:50%; }
.card .best { background:#E6F1FC; color:#0071DC; font-size:9px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 6px; border-radius:4px; display:inline-block; margin-bottom:5px; }
.card .now { font-size:16px; font-weight:700; }
.card .was { font-size:10px; color:#74767C; text-decoration:line-through; margin-left:4px; }
.card .title { font-size:11px; font-weight:600; line-height:1.3; margin:4px 0 5px; height:28px; overflow:hidden; }
.card .stars { display:flex; gap:2px; margin-bottom:6px; }
.card .add { background:#0071DC; color:#fff; border-radius:14px; height:28px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:54px; border-top:1px solid #E2E8F0; display:flex; background:#fff; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:9px; font-weight:600; color:#74767C; }
.tab .shape { width:18px; height:18px; border-radius:5px; background:#74767C; opacity:0.55; }
.tab.active { color:#0071DC; }
.tab.active .shape { background:#0071DC; opacity:1; border-radius:50%; }
.tab .badge { position:absolute; margin:-20px 0 0 10px; background:#0071DC; color:#fff; font-size:8px; font-weight:700; width:13px; height:13px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="phone">
<div class="screen">
<div class="notch"></div>
<div class="appbar">
<div class="spark spark-sm"><span></span><span></span><span></span></div>
<div class="loc-chip">Sacramento SC <small>▾</small></div>
<div class="icons">♡ 🔔</div>
</div>
<div class="searchbar"><div class="glass"></div><span class="ph">Search Walmart</span></div>
<div class="eta-strip"><span class="dot"></span> Pickup today, 4pm · Delivery as soon as 2pm</div>
<div class="toggle"><div class="seg on">Pickup</div><div class="seg off">Delivery</div></div>
<div class="grid">
<div class="card">
<div class="img"><i style="width:38px;height:46px;left:26px;top:4px;background:#E9F2FB;"></i></div>
<div class="now">$3.98</div>
<div class="title">Great Value Whole Milk, 1 Gallon</div>
<div class="stars"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star" style="opacity:.3"></span></div>
<div class="add">Add to cart</div>
</div>
<div class="card">
<span class="rollback-tag" style="font-size:9px;padding:2px 6px;">Rollback</span>
<div class="img"><i style="width:40px;height:30px;left:20px;top:12px;background:#FFF3C7;border-radius:40%;"></i></div>
<div><span class="now">$0.58</span><span class="was">$0.68</span></div>
<div class="title">Bananas, each</div>
<div class="stars"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span></div>
<div class="add">Add to cart</div>
</div>
<div class="card">
<span class="rollback-tag" style="font-size:9px;padding:2px 6px;">Rollback</span>
<div class="img"><i style="width:34px;height:40px;left:24px;top:6px;background:#E9F2FB;border-radius:16%;"></i></div>
<div><span class="now">$12.48</span><span class="was">$18.96</span></div>
<div class="title">Tide PODS Laundry Detergent, 42 ct</div>
<div class="stars"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star" style="opacity:.3"></span></div>
<div class="add">Add to cart</div>
</div>
<div class="card">
<span class="best">Best seller</span>
<div class="img"><i style="width:44px;height:24px;left:16px;top:14px;background:#F4E6CE;border-radius:30%;"></i></div>
<div class="now">$2.24</div>
<div class="title">Great Value White Bread, 20 oz</div>
<div class="stars"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star" style="opacity:.3"></span><span class="star" style="opacity:.3"></span></div>
<div class="add">Add to cart</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><div class="shape"></div>Shop</div>
<div class="tab"><div class="shape"></div>Services</div>
<div class="tab"><div class="shape" style="width:22px;height:22px;border-radius:50%;background:#0071DC;color:#fff;"></div>Search</div>
<div class="tab"><div class="shape"></div>Cart<span class="badge">3</span></div>
<div class="tab"><div class="shape"></div>Account</div>
</div>
</div>
</div>
<div class="market">
<div class="m-brand">
<div class="spark spark-sm"><span></span><span></span><span></span></div>
<b>Walmart (iOS)</b>
</div>
<h1>Save money.<br><em>Live better.</em></h1>
<p class="sub">Everyday low prices on groceries, electronics and more — with Pickup and Delivery built into every shop.</p>
<div class="m-cats">
<div class="m-cat"><div class="ico" style="background:#D6E9FB;"></div><span>Grocery</span></div>
<div class="m-cat"><div class="ico" style="background:#F4E6CE;"></div><span>Electronics</span></div>
<div class="m-cat"><div class="ico" style="background:#DCEBD8;"></div><span>Home</span></div>
<div class="m-cat"><div class="ico" style="background:#F1D9DC;"></div><span>Pharmacy</span></div>
<div class="m-cat"><div class="ico" style="background:#E4DCF3;"></div><span>Toys</span></div>
<div class="m-cat"><div class="ico" style="background:#D8ECEC;"></div><span>Auto Care</span></div>
</div>
<div class="m-price-card">
<div class="thumb"></div>
<div>
<span class="rollback-tag">Rollback</span>
<div class="price-row"><span class="now">$12.48</span><span class="was">$18.96</span></div>
<div class="save-line">Save $6.48</div>
<div class="name">Tide PODS Laundry Detergent Pacs, 42 ct</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #02294b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #02294b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8899a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #012e37; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #02294b; color: #ffffff;
border: 1px solid #012e37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #02294b; color: #f5f5f5;
border: 1px solid #294a66; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8899a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #022a48; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:18px; color:#00172e; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:8px; }
.navlinks span { font-size:14px; color:#232424; padding:8px 12px; border-radius:9999px; }
.navr { display:flex; align-items:center; gap:10px; }
.btn-dark { background:#111112; color:#fff; border:none; border-radius:9999px; padding:9px 18px; font-size:13px; font-weight:600; }
.ghost { font-size:13px; color:#111112; font-weight:600; }
.hero { height:280px; background:linear-gradient(180deg,#02294b,#0d0d3f); display:flex;
flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; }
.hero h1 { font-size:44px; font-weight:500; letter-spacing:-1.5px; margin:0; line-height:1.1;
background:linear-gradient(90deg,#86ef5a,#10d0b7); -webkit-background-clip:text; background-clip:text; color:transparent; max-width:700px; }
.hero p { color:rgba(255,255,255,0.75); font-size:15px; margin:0; }
.pill { background:#ffffff; color:#02294b; border:none; border-radius:9999px; padding:13px 28px; font-size:16px; font-weight:600; }
.stats { display:flex; justify-content:center; gap:60px; padding:22px 0; background:#ffffff; }
.stat { text-align:center; }
.stat b { font-size:26px; font-weight:800; color:#00172e; display:block; }
.stat span { font-size:12px; color:#5c7695; }
.cards { display:flex; gap:16px; padding:0 32px 20px; }
.card { flex:1; background:#ffffff; border:1px solid #ebf0f4; border-radius:12px; padding:18px; }
.card h3 { font-size:16px; font-weight:600; margin:0 0 6px; color:#00172e; }
.card p { font-size:12.5px; color:#5c7695; margin:0; line-height:1.4; }
.swatch { width:32px; height:32px; border-radius:8px; margin-bottom:10px; }
</style></head>
<body>
<nav>
<div class="brand">Plaid</div>
<div class="navlinks"><span>Use cases</span><span>Industries</span><span>Developers</span><span>Company</span></div>
<div class="navr"><span class="ghost">Log in</span><button class="btn-dark">Contact sales</button></div>
</nav>
<div class="hero">
<h1>Turn data into revolutionary financial products</h1>
<p>Powered by the largest financial network</p>
<button class="pill">Start building</button>
</div>
<div class="stats">
<div class="stat"><b>1 in 2</b><span>banked adults in the U.S.</span></div>
<div class="stat"><b>1M+</b><span>daily connections</span></div>
<div class="stat"><b>12,000</b><span>financial institutions</span></div>
</div>
<div class="cards">
<div class="card"><div class="swatch" style="background:#02294b;"></div><h3>Auth</h3><p>Bank payments designed for fast, reliable connections.</p></div>
<div class="card"><div class="swatch" style="background:#468254;"></div><h3>Identity</h3><p>Verify identity and reduce fraud at account opening.</p></div>
<div class="card"><div class="swatch" style="background:#0a54c4;"></div><h3>Transfer</h3><p>Move money between accounts with confidence.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0062e3; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0062e3; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b3ed; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #05203c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0062e3; color: #05203c;
border: 1px solid #05203c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0062e3; color: #f5f5f5;
border: 1px solid #277ae6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b3ed; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0157c8; color: #05203c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#161616; box-sizing:border-box;
font-family:-apple-system,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
.hero { background:#05203c; padding:26px 44px 30px; color:#ffffff; }
nav { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:18px; font-size:14px; opacity:0.85; }
.tabs { display:flex; gap:8px; margin-bottom:16px; }
.tab { border-radius:100px; padding:0 16px; height:36px; display:flex; align-items:center; font-size:16px; }
.tab.active { background:#0062e3; color:#ffffff; }
.tab.inactive { background:transparent; color:#ffffff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); }
.searchpanel { background:#ffffff; border-radius:12px; padding:8px; display:flex; gap:1px; }
.field { flex:1; height:72px; display:flex; align-items:center; padding:0 16px; color:#161616; font-size:16px; }
.submit { background:#0062e3; color:#ffffff; border-radius:8px; padding:0 24px; height:56px; display:flex; align-items:center; font-size:16px; font-weight:700; align-self:center; }
.results { padding:22px 44px 0; }
.card { background:#ffffff; border-radius:12px; padding:16px 20px; display:flex; justify-content:space-between; align-items:center;
box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 0 0 1px rgb(230,233,235); margin-bottom:12px; }
.card .route { font-size:15px; font-weight:600; }
.card .meta { font-size:13px; color:#626971; }
.card .price { font-size:20px; font-weight:700; color:#0062e3; }
</style></head>
<body>
<div class="hero">
<nav>
<p class="brand">Skyscanner</p>
<div class="navlinks"><span>Flights</span><span>Hotels</span><span>Car hire</span></div>
</nav>
<div class="tabs">
<span class="tab active">Flights</span>
<span class="tab inactive">Hotels</span>
<span class="tab inactive">Car hire</span>
</div>
<div class="searchpanel">
<div class="field">Seoul (ICN)</div>
<div class="field">Anywhere</div>
<div class="field">This weekend</div>
<span class="submit">Search</span>
</div>
</div>
<section class="results">
<div class="card"><div><div class="route">ICN → NRT</div><div class="meta">Direct · 2h 20m</div></div><div class="price">₩168,000</div></div>
<div class="card"><div><div class="route">ICN → BKK</div><div class="meta">Direct · 5h 55m</div></div><div class="price">₩312,000</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #20808d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #20808d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95c0c6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a6873; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20808d; color: #ffffff;
border: 1px solid #1a6873; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #20808d; color: #f5f5f5;
border: 1px solid #42939e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95c0c6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1f7c89; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfaf4; color:#091717; box-sizing:border-box;
font-family:"FK Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.topnav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e4e4dc; background:#fbfaf4; }
.logo { display:flex; align-items:center; gap:9px; }
.logo-dot { width:22px; height:22px; border-radius:7px; background:linear-gradient(135deg,#34b4c4,#13343b); }
.brand { font-size:15px; font-weight:600; letter-spacing:-0.2px; }
.tabs { display:flex; gap:26px; }
.tab { font-size:13px; font-weight:500; color:#5c6a6a; padding-bottom:16px; margin-top:16px; }
.tab.active { color:#091717; border-bottom:2px solid #20808d; }
.navright { display:flex; align-items:center; gap:10px; }
.pro-badge { background:#13343b; color:#fff; font-size:11px; font-weight:600; letter-spacing:0.03em;
border-radius:6px; padding:3px 9px; }
.avatar { width:26px; height:26px; border-radius:9999px; background:#e5f2f2; border:1px solid #e4e4dc; }
.wrap { display:flex; gap:24px; padding:22px 32px 0; height:calc(640px - 56px); }
.main { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.rail { width:214px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; padding-top:2px; }
.thread-title { font-size:21px; font-weight:600; letter-spacing:-0.2px; margin:0; line-height:1.3; }
.answer-card { background:#fcfcf9; border:1px solid #efefe9; border-radius:12px; padding:16px 20px; }
.answer-card p { font-size:14px; line-height:1.62; color:#2e3a3a; margin:0 0 10px; }
.answer-card p:last-child { margin-bottom:0; }
.cite { display:inline-block; background:#e5f2f2; color:#13343b; font-size:10px; font-weight:600;
border-radius:6px; padding:0px 5px; margin-left:2px; }
.pillrow { display:flex; gap:8px; }
.pill { background:#ffffff; color:#2e3a3a; font-size:12px; font-weight:500; border:1px solid #e4e4dc;
border-radius:9999px; padding:6px 13px; }
.pill.active { border-color:#20808d; color:#13343b; background:#e5f2f2; }
.composer { margin-top:auto; margin-bottom:20px; background:#ffffff; border:1px solid #e4e4dc; border-radius:16px;
padding:14px 16px; display:flex; align-items:center; justify-content:space-between; }
.composer .ph { font-size:15px; color:#8a9494; }
.ask-btn { background:#20808d; color:#fff; border:none; border-radius:10px; padding:8px 16px;
font-size:13px; font-weight:500; }
.rail-label { font-size:12px; font-weight:600; color:#5c6a6a; text-transform:uppercase; letter-spacing:0.04em; }
.source-card { background:#ffffff; border:1px solid #e4e4dc; border-radius:10px; padding:10px 12px;
display:flex; flex-direction:column; gap:5px; }
.src-top { display:flex; align-items:center; gap:7px; }
.favicon { width:14px; height:14px; border-radius:4px; flex-shrink:0; }
.fv1 { background:#4b5a66; } .fv2 { background:#6e5a86; } .fv3 { background:#a86a4b; }
.domain { font-size:11px; color:#5c6a6a; }
.src-title { font-size:12px; color:#091717; line-height:1.4; }
.mode-note { font-size:11px; color:#8a9494; margin:2px 0 0; }
</style></head>
<body>
<nav class="topnav">
<div class="logo"><span class="logo-dot"></span><span class="brand">Perplexity</span></div>
<div class="tabs">
<span class="tab active">Home</span>
<span class="tab">Discover</span>
<span class="tab">Spaces</span>
<span class="tab">Library</span>
</div>
<div class="navright">
<span class="pro-badge">PRO</span>
<span class="avatar"></span>
</div>
</nav>
<div class="wrap">
<div class="main">
<h1 class="thread-title">Why does Perplexity show its sources?</h1>
<div class="answer-card">
<p>Perplexity is built to answer like a careful researcher, not a search box.<span class="cite">1</span> Every generated answer is grounded in retrieved sources rather than pure recall, so a claim always has a path back to where it came from.<span class="cite">2</span></p>
<p>Instead of ten blue links, you get synthesized, readable prose — with citations woven directly into the sentence, not bolted on as a footnote panel.<span class="cite">3</span></p>
</div>
<div class="pillrow">
<span class="pill active">Web</span>
<span class="pill">Academic</span>
<span class="pill">Writing</span>
<span class="pill">Video</span>
</div>
<p class="mode-note">Focus mode changes which sources Perplexity is allowed to cite.</p>
<div class="composer">
<span class="ph">Ask anything…</span>
<button class="ask-btn">Ask</button>
</div>
</div>
<div class="rail">
<span class="rail-label">Sources</span>
<div class="source-card">
<div class="src-top"><span class="favicon fv1"></span><span class="domain">researchweekly.org</span></div>
<span class="src-title">How retrieval-augmented answers reduce hallucination</span>
</div>
<div class="source-card">
<div class="src-top"><span class="favicon fv2"></span><span class="domain">quarterlyreview.io</span></div>
<span class="src-title">Citations as a first-class part of the reading experience</span>
</div>
<div class="source-card">
<div class="src-top"><span class="favicon fv3"></span><span class="domain">fieldnotes.dev</span></div>
<span class="src-title">Designing answer engines people can verify</span>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfaf6; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfaf6; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7a78; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f5ef; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbfaf6; color: #000000;
border: 1px solid #f7f5ef; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fbfaf6; color: #111111;
border: 1px solid #d6d5d1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a78; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #faf9f5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FBFAF6; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums; }
* { box-sizing:border-box; }
.screen { display:flex; flex-direction:column; width:960px; height:640px; }
nav { height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #E4E1D8; }
.brand { font-size:15px; font-weight:800; letter-spacing:-0.2px; color:#1A1A1A; }
.brand span { color:#FC7E0F; }
main { flex:1; display:grid; grid-template-columns:400px 1fr; }
.player { padding:22px 30px; border-right:1px solid #E4E1D8; display:flex; flex-direction:column; align-items:center; gap:10px; }
.np-label { font-size:12px; font-weight:700; letter-spacing:0.1em; color:#6E6E6E; text-transform:uppercase; align-self:flex-start; }
.cover { width:180px; height:180px; border-radius:10px; margin-top:4px;
background:linear-gradient(135deg,#3a3a3a,#1a1a1a);
box-shadow:rgba(0,0,0,0.18) 0 18px 40px -18px; position:relative; overflow:hidden; }
.cover::after { content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:#FC7E0F; }
.ep-title { font-size:19px; font-weight:700; text-align:center; margin-top:6px; letter-spacing:-0.2px; }
.ep-show { font-size:13px; font-weight:500; color:#6E6E6E; margin-top:2px; }
.scrub-wrap { width:100%; margin-top:12px; }
.scrub-track { width:100%; height:3px; background:#E4E1D8; border-radius:2px; position:relative; }
.scrub-fill { position:absolute; left:0; top:0; height:100%; width:38%; background:#FC7E0F; border-radius:2px; }
.scrub-knob { position:absolute; left:38%; top:50%; width:12px; height:12px; margin-left:-6px; margin-top:-6px;
border-radius:50%; background:#FC7E0F; box-shadow:rgba(0,0,0,0.5) 0 1px 4px; }
.scrub-times { display:flex; justify-content:space-between; font-size:11px; color:#9A9A9A; margin-top:6px; }
.transport { display:flex; align-items:center; justify-content:center; gap:26px; margin-top:16px; }
.skip { display:flex; flex-direction:column; align-items:center; gap:2px; }
.skip-glyph { font-size:24px; color:#6E6E6E; line-height:1; }
.skip-num { font-size:9px; font-weight:700; color:#6E6E6E; }
.play-ring { width:60px; height:60px; border-radius:50%; border:2.5px solid #FC7E0F;
display:flex; align-items:center; justify-content:center; }
.play-ring .glyph { width:0; height:0; border-top:11px solid transparent; border-bottom:11px solid transparent;
border-left:16px solid #FC7E0F; margin-left:4px; }
.effects { display:flex; justify-content:center; gap:26px; margin-top:16px; }
.fx { display:flex; flex-direction:column; align-items:center; gap:4px; }
.fx-glyph { width:19px; height:19px; border-radius:5px; }
.fx-label { font-size:9px; font-weight:600; color:#6E6E6E; }
.fx.active .fx-glyph { background:#FC7E0F; }
.fx.active .fx-label { color:#FC7E0F; }
.fx:not(.active) .fx-glyph { border:1.5px solid #9A9A9A; }
.saved-stat { margin-top:14px; font-size:10px; font-weight:600; letter-spacing:0.04em; color:#FC7E0F; text-transform:uppercase; text-align:center; }
.rightcol { padding:22px 30px; display:flex; flex-direction:column; }
.rc-title { font-size:26px; font-weight:800; letter-spacing:-0.3px; margin-bottom:6px; }
.plist { display:flex; flex-direction:column; }
.prow { display:flex; align-items:center; gap:14px; height:64px; border-bottom:1px solid #E4E1D8; }
.picon { width:38px; height:38px; border-radius:9px; flex:0 0 38px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; }
.pinfo { flex:1; min-width:0; }
.pname { font-size:15px; font-weight:600; }
.pdesc { font-size:12px; color:#6E6E6E; margin-top:2px; }
.pcount { font-size:14px; font-weight:600; color:#6E6E6E; }
.rec-card { margin-top:18px; display:flex; align-items:center; gap:12px; padding:14px; background:#F7F5EF; border-radius:10px; }
.rec-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#FC7E0F,#E06A00); flex:0 0 28px; }
.rec-text { font-size:12px; color:#6E6E6E; }
.rec-text b { color:#1A1A1A; font-weight:600; }
.tabbar { flex:0 0 52px; display:flex; align-items:center; justify-content:space-around;
background:rgba(251,250,246,0.94); border-top:1px solid #E4E1D8; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; }
.tab-dot { width:8px; height:8px; border-radius:2px; }
.tab.active .tab-dot { background:#FC7E0F; }
.tab:not(.active) .tab-dot { background:none; border:1.5px solid #9A9A9A; }
.tab-label { font-size:10px; font-weight:600; }
.tab.active .tab-label { color:#FC7E0F; }
.tab:not(.active) .tab-label { color:#9A9A9A; }
</style></head>
<body>
<div class="screen">
<nav><span class="brand">Overcast (iOS)<span>.</span></span></nav>
<main>
<div class="player">
<span class="np-label">Now Playing</span>
<div class="cover"></div>
<div class="ep-title">The Slow Unwind of Everything</div>
<div class="ep-show">Track Changes</div>
<div class="scrub-wrap">
<div class="scrub-track"><div class="scrub-fill"></div><div class="scrub-knob"></div></div>
<div class="scrub-times"><span>48:12</span><span>-1:22:40</span></div>
</div>
<div class="transport">
<div class="skip"><span class="skip-glyph">‹‹</span><span class="skip-num">30</span></div>
<div class="play-ring"><div class="glyph"></div></div>
<div class="skip"><span class="skip-glyph">››</span><span class="skip-num">30</span></div>
</div>
<div class="effects">
<div class="fx"><span class="fx-glyph" style="border:1.5px solid #9A9A9A;display:flex;align-items:center;justify-content:center;font-size:9px;color:#6E6E6E;">1.3×</span><span class="fx-label">Speed</span></div>
<div class="fx active"><span class="fx-glyph"></span><span class="fx-label">Smart Speed</span></div>
<div class="fx active"><span class="fx-glyph"></span><span class="fx-label">Voice Boost</span></div>
<div class="fx"><span class="fx-glyph" style="border:1.5px solid #9A9A9A;"></span><span class="fx-label">Star</span></div>
</div>
<div class="saved-stat">Saved 1 hr 12 min with Smart Speed</div>
</div>
<div class="rightcol">
<div class="rc-title">Playlists</div>
<div class="plist">
<div class="prow">
<div class="picon" style="background:#FC7E0F;">▶</div>
<div class="pinfo"><div class="pname">All Episodes</div><div class="pdesc">Every episode from every show you follow</div></div>
<div class="pcount">142</div>
</div>
<div class="prow">
<div class="picon" style="background:#2D7FF9;">◐</div>
<div class="pinfo"><div class="pname">In Progress</div><div class="pdesc">Episodes you've started but not finished</div></div>
<div class="pcount">6</div>
</div>
<div class="prow">
<div class="picon" style="background:#34C759;">★</div>
<div class="pinfo"><div class="pname">Starred</div><div class="pdesc">Episodes you've marked as favorites</div></div>
<div class="pcount">23</div>
</div>
<div class="prow">
<div class="picon" style="background:#5856D6;">⬇</div>
<div class="pinfo"><div class="pname">Downloaded</div><div class="pdesc">Available offline on this device</div></div>
<div class="pcount">11</div>
</div>
</div>
<div class="rec-card">
<div class="rec-avatar"></div>
<div class="rec-text"><b>Marco</b> recommended "The Slow Unwind of Everything" — "This one's worth the full hour."</div>
</div>
</div>
</main>
<div class="tabbar">
<div class="tab active"><span class="tab-dot"></span><span class="tab-label">Playlists</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Podcasts</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Search</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Settings</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.5px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #116600; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #116600;
border: 1px solid #116600; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.5px; background: #f5f5f5; color: #1a1a1a;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'Courier New', Courier, 'Lucida Console', monospace; }
.top { height:28px; background:#1a1a1a; color:#fff; font-size:11px; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; }
nav { height:52px; background:#116600; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { color:#fff; font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; color:#fff; font-size:13px; font-weight:600; }
.search { width:220px; height:32px; background:#fff; border-radius:4px; font-size:12px; color:#666; display:flex;
align-items:center; padding-left:12px; }
.body { display:flex; }
.sidebar { width:170px; border-right:1px solid #dddddd; padding:14px 16px; flex-shrink:0; }
.sidebar h4 { font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; margin:0 0 8px; }
.filt { font-size:12px; color:#333; display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.filt .box { width:12px; height:12px; border:1px solid #dddddd; display:inline-block; }
.filt.on .box { background:#116600; border-color:#116600; }
.main { flex:1; padding:14px 28px 0; }
.crumb { font-size:12px; color:#666; margin-bottom:10px; }
.quote { background:#116600; color:#fff; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.quote h2 { font-size:16px; margin:0; }
.quote p { font-size:12px; margin:2px 0 0; opacity:0.9; }
.btn-white { background:#fff; color:#116600; border:1px solid #fff; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:600; }
.btn-primary { background:#116600; color:#fff; border:none; border-radius:4px; padding:9px 18px; font-size:13px; font-weight:600; height:42px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { border:1px solid #dddddd; border-radius:4px; padding:14px; }
.thumb { aspect-ratio:1/1; background:#f5f5f5; margin-bottom:8px; position:relative; }
.t1::after { content:''; position:absolute; inset:22%; background:linear-gradient(150deg,#116600,#0d4f00); }
.t2::after { content:''; position:absolute; inset:22%; background:linear-gradient(150deg,#666,#333); }
.t3::after { content:''; position:absolute; inset:22%; background:linear-gradient(150deg,#999,#666); }
.card h3 { font-size:14px; font-weight:600; margin:0 0 4px; }
.part { font-size:12px; font-weight:700; letter-spacing:0.5px; background:#f5f5f5; border:1px solid #ebebeb;
padding:2px 6px; border-radius:2px; display:inline-block; margin-bottom:8px; }
.mfr { font-size:10px; border:1px solid #dddddd; padding:2px 8px; border-radius:2px; margin-left:6px; text-transform:uppercase; }
footer { background:#1a1a1a; color:#dddddd; font-size:12px; padding:14px 36px; display:flex;
justify-content:space-between; align-items:center; margin-top:14px; }
footer a { color:#dddddd; margin-left:14px; }
</style></head>
<body>
<div class="top"><span>Mon–Fri 7AM–6PM CST · (800) 555-0142</span><span>My Account | Order Status</span></div>
<nav>
<p class="brand">Bernell Hydraulics</p>
<div class="navlinks"><span>Pumps</span><span>Cylinders</span><span>Fittings</span><span>Filtration</span></div>
<div class="search">Search by part number, keyword, or manufacturer…</div>
</nav>
<div class="body">
<div class="sidebar">
<h4>Manufacturer</h4>
<div class="filt on"><span class="box"></span>Parker</div>
<div class="filt"><span class="box"></span>Bosch Rexroth</div>
<div class="filt"><span class="box"></span>Eaton</div>
<h4 style="margin-top:12px;">Pressure Rating</h4>
<div class="filt on"><span class="box"></span>0–3000 PSI</div>
<div class="filt"><span class="box"></span>3000–5000 PSI</div>
<h4 style="margin-top:12px;">In Stock</h4>
<div class="filt on"><span class="box"></span>Ships Today</div>
</div>
<div class="main">
<div class="crumb">Home / Pumps / <b>Gear Pumps</b></div>
<div class="quote">
<div><h2>Need volume pricing?</h2><p>Request a custom quote for bulk hydraulic orders.</p></div>
<button class="btn-white">Request Quote</button>
</div>
<div class="grid">
<div class="card">
<div class="thumb t1"></div>
<span class="part mono">PGP511A0080</span>
<h3>Parker Gear Pump, 0.80 CID</h3>
<span class="mfr">Parker</span>
<div style="margin-top:10px;"><button class="btn-primary">Add to Cart</button></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<span class="part mono">A10VSO28DR</span>
<h3>Rexroth Piston Pump 28cc</h3>
<span class="mfr">Rexroth</span>
<div style="margin-top:10px;"><button class="btn-primary">Add to Cart</button></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<span class="part mono">EATON-421AK</span>
<h3>Eaton Vickers Vane Pump</h3>
<span class="mfr">Eaton</span>
<div style="margin-top:10px;"><button class="btn-primary">Add to Cart</button></div>
</div>
</div>
</div>
</div>
<footer>
<span>© Bernell Hydraulics</span>
<div><a href="#">Products</a><a href="#">Services</a><a href="#">Contact</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fe7e43; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fe7e43; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4228; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #09162d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fe7e43; color: #09162d;
border: 1px solid #09162d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fe7e43; color: #111111;
border: 1px solid #d86d3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4228; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d76d3f; color: #09162d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:"Plus Jakarta Sans", "Roboto", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #f0f0f0; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:15px; font-weight:500; color:#404040; }
.navlinks span.on { color:#fe7e43; }
.navcta { background:#f97316; color:#fff; border-radius:9999px; padding:0 20px; height:38px; display:flex;
align-items:center; font-size:14px; font-weight:700; font-family:"Roboto"; }
.hero { padding:34px 36px 0; text-align:center; position:relative; }
.hero::before { content:''; position:absolute; left:50%; top:0; width:700px; height:230px; transform:translateX(-50%);
background:radial-gradient(ellipse at center, rgba(255,231,212,0.9), rgba(255,255,255,0)); z-index:0; }
.hero h1 { position:relative; font-size:44px; font-weight:600; line-height:1.08; margin:0 0 12px; letter-spacing:-0.5px; }
.hero p { position:relative; font-size:15px; color:#404040; margin:0 0 18px; }
.chiprow { position:relative; display:flex; gap:8px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
.chip { background:#ffffff; border:1px solid #e5e5e5; color:#262626; font-size:14px; font-family:"Roboto";
border-radius:9999px; padding:6px 16px 6px 10px; display:flex; align-items:center; gap:6px; }
.chip .dot { width:16px; height:16px; border-radius:50%; }
.d1 { background:#ffd166; } .d2 { background:#8ecae6; } .d3 { background:#f28482; } .d4 { background:#c9c9c9; }
.cta-primary { display:inline-flex; align-items:center; background:#f97316; color:#fff; font-family:"Roboto";
font-size:18px; font-weight:700; border-radius:9999px; padding:10px 30px; height:60px; position:relative; }
.studio { position:relative; margin:24px 36px 0; background:#fafafa; border-radius:24px; padding:18px 22px;
display:flex; gap:16px; }
.tabs { display:flex; gap:10px; }
.tab { border:2px solid #e5e5e5; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:500;
color:#404040; font-family:"Roboto"; }
.tab.on { border-color:#ffc98f; background:#fff; }
.panel { flex:1; }
.textline { height:12px; border-radius:6px; background:#eeeeee; margin-bottom:8px; }
.textline.short { width:60%; }
.voicecard { display:flex; align-items:center; gap:10px; margin-top:14px; background:#fff; border-radius:30px;
padding:10px 16px; box-shadow:rgba(0,0,0,0.06) 0px 4px 16px; width:280px; }
.avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#fe7e43,#f7b500); }
.vc-name { font-size:13px; font-weight:700; font-family:"Roboto"; }
.vc-sub { font-size:11px; color:#6b7280; font-family:"Roboto"; }
.play { margin-left:auto; width:28px; height:28px; border-radius:50%; background:#f97316; }
</style></head>
<body>
<nav>
<span class="brand">Neosapience</span>
<div class="navlinks"><span class="on">Text-to-Speech</span><span>Voice Cloning</span><span>AI Avatar</span><span>Pricing</span></div>
<span class="navcta">TRY FOR FREE</span>
</nav>
<div class="hero">
<h1>The world's most<br>expressive AI voice</h1>
<p>What are you making? Let's bring it to life.</p>
<div class="chiprow">
<span class="chip"><span class="dot d1"></span>Happy · Paige</span>
<span class="chip"><span class="dot d2"></span>Sad · Nia</span>
<span class="chip"><span class="dot d3"></span>Angry · Riley</span>
<span class="chip"><span class="dot d4"></span>Whisper · Chad</span>
</div>
<span class="cta-primary">TRY FOR FREE</span>
</div>
<div class="studio">
<div class="tabs">
<span class="tab on">Text-to-Speech</span>
<span class="tab">Smart Emotion</span>
<span class="tab">Voice Cloning</span>
</div>
</div>
<div style="margin:14px 36px 0; background:#fafafa; border-radius:24px; padding:20px 22px;">
<div class="panel">
<div class="textline"></div>
<div class="textline"></div>
<div class="textline short"></div>
<div class="voicecard">
<div class="avatar"></div>
<div><div class="vc-name">Paige</div><div class="vc-sub">Happy · English (US)</div></div>
<div class="play"></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2e2e2e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2e2e2e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f7; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2e2e2e; color: #f7f7f7;
border: 1px solid #f7f7f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2e2e2e; color: #f5f5f5;
border: 1px solid #4e4e4e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e4e4e; color: #f7f7f7;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#2e2e2e; box-sizing:border-box;
font-family:"Instrument Sans","Inter",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.logo { font-size:18px; font-weight:600; letter-spacing:-0.36px; }
.navlinks { display:flex; gap:20px; font-size:16px; }
.btn-pill { background:#2e2e2e; color:#ffffff; border-radius:9999px; padding:8px 16px; font-size:16px;
font-weight:500; }
.hero { text-align:center; padding:30px 40px 22px; }
.hero h1 { font-size:44px; font-weight:500; letter-spacing:-1.4px; line-height:1.2; margin:0 0 14px; }
.hero p { font-size:16px; color:#6a6972; margin:0 0 18px; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-dark { background:#2e2e2e; color:#ffffff; border-radius:10px; padding:14px 24px; font-size:16px;
font-weight:600; }
.btn-ghost { background:#fcfcfc; color:#2e2e2e; border:1px solid rgba(0,0,0,0.08); border-radius:10px;
padding:13px 23px; font-size:18px; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 40px 24px; }
.card { border-radius:8px; padding:16px; font-size:13px; }
.card.white { background:#ffffff; border:1px solid rgba(0,0,0,0.14); }
.card.warm { background:#f0f0ea; border:1px solid rgba(0,0,0,0.04); }
.card h3 { font-size:16px; margin:0 0 6px; }
.card p { margin:0; color:#6a6972; }
.card .hl { color:#207dff; }
.pricing { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:0 40px 24px; }
.tier { background:rgba(252,252,252,0.7); border:1px solid rgba(0,0,0,0.08); border-radius:12px; padding:18px; }
.tier h3 { font-size:20px; font-weight:600; margin:0 0 8px; }
.tier .check { color:#75c33a; font-size:13px; margin:4px 0; }
</style></head>
<body>
<nav>
<span class="logo">Heptabase</span>
<div class="navlinks"><span>AI Tutor</span><span>Wiki</span><span>Pricing</span></div>
<span class="btn-pill">Get started</span>
</nav>
<section class="hero">
<h1>Master anything you learn.</h1>
<p>Do your best research and thinking on an infinite whiteboard of cards.</p>
<div class="row">
<button class="btn-dark">Get started on mobile</button>
<button class="btn-ghost">Download</button>
</div>
</section>
<div class="grid">
<div class="card white"><h3>Whiteboard</h3><p>Arrange sources as cards and draw connections.</p></div>
<div class="card warm"><h3><span class="hl">AI chat</span></h3><p>Ask AI to explain any sources you bring.</p></div>
<div class="card white"><h3>AI tutor</h3><p>Master hard courses with guided review.</p></div>
</div>
<div class="pricing">
<div class="tier"><h3>Free</h3><div class="check">✓ Unlimited cards</div><div class="check">✓ Basic AI chat</div></div>
<div class="tier"><h3>Pro</h3><div class="check">✓ Unlimited AI tutor</div><div class="check">✓ For anyone building a lifelong knowledge base</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c473; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c473; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87dfba; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c473; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c473; color: #000000;
border: 1px solid #27cc88; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87dfba; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29cd89; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { display:flex; flex-direction:column; width:960px; height:640px; }
nav { flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 44px; border-bottom:1px solid #ececec; background:#ffffff; }
.logo { font-size:20px; font-weight:700; color:#000000; letter-spacing:-0.2px; }
.navlinks { display:flex; align-items:center; gap:22px; font-size:14px; color:#333333; }
.btn-green { background:#00c473; color:#ffffff; border:1px solid #00c473; border-radius:6px;
padding:7px 14px; font-size:14px; font-weight:500; white-space:nowrap; cursor:default; }
.btn-white { background:#ffffff; color:#041911; border:1px solid #e2e2e2; border-radius:6px;
padding:12px 30px; font-size:15px; font-weight:500; white-space:nowrap; cursor:default; }
main { flex:1; display:flex; }
.col-left { flex:0 0 400px; padding:48px 44px; display:flex; flex-direction:column;
justify-content:center; gap:18px; }
.kicker { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#a2a2a2; }
.col-left h1 { font-size:42px; font-weight:700; line-height:1.16; margin:0; color:#000000; }
.col-left p { font-size:15px; line-height:1.55; color:#333333; margin:0; max-width:320px; }
.row { display:flex; gap:12px; margin-top:4px; }
.col-right { flex:1; background:#fafafa; padding:40px 44px; display:flex; flex-direction:column;
justify-content:center; gap:16px; border-left:1px solid #ececec; }
.env-card { background:#ffffff; border:1px solid #ececec; border-radius:16px; padding:22px 24px;
display:flex; gap:16px; align-items:flex-start; }
.env-card .sq { width:34px; height:34px; border-radius:10px; background:#00c473; flex:0 0 34px; }
.env-card .txt h3 { font-size:16px; font-weight:700; margin:0 0 4px; color:#000000; }
.env-card .txt p { font-size:12.5px; color:#333333; margin:0; line-height:1.5; }
.env-card .num { margin-left:auto; font-size:11px; color:#a2a2a2; font-weight:500; }
footer { flex:0 0 52px; border-top:1px solid #ececec; padding:0 44px; display:flex;
align-items:center; justify-content:space-between; font-size:11.5px; color:#a2a2a2; }
</style></head>
<body>
<div class="page">
<nav>
<div class="logo">JANDI</div>
<div class="navlinks">
<span>Collaboration</span>
<span>Members</span>
<span>Security</span>
<span>JANDI AI</span>
<button class="btn-green">Start free</button>
</div>
</nav>
<main>
<div class="col-left">
<span class="kicker">Collaboration Platform</span>
<h1>Work, together, without the noise.</h1>
<p>Messaging, projects, and AI-assisted collaboration in one connected workspace built for teams that ship.</p>
<div class="row">
<button class="btn-green" style="padding:12px 26px;font-size:15px;">Start free</button>
<button class="btn-white">Watch overview</button>
</div>
</div>
<div class="col-right">
<div class="env-card">
<span class="sq"></span>
<div class="txt">
<h3>Team collaboration</h3>
<p>Messages, files, and projects live in the same connected workspace.</p>
</div>
<span class="num">01</span>
</div>
<div class="env-card">
<span class="sq"></span>
<div class="txt">
<h3>Member management</h3>
<p>Invite, organize, and track member work status at a glance.</p>
</div>
<span class="num">02</span>
</div>
<div class="env-card">
<span class="sq"></span>
<div class="txt">
<h3>Security environment</h3>
<p>Enterprise-grade access controls built into every workspace.</p>
</div>
<span class="num">03</span>
</div>
</div>
</main>
<footer>
<span>© JANDI</span>
<span>Collaboration · Projects · Security · AI</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #1e1f26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #1e1f26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1e1f26; overflow: hidden; max-height: 2.6em; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 1px; background: #eac078; color: #1e1f26;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 1px; background: #f0f0f0; color: #1e1f26;
border: 1px solid #eac078; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #555555;
border: 1px solid #bcbcbe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #02e49b; color: #1e1f26;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f0f0f0; color:#1e1f26; box-sizing:border-box;
font-family:Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#f0f0f0; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:400; letter-spacing:0.5px; margin:0; }
.navlinks { display:flex; gap:24px; font-family:'Segoe UI', Arial, sans-serif; }
.navlinks span { font-size:12px; letter-spacing:0.3px; color:#555555; text-transform:uppercase; }
.cart { font-family:'Consolas', monospace; font-size:12px; color:#1e1f26; }
main { display:flex; height:580px; }
.stage { width:320px; background:#e6ded1; display:flex; align-items:center; justify-content:center; }
.dropper { width:70px; height:170px; position:relative; }
.cap2 { width:40px; height:34px; background:#1e1f26; border-radius:4px 4px 0 0; margin:0 auto; }
.glass { width:70px; height:130px; margin-top:-4px; border-radius:10px; background:linear-gradient(180deg,rgba(234,192,120,0.5),rgba(234,192,120,0.15));
border:1px solid rgba(30,31,38,0.15); }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:11px; }
.kicker { font-family:'Segoe UI', Arial, sans-serif; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:#949494; margin:0; }
h1 { font-size:26px; font-weight:400; margin:0; letter-spacing:0; line-height:1.25; }
.sub { font-family:'Segoe UI', Arial, sans-serif; font-size:13px; color:#555555; margin:0; max-width:440px; line-height:1.6; }
.ingredients { font-family:'Consolas','Menlo','Monaco',monospace; font-size:11px; color:#555555; background:#fff;
border:1px solid #dddddd; border-radius:6px; padding:10px 12px; line-height:1.7; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:22px; font-weight:400; color:#1e1f26; }
.badge { display:inline-flex; background:#f0f0f0; color:#1ea0c3; font-size:11px; letter-spacing:0.4px; border-radius:4px;
padding:4px 9px; font-family:'Segoe UI',Arial,sans-serif; width:fit-content; }
.actions { display:flex; gap:12px; margin-top:6px; font-family:'Segoe UI', Arial, sans-serif; }
.btn-primary { background:#eac078; color:#1e1f26; border-radius:8px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:500; font-size:13px; }
.btn-secondary { background:#f0f0f0; border:1px solid #dddddd; color:#1e1f26; border-radius:8px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav>
<p class="brand">Ayuna</p>
<div class="navlinks"><span>Serums</span><span>Rituals</span><span>Journal</span><span>About</span></div>
<span class="cart">Cart (0)</span>
</nav>
<main>
<div class="stage"><div class="dropper"><div class="cap2"></div><div class="glass"></div></div></div>
<div class="info">
<p class="kicker">Clinical, Conscious Skincare</p>
<h1>Golden Hour Repair Serum</h1>
<p class="sub">A quiet, deliberate formula built on bakuchiol and squalane — for skin that prefers evidence to fragrance.</p>
<div class="ingredients">Aqua · Bakuchiol 1.2% · Squalane · Niacinamide 4% · Panthenol</div>
<span class="badge">Dermatologist Tested</span>
<div class="price-row"><span class="price">$58.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Read the Study</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0071ce; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0071ce; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bae3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #56cfc2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0071ce; color: #56cfc2;
border: 1px solid #56cfc2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0071ce; color: #f5f5f5;
border: 1px solid #2786d4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bae3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e80cc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#212121; color:#ffffff; box-sizing:border-box;
font-family:"Open Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-family:"Poppins", sans-serif; font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-family:"Poppins", sans-serif; font-size:12px; font-weight:600; }
.pill-blue { background:#0071ce; color:#fff; border-radius:50px; padding:12px 26px; font-family:"Poppins", sans-serif; font-size:13px; }
.hero { text-align:center; padding:20px 40px 22px; }
.hero .word { font-family:"Poppins", sans-serif; font-size:50px; font-weight:400; line-height:1.0; margin:0; }
.hero .word.mint { color:#56cfc2; }
.hero .sub { font-size:14px; color:rgba(255,255,255,0.7); margin-top:12px; }
.band { background:#efefef; color:#3d3d3d; padding:22px 40px; display:flex; gap:16px; }
.card { flex:1; background:#fff; border-radius:0; padding:14px; }
.card h3 { font-size:16px; margin:0 0 6px; font-weight:700; color:#181818; }
.card p { font-size:12px; margin:0; }
.row { display:flex; justify-content:center; gap:10px; padding:20px 0 0; }
.pill-mint { background:#56cfc2; color:#fff; border-radius:50px; padding:12px 20px; font-family:"Poppins",sans-serif; font-size:13px; }
.pill-ghost { background:#fff; color:#2b2b2b; border-radius:50px; padding:12px 26px; font-family:"Poppins",sans-serif; font-size:13px; }
</style></head>
<body>
<nav>
<p class="brand">Dable</p>
<div class="navlinks"><span>Advertisers</span><span>Publishers</span><span>Support</span><span>About</span></div>
<button class="pill-blue">Contact Us</button>
</nav>
<section class="hero">
<h1 class="word">Personalization</h1>
<h1 class="word mint">Machine learning</h1>
<div class="sub">The native advertising platform that connects users, media, and content</div>
</section>
<div class="band">
<div class="card"><h3>AI-Powered Recommendations</h3><p>Trained on behavioral data from 500M+ monthly users.</p></div>
<div class="card"><h3>Native Ads</h3><p>Asia's largest native advertising exchange.</p></div>
<div class="card"><h3>3,000+ Media Partners</h3><p>Live across 10+ countries in APAC.</p></div>
</div>
<div class="row">
<button class="pill-blue">Create Ad Account</button>
<button class="pill-mint">Get a Quick Estimate</button>
<button class="pill-ghost">Contact Sales</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f050f8; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f050f8; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #752d79; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #100030; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f050f8; color: #100030;
border: 1px solid #100030; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f050f8; color: #111111;
border: 1px solid #cc46d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #752d79; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cc43d8; color: #100030;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#100030; color:#f0ffff; box-sizing:border-box;
font-family:"Helvetica", "Arial", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:rgba(16,0,48,0.9); }
.brand { color:#60f0f8; font-size:19px; font-weight:500; }
.navlinks { display:flex; gap:8px; }
.navlinks span { font-size:16px; font-weight:500; border-radius:12px; padding:10px 14px; }
.hero { padding:26px 36px 0; }
.hero h1 { color:#60f0f8; font-size:34px; font-weight:500; line-height:1.3; margin:0 0 14px; max-width:520px; }
.hero p { font-size:16px; color:#f0ffff; margin:0 0 20px; max-width:460px; }
.quoteform { display:flex; width:460px; }
.postcode { flex:1; background:#ffffff; color:#000000; font-size:16px; font-weight:600; height:52px;
border-radius:12px 0 0 12px; display:flex; align-items:center; padding:0 16px; }
.quotecta { background:#f050f8; color:#f0ffff; font-size:16px; font-weight:400; height:52px; border-radius:0 12px 12px 0;
display:flex; align-items:center; padding:0 20px; white-space:nowrap; }
.cards-row { position:absolute; top:280px; left:0; right:0; bottom:0; padding:20px 36px 0; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.card { background:#180048; border-radius:12px; padding:16px; }
.card .glyph { width:34px; height:34px; border-radius:9999px; background:linear-gradient(135deg,#5840ff,#60f0f8); margin-bottom:10px; }
.card h4 { font-size:15px; font-weight:500; color:#f0ffff; margin:0; }
.trust { display:flex; gap:8px; margin-top:16px; }
.pill { background:#180048; color:#f0ffff; font-size:12px; font-weight:400; border-radius:9999px; padding:5px 14px; }
</style></head>
<body>
<nav>
<span class="brand">Octopus Energy</span>
<div class="navlinks"><span>Energy</span><span>Heat pumps</span><span>Log in</span></div>
</nav>
<div class="hero">
<h1>Join the UK's most popular energy supplier</h1>
<p>Everything you need for a cheaper, greener home & business.</p>
<div class="quoteform">
<div class="postcode">Enter your postcode</div>
<div class="quotecta">Get a quote</div>
</div>
<div class="trust">
<span class="pill">Which? Recommended Provider</span>
<span class="pill">Rated 4.8 stars</span>
</div>
</div>
<div class="cards-row">
<div class="grid">
<div class="card"><div class="glyph"></div><h4>Energy</h4></div>
<div class="card"><div class="glyph"></div><h4>Heat pumps</h4></div>
<div class="card"><div class="glyph"></div><h4>Solar & batteries</h4></div>
<div class="card"><div class="glyph"></div><h4>Electric vehicles</h4></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #c62828; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #e8e8e8; }
.brand { font-size:18px; font-weight:700; }
.search-bar { flex:1; max-width:400px; margin:0 20px; background:#f5f5f5; border-radius:8px; padding:8px 14px;
font-size:12.5px; color:#6e6e6e; }
.cart { font-size:12.5px; color:#313131; font-weight:600; }
.subnav { display:flex; gap:22px; padding:10px 34px; font-size:12.5px; color:#6e6e6e; border-bottom:1px solid #e8e8e8; }
main { display:flex; height:534px; }
.gallery { width:280px; background:#f5f5f5; position:relative; display:flex; align-items:center; justify-content:center; }
.cover { width:150px; height:220px; background:linear-gradient(160deg,#4a4a4a,#1a1a1a); border-radius:2px;
box-shadow:0 16px 32px rgba(0,0,0,0.2); position:relative; }
.cover::after { content:'A NOVEL'; position:absolute; bottom:20px; left:0; right:0; text-align:center;
color:#fff; font-size:9px; letter-spacing:0.2em; }
.cover::before { content:''; position:absolute; top:40px; left:16px; right:16px; height:2px; background:#9e9e9e; }
.info { flex:1; padding:26px 34px; display:flex; flex-direction:column; gap:10px; }
.booktitle { font-size:20px; font-weight:700; margin:0; line-height:1.3; }
.author { font-size:13px; color:#0056b3; }
.stars { font-size:12px; color:#f5a623; }
.stars .n { color:#6e6e6e; margin-left:6px; }
.desc { font-size:13px; color:#4a4a4a; line-height:1.55; max-width:400px; }
.offer-box { border:1px solid #d4d4d4; border-radius:8px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.offer { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; }
.offer .cond { color:#6e6e6e; }
.offer .p { font-weight:700; }
.offer.best { border-top:1px solid #eeeee; padding-top:8px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#313131; color:#fff; border:none; border-radius:8px; padding:12px 18px;
font-size:13.5px; font-weight:600; }
.btn-outline { border:1.5px solid #313131; color:#313131; background:#fff; border-radius:8px; padding:10.5px 16px;
font-size:12.5px; font-weight:600; white-space:nowrap; }
.meta { font-size:11px; color:#9e9e9e; }
</style></head>
<body>
<nav>
<div class="brand">Alibris</div>
<div class="search-bar">Search title, author, or ISBN...</div>
<div class="cart">Cart (0)</div>
</nav>
<div class="subnav"><span>Fiction</span><span>Nonfiction</span><span>Rare & Collectible</span><span>Textbooks</span><span>Sell Books</span></div>
<main>
<div class="gallery"><div class="cover"></div></div>
<div class="info">
<h1 class="booktitle">The Quiet Ledger</h1>
<span class="author">by Margaret Ainsley</span>
<div class="stars">★★★★☆ <span class="n">4.4 · 312 ratings</span></div>
<p class="desc">A used first-edition hardcover in very good condition — light shelf wear, no markings, dust jacket included.</p>
<div class="offer-box">
<div class="offer"><span class="cond">Used — Very Good</span><span class="p">$6.98</span></div>
<div class="offer best"><span class="cond">New — Hardcover</span><span class="p">$24.95</span></div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">See All 14 Sellers</button>
</div>
<span class="meta">Ships from a verified independent bookseller</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #F47920; color: #FFFFFF;
border: none; border-radius: 3px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #FFFFFF; color: #0073AE;
border: 1px solid #0073AE; border-radius: 3px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 3px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #2E7D32; color: #FFFFFF;
border-radius: 3px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1A1A1A; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:26px; background:#002A5C; color:#fff; font-size:11px; display:flex; align-items:center;
justify-content:center; letter-spacing:0.2px; }
nav { height:54px; background:#003E7E; display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
.brand { color:#fff; font-size:16px; font-weight:700; margin:0; }
.searchbox { flex:1; max-width:380px; margin:0 20px; background:#fff; border-radius:3px; height:32px;
display:flex; align-items:center; padding:0 12px; font-size:12px; color:#666; }
.cart-pill { background:#F47920; color:#fff; font-size:12px; font-weight:700; padding:6px 14px; border-radius:3px; }
main { display:flex; height:560px; }
.stage { width:300px; background:#EAF4FA; display:flex; align-items:center; justify-content:center; position:relative; }
.in-stock { position:absolute; top:16px; left:16px; background:#2E7D32; color:#fff; font-size:10px; font-weight:700;
text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.plc { width:150px; height:100px; background:linear-gradient(160deg,#3a3a3a,#1a1a1a); border-radius:3px; position:relative;
box-shadow:0 14px 28px rgba(0,0,0,0.25); }
.plc .led { position:absolute; top:8px; left:8px; width:6px; height:6px; background:#2E7D32; border-radius:999px; }
.plc .led2 { position:absolute; top:8px; left:20px; width:6px; height:6px; background:#F47920; border-radius:999px; }
.plc .terms { position:absolute; bottom:8px; left:8px; right:8px; height:20px; background:#0073AE; border-radius:2px; }
.info { flex:1; padding:24px 30px; display:flex; flex-direction:column; gap:9px; }
.breadcrumb { font-size:11px; color:#666; }
h1 { font-size:20px; font-weight:700; margin:0; }
.partno { font-size:12px; color:#666; }
table.specs { width:100%; border-collapse:collapse; margin-top:6px; font-size:12px; }
table.specs td { border:1px solid #CCCCCC; padding:5px 10px; }
table.specs td.k { background:#F5F5F5; font-weight:700; width:170px; color:#333; }
.price-row { display:flex; align-items:baseline; gap:12px; margin-top:8px; }
.price { font-size:24px; font-weight:700; color:#0073AE; }
.list-price { font-size:13px; color:#666; text-decoration:line-through; }
.actions { display:flex; gap:10px; margin-top:4px; }
.btn-primary { background:#F47920; color:#fff; border-radius:2px; height:42px; padding:0 26px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #CCCCCC; color:#1A1A1A; border-radius:2px; height:42px;
padding:0 18px; display:flex; align-items:center; font-size:12px; }
.qty-note { margin-top:auto; font-size:11px; color:#666; border-top:1px solid #E5E5E5; padding-top:10px; }
</style></head>
<body>
<div class="topbar">FREE 2-DAY SHIPPING ON ORDERS OVER $49 · SAME-DAY SHIP BEFORE 9PM ET</div>
<nav>
<p class="brand">Automationdirect</p>
<div class="searchbox">Search by part number, model, or category…</div>
<div class="cart-pill">Cart (0) · $0.00</div>
</nav>
<main>
<div class="stage">
<span class="in-stock">In Stock</span>
<div class="plc"><span class="led"></span><span class="led2"></span><div class="terms"></div></div>
</div>
<div class="info">
<p class="breadcrumb">PLCs & Controllers / Micro PLCs / DL06 Series</p>
<h1>DL06 Micro PLC, 20-Point, 24VDC Input/Output</h1>
<p class="partno">Part No. D0-06DR · In Stock — Ships Today</p>
<table class="specs">
<tr><td class="k">I/O Points</td><td>20 (12 in / 8 relay out)</td></tr>
<tr><td class="k">Power Input</td><td>100-240VAC</td></tr>
<tr><td class="k">Programming</td><td>DirectSOFT6, free download</td></tr>
<tr><td class="k">Warranty</td><td>1-year replacement</td></tr>
</table>
<div class="price-row"><span class="price">$189.00</span><span class="list-price">$249.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Download Datasheet</div>
</div>
<div class="qty-note">Volume pricing available — 10+ units qualify for tiered discount at checkout.</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7b09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e6e300; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fffc00; color: #000000;
border: 1px solid #e6e300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fffc00; color: #111111;
border: 1px solid #d9d603; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7b09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fbf800; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:"Avenir Next", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.cam { position:relative; height:100%;
background: radial-gradient(circle at 30% 20%, #2b3a2e 0%, #14201a 40%, #0a0f0c 100%); }
.hud-top { position:absolute; top:22px; left:26px; right:26px; display:flex; justify-content:space-between; align-items:center; }
.bitmoji { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#ffd166,#ef476f); box-shadow:rgba(0,0,0,.4) 0 1px 2px; }
.hud-ic { font-size:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.lenses { position:absolute; bottom:150px; left:0; right:0; display:flex; justify-content:center; gap:14px; }
.lens { width:60px; height:60px; border-radius:50%; border:2px solid transparent; }
.lens.active { width:72px; height:72px; border-color:#FFFC00; }
.lens-label { text-align:center; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; margin-top:4px; }
.capture-wrap { position:absolute; bottom:26px; left:0; right:0; display:flex; justify-content:center; }
.outer { width:82px; height:82px; border-radius:50%; border:6px solid #FFFC00; display:flex; align-items:center; justify-content:center; }
.inner { width:64px; height:64px; border-radius:50%; background:#fff; }
.corner-ic { position:absolute; font-size:26px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.bl { bottom:40px; left:26px; } .br { bottom:40px; right:26px; }
.nav-strip { position:absolute; bottom:0; left:0; right:0; height:0; }
</style></head>
<body>
<div class="cam">
<div class="hud-top"><div class="bitmoji"></div><div style="font-size:13px;font-weight:800;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.4);">Snapchat (iOS)</div><div class="hud-ic">🔍</div></div>
<div class="corner-ic bl">🖼</div>
<div class="corner-ic br">💬</div>
<div class="lenses">
<div><div class="lens" style="background:linear-gradient(135deg,#9be,#57a);"></div></div>
<div><div class="lens active" style="background:linear-gradient(135deg,#fc9,#f69);"></div><div class="lens-label" style="color:#FFFC00;">Beach</div></div>
<div><div class="lens" style="background:linear-gradient(135deg,#bf9,#5a7);"></div></div>
<div><div class="lens" style="background:linear-gradient(135deg,#f9c,#a5e);"></div></div>
</div>
<div class="capture-wrap"><div class="outer"><div class="inner"></div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faff69; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faff69; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7c39; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #131312; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faff69; color: #131312;
border: 1px solid #131312; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #faff69; color: #111111;
border: 1px solid #d5d95b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7c39; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d5d95b; color: #131312;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#131312; color:#dfdfdf; box-sizing:border-box;
font-family:Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #414141; }
.nav .brand { font-weight:700; font-size:16px; color:#ffffff; }
.nav .links { display:flex; gap:20px; font-size:13px; color:#dfdfdf; }
.navbtn { background:#faff69; color:#151515; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:600; }
.hero { padding:24px 28px 0; }
.hero h1 { font-size:36px; font-weight:600; color:#fff; margin:0 0 8px; line-height:1.25; }
.hero p { font-size:15px; color:#dfdfdf; margin:0 0 16px; max-width:520px; }
.herobtn { background:#faff69; color:#151515; border-radius:6px; padding:10px 22px; font-size:14px; font-weight:600; display:inline-block; }
.codeblock { margin:20px 28px 0; background:#1c1c1a; border:1px solid #414141; border-radius:8px; padding:14px 18px;
font-family:'Courier New', monospace; font-size:12.5px; line-height:1.8; }
.k{color:#faff69;} .s{color:#9fd6a3;} .c{color:#8a8a86;}
.stats { display:flex; gap:14px; padding:20px 28px 0; }
.stat { flex:1; background:#282828; border-radius:6px; padding:16px 18px; border:1px solid #414141; }
.stat .num { font-size:26px; font-weight:600; color:#faff69; }
.stat .lbl { font-size:12px; color:#a5a5a2; margin-top:4px; }
</style></head>
<body>
<nav class="nav">
<div class="brand">ClickHouse</div>
<div class="links"><span>Docs</span><span>Cloud</span><span>Benchmarks</span><span>Pricing</span></div>
<button class="navbtn">Get started free</button>
</nav>
<div class="hero">
<h1>The fastest analytics database on Earth</h1>
<p>Column-oriented SQL built for real-time reporting at any scale.</p>
<span class="herobtn">Start free trial</span>
</div>
<div class="codeblock">
<span class="c">-- query 1B rows in milliseconds</span><br>
<span class="k">SELECT</span> region, <span class="k">count</span>(*) <span class="k">AS</span> events<br>
<span class="k">FROM</span> analytics.pageviews<br>
<span class="k">WHERE</span> event_date >= <span class="s">'2026-09-01'</span><br>
<span class="k">GROUP BY</span> region <span class="k">ORDER BY</span> events <span class="k">DESC</span>;
</div>
<div class="stats">
<div class="stat"><div class="num">1.2B</div><div class="lbl">rows/sec ingest, single node</div></div>
<div class="stat"><div class="num">0.03s</div><div class="lbl">median query latency</div></div>
<div class="stat"><div class="num">10x</div><div class="lbl">cheaper than legacy warehouses</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f9f9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f9f9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #1561a8; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #f8f9f9; color: #1561a8;
border: 1px solid #1561a8; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f9f9; color: #111111;
border: 1px solid #bebfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #34e2e4; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f9f9; color:#111111; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #d6d6d6; }
.brand { font-size:18px; font-weight:700; margin:0; color:#1561a8; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:600; }
.navlinks .active { color:#1561a8; border-bottom:2px solid #1561a8; padding-bottom:20px; margin-bottom:-21px; }
.search { width:170px; height:32px; border-radius:999px; border:1px solid #d6d6d6; background:#fff; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:18px 30px; min-height:0; }
.hero { flex:0 0 auto; background:#111111; color:#f8f9f9; padding:18px 24px; border-radius:4px; margin-bottom:16px;
display:flex; align-items:center; justify-content:space-between; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 4px; }
.hero p { font-size:13px; color:#777777; margin:0; }
.hero button { background:#1561a8; color:#fff; border:none; border-radius:8px; padding:11px 22px; font-size:14px; font-weight:600; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; min-height:0; }
.card { background:#ffffff; border:1px solid #e9e9e9; border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:6px; }
.poster { flex:1; border-radius:4px; min-height:0; position:relative; }
.poster::after { content:''; position:absolute; top:6px; left:6px; background:#34e2e4; color:#111; font-size:10px;
font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 6px; }
.p1 { background:linear-gradient(170deg,#003388,#1561a8 130%); }
.p2 { background:linear-gradient(170deg,#4721fb,#111 130%); }
.p3 { background:linear-gradient(170deg,#006ba1,#003388 130%); }
.p4 { background:linear-gradient(170deg,#111,#444 130%); }
.card h3 { font-size:14px; font-weight:600; margin:0; }
.card .meta { font-size:12px; color:#444444; margin:0; }
.card .price { font-size:14px; font-weight:700; margin:2px 0 0; }
footer { flex:0 0 auto; height:52px; background:#111111; color:#f8f9f9; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
footer .links { color:#777777; display:flex; gap:16px; }
</style></head>
<body>
<nav>
<p class="brand">Arbelos Films</p>
<div class="navlinks"><span class="active">Catalog</span><span>New Restorations</span><span>Directors</span></div>
<div class="search"></div>
</nav>
<main>
<div class="hero">
<div>
<h1>Restored in 4K, Preserved Forever</h1>
<p>A film library curated as text worth studying.</p>
</div>
<button>Pre-order</button>
</div>
<div class="grid">
<div class="card"><div class="poster p1"></div><h3>The Salt Line</h3><p class="meta">Dir. R. Halvorsen, 1974</p><p class="price">$19.99</p></div>
<div class="card"><div class="poster p2"></div><h3>Nightgarden</h3><p class="meta">Dir. E. Marchetti, 1989</p><p class="price">$24.99</p></div>
<div class="card"><div class="poster p3"></div><h3>Low Tide City</h3><p class="meta">Dir. J. Okafor, 1996</p><p class="price">$18.50</p></div>
<div class="card"><div class="poster p4"></div><h3>A Quiet Ledger</h3><p class="meta">Dir. S. Vance, 1982</p><p class="price">$21.00</p></div>
</div>
</main>
<footer>
<span>© Arbelos Films</span>
<div class="links"><span>Newsletter</span><span>Press</span><span>Contact</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4081; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4081; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa4c1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ea306f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4081; color: #000000;
border: 1px solid #ea306f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4081; color: #f5f5f5;
border: 1px solid #fd5d94; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa4c1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fc3d7e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2d3035; box-sizing:border-box;
font-family:"Lific","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
.head { padding:16px 32px 0; display:flex; flex-direction:column; gap:12px; }
.chiprow { display:flex; gap:10px; align-items:center; }
.wordmark { font-size:18px; font-weight:900; color:#ff4081; letter-spacing:-0.3px; margin-right:2px; }
.chip { background:#fff1f5; color:#000000; font-size:13px; font-weight:700; letter-spacing:-0.2px;
border-radius:36px; padding:4px 14px 4px 16px; height:32px; display:flex; align-items:center; gap:6px; }
.chip .car { font-size:10px; opacity:0.5; }
.search { background:#ffffff; border:1px solid #e9ebec; border-radius:6px; height:48px;
display:flex; align-items:center; padding:0 16px; color:#9ca1aa; font-size:17px; font-weight:500; }
.kwrow { display:flex; gap:8px; }
.kw { background:rgba(255,170,199,0.55); color:#ffffff; font-size:12px; font-weight:500;
border-radius:15px; padding:4px 14px; }
.section { padding:14px 32px 0; }
.headline { font-size:17px; font-weight:700; letter-spacing:-0.2px; margin:0 0 12px; }
.headline b { font-weight:900; color:#ff4081; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px; }
.card { background:#f8f8f8; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.thumb { height:96px; position:relative; }
.th1 { background:linear-gradient(135deg,#ffd9e6,#ff9dc0); }
.th2 { background:linear-gradient(135deg,#ffe9b0,#ffbf6b); }
.th3 { background:linear-gradient(135deg,#d8f0e0,#8fd8ac); }
.th4 { background:linear-gradient(135deg,#dfe6ff,#a9baff); }
.disc { position:absolute; top:8px; left:8px; background:#f33f46; color:#fff; font-size:11px;
font-weight:700; border-radius:5px; padding:2px 6px; }
.cbody { padding:9px 10px 12px; display:flex; flex-direction:column; gap:5px; }
.pname { font-size:12px; color:#2d3035; line-height:1.35; letter-spacing:-0.2px; }
.prow { display:flex; align-items:baseline; gap:6px; }
.pct { font-size:14px; font-weight:700; color:#f33f46; letter-spacing:-0.3px; }
.price { font-size:13px; font-weight:700; color:#2d3035; }
.bottom { margin-top:12px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; }
.reorder { font-size:11px; color:#9ca1aa; }
.buy { background:#ff4081; color:#ffffff; font-size:14px; font-weight:700; border:none;
border-radius:9999px; padding:10px 22px; }
</style></head>
<body>
<div class="head">
<div class="chiprow">
<span class="wordmark">Pet Friends</span>
<span class="chip">Dogs <span class="car">▾</span></span>
<span class="chip">Deliver to Home <span class="car">▾</span></span>
</div>
<div class="search">What are you looking for today?</div>
<div class="kwrow">
<span class="kw">Grain-free food</span>
<span class="kw">Cooling mat</span>
<span class="kw">Dental chews</span>
<span class="kw">Litter</span>
</div>
</div>
<div class="section">
<p class="headline">Loved by repeat buyers — <b>92% reorder rate</b> on this pick</p>
</div>
<div class="grid">
<div class="card">
<div class="thumb th1"><span class="disc">17%</span></div>
<div class="cbody"><span class="pname">Salmon & Sweet Potato Grain-Free Kibble 3kg</span>
<div class="prow"><span class="pct">17%</span><span class="price">₩28,900</span></div></div>
</div>
<div class="card">
<div class="thumb th2"><span class="disc">30%</span></div>
<div class="cbody"><span class="pname">Freeze-Dried Chicken Training Treats 200g</span>
<div class="prow"><span class="pct">30%</span><span class="price">₩12,400</span></div></div>
</div>
<div class="card">
<div class="thumb th3"></div>
<div class="cbody"><span class="pname">Cooling Gel Mat for Summer, Size M</span>
<div class="prow"><span class="price">₩19,900</span></div></div>
</div>
<div class="card">
<div class="thumb th4"><span class="disc">50%</span></div>
<div class="cbody"><span class="pname">Unscented Clumping Cat Litter 10L</span>
<div class="prow"><span class="pct">50%</span><span class="price">₩9,900</span></div></div>
</div>
</div>
<div class="bottom">
<span class="reorder">Trusted by 1.2M pet parents this month</span>
<button class="buy">Shop today's deals</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #21afbf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #21afbf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96d6dd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c95a2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21afbf; color: #000000;
border: 1px solid #1c95a2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #21afbf; color: #000000;
border: 1px solid #43bac8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96d6dd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #20abba; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#16181d; box-sizing:border-box;
font-family:"Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eef0f2; }
.brand { font-size:17px; font-weight:700; margin:0; color:#16181d; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#23242a; }
.btn-primary { background:#21afbf; color:#ffffff; border:none; border-radius:8px; height:40px;
padding:0 16px; font-weight:500; font-size:14px; display:flex; align-items:center; }
.btn-text { background:transparent; border:none; color:#1c95a2; font-weight:500; font-size:14px; }
.hero { padding:38px 32px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero .kicker { font-size:13px; font-weight:600; color:#1c95a2; letter-spacing:0.02em; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.3; margin:0; color:#16181d; }
.hero h1 span { color:#21afbf; }
.hero p { font-size:14px; color:#70798f; margin:0; max-width:480px; }
.row { display:flex; gap:10px; margin-top:4px; }
.btn-lg { background:#21afbf; color:#ffffff; border:none; border-radius:10px; padding:11px 22px;
font-weight:600; font-size:14px; }
.btn-lg.ghost { background:#ffffff; color:#23242a; border:1px solid #dfe3e8; }
.gallery { padding:16px 32px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tpl { border-radius:12px; overflow:hidden; border:1px solid #eef0f2; background:#ffffff; }
.tpl .thumb { height:212px; position:relative; }
.tpl .meta { padding:9px 11px; display:flex; flex-direction:column; gap:3px; }
.tpl .meta .t { font-size:12px; font-weight:600; color:#16181d; }
.tpl .meta .c { font-size:11px; color:#70798f; }
.th1 { background:linear-gradient(160deg,#21afbf 0%,#8fe0e8 100%); }
.th1::after { content:''; position:absolute; left:14px; right:14px; top:20px; height:8px; border-radius:4px; background:rgba(255,255,255,0.85); }
.th1::before { content:''; position:absolute; left:14px; top:38px; width:60px; height:60px; border-radius:10px; background:rgba(255,255,255,0.3); }
.th2 { background:#fdf1e0; }
.th2::after { content:''; position:absolute; left:16px; right:60px; top:24px; height:10px; border-radius:5px; background:#f0a63e; }
.th2::before { content:''; position:absolute; right:16px; bottom:16px; width:70px; height:44px; border-radius:8px;
background:#ffffff; box-shadow:0 4px 10px rgba(0,0,0,0.06); }
.th3 { background:#eef2ff; }
.th3::after { content:''; position:absolute; left:20px; top:22px; width:44px; height:44px; border-radius:50%; background:#7b8cf0; }
.th3::before { content:''; position:absolute; left:20px; top:74px; right:20px; height:8px; border-radius:4px; background:#c6cdf5; }
.th4 { background:#0c1220; }
.th4::after { content:''; position:absolute; left:16px; top:18px; right:16px; height:10px; border-radius:5px; background:#21afbf; }
.th4::before { content:''; position:absolute; left:16px; top:36px; width:70px; height:26px; border-radius:4px; background:rgba(255,255,255,0.15); }
.tags { padding:18px 32px 0; display:flex; gap:8px; justify-content:center; }
.tag { font-size:12px; font-weight:500; color:#23242a; background:#f4f6f8; border-radius:9999px; padding:6px 14px; }
.tag.active { background:#21afbf; color:#ffffff; }
footer { border-top:1px solid #eef0f2; padding:12px 32px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#70798f; position:absolute; bottom:0; left:0; right:0; }
</style></head>
<body>
<nav>
<p class="brand">MiriCanvas</p>
<div class="navlinks"><span>Templates</span><span>Business</span><span>Pricing</span></div>
<div style="display:flex; gap:10px; align-items:center;"><span class="btn-text">Log in</span><button class="btn-primary">Start for free</button></div>
</nav>
<section class="hero">
<span class="kicker">Every design, done in minutes</span>
<h1>Complex design, <span>finished in 3 minutes</span></h1>
<p>Pick a template, swap the words and photos, and publish — no design skills required.</p>
<div class="row">
<button class="btn-lg">Browse templates</button>
<button class="btn-lg ghost">See business plans</button>
</div>
</section>
<section class="tags">
<span class="tag active">Card news</span>
<span class="tag">Presentation</span>
<span class="tag">Poster</span>
<span class="tag">Social media</span>
<span class="tag">Printables</span>
</section>
<section class="gallery">
<div class="tpl"><div class="thumb th1"></div><div class="meta"><div class="t">Team Update Deck</div><div class="c">Presentation</div></div></div>
<div class="tpl"><div class="thumb th2"></div><div class="meta"><div class="t">Autumn Sale Poster</div><div class="c">Poster</div></div></div>
<div class="tpl"><div class="thumb th3"></div><div class="meta"><div class="t">Product Launch Card</div><div class="c">Social media</div></div></div>
<div class="tpl"><div class="thumb th4"></div><div class="meta"><div class="t">Weekly Newsletter</div><div class="c">Card news</div></div></div>
</section>
<footer>
<span>© MiriCanvas</span>
<span>MiriCanvas · Templates · Business · Help Center</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #337ab7;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #337ab7;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #337ab7; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ff6600; color: #ffffff;
border: none; border-radius: 4px; padding: 6px 12px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #f5f5f5; color: #555555;
border: 1px solid #ff6600; border-radius: 4px;
padding: 6px 12px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #110011;
border: 1px solid #e5e5e5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; background: #ffeadb; color: #ff6600;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#110011; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; font-size:14px; }
nav { flex:0 0 50px; height:50px; background:#080808; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.brand { font-size:18px; font-weight:700; margin:0; color:#ff6600; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:13px; color:#9d9d9d; }
.navlinks span:hover, .navlinks span.on { color:#ffffff; }
.navsearch { display:flex; align-items:center; }
.navsearch input { width:150px; height:30px; border:1px solid #333333; border-radius:3px 0 0 3px;
background:#1a1a1a; color:#cccccc; font-size:12px; padding:0 10px; }
.navsearch .go { height:30px; width:34px; background:#ff6600; border-radius:0 3px 3px 0;
display:flex; align-items:center; justify-content:center; }
.glass { width:12px; height:12px; border:1.5px solid #ffffff; border-radius:50%; position:relative; }
.glass::after { content:''; position:absolute; width:5px; height:1.5px; background:#ffffff; right:-4px; bottom:0; transform:rotate(45deg); }
.subbar { flex:0 0 34px; height:34px; background:#f5f5f5; border-bottom:1px solid #eeeeee;
display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.crumb { font-size:12px; color:#777777; }
.crumb b { color:#777777; font-weight:400; }
.crumb .cur { color:#777777; }
.crumb a { color:#337ab7; }
.info-pill { background:#d9edf7; color:#31708f; border:1px solid #bce8f1; border-radius:4px;
padding:3px 10px; font-size:11.5px; }
.body-row { flex:1 1 auto; display:flex; overflow:hidden; }
aside { flex:0 0 188px; width:188px; background:#f5f5f5; border-right:1px solid #eeeeee; padding:14px 16px; }
aside h4 { margin:0 0 10px; font-size:13px; font-weight:700; color:#110011; }
aside .cat { display:block; font-size:12.5px; color:#337ab7; margin:7px 0; }
aside .cat.active { color:#ff6600; font-weight:700; }
aside .sub { display:block; font-size:12px; color:#337ab7; margin:5px 0 5px 12px; }
.content { flex:1 1 auto; overflow:hidden; padding:12px 20px 0; display:flex; flex-direction:column; }
.content h2 { margin:0 0 8px; font-size:17px; font-weight:700; color:#110011; }
table.cat-table { width:100%; border-collapse:collapse; }
table.cat-table thead th { background:#f5f5f5; text-align:left; font-size:12.5px; font-weight:700;
color:#555555; padding:6px 10px; border-bottom:1px solid #eeeeee; }
table.cat-table tbody td { padding:8px 10px; border-bottom:1px solid #eeeeee; font-size:13px; vertical-align:middle; }
table.cat-table tbody tr:nth-child(even) { background:#f5f5f5; }
.lot { font-family:Consolas, 'Courier New', Courier, monospace; font-size:11.5px; color:#777777; }
.stamp-title { color:#337ab7; }
.country { color:#777777; font-size:12px; }
.cond { display:inline-block; font-size:11px; padding:2px 7px; border-radius:4px; border:1px solid transparent; }
.cond.mint { background:#dff0d8; color:#3c763d; border-color:#d6e9c6; }
.cond.used { background:#fcf8e3; color:#8a6d3b; border-color:#faebcc; }
.cond.dmg { background:#f2dede; color:#a94442; border-color:#ebccd1; }
.lot-price { text-align:right; font-weight:700; color:#110011; }
.lot-add { text-align:right; }
.btn-add { background:#ff6600; color:#fff; border:none; border-radius:4px; padding:4px 10px; font-size:11.5px; }
.pagination { flex:0 0 30px; height:30px; display:flex; align-items:center; justify-content:center; gap:4px;
border-top:1px solid #eeeeee; }
.pg { font-size:12px; color:#337ab7; border:1px solid #eeeeee; border-radius:4px; padding:3px 9px; }
.pg.on { background:#ff6600; color:#fff; border-color:#ff6600; }
footer { flex:0 0 40px; height:40px; background:#080808; color:#9d9d9d; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; font-size:11.5px; }
</style></head>
<body>
<nav>
<p class="brand">Arpin Philately</p>
<div class="navlinks">
<span class="on">Catalogue</span><span>Great Britain</span><span>Commonwealth</span><span>Topicals</span><span>Sell</span>
</div>
<div class="navsearch">
<input type="text" placeholder="Search lot #, country..." readonly>
<div class="go"><div class="glass"></div></div>
</div>
</nav>
<div class="subbar">
<span class="crumb"><a>Home</a> / <a>Europe</a> / <span class="cur">Great Britain</span></span>
<span class="info-pill">Free tracked shipping over $75</span>
</div>
<div class="body-row">
<aside>
<h4>Categories</h4>
<span class="cat">Europe</span>
<span class="sub active">Great Britain</span>
<span class="sub">France</span>
<span class="cat">Commonwealth</span>
<span class="cat">United States</span>
<span class="cat">Topical</span>
<span class="cat">Errors & Varieties</span>
</aside>
<div class="content">
<h2>Great Britain — Catalogue Listings</h2>
<table class="cat-table">
<thead>
<tr><th>Lot #</th><th>Description</th><th>Country</th><th>Condition</th><th style="text-align:right">Price</th><th></th></tr>
</thead>
<tbody>
<tr>
<td class="lot">GB-1840-001</td>
<td class="stamp-title">Penny Black, 1d, plate 1b</td>
<td class="country">Great Britain</td>
<td><span class="cond used">Used</span></td>
<td class="lot-price">$1,240.00</td>
<td class="lot-add"><button class="btn-add">Add</button></td>
</tr>
<tr>
<td class="lot">GB-1902-014</td>
<td class="stamp-title">Edward VII, 2½d Definitive</td>
<td class="country">Great Britain</td>
<td><span class="cond mint">Mint / NH</span></td>
<td class="lot-price">$68.00</td>
<td class="lot-add"><button class="btn-add">Add</button></td>
</tr>
<tr>
<td class="lot">GB-1929-072</td>
<td class="stamp-title">PUC Congress, 1s Green</td>
<td class="country">Great Britain</td>
<td><span class="cond mint">Mint / Hinged</span></td>
<td class="lot-price">$212.50</td>
<td class="lot-add"><button class="btn-add">Add</button></td>
</tr>
<tr>
<td class="lot">GB-1963-231</td>
<td class="stamp-title">Freedom From Hunger, 3d</td>
<td class="country">Great Britain</td>
<td><span class="cond dmg">Faulty</span></td>
<td class="lot-price">$4.25</td>
<td class="lot-add"><button class="btn-add">Add</button></td>
</tr>
<tr>
<td class="lot">GB-1978-105</td>
<td class="stamp-title">Coronation 25th Anniv. Set</td>
<td class="country">Great Britain</td>
<td><span class="cond mint">Mint / NH</span></td>
<td class="lot-price">$31.00</td>
<td class="lot-add"><button class="btn-add">Add</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="pagination">
<span class="pg">«</span><span class="pg on">1</span><span class="pg">2</span><span class="pg">3</span><span class="pg">»</span>
</div>
<footer>
<span>© Arpin Philately</span>
<span>Arpin Philately · Shipping · Returns · Contact</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d0c1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d0c1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #0d0c1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #242424; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #2c56ee; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #2c56ee;
border: 1px solid #2c56ee; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #232323;
border: 1px solid #c2c2c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #242424; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fb5b75; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#232323; box-sizing:border-box;
font-family:'Poppins', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; background:#0d0c1a; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:8px; font-size:15px; font-weight:600; }
.navlinks span { padding:8px 12px; border-radius:6px; }
.navlinks .active { background:#2c56ee; }
main { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.hero { flex:1 1 auto; background:#0d0c1a; color:#fff; display:flex; align-items:center; gap:26px;
padding:0 30px; min-height:0; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 20% 80%, rgba(44,86,238,0.25), transparent 55%),
radial-gradient(circle at 80% 20%, rgba(251,91,117,0.2), transparent 50%); }
.hero-copy { position:relative; flex:1; }
.hero-copy h1 { font-size:32px; font-weight:700; margin:0 0 8px; line-height:1.2; }
.hero-copy p { font-size:14px; color:#c9c9dd; margin:0 0 14px; max-width:320px; }
.hero-copy button { background:#2c56ee; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-weight:600; font-size:16px; }
.cab { position:relative; flex:0 0 180px; height:220px; border-radius:8px;
background:linear-gradient(160deg,#1a1a2e,#0d0c1a 70%); border:1px solid #2c2c44; }
.cab::after { content:''; position:absolute; left:20px; right:20px; top:20px; height:60px; border-radius:4px;
background:radial-gradient(circle at 50% 50%, rgba(251,91,117,0.5), transparent 70%), #14142a;
box-shadow:0 0 24px rgba(44,86,238,0.4); }
.grid { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 30px 18px; }
.card { border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.08); display:flex; flex-direction:column; overflow:hidden; }
.thumb { aspect-ratio:4/3; position:relative; }
.t1 { background:linear-gradient(150deg,#3982b6,#0d0c1a 130%); }
.t2 { background:linear-gradient(150deg,#fb5b75,#621620 130%); }
.t3 { background:linear-gradient(150deg,#2c56ee,#0d0c1a 130%); }
.badge { position:absolute; top:8px; left:8px; font-size:11px; font-weight:600; text-transform:uppercase;
letter-spacing:0.5px; padding:2px 8px; border-radius:4px; color:#fff; }
.badge.pink { background:#fb5b75; }
.badge.maroon { background:#621620; }
.info { padding:10px 12px 12px; }
.info h3 { font-size:16px; font-weight:500; margin:0 0 4px; }
.info .price { font-size:22px; font-weight:700; margin:0; }
footer { flex:0 0 auto; height:52px; background:#0d0c1a; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Arcade1up</p>
<div class="navlinks"><span class="active">Arcade</span><span>Pinball</span><span>Accessories</span></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<h1>Bring the arcade home.</h1>
<p>Full-size cabinets with neon bezel lighting and dozens of classic titles built in.</p>
<button>Shop Cabinets</button>
</div>
<div class="cab"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div>
<div class="info"><h3>Street Fighter II Cabinet</h3><p class="price">$599.00</p></div></div>
<div class="card"><div class="thumb t2"><span class="badge pink">Special Edition</span></div>
<div class="info"><h3>Pac-Man 40th Anniversary</h3><p class="price">$449.00</p></div></div>
<div class="card"><div class="thumb t3"><span class="badge maroon">Limited</span></div>
<div class="info"><h3>Marvel vs. Capcom Pinball</h3><p class="price">$799.00</p></div></div>
</div>
</main>
<footer>
<span>© Arcade1up</span>
<span>Assembly Guide · Warranty · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dedc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dedc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #6d6c09; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbf5ef; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #dedc00; color: #000000;
border: 1px solid #fbf5ef; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #dedc00; color: #111111;
border: 1px solid #bdbc03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6c09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e3e026; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbf5ef; color:#1d1d1b; box-sizing:border-box;
font-family:'Acre','BentonMod', -apple-system, 'Segoe UI', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
h1,h2,h3,p,span,div,a,button { font-family:inherit; }
.bodyfont { font-family:'BentonMod', -apple-system, 'Segoe UI', Arial, sans-serif; }
.announce { flex:0 0 26px; background:#272d45; color:#fbf5ef; display:flex; align-items:center; justify-content:center;
font-size:11px; letter-spacing:0.2px; }
.announce b { color:#dedc00; font-weight:700; margin:0 4px; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#fbf5ef; border-bottom:1px solid #e5e5e5; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#1d1d1b; }
.btn-primary { background:#dedc00; color:#1d1d1b; border:none; border-radius:8px;
padding:9px 18px; font-weight:600; font-size:12.5px; white-space:nowrap; }
.hero { flex:0 0 176px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; gap:24px; background:#fbf5ef; }
.hero-copy { max-width:430px; }
.hero h1 { font-size:29px; font-weight:700; line-height:1.15; margin:0 0 8px; letter-spacing:-0.4px; }
.hero p { font-size:13px; color:#4f4f4f; line-height:1.5; margin:0 0 14px; }
.hero-actions { display:flex; gap:10px; }
.btn-secondary { background:transparent; color:#1d1d1b; border:1.5px solid #1d1d1b; border-radius:8px;
padding:8px 17px; font-weight:600; font-size:12.5px; white-space:nowrap; }
.hero-art { position:relative; width:170px; height:130px; flex-shrink:0; }
.blob1 { position:absolute; width:120px; height:120px; border-radius:9999px; background:#fac8a7; left:10px; top:0; opacity:0.9; }
.blob2 { position:absolute; width:70px; height:70px; border-radius:9999px; background:#00caaa; right:0; bottom:6px; opacity:0.85; }
.blob3 { position:absolute; width:44px; height:44px; border-radius:9999px; background:#ffcf2a; left:60px; bottom:0; }
.trust { flex:0 0 40px; background:#272d45; display:flex; align-items:center; justify-content:center; gap:32px; }
.trust-item { display:flex; align-items:center; gap:6px; color:#fbf5ef; font-size:11px; }
.trust-dot { width:7px; height:7px; border-radius:9999px; background:#dedc00; flex-shrink:0; }
.cards { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 32px; align-content:center; overflow:hidden; }
.pcard { background:#ffffff; border:1px solid #e5e5e5; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:7px; }
.pcard .swatch { height:64px; border-radius:8px; background:linear-gradient(135deg,#ebe2d8,#fac8a7); position:relative; }
.pcard .swatch::after { content:''; position:absolute; left:50%; bottom:8px; width:26px; height:38px; transform:translateX(-50%);
background:#ffffff; border:2px solid #0e7a82; border-radius:4px; opacity:0.9; }
.pcard h3 { font-size:13.5px; font-weight:600; margin:0; }
.badges { display:flex; gap:5px; flex-wrap:wrap; }
.badge-claim { background:#b2f9e9; color:#0e7a82; font-size:9.5px; font-weight:600; border-radius:9999px; padding:2px 8px; }
.badge-primary { background:#dedc00; color:#1d1d1b; font-size:9.5px; font-weight:600; border-radius:9999px; padding:2px 8px; }
.pcard .price { font-size:16px; font-weight:700; margin-top:auto; }
footer { flex:0 0 56px; background:#1d1d1b; color:#9a9db1; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-size:11px; }
footer .link { color:#9a9db1; }
</style></head>
<body>
<div class="announce"><span>Free shipping over $50</span><b>·</b><span>30-day guarantee</span></div>
<nav>
<p class="brand">Attn Grace</p>
<div class="navlinks bodyfont">
<span>Shop</span><span>Our Ingredients</span><span>Reviews</span><span>Take the Quiz</span>
</div>
<button class="btn-primary bodyfont">Shop Now</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Wellness made for grown women.</h1>
<p class="bodyfont">Formulated by the women who live it — clean science, honest labels, and a color that refuses to whisper.</p>
<div class="hero-actions">
<button class="btn-primary bodyfont">Take the Quiz</button>
<button class="btn-secondary bodyfont">Shop Best Sellers</button>
</div>
</div>
<div class="hero-art">
<div class="blob1"></div>
<div class="blob2"></div>
<div class="blob3"></div>
</div>
</section>
<div class="trust">
<div class="trust-item bodyfont"><span class="trust-dot"></span>Dermatologist-Tested</div>
<div class="trust-item bodyfont"><span class="trust-dot"></span>Fragrance-Free</div>
<div class="trust-item bodyfont"><span class="trust-dot"></span>Clean Science, No BS</div>
</div>
<section class="cards">
<div class="pcard">
<div class="swatch"></div>
<h3>Overnight Renewal Serum</h3>
<div class="badges"><span class="badge-claim">Fragrance-Free</span></div>
<div class="price">$38</div>
</div>
<div class="pcard">
<div class="swatch"></div>
<h3>Daily Glow Cream</h3>
<div class="badges"><span class="badge-claim">Dermatologist-Tested</span></div>
<div class="price">$42</div>
</div>
<div class="pcard">
<div class="swatch"></div>
<h3>Hydration Duo Set</h3>
<div class="badges"><span class="badge-primary">Bestseller</span></div>
<div class="price">$65</div>
</div>
</section>
<footer>
<span>© Attn Grace</span>
<span><span class="link">Shop</span> · <span class="link">Our Story</span> · <span class="link">Support</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007cc3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #007cc3;
border: 1px solid #007cc3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00141f; color: #007cc3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#000; padding:26px 18px; position:relative; border-right:1px solid #2A2E33; }
.eyebrow { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#2A9FD6; }
.actname { font-size:22px; font-weight:700; margin:2px 0 2px; }
.actmeta { font-size:12px; color:#A6ACB3; margin-bottom:14px; }
.mapbox { height:150px; border-radius:12px; background:linear-gradient(135deg,#1A2329,#0C1216);
position:relative; overflow:hidden; margin-bottom:14px; border:1px solid #2A2E33; }
.route { position:absolute; top:20%; left:10%; width:80%; height:60%;
border:2px solid #007CC3; border-top:none; border-right:none; border-radius:0 0 0 60px;
filter:drop-shadow(0 0 4px rgba(0,124,195,0.6)); }
.startdot { position:absolute; left:8%; top:18%; width:8px; height:8px; border-radius:50%; background:#4CAF50; border:2px solid #fff; }
.enddot { position:absolute; right:8%; bottom:18%; width:8px; height:8px; border-radius:50%; background:#E5402A; border:2px solid #fff; }
.statgrid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #2A2E33; border-radius:12px; overflow:hidden; margin-bottom:14px; }
.cell { background:#121417; padding:10px 8px; border-right:1px solid #2A2E33; border-bottom:1px solid #2A2E33; }
.cell:nth-child(3n) { border-right:none; }
.cell .lbl { font-size:9px; font-weight:700; text-transform:uppercase; color:#A6ACB3; letter-spacing:0.4px; }
.cell .val { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; }
.cell .unit { font-size:9px; color:#6B7178; }
.tscard { background:#121417; border:1px solid #2A2E33; border-radius:12px; padding:12px; display:flex; align-items:center; gap:12px; }
.ring { width:52px; height:52px; border-radius:50%; background:conic-gradient(#007CC3 0 75%, #23272C 75% 100%);
display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ring::before { content:''; position:absolute; }
.ring span { width:38px; height:38px; border-radius:50%; background:#121417; display:flex; align-items:center; justify-content:center; font-size:9px; color:#A6ACB3; }
.tsinfo .status { color:#2A9FD6; font-weight:700; font-size:14px; }
.tsinfo .sub { font-size:11px; color:#A6ACB3; margin-top:2px; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:rgba(18,20,23,0.96);
border-top:1px solid #2A2E33; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#6B7178; text-align:center; }
.tab.on { color:#2A9FD6; }
.tab .dot { display:block; width:6px; height:6px; border-radius:50%; margin:0 auto 3px; background:currentColor; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:900; letter-spacing:-0.6px; margin:0; }
.brand span { color:#2A9FD6; }
.tag { font-size:14px; color:#A6ACB3; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:8px; border:1px solid #2A2E33; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#A6ACB3; text-align:center; }
.typeblock .t1 { font-size:26px; font-weight:700; letter-spacing:-0.4px; font-variant-numeric:tabular-nums; }
.typeblock .t2 { font-size:13px; color:#A6ACB3; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:6px;
background:#121417; border:1px solid #2A2E33; color:#A6ACB3; }
.footer { margin-top:auto; border-top:1px solid #2A2E33; padding-top:16px; font-size:11px; color:#6B7178; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="eyebrow">RUNNING</div>
<div class="actname">Morning Run</div>
<div class="actmeta">Today at 6:42 AM · Cedar Loop Trail</div>
<div class="mapbox"><div class="route"></div><div class="startdot"></div><div class="enddot"></div></div>
<div class="statgrid">
<div class="cell"><div class="lbl">Distance</div><div class="val">8.42<span class="unit"> km</span></div></div>
<div class="cell"><div class="lbl">Time</div><div class="val">42:18</div></div>
<div class="cell"><div class="lbl">Avg Pace</div><div class="val">5:02<span class="unit"> /km</span></div></div>
<div class="cell"><div class="lbl">Avg HR</div><div class="val">156<span class="unit"> bpm</span></div></div>
<div class="cell"><div class="lbl">Calories</div><div class="val">612<span class="unit"> C</span></div></div>
<div class="cell"><div class="lbl">Elev Gain</div><div class="val">124<span class="unit"> m</span></div></div>
</div>
<div class="tscard">
<div class="ring"><span>52</span></div>
<div class="tsinfo"><div class="status">Productive</div><div class="sub">VO₂ Max 52 · Load 388</div></div>
</div>
<div class="tabbar">
<div class="tab on"><span class="dot"></span>My Day</div>
<div class="tab"><span class="dot"></span>Challenges</div>
<div class="tab"><span class="dot"></span>Calendar</div>
<div class="tab"><span class="dot"></span>More</div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Garmin Connect (iOS)<span>.</span></h1>
<p class="tag">A true-black data cockpit — Roboto Condensed numerals, hairline mortar, and one Garmin Blue against total dark.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#000000"></div><small>#000000</small></div>
<div class="sw"><div class="chip2" style="background:#007CC3"></div><small>#007CC3</small></div>
<div class="sw"><div class="chip2" style="background:#2EA8E0"></div><small>#2EA8E0</small></div>
<div class="sw"><div class="chip2" style="background:#00A8A8"></div><small>#00A8A8</small></div>
<div class="sw"><div class="chip2" style="background:#E5402A"></div><small>#E5402A</small></div>
</div>
<div class="typeblock">
<div class="t1">8.42 km</div>
<div class="t2">Roboto Condensed · tabular · the value is the hero, the label is a whisper</div>
</div>
<div class="taglist">
<span>Stat grid 3-up</span><span>GPS route glow</span><span>Body Battery</span>
<span>HR zone bars</span><span>No tab-bar tint pill</span>
</div>
<div class="footer">True black #000000 · surface steps not shadows · fixed HR-zone semantics</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #582c83; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #582c83; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ae9bc2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7e57c2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #582c83; color: #ffffff;
border: 1px solid #7e57c2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #582c83; color: #f5f5f5;
border: 1px solid #714c95; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ae9bc2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5e338d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#161325; color:#ECEAF5; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.map { position:absolute; inset:0; background:
radial-gradient(circle at 20% 30%, #1B3A2E 0%, transparent 30%),
radial-gradient(circle at 75% 70%, #16314A 0%, transparent 26%),
linear-gradient(135deg, #1A2138, #161325); }
.road { position:absolute; background:#2C3654; }
.r1 { top:180px; left:0; right:0; height:10px; transform:rotate(-4deg); }
.r2 { top:0; bottom:0; left:420px; width:10px; transform:rotate(6deg); }
.circlepill { position:absolute; top:20px; left:50%; transform:translateX(-50%); background:#1F1B33; border:1px solid #3D3759;
border-radius:999px; padding:10px 20px; font-size:14px; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.pin { position:absolute; display:flex; flex-direction:column; align-items:center; }
.pinav { width:48px; height:48px; border-radius:50%; border:3px solid #fff; box-shadow:0 6px 14px rgba(0,0,0,0.35); }
.pinname { margin-top:4px; background:rgba(31,27,51,0.85); font-size:11px; font-weight:700; padding:2px 8px; border-radius:8px; }
.pin.p1 { top:110px; left:220px; } .pin.p1 .pinav { background:linear-gradient(135deg,#FFC94D,#e0a000); }
.pin.p2 { top:230px; left:560px; } .pin.p2 .pinav { background:linear-gradient(135deg,#4DD9C9,#1a9a89); }
.pin.p3 { top:330px; left:340px; } .pin.p3 .pinav { background:linear-gradient(135deg,#FF7AAE,#c93d76); }
.geofence { position:absolute; top:280px; left:600px; width:140px; height:140px; border-radius:50%;
background:rgba(126,87,194,0.14); border:2px solid rgba(126,87,194,0.5); }
.sheet { position:absolute; left:0; right:0; bottom:0; background:#211D36; border-radius:24px 24px 0 0; padding:16px 20px 20px;
box-shadow:0 -10px 30px rgba(0,0,0,0.35); }
.handle { width:40px; height:4px; background:#3D3759; border-radius:2px; margin:0 auto 14px; }
.member { display:flex; align-items:center; gap:12px; padding:10px 0; }
.mav { width:44px; height:44px; border-radius:50%; border:2px solid #fff; }
.m1 { background:linear-gradient(135deg,#FFC94D,#e0a000); }
.m2 { background:linear-gradient(135deg,#4DD9C9,#1a9a89); }
.m3 { background:linear-gradient(135deg,#FF7AAE,#c93d76); }
.mname { font-size:15px; font-weight:700; }
.mplace { font-size:12px; color:#A6A0C2; margin-top:2px; }
.battery { margin-left:auto; font-size:11px; color:#34C759; display:flex; align-items:center; gap:4px; }
.battery.low { color:#FF6B6B; }
</style></head>
<body>
<div class="map">
<div class="road r1"></div><div class="road r2"></div>
<div class="geofence"></div>
</div>
<div class="circlepill">The Life360 (iOS) ▾</div>
<div class="pin p1"><div class="pinav"></div><div class="pinname">Mia</div></div>
<div class="pin p2"><div class="pinav"></div><div class="pinname">Jordan</div></div>
<div class="pin p3"><div class="pinav"></div><div class="pinname">Dad</div></div>
<div class="sheet">
<div class="handle"></div>
<div class="member"><div class="mav m1"></div><div><div class="mname">Mia</div><div class="mplace">Lincoln High School · 4 min ago</div></div><div class="battery">🔋 82%</div></div>
<div class="member"><div class="mav m2"></div><div><div class="mname">Jordan</div><div class="mplace">Driving on I-90 · Just now</div></div><div class="battery low">🔋 14%</div></div>
<div class="member"><div class="mav m3"></div><div><div class="mname">Dad</div><div class="mplace">Home · 1 hr ago</div></div><div class="battery">🔋 96%</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc300; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc300; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6109; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd100; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc300; color: #000000;
border: 1px solid #ffd100; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc300; color: #111111;
border: 1px solid #d9a703; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6109; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffc500; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#222222; box-sizing:border-box;
font-family:"PingFang SC", -apple-system, "Microsoft YaHei", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; padding:0 28px; gap:16px; }
.brand { font-size:17px; font-weight:700; color:#222222; margin:0; }
.brand span { color:#ffc300; }
.city { font-size:13px; color:#888888; }
.search { flex:1; max-width:340px; height:32px; background:#f5f5f5; border-radius:20px; display:flex;
align-items:center; padding:0 16px; font-size:13px; color:#bbbbbb; }
.cart { margin-left:auto; background:#ffc300; color:#222222; border-radius:8px; height:34px; padding:0 18px;
display:flex; align-items:center; font-size:14px; font-weight:600; }
.icon-grid { background:#ffffff; display:grid; grid-template-columns:repeat(8,1fr); gap:6px; padding:14px 28px; }
.icon-tile { display:flex; flex-direction:column; align-items:center; gap:6px; }
.icon-tile .ic { width:38px; height:38px; border-radius:10px; }
.icon-tile span { font-size:11px; color:#222222; }
.ic.c1{background:#ff8c42;} .ic.c2{background:#ff4b10;} .ic.c3{background:#00b578;} .ic.c4{background:#3d7fff;}
.ic.c5{background:#ffc300;} .ic.c6{background:#ff5722;} .ic.c7{background:#8e6ce6;} .ic.c8{background:#00b8d9;}
.feed { display:flex; gap:14px; padding:14px 28px; }
.card { flex:1; background:#ffffff; border-radius:8px; padding:10px; }
.cover { width:100%; aspect-ratio:1/1; border-radius:6px; margin-bottom:8px; }
.cover.a{ background:linear-gradient(140deg,#ffd76a,#ff8c42);} .cover.b{background:linear-gradient(140deg,#8fe3c4,#00b578);}
.cover.c{ background:linear-gradient(140deg,#a9c8ff,#3d7fff);}
.name { font-size:15px; font-weight:500; margin-bottom:4px; }
.rating { font-size:12px; color:#ffb000; margin-bottom:4px; }
.meta { font-size:12px; color:#888888; margin-bottom:6px; }
.price-row { display:flex; align-items:baseline; justify-content:space-between; }
.price { font-size:17px; font-weight:700; color:#ff4b10; }
.tag { background:#ff4b10; color:#ffffff; border-radius:4px; padding:2px 6px; font-size:10px; }
</style></head>
<body>
<nav>
<p class="brand"><span>●</span> Meituan</p>
<span class="city">Seoul ▾</span>
<div class="search">Search restaurants, hotels, deals</div>
<div class="cart">Sign in</div>
</nav>
<div class="icon-grid">
<div class="icon-tile"><div class="ic c1"></div><span>Delivery</span></div>
<div class="icon-tile"><div class="ic c2"></div><span>Dining</span></div>
<div class="icon-tile"><div class="ic c3"></div><span>Hotels</span></div>
<div class="icon-tile"><div class="ic c4"></div><span>Movies</span></div>
<div class="icon-tile"><div class="ic c5"></div><span>Grocery</span></div>
<div class="icon-tile"><div class="ic c6"></div><span>Deals</span></div>
<div class="icon-tile"><div class="ic c7"></div><span>Travel</span></div>
<div class="icon-tile"><div class="ic c8"></div><span>More</span></div>
</div>
<div class="feed">
<div class="card"><div class="cover a"></div><div class="name">Golden Wok Kitchen</div>
<div class="rating">★★★★★ 4.8 (2.1k)</div><div class="meta">Chinese · 0.6km · 25min</div>
<div class="price-row"><span class="price">¥28</span><span class="tag">Free delivery</span></div></div>
<div class="card"><div class="cover b"></div><div class="name">Green Leaf Salads</div>
<div class="rating">★★★★★ 4.6 (890)</div><div class="meta">Healthy · 1.1km · 30min</div>
<div class="price-row"><span class="price">¥19</span><span class="tag">-¥10</span></div></div>
<div class="card"><div class="cover c"></div><div class="name">Harborview Hotel</div>
<div class="rating">★★★★★ 4.7 (3.4k)</div><div class="meta">Hotel · 2.3km</div>
<div class="price-row"><span class="price">¥388</span><span class="tag">Limited</span></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d00000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d00000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e48787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f1f2c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d00000; color: #1f1f2c;
border: 1px solid #1f1f2c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d00000; color: #f5f5f5;
border: 1px solid #d62727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e48787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #b40507; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e6e6e6; background:#ffffff; }
.brand { font-size:20px; font-weight:700; margin:0; color:#1f1f2c; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; color:#222222; }
.navlinks span:nth-child(1){ color:#d00000; font-weight:700; }
.navicons { display:flex; gap:16px; align-items:center; font-size:12px; color:#888888; }
.cartdot { position:relative; }
.cartdot::after{ content:'2'; position:absolute; top:-8px; right:-10px; background:#d00000; color:#fff;
font-size:10px; font-weight:700; border-radius:9999px; width:14px; height:14px; display:flex;
align-items:center; justify-content:center; }
main { display:flex; gap:36px; padding:22px 40px 0; height:534px; }
.gallery { width:380px; flex:0 0 auto; }
.shot { width:380px; height:380px; background:
linear-gradient(135deg,#1f1f2c 0%,#3a3a52 45%,#8c1e46 100%); position:relative; overflow:hidden; }
.shot::before{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.03); }
.shot .ring{ position:absolute; left:50%; top:50%; width:190px; height:190px; margin:-95px 0 0 -95px;
border:2px solid rgba(255,255,255,.35); border-radius:50%; }
.shot .ring2{ position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px 0 0 -60px;
border:2px solid rgba(255,255,255,.55); border-radius:50%; }
.shot .lbl { position:absolute; left:16px; bottom:14px; color:#fff; font-size:11px; font-weight:700;
letter-spacing:.05em; text-transform:uppercase; opacity:.85; }
.thumbrow { display:flex; gap:8px; margin-top:8px; }
.thumb { width:88px; height:88px; background:#f5f5f5; border:1px solid #f0f0f0; }
.thumb.active { border:1px solid #222222; }
.detail { flex:1; display:flex; flex-direction:column; gap:12px; padding-top:2px; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#888888; }
.title { font-size:24px; font-weight:700; line-height:1.33; margin:0; color:#222222; max-width:420px; }
.priceRow { display:flex; align-items:baseline; gap:10px; }
.oldPrice { font-size:14px; color:#888888; text-decoration:line-through; }
.newPrice { font-size:28px; font-weight:700; color:#d00000; }
.pct { font-size:14px; font-weight:700; color:#d00000; }
.infoTag { display:inline-flex; align-items:center; gap:6px; border:1px solid #3083e4; color:#3083e4;
border-radius:2px; height:24px; padding:0 10px; font-size:12px; width:fit-content; }
.outletBadge { display:inline-flex; align-items:center; background:#8c1e46; color:#ffffff; border-radius:2px;
height:22px; padding:0 8px; font-size:11px; font-weight:700; width:fit-content; margin-left:8px; }
.sectionLabel { font-size:12px; font-weight:700; color:#888888; text-transform:uppercase; letter-spacing:.04em; margin-top:4px; }
.chips { display:flex; gap:8px; }
.chip { border:1px solid #cccccc; border-radius:17px; height:34px; padding:0 16px; display:flex; align-items:center;
font-size:13px; font-weight:700; color:#222222; }
.chip.active { border:1px solid #d00000; color:#d00000; }
.tabs { display:flex; gap:24px; border-bottom:1px solid #f0f0f0; margin-top:6px; }
.tab { padding-bottom:8px; font-size:16px; font-weight:500; color:#aaaaaa; }
.tab.active { font-weight:700; color:#222222; border-bottom:2px solid #222222; }
.tabBody { font-size:13px; color:#555555; line-height:1.5; max-width:420px; }
.ctaRow { display:flex; gap:10px; margin-top:auto; }
.btnPrimary { background:#333333; color:#ffffff; border:none; border-radius:4px; height:48px; padding:0 20px;
font-size:15px; font-weight:600; flex:1; display:flex; align-items:center; justify-content:center; }
.btnConfirm { background:#d00000; color:#ffffff; border:1px solid #d00000; border-radius:4px; height:48px;
padding:0 20px; font-size:16px; font-weight:500; flex:1; display:flex; align-items:center; justify-content:center; }
footer { height:30px; border-top:1px solid #e6e6e6; padding:0 40px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#888888; background:#fafafa; }
</style></head>
<body>
<nav>
<p class="brand">MUSTIT</p>
<div class="navlinks"><span>New In</span><span>Women</span><span>Men</span><span>Outlet</span></div>
<div class="navicons"><span>Search</span><span class="cartdot">Bag</span></div>
</nav>
<main>
<div class="gallery">
<div class="shot">
<div class="ring"></div>
<div class="ring2"></div>
<div class="lbl">Authenticated Item Photo</div>
</div>
<div class="thumbrow">
<div class="thumb active"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
<div class="detail">
<span class="eyebrow">Designer Leather Goods</span>
<h1 class="title">Structured Top-Handle Bag, Midnight Calfskin</h1>
<div class="priceRow">
<span class="oldPrice">$2,480</span>
<span class="newPrice">$1,690</span>
<span class="pct">-32%</span>
</div>
<div>
<span class="infoTag">100% Authenticity Guaranteed</span>
<span class="outletBadge">OUTLET</span>
</div>
<span class="sectionLabel">Size</span>
<div class="chips">
<div class="chip active">Small</div>
<div class="chip">Medium</div>
<div class="chip">Large</div>
</div>
<div class="tabs">
<div class="tab active">Details</div>
<div class="tab">Shipping</div>
<div class="tab">Seller</div>
</div>
<p class="tabBody">Grained calfskin exterior, brushed gold hardware, suede-lined interior with card slots. Verified by our in-house authentication team before dispatch.</p>
<div class="ctaRow">
<button class="btnPrimary">Add to Bag</button>
<button class="btnConfirm">Buy Now</button>
</div>
</div>
</main>
<footer>
<span>© MUSTIT</span>
<span>1,300+ Luxury Brands · Verified Sellers · Smart Luxury</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0c0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0c0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #151619; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0c0f; color: #ffffff;
border: 1px solid #151619; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0c0f; color: #f5f5f5;
border: 1px solid #303134; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d0e11; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0C0F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 28px 8px; }
.brand { font-size:20px; font-weight:800; letter-spacing:-0.3px; color:#fff; margin:0; }
.icons { display:flex; gap:20px; color:#A0A4AB; font-size:14px; }
.hubs { display:flex; gap:12px; padding:8px 28px 18px; overflow:hidden; }
.hub { height:32px; padding:0 16px; background:#1E2024; border-radius:8px; display:flex; align-items:center;
font-size:12px; font-weight:600; color:#fff; white-space:nowrap; }
.hub.on { background:#1CE783; color:#0B0C0F; }
.rail { padding:0 28px 24px; }
.rail-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.rail-title { font-size:20px; font-weight:800; letter-spacing:-0.3px; margin:0; }
.rail-title .eyebrow { display:block; font-size:11px; font-weight:800; letter-spacing:0.06em; color:#1CE783; text-transform:uppercase; margin-bottom:2px; }
.seeall { font-size:12px; font-weight:600; color:#A0A4AB; }
.tiles { display:flex; gap:12px; }
.tile { width:196px; flex:0 0 auto; }
.thumb { width:196px; height:110px; border-radius:6px; position:relative; overflow:hidden;
background:linear-gradient(135deg,#2A2D33,#151619); }
.thumb.a { background:linear-gradient(135deg,#3a2f45,#151619); }
.thumb.b { background:linear-gradient(135deg,#1f3a35,#151619); }
.thumb.c { background:linear-gradient(135deg,#3a1f24,#151619); }
.thumb.d { background:linear-gradient(135deg,#26314a,#151619); }
.prog { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,0.25); }
.prog i { display:block; height:4px; background:#1CE783; }
.badge-new { position:absolute; top:8px; left:8px; background:#1CE783; color:#0B0C0F; font-size:10px; font-weight:800;
letter-spacing:0.04em; padding:2px 6px; border-radius:4px; text-transform:uppercase; }
.ttitle { font-size:15px; font-weight:600; margin:8px 0 2px; }
.tsub { font-size:12px; color:#A0A4AB; }
.hero-strip { margin:6px 28px 0; height:130px; border-radius:10px; position:relative; overflow:hidden;
background:linear-gradient(120deg,#1a2e24,#0B0C0F 70%); display:flex; align-items:flex-end; padding:16px 20px; }
.hero-strip::after { content:''; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%;
background:radial-gradient(circle, rgba(28,231,131,0.16), transparent 70%); }
.watchbtn { position:relative; z-index:2; background:#1CE783; color:#0B0C0F; font-weight:800; font-size:13px;
border-radius:8px; padding:9px 16px; display:flex; align-items:center; gap:6px; box-shadow:0 8px 24px rgba(28,231,131,0.30); }
.herotext { position:relative; z-index:2; }
.herotext .k { font-size:11px; font-weight:800; letter-spacing:0.06em; color:#1CE783; text-transform:uppercase; }
.herotext h2 { margin:2px 0 10px; font-size:24px; font-weight:800; letter-spacing:-0.4px; }
</style></head>
<body>
<div class="topbar">
<p class="brand">Hulu (iOS)</p>
<div class="icons"><span>●●● Home</span><span>Hubs</span><span>My Stuff</span><span>⚲</span></div>
</div>
<div class="hubs">
<div class="hub on">Hulu Originals</div>
<div class="hub">Disney</div>
<div class="hub">FX</div>
<div class="hub">HBO</div>
<div class="hub">Live TV</div>
</div>
<div class="hero-strip">
<div class="herotext">
<span class="k">New Episode</span>
<h2>Only Murders in the Building</h2>
<div class="watchbtn">▶ Watch</div>
</div>
</div>
<div class="rail" style="margin-top:20px;">
<div class="rail-head">
<h3 class="rail-title"><span class="eyebrow">Continue Watching</span></h3>
<span class="seeall">See All</span>
</div>
<div class="tiles">
<div class="tile"><div class="thumb a"><div class="prog"><i style="width:64%"></i></div></div>
<div class="ttitle">The Bear</div><div class="tsub">S3 · E4 · 24 min left</div></div>
<div class="tile"><div class="thumb b"><div class="prog"><i style="width:22%"></i></div></div>
<div class="ttitle">Shogun</div><div class="tsub">S1 · E7 · 41 min left</div></div>
<div class="tile"><div class="thumb c"><div class="badge-new">New</div><div class="prog"><i style="width:8%"></i></div></div>
<div class="ttitle">Only Murders</div><div class="tsub">New episode</div></div>
<div class="tile"><div class="thumb d"><div class="prog"><i style="width:90%"></i></div></div>
<div class="ttitle">Abbott Elementary</div><div class="tsub">S3 · E2 · 4 min left</div></div>
</div>
</div>
<div class="rail">
<div class="rail-head"><h3 class="rail-title">TV You Might Like</h3><span class="seeall">See All</span></div>
<div class="tiles">
<div class="tile"><div class="thumb d"></div><div class="ttitle">Reservation Dogs</div><div class="tsub">2024 · TV-MA · 3 Seasons</div></div>
<div class="tile"><div class="thumb a"></div><div class="ttitle">What We Do in the Shadows</div><div class="tsub">2024 · TV-14 · 6 Seasons</div></div>
<div class="tile"><div class="thumb b"></div><div class="ttitle">Death and Other Details</div><div class="tsub">2024 · TV-14 · 1 Season</div></div>
<div class="tile"><div class="thumb c"></div><div class="ttitle">Ranma 1/2</div><div class="tsub">2024 · TV-14 · New</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #313131; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #e3e3e3; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; }
.cart { width:36px; height:36px; border:1px solid #e3e3e3; display:flex; align-items:center; justify-content:center; font-size:11px; }
.content { display:flex; padding:22px 40px; gap:24px; }
.gallery { flex:1.2; }
.mainimg { height:230px; background:#f6f6f6; position:relative; }
.mainimg::after { content:''; position:absolute; left:50%; bottom:20px; width:160px; height:80px; background:linear-gradient(180deg,#313131,#1c1c1c); transform:translateX(-50%); }
.details { flex:1; }
.details .cat { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#888888; margin:0 0 6px; }
.details h1 { font-size:28px; font-weight:300; margin:0 0 10px; line-height:1.15; }
.price { font-size:18px; font-weight:400; margin-bottom:16px; }
.swatch-label { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#888888; margin-bottom:8px; }
.swrow { display:flex; gap:10px; margin-bottom:18px; }
.sw { width:28px; height:28px; border-radius:50%; border:1.5px solid #e3e3e3; }
.sw.sel { border-color:#313131; }
.btnrow { display:flex; gap:10px; }
.btn { flex:1; text-align:center; padding:14px; font-size:13px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; }
.btn-primary { background:#313131; color:#fff; }
.btn-outline { background:#fff; border:1px solid #313131; color:#313131; }
.dims { margin-top:20px; }
.dimrow { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #eeeeee; font-size:12px; }
.dimrow span:first-child { color:#888888; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#313131; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bdi Usa</p>
<div class="navlinks"><span>Storage</span><span>Media Consoles</span><span>Desks</span><span>Filing</span></div>
<div class="cart">🛒</div>
</nav>
<div class="content">
<div class="gallery"><div class="mainimg"></div></div>
<div class="details">
<p class="cat">Media Console</p>
<h1>Sequel 20 Console — Charcoal</h1>
<div class="price">$2,199</div>
<div class="swatch-label">Finish</div>
<div class="swrow">
<div class="sw sel" style="background:#313131"></div>
<div class="sw" style="background:#e8e4dc"></div>
<div class="sw" style="background:#5a4632"></div>
</div>
<div class="btnrow"><div class="btn btn-primary">Add to Cart</div><div class="btn btn-outline">Spec Sheet</div></div>
<div class="dims">
<div class="dimrow"><span>Width</span><span>71.5 in</span></div>
<div class="dimrow"><span>Depth</span><span>17.7 in</span></div>
<div class="dimrow"><span>Height</span><span>23.6 in</span></div>
</div>
</div>
</div>
<footer>
<span>© Bdi Usa</span>
<span>Bdi Usa · Products · Resources · Company</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #72e3ad; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #72e3ad; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #3d7057; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #72e3ad; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #72e3ad; color: #111111;
border: 1px solid #62c194; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3d7057; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6ecfb8; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Inter", ui-sans-serif, -apple-system, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#1a1a1a; }
.right { display:flex; gap:8px; align-items:center; }
.menu { background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:6px; padding:4px 10px; font-size:12px; }
.btn-fill { background:#72e3ad; color:#111; border:1px solid rgba(60,180,130,0.75); border-radius:6px;
height:32px; padding:0 14px; font-size:12px; font-weight:600; display:flex; align-items:center; }
.hero { text-align:center; padding:14px 40px 16px; font-family:"Manrope", "Inter", sans-serif; }
.hero h1 { font-size:38px; font-weight:500; line-height:1.0; margin:0 0 10px; }
.hero p { font-size:14px; color:#3a3a3a; margin:0 0 16px; }
.tabs { display:flex; justify-content:center; gap:8px; margin-bottom:16px; }
.tab { border:1px solid rgba(0,0,0,0.1); border-radius:9999px; padding:8px 24px; font-size:13px; }
.tab.on { background:#fff; font-weight:600; }
.tab.off { color:#666; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px; }
.cell { background:#f4f4f5; border-radius:8px; padding:16px; }
.cell h3 { font-size:14px; font-weight:600; margin:0 0 6px; }
.cell p { font-size:12px; color:#555; margin:0; line-height:1.5; }
.cell .dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.d1 { background:#3fcf8e; } .d2 { background:#0a874f; } .d3 { background:#3fcf8e; }
.cta-band { margin:16px 40px 0; background:#0a0a0a; color:#fff; border-radius:8px; padding:14px 20px;
display:flex; justify-content:space-between; align-items:center; }
.cta-band .txt { font-size:14px; font-weight:600; }
.cta-band .sub { font-size:11px; color:#ccc; }
.form-input { background:oklab(0.1 0 0 / 0.06); border:1px solid rgba(255,255,255,0.15); border-radius:6px;
padding:8px; font-size:12px; color:#fff; width:160px; }
.send { background:#72e3ad; color:#111; border-radius:6px; padding:8px 14px; font-size:12px; font-weight:600; margin-left:8px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:10px 40px; display:flex; justify-content:space-between;
font-size:11px; color:#666; }
</style></head>
<body>
<nav>
<div class="brand">Supabase</div>
<div class="navlinks"><span>Product</span><span>Developers</span><span>Pricing</span><span>Docs</span></div>
<div class="right"><div class="menu">Sign in</div><div class="btn-fill">Start your project</div></div>
</nav>
<div class="hero">
<h1>Build in a weekend<br>Scale to millions</h1>
<p>The Postgres development platform. Every project ships with a database, auth, storage, and edge functions.</p>
<div class="tabs">
<div class="tab on">Database</div>
<div class="tab off">Auth</div>
<div class="tab off">Storage</div>
<div class="tab off">Functions</div>
</div>
</div>
<div class="grid">
<div class="cell"><h3><span class="dot d1"></span>Postgres database</h3><p>A full Postgres instance with extensions, not an abstraction on top.</p></div>
<div class="cell"><h3><span class="dot d2"></span>Instant APIs</h3><p>Auto-generated REST and GraphQL from your schema.</p></div>
<div class="cell"><h3><span class="dot d3"></span>Realtime</h3><p>Listen to database changes over websockets in real time.</p></div>
</div>
<div class="cta-band">
<div><div class="txt">Build something real this weekend</div><div class="sub">Free tier, no credit card required</div></div>
<div style="display:flex;align-items:center;"><span class="form-input">[email protected]</span><span class="send">Start your project</span></div>
</div>
<footer><span>© Supabase</span><span>Supabase · Docs · Community · Company</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e21500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e21500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ec9087; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e21500; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e21500; color: #f5f5f5;
border: 1px solid #e53927; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ec9087; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #be1200; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FuriosaAI</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#000000; color:#ffffff; box-sizing:border-box; font-family: "ABC Favorit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:#000000; border-bottom:1px solid #2a2a2a; }
.nav-logo { font-family:"ABC Favorit Mono", monospace; font-size:15px; font-weight:400; color:#ffffff; letter-spacing:-0.3px; }
.nav-links { display:flex; gap:20px; }
.nav-links span { font-size:13px; font-weight:500; color:#d4d4d4; }
.nav-links span.on { color:#ffffff; }
.split { display:flex; width:960px; height:584px; }
.left { width:414px; background:#000000; padding:34px 34px 28px; display:flex; flex-direction:column; }
.eyebrow { display:inline-block; align-self:flex-start; font-family:"ABC Favorit Mono", monospace; font-size:11px; font-weight:500; letter-spacing:0.5px; color:#cdbbff; border:1px solid #3a3a3a; border-radius:5px; padding:4px 10px; text-transform:uppercase; }
.headline { font-size:44px; font-weight:400; line-height:1.02; letter-spacing:-1.4px; text-transform:uppercase; margin:18px 0 14px; color:#ffffff; }
.sub { font-size:15px; line-height:1.6; color:#d4d4d4; max-width:340px; margin:0 0 22px; }
.cta { align-self:flex-start; background:#e21500; color:#ffffff; border:none; border-radius:6px; padding:14px 22px; font-family:"ABC Favorit Mono", monospace; font-size:15px; font-weight:400; cursor:default; }
.chiprow { display:flex; gap:8px; margin-top:26px; }
.chip { border-radius:5px; padding:4px 12px; font-size:13px; font-weight:400; }
.chip-mint { background:#70e697; color:#151515; }
.chip-yellow { background:#fffa82; color:#151515; }
.foot-note { margin-top:auto; font-size:11px; font-weight:500; color:#7f7f7f; letter-spacing:0.2px; }
.right { width:546px; background:#ffffff; color:#151515; padding:30px 34px 26px; }
.section-label { font-size:12px; font-weight:500; color:#7f7f7f; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:14px; }
.bench-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.bench-name { width:96px; font-family:"ABC Favorit Mono", monospace; font-size:12px; color:#151515; flex-shrink:0; }
.bench-track { flex:1; height:16px; background:rgba(0,0,0,0.06); border-radius:4px; overflow:hidden; }
.bench-fill { height:100%; border-radius:4px; }
.bench-fill.hero { background:#e21500; }
.bench-fill.a { background:#7f7f7f; }
.bench-fill.b { background:#d4d4d4; }
.bench-val { width:64px; text-align:right; font-family:"ABC Favorit Mono", monospace; font-size:12px; color:#7f7f7f; flex-shrink:0; }
.featured { margin-top:22px; background:#ffffff; border-radius:12px; padding:20px 22px; box-shadow: rgba(0,0,0,0.18) 0px 18px 50px; }
.featured .chip { margin-bottom:12px; display:inline-block; }
.featured h3 { font-size:19px; font-weight:400; line-height:1.25; margin:0 0 8px; color:#151515; }
.featured p { font-size:13px; line-height:1.55; color:#7f7f7f; margin:0; }
.blog-row { display:flex; gap:14px; margin-top:16px; }
.blog-card { flex:1; background:#ffffff; border-radius:8px; padding:12px 14px; border:1px solid rgba(0,0,0,0.08); }
.blog-card .chip { margin-bottom:8px; }
.blog-card h4 { font-size:13px; font-weight:400; line-height:1.3; margin:0; color:#151515; }
</style>
</head>
<body>
<div class="nav">
<div class="nav-logo">FuriosaAI</div>
<div class="nav-links">
<span class="on">Products</span>
<span>Software</span>
<span>Blog</span>
<span>Newsroom</span>
<span>Careers</span>
</div>
</div>
<div class="split">
<div class="left">
<span class="eyebrow">Tensor Contraction Processor</span>
<div class="headline">Inference<br>Without<br>Constraints</div>
<p class="sub">FuriosaAI is a purpose-built inference accelerator delivering the highest throughput per watt for large-model serving.</p>
<button class="cta">GET STARTED →</button>
<div class="chiprow">
<span class="chip chip-mint">News</span>
<span class="chip chip-yellow">Technical Updates</span>
</div>
<div class="foot-note">© 2026 FuriosaAI — Seoul</div>
</div>
<div class="right">
<div class="section-label">Benchmark — Tokens / Sec / Watt</div>
<div class="bench-row">
<div class="bench-name">Accelerator R</div>
<div class="bench-track"><div class="bench-fill hero" style="width:92%;"></div></div>
<div class="bench-val">128.4</div>
</div>
<div class="bench-row">
<div class="bench-name">GPU Class A</div>
<div class="bench-track"><div class="bench-fill a" style="width:48%;"></div></div>
<div class="bench-val">61.2</div>
</div>
<div class="bench-row">
<div class="bench-name">GPU Class B</div>
<div class="bench-track"><div class="bench-fill b" style="width:36%;"></div></div>
<div class="bench-val">44.7</div>
</div>
<div class="featured">
<span class="chip chip-yellow">Technical Updates</span>
<h3>Gen-2 Tensor Contraction Architecture: efficiency notes</h3>
<p>Updated benchmarks, release notes, and a developer quick-start for the second-generation accelerator.</p>
</div>
<div class="blog-row">
<div class="blog-card">
<span class="chip chip-mint" style="font-size:11px; padding:3px 9px;">News</span>
<h4>Foundry partnership expands production capacity</h4>
</div>
<div class="blog-card">
<span class="chip chip-yellow" style="font-size:11px; padding:3px 9px;">Technical</span>
<h4>Compiler stack adds multimodal kernel support</h4>
</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #da291c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #da291c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e99993; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da291c; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #da291c; color: #f5f5f5;
border: 1px solid #de4a3f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e99993; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e04b40; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181818; box-sizing:border-box;
font-family:"Body-Font", Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
.hero { flex:0 0 356px; position:relative; overflow:hidden;
background:
linear-gradient(115deg, #0c0c0c 0%, #1a1a1a 46%, #3a0e0a 72%, #da291c 100%); }
.hero::before { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(78deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px); }
.hero::after { content:''; position:absolute; left:-10%; right:-10%; bottom:-40px; height:140px;
background:radial-gradient(ellipse at center, rgba(218,41,28,0.55), transparent 70%); }
.hnav { position:relative; z-index:2; height:52px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.hnav .wm { color:#ffffff; font-size:13px; font-weight:700; letter-spacing:0.14em; }
.hnav .links { display:flex; gap:26px; }
.hnav .links span { color:#ffffff; font-size:12px; font-weight:400; letter-spacing:1px; text-transform:uppercase; opacity:0.92; }
.hbody { position:relative; z-index:2; padding:36px 32px 0; max-width:520px; }
.hbody .k { color:#ffffff; font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:0.8; margin:0 0 10px; }
.hbody h1 { color:#ffffff; font-size:34px; font-weight:400; line-height:1.15; margin:0 0 12px; letter-spacing:-0.2px; }
.hbody p { color:#e8e2e2; font-size:14px; line-height:1.5; margin:0 0 20px; max-width:420px; }
.cta { display:inline-flex; align-items:center; height:44px; padding:0 21px; background:#da291c; color:#ffffff;
font-size:14px; font-weight:400; border-radius:0; }
main { flex:1; min-height:0; display:flex; padding:22px 32px; gap:16px; }
.spec { flex:1; border:1px solid #e6e6e6; padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.spec .code { font-size:11px; font-weight:600; letter-spacing:1px; color:#da291c; text-transform:uppercase; }
.spec h3 { font-size:16px; font-weight:700; margin:0; color:#181818; }
.spec .row { display:flex; justify-content:space-between; font-size:12px; color:#5a5a5a; border-top:1px solid #f0f0f0; padding-top:6px; margin-top:2px; }
.spec .row b { color:#181818; font-weight:600; }
footer { flex:0 0 40px; border-top:1px solid #e6e6e6; padding:0 32px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#727272; }
</style></head>
<body>
<div class="wrap">
<div class="hero">
<div class="hnav">
<span class="wm">Ferrari</span>
<div class="links"><span>Range</span><span>Racing</span><span>Heritage</span><span>Subscribe</span></div>
</div>
<div class="hbody">
<p class="k">Road and Track</p>
<h1>Aerodynamic precision, built to win.</h1>
<p>Every surface is shaped by the wind tunnel first and the studio second.</p>
<span class="cta">Subscribe</span>
</div>
</div>
<main>
<div class="spec">
<span class="code">GT · ONE</span>
<h3>Grand Tourer</h3>
<div class="row"><span>Layout</span><b>Front-mid V8</b></div>
<div class="row"><span>0–100 km/h</span><b>2.9s</b></div>
</div>
<div class="spec">
<span class="code">SF · TRACK</span>
<h3>Track Edition</h3>
<div class="row"><span>Layout</span><b>Mid V12</b></div>
<div class="row"><span>Top speed</span><b>340 km/h</b></div>
</div>
<div class="spec">
<span class="code">GT · HYBRID</span>
<h3>Hybrid Berlinetta</h3>
<div class="row"><span>Layout</span><b>Mid hybrid V6</b></div>
<div class="row"><span>Power</span><b>830 cv</b></div>
</div>
</main>
<footer>
<span>© Ferrari</span>
<span>Car Range · Formula 1 · Heritage</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2b2b3b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2b2b3b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9a9aa1; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b2b3b; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2b2b3b; color: #f5f5f5;
border: 1px solid #4b4b59; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9aa1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4d4d5a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"KmrApparat", "Pretendard", sans-serif; }
nav { height:64px; display:flex; align-items:center; padding:0 40px; }
.brand { font-size:16px; font-weight:700; color:#2b2b3b; margin:0; }
.navlinks { display:flex; gap:0; margin-left:40px; }
.navlinks span { font-size:16px; padding:16px; color:#000000; }
.navctl { margin-left:auto; background:rgba(196,196,212,0.5); color:#000000; border-radius:28px;
padding:0 18px; height:36px; display:flex; align-items:center; font-size:13.3px; }
.hero { display:flex; padding:36px 40px 0; gap:30px; }
.hero-text { flex:1; padding-top:20px; }
.hero h1 { font-size:52px; font-weight:700; line-height:1.08; letter-spacing:-1.3px; color:#2b2b3b; margin:0 0 18px; max-width:460px; }
.hero p { font-size:16px; font-weight:400; line-height:1.6; color:#5a5a72; margin:0; max-width:380px; letter-spacing:-0.16px; }
.grid-art { width:340px; height:300px; position:relative; background:#2b2b3b; overflow:hidden; }
.grid-art .lines { position:absolute; inset:0;
background-image: linear-gradient(#5a5a72 1px, transparent 1px), linear-gradient(90deg, #5a5a72 1px, transparent 1px);
background-size:34px 34px; opacity:0.3; }
.grid-art .node { position:absolute; width:10px; height:10px; background:#8d8da5; }
.n1{ top:40px; left:60px;} .n2{ top:110px; left:180px;} .n3{ top:200px; left:90px;} .n4{ top:60px; left:260px;} .n5{top:230px;left:250px;}
.grid-art .caption { position:absolute; bottom:14px; left:16px; font-size:12px; color:#c4c4d4; letter-spacing:0.04em; }
.stats { display:flex; gap:0; padding:34px 40px; border-top:1px solid #ececf1; margin-top:26px; }
.stat { flex:1; padding-right:24px; }
.stat .n { font-size:13.3px; color:#8d8da5; font-weight:400; }
.stat .v { font-size:24px; color:#2b2b3b; font-weight:700; margin-top:4px; }
</style></head>
<body>
<nav>
<p class="brand display">MakinaRocks</p>
<div class="navlinks"><span>Solutions</span><span>Runway</span><span>Research</span><span>Company</span></div>
<div class="navctl">Request Demo</div>
</nav>
<div class="hero">
<div class="hero-text">
<h1 class="display">Transforming industries with specialized AI</h1>
<p>Enterprise AI OS built for harsh, unpredictable environments — from factory floor to field operations.</p>
</div>
<div class="grid-art">
<div class="lines"></div>
<div class="node n1"></div><div class="node n2"></div><div class="node n3"></div><div class="node n4"></div><div class="node n5"></div>
<div class="caption">RUNWAY / DEPLOYMENT MAP</div>
</div>
</div>
<div class="stats">
<div class="stat"><div class="n">MODELS DEPLOYED</div><div class="v">6,000+</div></div>
<div class="stat"><div class="n">R&D WORKFORCE SHARE</div><div class="v">70%+</div></div>
<div class="stat"><div class="n">FOUNDED</div><div class="v">2017</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a39f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a39f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d0ce; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008485; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a39f; color: #000000;
border: 1px solid #008485; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a39f; color: #f5f5f5;
border: 1px solid #27b0ad; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d0ce; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #009e9b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#555555; box-sizing:border-box;
font-family:"NotoSans","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #dbdbdb; }
.logo { font-size:22px; font-weight:700; color:#333333; }
.tabs { display:flex; }
.tabs span { padding:0 24px; font-size:18px; color:#000000; line-height:70px; }
.tabs span.active { font-weight:700; }
.btn-primary { background:#00a39f; color:#ffffff; border-radius:6px; padding:8px 18px; font-size:12px; }
.hero { background:linear-gradient(135deg,#00a39f,#008485); color:#ffffff; padding:28px 36px;
display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:24px; font-weight:700; margin:0 0 6px; }
.hero p { font-size:14px; margin:0; opacity:0.9; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:20px 36px; }
.card { background:#ffffff; border:2px solid #2dc396; border-radius:6px; padding:20px; font-size:12px; }
.card h3 { font-size:14px; color:#333333; margin:0 0 8px; }
.card p { margin:0; color:#555555; }
.feature { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 36px 20px; }
.feature .tealcard { background:#008485; color:#ffffff; padding:25px 15px 25px 30px; font-size:14px; font-weight:700; }
.feature .greycard { background:#f8f8f8; padding:20px; font-size:12px; color:#555555; }
footer { border-top:1px solid #dbdbdb; padding:12px 36px; display:flex; justify-content:space-between;
font-size:12px; color:#666666; }
</style></head>
<body>
<nav>
<span class="logo">Hana Bank</span>
<div class="tabs"><span class="active">Accounts</span><span>Transfer</span><span>Bills</span><span>Foreign Exchange</span><span>Products</span></div>
<span class="btn-primary">Log In</span>
</nav>
<section class="hero">
<div>
<h1>One Term Deposit</h1>
<p>Build a stronger safety net with a monthly compound savings plan for your paycheck</p>
</div>
</section>
<div class="grid">
<div class="card"><h3>Credit Loans</h3><p>Starting from 3.1%, simple application.</p></div>
<div class="card"><h3>Secured Loans</h3><p>Personalized consulting for mortgage loans.</p></div>
<div class="card"><h3>Wire Transfer</h3><p>Real-time exchange rates and transfers.</p></div>
</div>
<div class="feature">
<div class="tealcard">High-Yield Plus<br /><span style="font-weight:400;font-size:12px;">Up to 4.2% APY special deposit</span></div>
<div class="greycard">Wealth Builder Savings — grow a nest egg with automatic monthly transfers</div>
</div>
<footer>
<span>© Hana Bank</span>
<span>Brand Site · Network · Customer Center</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb5505; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb5505; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f0ad89; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb5505; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb5505; color: #f5f5f5;
border: 1px solid #ed6f2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f0ad89; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d3582b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Noto Sans JP", "Noto Sans CJK JP", "Malgun Gothic", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e5e5e5; }
.brand { font-size:18px; font-weight:700; color:#eb5505; margin:0; letter-style:italic; }
.search { border:1px solid #d1d1d1; height:32px; width:220px; display:flex; align-items:center; padding:0 12px;
font-size:12px; color:#777777; }
.tabs { display:flex; gap:0; padding:0 28px; border-bottom:1px solid #e5e5e5; }
.tab { padding:12px 16px; font-size:16px; color:#333333; }
.tab.on { border-bottom:2px solid #eb5505; color:#333333; font-weight:700; }
.body { padding:22px 28px; height:498px; }
.head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.head h2 { font-size:20px; font-weight:700; margin:0; }
.head .count { font-size:12px; color:#777777; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #e5e5e5; border-radius:5px; padding:15px 20px 20px; }
.label { display:inline-block; background:#ffffff; color:#eb5505; border:1px solid #eb5505; font-size:11px;
padding:3.3px 11px; margin-bottom:10px; }
.device { width:100%; height:90px; background:linear-gradient(160deg,#f2f2f2,#dcdcdc); border-radius:5px; margin-bottom:12px;
position:relative; }
.device::after { content:''; position:absolute; left:50%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px;
background:#eb5505; border-radius:8px; opacity:0.85; }
.card h4 { font-size:14px; font-weight:700; margin:0 0 6px; }
.card .plan { font-size:12px; color:#777777; margin:0 0 10px; }
.card .price { font-size:16px; font-weight:700; color:#333333; margin:0 0 12px; }
.card .price span { font-size:11px; color:#777777; font-weight:400; }
.rowbtns { display:flex; gap:8px; }
.orangebtn { background:#eb5505; color:#ffffff; border:none; height:34px; font-size:12px; flex:1; padding:0 8px; }
.outlinebtn { background:#ffffff; color:#333333; border:1px solid #333333; height:34px; font-size:12px; flex:1; }
</style></head>
<body>
<nav>
<p class="brand">au</p>
<div class="search">Search for a plan or device</div>
</nav>
<div class="tabs">
<div class="tab on">Smartphone</div>
<div class="tab">Plans</div>
<div class="tab">Devices</div>
<div class="tab">Support</div>
</div>
<div class="body">
<div class="head"><h2>Smartphone catalog</h2><span class="count">128 models</span></div>
<div class="grid">
<div class="card">
<span class="label">NEW</span>
<div class="device"></div>
<h4>au Vega 12</h4>
<p class="plan">128GB · Midnight Blue</p>
<p class="price">¥98,800 <span>/ No installment</span></p>
<div class="rowbtns"><button class="orangebtn">Order now</button><button class="outlinebtn">Compare</button></div>
</div>
<div class="card">
<span class="label">POPULAR</span>
<div class="device"></div>
<h4>au Vega 12 Pro</h4>
<p class="plan">256GB · Graphite</p>
<p class="price">¥134,800 <span>/ No installment</span></p>
<div class="rowbtns"><button class="orangebtn">Order now</button><button class="outlinebtn">Compare</button></div>
</div>
<div class="card">
<span class="label">VALUE</span>
<div class="device"></div>
<h4>au Lite 5</h4>
<p class="plan">64GB · White</p>
<p class="price">¥54,800 <span>/ No installment</span></p>
<div class="rowbtns"><button class="orangebtn">Order now</button><button class="outlinebtn">Compare</button></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fb7299; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fb7299; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a3d4e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1f2f3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fb7299; color: #000000;
border: 1px solid #f1f2f3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fb7299; color: #111111;
border: 1px solid #d66283; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a3d4e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f986a7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f1f2f3; color:#18191c; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; padding:0 26px; gap:22px;
border-bottom:1px solid #e3e5e7; }
.brand { font-size:20px; font-weight:700; color:#fb7299; margin:0 10px 0 0; }
.navlinks { display:flex; gap:20px; flex:1; }
.navlinks span { font-size:14px; color:#18191c; }
.search { background:#f1f2f3; border-radius:16px; height:32px; width:220px; display:flex; align-items:center;
padding:0 14px; font-size:12px; color:#9499a0; }
.upload { margin-left:14px; background:#fb7299; color:#ffffff; border:none; border-radius:16px; height:32px; padding:0 16px; font-size:12px; }
.feed { padding:18px 26px; height:566px; overflow:hidden; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.vcard { background:#ffffff; }
.cover { position:relative; width:100%; height:126px; border-radius:6px; overflow:hidden;
background:linear-gradient(135deg,#e2e4e6,#c7cacd); }
.cover .stats { position:absolute; left:0; right:0; bottom:0; height:36px;
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
display:flex; align-items:flex-end; padding:0 8px 6px; justify-content:space-between; }
.cover .stats span { color:#ffffff; font-size:12px; }
.cover .dur { position:absolute; right:6px; top:6px; background:rgba(0,0,0,0.55); color:#ffffff; font-size:11px;
border-radius:3px; padding:1px 5px; }
.vcard h4 { font-size:14px; font-weight:400; margin:8px 0 4px; line-height:1.35; color:#18191c;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vcard .meta { font-size:12px; color:#9499a0; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Bilibili</p>
<div class="navlinks"><span>Anime</span><span>Games</span><span>Music</span><span>Life</span><span>Tech</span><span>Popular</span></div>
<div class="search">Search videos, up, or bangumi</div>
<button class="upload">Upload</button>
</nav>
<div class="feed">
<div class="grid">
<div class="vcard"><div class="cover"><span class="dur">12:04</span><div class="stats"><span>♥ 8.2k</span><span>▶ 214k</span></div></div><h4>A calm morning routine that changed how I study</h4><p class="meta">StudyWithMe · 2 days ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">04:31</span><div class="stats"><span>♥ 3.1k</span><span>▶ 92k</span></div></div><h4>Ranked climb highlights — season finale</h4><p class="meta">GG_Frost · 6 hours ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">21:09</span><div class="stats"><span>♥ 15k</span><span>▶ 480k</span></div></div><h4>Episode 12 reaction — the twist nobody saw coming</h4><p class="meta">AniReacts · 1 day ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">08:47</span><div class="stats"><span>♥ 2.4k</span><span>▶ 61k</span></div></div><h4>Lo-fi cover session, live recording</h4><p class="meta">SoundNest · 3 days ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">15:22</span><div class="stats"><span>♥ 6.7k</span><span>▶ 178k</span></div></div><h4>Building a keyboard from scratch, part 3</h4><p class="meta">MakerLog · 5 hours ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">02:58</span><div class="stats"><span>♥ 9.9k</span><span>▶ 301k</span></div></div><h4>Dance cover — new choreography drop</h4><p class="meta">MoveStudio · 8 hours ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">33:15</span><div class="stats"><span>♥ 4.4k</span><span>▶ 140k</span></div></div><h4>Full playthrough, no commentary — chapter 1</h4><p class="meta">QuietPlay · 2 days ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">06:02</span><div class="stats"><span>♥ 1.8k</span><span>▶ 44k</span></div></div><h4>Weekend market vlog: street food tour</h4><p class="meta">Wanderfeed · 1 day ago</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f04646; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f04646; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f3a6a6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f06354; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f04646; color: #000000;
border: 1px solid #f06354; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f04646; color: #f5f5f5;
border: 1px solid #f16262; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f3a6a6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f04b48; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#564e4a; box-sizing:border-box;
font-family:system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif; }
* { box-sizing: border-box; }
header { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:1px solid #e0d9d5; background:#ffffff; }
.brand-wrap { display:flex; flex-direction:column; }
.brand { font-size:20px; font-weight:700; color:#564e4a; line-height:1.1; }
.tagline { font-size:11px; font-weight:400; color:#89817d; }
.search { flex:0 0 340px; height:40px; background:#fbfaf8; display:flex; align-items:center;
padding:0 15px; font-size:14px; color:#89817d; }
.app-cta { background:#f04646; color:#ffffff; border:none; border-radius:4px; padding:1px 6px;
height:32px; font-size:14px; font-weight:500; display:flex; align-items:center; }
nav.tabs { display:flex; gap:2px; padding:0 24px; border-bottom:1px solid #e0d9d5; background:#ffffff; }
.tab { height:40px; padding:0 16px; display:flex; align-items:center; font-size:16px; font-weight:700;
color:#564e4a; border-bottom:2px solid transparent; }
.tab.active { color:#f04646; border-bottom:2px solid #f04646; }
.section { padding:20px 24px 0; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.section-head h2 { font-size:24px; font-weight:600; color:#564e4a; margin:0; }
.more-wrap { display:flex; align-items:center; gap:8px; }
.more { font-size:16px; font-weight:400; color:#f06354; }
.ghost { width:32px; height:32px; border-radius:50%; border:1px solid #f06354; color:#f06354;
display:flex; align-items:center; justify-content:center; font-size:14px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#f0f0f0; border-radius:16px; overflow:hidden; position:relative; }
.photo { height:108px; position:relative; }
.p1 { background:linear-gradient(135deg,#ffb199,#f0993c); }
.p2 { background:linear-gradient(135deg,#f0993c,#ffd39a); }
.p3 { background:linear-gradient(135deg,#f06354,#ffb199); }
.badge-amber { position:absolute; top:8px; left:8px; background:#f0993c; color:#ffffff;
border-radius:4px; padding:2px 8px; font-size:12px; font-weight:400; }
.card-body { padding:14px; }
.card-body h3 { font-size:20px; font-weight:700; margin:0 0 6px; color:#564e4a; line-height:1.3; }
.card-body p { font-size:14px; font-weight:400; color:#89817d; margin:0; line-height:1.15; }
.chip { display:inline-block; margin-top:8px; font-size:12px; color:#f06354; border:1px solid #f06354;
border-radius:4px; padding:2px 8px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 24px; text-align:center;
font-size:12px; color:#89817d; }
</style></head>
<body>
<header>
<div class="brand-wrap">
<span class="brand">iCook</span>
<span class="tagline">Begin a beautiful life, cook.</span>
</div>
<div class="search">Search for a recipe or ingredient</div>
<button class="app-cta">Get App</button>
</header>
<nav class="tabs">
<div class="tab active">Popular</div>
<div class="tab">Newest</div>
<div class="tab">Low-Cal</div>
<div class="tab">Quick & Easy</div>
<div class="tab">Drinks</div>
</nav>
<section class="section">
<div class="section-head">
<h2>Popular Recipes</h2>
<div class="more-wrap">
<span class="more">More</span>
<span class="ghost">‹</span>
<span class="ghost">›</span>
</div>
</div>
<div class="cards">
<div class="card">
<div class="photo p1"><span class="badge-amber">Seasonal</span></div>
<div class="card-body">
<h3>Cast-Iron Braised Rice</h3>
<p>One pot, thirty minutes, deeply savory</p>
<span class="chip">Rice Cooker Friendly</span>
</div>
</div>
<div class="card">
<div class="photo p2"></div>
<div class="card-body">
<h3>Honey Soy Glazed Wings</h3>
<p>Sticky, sweet, and ready in one tray</p>
</div>
</div>
<div class="card">
<div class="photo p3"></div>
<div class="card-body">
<h3>Cold Sesame Noodles</h3>
<p>A five-minute weeknight favorite</p>
</div>
</div>
</div>
</section>
<footer>© iCook · 300,000+ recipes, new ones every day</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #1a2a4a; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #1a2a4a;
border: 1px solid #1a2a4a; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c41e3a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Proxima Nova','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#1a2a4a; }
.brand { font-size:19px; font-weight:700; color:#f5f0e8; letter-spacing:0.05em; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#d9d4cc; font-weight:600; }
.navlinks span.on { color:#fff; }
.cart { background:#c41e3a; color:#fff; font-size:12px; font-weight:700; padding:8px 16px; border-radius:2px; }
main { display:flex; height:574px; }
.gallery { width:410px; background:#f5f0e8; position:relative; display:flex; align-items:center; justify-content:center; }
.cooker { width:220px; height:150px; background:linear-gradient(160deg,#c41e3a,#8a1428); border-radius:14px;
position:relative; box-shadow:0 20px 40px rgba(26,42,74,0.28); }
.cooker::before { content:''; position:absolute; top:-10px; left:16px; right:16px; height:20px;
background:#1a2a4a; border-radius:10px 10px 0 0; }
.cooker .knob { position:absolute; bottom:16px; width:20px; height:20px; border-radius:50%; background:#f5f0e8; }
.cooker .knob.k1 { left:24px; } .cooker .knob.k2 { left:56px; } .cooker .knob.k3 { left:88px; }
.badge-heritage { position:absolute; top:22px; left:22px; background:#1a2a4a; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.05em; padding:5px 12px; border-radius:2px; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#6b6b6b; }
h1 { font-size:22px; font-weight:700; margin:0; line-height:1.3; }
.stars { font-size:12px; color:#d4a017; }
.stars .n { color:#6b6b6b; margin-left:6px; font-size:11.5px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:700; }
.desc { font-size:13.5px; color:#3d3d3d; line-height:1.55; max-width:340px; }
.color-row { display:flex; gap:8px; }
.swatch { width:26px; height:26px; border-radius:4px; border:1px solid #d9d4cc; }
.swatch.on { outline:2px solid #1a2a4a; outline-offset:2px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#1a2a4a; color:#fff; border:none; border-radius:2px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #1a2a4a; color:#1a2a4a; background:#fff; border-radius:2px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#6b6b6b; }
</style></head>
<body>
<nav>
<div class="brand">Aga</div>
<div class="navlinks"><span class="on">Range Cookers</span><span>Modules</span><span>Refrigeration</span><span>Outdoor</span></div>
<div class="cart">Basket (0)</div>
</nav>
<main>
<div class="gallery">
<span class="badge-heritage">Since 1922</span>
<div class="cooker"><div class="knob k1"></div><div class="knob k2"></div><div class="knob k3"></div></div>
</div>
<div class="info">
<span class="cat">Range Cooker · Claret Enamel</span>
<h1>AGA eR7 Series 100 Electric Range Cooker</h1>
<div class="stars">★★★★★ <span class="n">4.8 · 214 reviews</span></div>
<div class="price-row"><span class="price">£12,995.00</span></div>
<p class="desc">Engineered for a century of heat retention — five ovens, radiant heat plates, and enduring cast-iron construction.</p>
<div class="color-row">
<div class="swatch on" style="background:#c41e3a"></div>
<div class="swatch" style="background:#1a2a4a"></div>
<div class="swatch" style="background:#2f2f2f"></div>
</div>
<div class="btn-row">
<button class="btn-primary">Book a Showroom Visit</button>
<button class="btn-outline">Request Brochure</button>
</div>
<span class="meta">Free installation consultation</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1351f9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1351f9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fabf7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a6cff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1351f9; color: #ffffff;
border: 1px solid #3a6cff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1351f9; color: #f5f5f5;
border: 1px solid #376bf8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fabf7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1955fa; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0e1a; color:#ffffff; box-sizing:border-box;
font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:17px; color:#1351f9; }
.navlinks { display:flex; gap:20px; font-size:15px; color:#a7aec0; }
.navlinks span.on { color:#ffffff; position:relative; }
.btn { background:#1351f9; color:#ffffff; border-radius:6px; padding:10px 20px; font-size:15px; font-weight:600; }
.billboard { height:180px; margin:0 32px 18px; border-radius:6px; background:linear-gradient(100deg,#0a0e1a,#132a5c 60%,#1351f9);
position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; overflow:hidden; }
.billboard::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent,rgba(10,14,26,0.9)); }
.billboard .b { position:relative; z-index:1; }
.live { background:#f5444c; color:#ffffff; border-radius:4px; padding:1px 6px; font-size:11px; font-weight:700; margin-bottom:8px; display:inline-block; }
.billboard h2 { font-size:26px; font-weight:700; margin:0 0 6px; }
.billboard .row { font-size:12px; color:#a7aec0; }
.row-title { padding:0 32px; font-size:20px; font-weight:700; margin:0 0 10px; }
.grid { display:flex; gap:10px; padding:0 32px 20px; }
.poster { width:110px; height:156px; border-radius:6px; flex-shrink:0; position:relative; overflow:hidden; }
.poster .prog { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.24); }
.poster .prog i { display:block; height:3px; background:#1351f9; }
.p1 { background:linear-gradient(160deg,#1a2a50,#2a4a90); }
.p2 { background:linear-gradient(160deg,#251a40,#4a2a80); }
.p3 { background:linear-gradient(160deg,#1a3040,#2a5a80); }
.p4 { background:linear-gradient(160deg,#151a30,#304a70); }
.p5 { background:linear-gradient(160deg,#20203a,#3a3a70); }
.p6 { background:linear-gradient(160deg,#101830,#2a4470); }
</style></head>
<body>
<nav>
<span class="brand">Wavve</span>
<div class="navlinks"><span class="on">Home</span><span>Drama</span><span>Variety</span><span>Movies</span><span>Live TV</span></div>
<span class="btn">Subscribe</span>
</nav>
<div class="billboard"><div class="b">
<span class="live">LIVE</span>
<h2>Midnight Harbor Season 2</h2>
<div class="row">2026 · Drama · Episode 4 now streaming</div>
</div></div>
<div class="row-title">Continue watching</div>
<div class="grid">
<div class="poster p1"><div class="prog"><i style="width:70%"></i></div></div>
<div class="poster p2"><div class="prog"><i style="width:40%"></i></div></div>
<div class="poster p3"><div class="prog"><i style="width:88%"></i></div></div>
<div class="poster p4"><div class="prog"><i style="width:20%"></i></div></div>
<div class="poster p5"><div class="prog"><i style="width:55%"></i></div></div>
<div class="poster p6"><div class="prog"><i style="width:10%"></i></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a7cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a7cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bbffa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9d4edd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a7cff; color: #000000;
border: 1px solid #9d4edd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a7cff; color: #f5f5f5;
border: 1px solid #308ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bbffa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2275fa; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#E4E6EB; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
.listcol { width:300px; flex-shrink:0; border-right:1px solid #3A3B3C; }
.listcol .lh { padding:18px 18px 8px; }
.listcol .lh h1 { font-size:28px; font-weight:700; margin:0 0 10px; letter-spacing:-0.3pt; color:#fff; }
.search { height:36px; border-radius:18px; background:#1C1C1D; display:flex; align-items:center; padding:0 12px; gap:8px; }
.search .mag { width:12px; height:12px; border:2px solid #65676B; border-radius:50%; }
.search span { font-size:14px; color:#8A8D91; }
.row { display:flex; align-items:center; gap:12px; padding:10px 18px; }
.row .av { width:44px; height:44px; border-radius:50%; position:relative; flex-shrink:0; }
.row .av .dot { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; background:#31D158; border:2px solid #000; }
.row .who { flex:1; min-width:0; }
.row .who b { display:block; font-size:15px; font-weight:600; color:#E4E6EB; }
.row .who span { font-size:13px; color:#B0B3B8; }
.row .t { font-size:12px; color:#65676B; }
.a1 { background:linear-gradient(135deg,#0A7CFF,#9D4EDD); }
.a2 { background:linear-gradient(135deg,#FF5CA0,#9D4EDD); }
.a3 { background:linear-gradient(135deg,#9D4EDD,#0A7CFF); }
.thread { flex:1; display:flex; flex-direction:column; }
.thead { height:60px; border-bottom:1px solid #3A3B3C; display:flex; align-items:center; gap:12px; padding:0 20px; }
.thead .av { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#0A7CFF,#FF5CA0); }
.thead .nm b { display:block; font-size:16px; font-weight:600; }
.thead .nm span { font-size:12px; color:#65676B; }
.thead .calls { margin-left:auto; display:flex; gap:16px; }
.thead .calls .ic { width:20px; height:20px; border-radius:5px; background:#0A7CFF; }
.msgs { flex:1; padding:20px; display:flex; flex-direction:column; gap:6px; }
.bub { max-width:60%; padding:9px 14px; border-radius:18px; font-size:16px; line-height:1.4; }
.in { align-self:flex-start; background:#303030; color:#E4E6EB; border-bottom-left-radius:6px; }
.out { align-self:flex-end; color:#fff; border-bottom-right-radius:6px;
background:linear-gradient(135deg,#0A7CFF,#9D4EDD 55%,#FF5CA0); }
.grp { margin-bottom:10px; }
.grp:last-child { margin-bottom:0; }
.reaction { position:relative; align-self:flex-end; margin-top:-14px; margin-right:10px; z-index:2; }
.reaction .pill { background:#000; border:1px solid #3A3B3C; border-radius:999px; padding:2px 8px; font-size:13px; display:inline-flex; align-items:center; gap:4px; }
.composer { display:flex; align-items:center; gap:10px; padding:12px 20px; }
.composer .ic { width:22px; height:22px; border-radius:5px; background:#0A7CFF; }
.composer .pill { flex:1; height:36px; border-radius:18px; background:#1C1C1D; display:flex; align-items:center; padding:0 14px; color:#8A8D91; font-size:15px; }
.composer .thumb { width:32px; height:32px; border-radius:50%; background:#0A7CFF; display:flex; align-items:center; justify-content:center; }
.composer .thumb .g { width:14px; height:14px; background:#fff; clip-path:polygon(30% 100%,0 60%,0 20%,25% 0,75% 25%,100% 55%,70% 100%); }
</style></head>
<body>
<div class="shell">
<div class="listcol">
<div class="lh"><h1>Messenger (iOS)</h1><div class="search"><div class="mag"></div><span>Search</span></div></div>
<div class="row"><div class="av a1"><div class="dot"></div></div><div class="who"><b>Theo Marchetti</b><span>sent a photo</span></div><div class="t">9:41</div></div>
<div class="row"><div class="av a2"></div><div class="who"><b>Group: Design Crew</b><span>Priya: sounds great!</span></div><div class="t">Mon</div></div>
<div class="row"><div class="av a3"><div class="dot"></div></div><div class="who"><b>Nadia K.</b><span>😂😂😂</span></div><div class="t">Sun</div></div>
</div>
<div class="thread">
<div class="thead">
<div class="av"></div>
<div class="nm"><b>Theo Marchetti</b><span>Active now</span></div>
<div class="calls"><div class="ic"></div><div class="ic"></div></div>
</div>
<div class="msgs">
<div class="grp"><div class="bub in">did you see the new fediverse timeline experiment?</div></div>
<div class="grp"><div class="bub out">yeah, i've been playing with it all week</div><div class="bub out" style="margin-top:2px">kind of obsessed honestly</div></div>
<div class="grp"><div class="bub in">send me the link when you get a sec</div></div>
<div class="reaction"><span class="pill">👍 2</span></div>
</div>
<div class="composer">
<div class="ic"></div><div class="ic"></div><div class="ic"></div>
<div class="pill">Aa</div>
<div class="thumb"><div class="g"></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #34e0a1; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #34e0a1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dffaf0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:56px; display:flex; align-items:center; padding:0 30px; gap:16px; border-bottom:1px solid #E0E0E0; }
.owl { width:30px; height:30px; border-radius:50%; background:#000; position:relative; }
.owl::before, .owl::after { content:''; position:absolute; width:8px; height:8px; border-radius:50%; background:#34E0A1; top:9px; }
.owl::before { left:5px; } .owl::after { right:5px; }
.locpill { background:#F2F2F2; border-radius:999px; padding:8px 18px; font-size:14px; font-weight:600; }
.searchbar { flex:1; height:40px; background:#F2F2F2; border-radius:999px; display:flex; align-items:center; padding:0 16px; color:#6B6B6B; font-size:14px; }
.body { padding:20px 30px; display:flex; gap:24px; }
.catgrid { width:270px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cat { height:80px; background:#F2F2F2; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.cat span:first-child { font-size:22px; }
.cat span:last-child { font-size:13px; font-weight:600; }
.cards { flex:1; display:flex; flex-direction:column; gap:16px; }
.card { display:flex; gap:14px; }
.thumb { width:150px; height:100px; border-radius:16px; flex-shrink:0; position:relative; }
.thumb1 { background:linear-gradient(160deg,#d9c39a,#8a6a3a); }
.thumb2 { background:linear-gradient(160deg,#a9c9d9,#3a6a8a); }
.badge { position:absolute; top:8px; left:8px; background:#34E0A1; color:#000; font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; text-transform:uppercase; }
.cinfo { flex:1; }
.cname { font-size:17px; font-weight:700; }
.bubbles { display:flex; align-items:center; gap:3px; margin:6px 0; }
.bubbles span { width:14px; height:14px; border-radius:50%; background:#34E0A1; }
.bubbles span.e { background:#D9D9D9; }
.rcnt { font-size:13px; color:#6B6B6B; margin-left:6px; }
.catmeta { font-size:13px; color:#6B6B6B; }
</style></head>
<body>
<div class="topnav">
<div class="owl"></div>
<div class="locpill">Tripadvisor (iOS) ▾</div>
<div class="searchbar">Hotels, things to do, restaurants…</div>
</div>
<div class="body">
<div class="catgrid">
<div class="cat"><span>🏨</span><span>Hotels</span></div>
<div class="cat"><span>🎡</span><span>Things to do</span></div>
<div class="cat"><span>🍽️</span><span>Restaurants</span></div>
<div class="cat"><span>✈️</span><span>Flights</span></div>
</div>
<div class="cards">
<div class="card">
<div class="thumb thumb1"><span class="badge">Travelers' Choice</span></div>
<div class="cinfo">
<div class="cname">Hotel Vista Mar</div>
<div class="bubbles"><span></span><span></span><span></span><span></span><span class="e"></span><span class="rcnt">4.5 (1,284)</span></div>
<div class="catmeta">Hotel · $$ - $$$ · 0.4 mi</div>
</div>
</div>
<div class="card">
<div class="thumb thumb2"></div>
<div class="cinfo">
<div class="cname">Skyline Rooftop Bar</div>
<div class="bubbles"><span></span><span></span><span></span><span></span><span></span><span class="rcnt">4.9 (982)</span></div>
<div class="catmeta">Bar · $$ · 0.8 mi</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0041c0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0041c0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87a4dd; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0041c0; color: #f2f2f2;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0041c0; color: #f5f5f5;
border: 1px solid #275ec8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87a4dd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #275dc8; color: #f2f2f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f2f2; color:#1a1a1a; box-sizing:border-box;
font-family:"Noto Sans", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e0e0e0; }
.brand { font-size:18px; font-weight:400; letter-spacing:0.02em; }
.navlinks { display:flex; }
.navlinks span { color:#4d4d4d; font-size:15px; font-weight:400; margin-right:26px; }
.search { width:16px; height:16px; border:1.5px solid #1a1a1a; border-radius:0px; position:relative; }
.search::after { content:''; position:absolute; right:-5px; bottom:-4px; width:6px; height:1.5px;
background:#1a1a1a; transform:rotate(45deg); }
.hero { padding:36px 32px 26px; background:#f2f2f2; border-bottom:1px solid #e2e2e2; }
.hero .eyebrow { font-size:13px; color:#666666; margin:0 0 8px; }
.hero h1 { font-size:26px; font-weight:400; line-height:1.4; margin:0 0 10px; max-width:560px; }
.hero p { font-size:16px; line-height:24px; color:#1a1a1a; margin:0; max-width:520px; }
.panel { display:flex; }
.p-left { width:560px; padding:26px 32px 0; }
.p-left h2 { font-size:16px; font-weight:400; margin:0 0 12px; border-bottom:1px solid #d8d8d8;
padding-bottom:8px; }
.row-item { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #e6e6e6;
font-size:15px; }
.row-item .lbl { color:#1a1a1a; }
.row-item .val { color:#666666; }
.p-right { flex:1; padding:26px 32px 0; }
.swatch { display:flex; gap:0; height:150px; }
.swatch div { flex:1; }
.s1 { background:#f2f2f2; border:1px solid #d8d8d8; }
.s2 { background:#1a1a1a; }
.s3 { background:#0041c0; }
.s4 { background:#666666; }
.caption { font-size:12px; color:#666666; margin-top:8px; }
.foot { position:absolute; bottom:0; left:0; right:0; height:0; }
.link-line { font-size:15px; color:#0041c0; margin-top:16px; }
</style></head>
<body>
<nav>
<div class="brand">Panasonic</div>
<div class="navlinks"><span>Products</span><span>Technology</span><span>Sustainability</span><span>Company</span></div>
<div class="search"></div>
</nav>
<section class="hero">
<p class="eyebrow">Technology</p>
<h1>Finding the real problems in everyday life, and delivering the right solutions.</h1>
<p>Panasonic's design philosophy, "Future Craft," guides how we make things with future generations in mind.</p>
</section>
<div class="panel">
<div class="p-left">
<h2>Related</h2>
<div class="row-item"><span class="lbl">Panasonic GREEN IMPACT</span><span class="val">Sustainability</span></div>
<div class="row-item"><span class="lbl">Future Craft Design Philosophy</span><span class="val">Design</span></div>
<div class="row-item"><span class="lbl">Our Technology Strategy</span><span class="val">Technology</span></div>
<div class="row-item"><span class="lbl">Our Journey Since 1918</span><span class="val">Company</span></div>
<p class="link-line">Learn More →</p>
</div>
<div class="p-right">
<div class="swatch"><div class="s1"></div><div class="s2"></div><div class="s3"></div><div class="s4"></div></div>
<p class="caption">Brand palette — canvas / foreground / link / muted</p>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #94bcff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #94bcff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #4c5e7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323232; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #94bcff; color: #323232;
border: 1px solid #323232; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #94bcff; color: #111111;
border: 1px solid #7fa1d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4c5e7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #84a6de; color: #323232;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#323232; color:#e3e3e3; box-sizing:border-box;
font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#fff; font-weight:700; font-size:18px; }
.navlinks { display:flex; gap:4px; }
.navlinks span { color:#fff; font-size:12.6px; font-weight:600; padding:8px 12px; }
.navlinks span.on { color:#e3e3e3; }
.pill { color:#fff; border-radius:9999px; padding:10px 18px; font-size:14px; font-weight:600; border:1px solid #555; }
.hero { padding:36px 40px 20px; text-align:center; }
.hero h1 { font-size:32px; font-weight:700; margin:0 0 8px; color:#fff; }
.hero p { color:#e3e3e3; font-size:20px; font-weight:600; margin:0; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:28px 40px; }
.card { background:#252525; border-radius:12px; padding:24px 32px; height:52px; display:flex; align-items:center;
font-size:20px; font-weight:600; color:#e3e3e3; }
.card .arrow { margin-left:auto; color:#94bcff; }
.status { padding:0 40px 28px; display:flex; gap:14px; }
.stat { flex:1; background:#252525; border-radius:12px; padding:16px; font-size:13px; color:#b9b9b9; }
.stat b { display:block; font-size:22px; color:#98e467; margin-bottom:4px; }
.footer { padding:16px 40px; border-top:1px solid #444; display:flex; justify-content:space-between; font-size:12px;
color:#b9b9b9; }
.link { color:#94bcff; }
</style></head>
<body>
<nav>
<span class="brand">DMM.com (Turtle)</span>
<div class="navlinks"><span class="on">About Turtle</span><span>Products</span><span>Guidelines</span><span>Getting Started</span></div>
<div class="pill">About Turtle</div>
</nav>
<section class="hero">
<h1>Turtle Design System Portal β</h1>
<p>Create discovery and passion.</p>
</section>
<section class="cards">
<div class="card">Design Tokens<span class="arrow">→</span></div>
<div class="card">Components<span class="arrow">→</span></div>
<div class="card">Resources<span class="arrow">→</span></div>
<div class="card">AI-friendly Design Guidelines<span class="arrow">→</span></div>
</section>
<section class="status">
<div class="stat"><b>50%+</b>Frontend adoption rate across the Platform Engineering division</div>
<div class="stat"><b>β</b>Now in beta · Do more with less</div>
</section>
<div class="footer">
<span>© DMM.com</span>
<span class="link">Figma Community · Storybook · GitHub</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #008cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #008cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008cff; color: #f2f2f2;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #008cff; color: #f5f5f5;
border: 1px solid #279dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #279cfd; color: #f2f2f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#2F3033; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.feedcol { width:520px; padding:20px 0; }
.fh { font-size:22px; font-weight:700; padding:0 24px 10px; }
.row { display:flex; gap:12px; padding:12px 24px; border-bottom:1px solid #F2F2F2; }
.av { width:40px; height:40px; border-radius:50%; flex-shrink:0; }
.line1 { font-size:15px; }
.line1 b { font-weight:600; }
.line1 .ts { color:#6B6E76; font-size:13px; }
.memo { font-size:15px; margin-top:4px; }
.social { display:flex; gap:16px; margin-top:6px; font-size:13px; color:#6B6E76; }
.payside { width:440px; background:#F7F7F7; padding:26px; display:flex; flex-direction:column; gap:18px; }
.balcard { height:170px; border-radius:20px; background:linear-gradient(180deg,#008CFF,#0078DE); padding:18px 20px; color:#fff; display:flex; flex-direction:column; }
.baltop { font-size:14px; opacity:0.85; }
.balnum { font-size:52px; font-weight:700; margin-top:6px; }
.balbtns { margin-top:auto; display:flex; gap:10px; }
.balbtn { background:#fff; color:#008CFF; font-size:13px; font-weight:600; padding:8px 16px; border-radius:16px; }
.paypill { height:50px; border-radius:25px; background:#008CFF; display:flex; box-shadow:rgba(0,140,255,0.25) 0 4px 12px; }
.paypill .half { flex:1; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; }
.paypill .half:first-child { border-right:1px solid rgba(255,255,255,0.5); }
.amtscreen { background:#fff; border-radius:16px; border:1px solid #F2F2F2; padding:20px; text-align:center; }
.amt { font-size:44px; font-weight:700; letter-spacing:-0.6px; }
.memoin { color:#9AA0A8; font-size:15px; margin-top:8px; }
.emojis { display:flex; gap:6px; justify-content:center; margin-top:12px; font-size:18px; }
</style></head>
<body>
<div class="app">
<div class="feedcol">
<div class="fh">Venmo (iOS)</div>
<div class="row"><div class="av" style="background:#F5A623"></div>
<div><div class="line1"><b>Alex</b> paid <b>Jordan</b> <span class="ts">· 2h</span></div>
<div class="memo">🍕🍺 Pizza Friday</div>
<div class="social">♡ 8 💬 2</div></div></div>
<div class="row"><div class="av" style="background:#4BB543"></div>
<div><div class="line1"><b>Priya</b> paid <b>You</b> <span class="ts">· 5h</span></div>
<div class="memo">🚗 Gas money</div>
<div class="social">♡ 3 💬 0</div></div></div>
<div class="row"><div class="av" style="background:#008CFF"></div>
<div><div class="line1"><b>Sam</b> paid <b>Nina</b> <span class="ts">· Yesterday</span></div>
<div class="memo">🏠 Rent split</div>
<div class="social">♡ 12 💬 4</div></div></div>
</div>
<div class="payside">
<div class="balcard"><div class="baltop">Venmo balance</div><div class="balnum">$124.50</div>
<div class="balbtns"><div class="balbtn">Transfer to bank</div><div class="balbtn">Add money</div></div></div>
<div class="amtscreen">
<div class="amt">$24.50</div>
<div class="memoin">What's it for?</div>
<div class="emojis">🍕 🍺 🚗 💰 🎉 ☕</div>
</div>
<div class="paypill"><div class="half">Pay</div><div class="half">Request</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3464; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3464; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa9eb4; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #14233c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3464; color: #14233c;
border: 1px solid #14233c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3464; color: #f5f5f5;
border: 1px solid #fd537b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa9eb4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9315e; color: #14233c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F6F7F9; color:#14233C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.phone { width:960px; height:640px; display:flex; }
.col { flex:1.35; padding:20px 22px; display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.hi { font-size:14px; color:#5C6B82; font-weight:500; }
.card { height:150px; border-radius:18px; background:linear-gradient(135deg,#FF3464,#FF5A7F 55%,#E02855); position:relative; box-shadow:0 14px 30px -14px rgba(255,52,100,0.4); padding:18px 20px; color:#fff; }
.card .word { position:absolute; top:16px; right:20px; font-size:11px; font-weight:700; letter-spacing:1px; opacity:0.9; }
.card .avail { font-size:12px; font-weight:500; opacity:0.85; margin-top:6px; }
.card .bal { font-size:32px; font-weight:800; letter-spacing:-0.6px; margin-top:2px; }
.card .num { position:absolute; bottom:16px; left:20px; font-size:13px; font-weight:600; letter-spacing:2px; opacity:0.9; }
.potslabel { font-size:13px; font-weight:600; color:#5C6B82; }
.pots { display:flex; gap:12px; }
.pot { width:92px; height:92px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 8px 16px -8px rgba(0,0,0,0.2); flex-shrink:0; position:relative; }
.pot .cap { position:absolute; bottom:-22px; left:0; width:92px; text-align:center; font-size:11px; font-weight:600; color:#14233C; }
.p1 { background:linear-gradient(135deg,#2FB59A,#5CE0C4); }
.p2 { background:linear-gradient(135deg,#3E7FC4,#5AA9F0); }
.p3 { background:linear-gradient(135deg,#E0A23A,#FFC75F); }
.pnew { background:#fff; border:1.5px dashed #C6CCD6; color:#94A1B5; font-size:20px; }
.potswrap { margin-bottom:14px; }
.feedlabel { font-size:13px; font-weight:700; color:#5C6B82; margin-top:8px; }
.txn { height:58px; display:flex; align-items:center; gap:14px; border-bottom:1px solid #E4E7EB; }
.txn .micon { width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
.txn .info { flex:1; overflow:hidden; }
.txn .merch { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.txn .meta { font-size:13px; color:#5C6B82; margin-top:2px; }
.txn .amt { font-size:15px; font-weight:700; }
.amt.in { color:#1FA971; }
/* 우측: 거래 상세 */
.detail { flex:1; background:#14233C; color:#fff; padding:24px 26px; display:flex; flex-direction:column; align-items:center; }
.detail .micon2 { width:64px; height:64px; border-radius:50%; background:#3E7FC4; margin-top:20px; display:flex; align-items:center; justify-content:center; font-size:28px; }
.detail .mname { font-size:22px; font-weight:700; margin-top:14px; }
.detail .amt2 { font-size:30px; font-weight:800; margin-top:6px; }
.map { width:100%; height:110px; border-radius:16px; margin-top:22px; background:linear-gradient(135deg,#1B2F4D,#243A57); }
.drow { width:100%; display:flex; justify-content:space-between; padding:14px 4px; border-bottom:1px solid #243A57; font-size:14px; }
.drow span:first-child { color:#9FB0C6; }
.cta { margin-top:22px; width:100%; height:50px; border-radius:14px; background:#FF3464; color:#fff; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="phone">
<div class="col">
<div class="hi">Available to spend</div>
<div class="card">
<span class="word">Monzo (iOS)</span>
<div class="bal">£2,418.60</div>
<div class="avail">You've spent £24.10 today</div>
<div class="num">•••• •••• •••• 9042</div>
</div>
<div class="potswrap">
<div class="potslabel">Pots</div>
<div class="pots" style="margin-top:10px">
<div class="pot p1">🏖️<span class="cap">Holiday</span></div>
<div class="pot p2">🏠<span class="cap">Rent</span></div>
<div class="pot p3">🎁<span class="cap">Treats</span></div>
<div class="pot pnew">+<span class="cap">New pot</span></div>
</div>
</div>
<div class="feedlabel">TODAY</div>
<div class="txn"><div class="micon" style="background:#FFE3EA">☕️</div><div class="info"><div class="merch">Blue Bottle Coffee</div><div class="meta">Eating out · 9:12</div></div><div class="amt">-£4.80</div></div>
<div class="txn"><div class="micon" style="background:#E7F4EF">💰</div><div class="info"><div class="merch">Salary — Acme Co</div><div class="meta">Income · 08:01</div></div><div class="amt in">+£3,200.00</div></div>
<div class="txn"><div class="micon" style="background:#EAF1FB">🚕</div><div class="info"><div class="merch">Uber</div><div class="meta">Transport · 22:47</div></div><div class="amt">-£11.40</div></div>
</div>
<div class="detail">
<div class="micon2">☕️</div>
<div class="mname">Blue Bottle Coffee</div>
<div class="amt2">£4.80</div>
<div class="map"></div>
<div class="drow"><span>Category</span><span>Eating out</span></div>
<div class="drow"><span>Date</span><span>Today, 9:12 AM</span></div>
<div class="drow"><span>Notes</span><span>—</span></div>
<div class="cta">Split bill</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.22; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #003388; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: transparent; color: #000000;
border: 1px solid #003388; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #110c1d; color: #ffffff;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #110c1d; color: #a88548;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#110c1d; color:#ffffff; box-sizing:border-box;
font-family:'gdsherpa',system-ui,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#1a1230; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#c9c3e0; }
.btn-primary { background:#003388; color:#fff; border:none; border-radius:6px; padding:11px 20px; font-size:13px; font-weight:600; }
main { display:flex; height:calc(640px - 66px - 42px); }
.gallery { width:400px; background:#1a1230; position:relative; display:flex; align-items:center; justify-content:center; }
.guitar { width:90px; height:260px; position:relative; }
.guitar::before { content:''; position:absolute; top:0; left:34px; width:22px; height:130px; border-radius:4px;
background:linear-gradient(180deg,#3a2f10,#1a1230); }
.guitar::after { content:''; position:absolute; bottom:0; left:0; width:90px; height:150px; border-radius:45% 45% 40% 40% / 55% 55% 45% 45%;
background:radial-gradient(circle at 35% 30%,#a88548,#5a4322 80%); }
.badge-config { position:absolute; top:20px; left:20px; background:#00d084; color:#0a0a0a; font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; color:#8a83a8; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-size:22px; font-weight:700; margin:0; }
.price { font-size:20px; font-weight:700; }
.steps { display:flex; gap:6px; }
.step { flex:1; text-align:center; font-size:11px; color:#8a83a8; border-bottom:2px solid #32284f; padding-bottom:8px; }
.step.on { color:#fff; border-color:#00d084; }
.specrow { display:flex; gap:20px; }
.spec-card { background:#1a1230; border:1px solid #32284f; border-radius:8px; padding:10px 14px; font-size:12px; color:#c9c3e0; flex:1; }
.spec-card b { display:block; color:#fff; font-size:13px; }
.wood { display:flex; gap:8px; }
.wsw { width:30px; height:30px; border-radius:6px; border:2px solid transparent; }
.wsw.on { border-color:#00d084; }
.w1 { background:#a88548; } .w2 { background:#5a4322; } .w3 { background:#2b1f12; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#003388; color:#fff; border:none; border-radius:8px; padding:14px; font-size:14px; font-weight:700; }
.btn-sec { background:transparent; color:#fff; border:1px solid #32284f; border-radius:8px; padding:14px 18px; font-size:13px; font-weight:600; }
footer { padding:12px 32px; border-top:1px solid #32284f; font-size:11px; color:#8a83a8; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bilt Guitars</div>
<div class="navlinks"><span>Electric</span><span>Bass</span><span>Custom Build</span><span>Finishes</span></div>
<button class="btn-primary">Start Building</button>
</nav>
<main>
<div class="gallery"><span class="badge-config">Custom Spec</span><div class="guitar"></div></div>
<div class="info">
<span class="cat">Configured Build</span>
<h1>Bilt A25 — Custom Spec</h1>
<div class="price">$1,890.00</div>
<div class="steps">
<div class="step on">1. Body</div>
<div class="step on">2. Neck</div>
<div class="step">3. Pickups</div>
<div class="step">4. Finish</div>
</div>
<div class="specrow">
<div class="spec-card"><b>Alder</b>Body wood</div>
<div class="spec-card"><b>Maple / C</b>Neck profile</div>
<div class="spec-card"><b>22 Frets</b>Fingerboard</div>
</div>
<div class="wood"><span class="wsw w1 on"></span><span class="wsw w2"></span><span class="wsw w3"></span></div>
<div class="btn-row">
<button class="btn-add">Confirm Spec</button>
<button class="btn-sec">Save Draft</button>
</div>
</div>
</main>
<footer><span>© Bilt Guitars</span><span>Built to your spec, shipped in 6 weeks</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1c69d4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1c69d4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #93b6e6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #414141; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c69d4; color: #ffffff;
border: 1px solid #414141; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1c69d4; color: #f5f5f5;
border: 1px solid #3f7fd9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #93b6e6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2263bc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#414141; box-sizing:border-box;
font-family:"Segoe UI", -apple-system, Helvetica, Arial, sans-serif; font-weight:300; }
* { box-sizing:border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #f2f2f2; }
.nav .brand { font-weight:500; font-size:20px; letter-spacing:2px; }
.nav .links { display:flex; gap:24px; font-size:15px; font-weight:500; }
.nav .icons { display:flex; gap:16px; font-size:13px; color:#414141; }
.hero { position:relative; height:280px; background:linear-gradient(180deg,#eef0f2,#dfe2e6); overflow:hidden; }
.road { position:absolute; left:0; right:0; bottom:0; height:90px; background:#262626; }
.road::before { content:''; position:absolute; top:50%; left:0; right:0; height:3px;
background:repeating-linear-gradient(90deg,#fff 0 40px, transparent 40px 80px); transform:translateY(-50%); }
.carshape { position:absolute; left:50%; bottom:70px; transform:translateX(-50%); width:520px; height:130px;
background:linear-gradient(180deg,#2b2f36,#12141a); border-radius:70px 70px 20px 20px; }
.carshape::before { content:''; position:absolute; top:-46px; left:110px; right:110px; height:70px;
background:linear-gradient(180deg,#3a3f47,#20232a); border-radius:60px 60px 0 0; }
.wheel { position:absolute; bottom:-18px; width:70px; height:70px; border-radius:50%; background:#0d0f12; border:6px solid #2b2f36; }
.w1{left:60px;} .w2{right:60px;}
.herotxt { position:relative; z-index:2; padding:26px 32px 0; }
.herotxt h1 { font-size:35px; font-weight:300; line-height:1.43; margin:0 0 6px; color:#1c1c1c; }
.herotxt p { font-size:18px; font-weight:300; margin:0; color:#414141; }
.ctarow { display:flex; gap:12px; padding:18px 32px 0; }
.cta-primary { background:#1c69d4; color:#fff; border-radius:3px; padding:12px 26px; font-size:15px; font-weight:500; }
.cta-outline { background:transparent; color:#414141; border:1px solid #414141; border-radius:3px; padding:12px 26px; font-size:15px; font-weight:500; }
.models { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#f2f2f2; margin-top:22px; }
.model { background:#fff; padding:18px; text-align:center; }
.model .badge { width:56px; height:32px; margin:0 auto 10px; border-radius:3px;
background:linear-gradient(135deg,#dfe2e6,#c7ccd1); }
.model h4 { font-size:15px; font-weight:500; margin:0 0 4px; color:#1c1c1c; }
.model p { font-size:13px; color:#707070; margin:0; }
</style></head>
<body>
<nav class="nav">
<div class="brand">BMW</div>
<div class="links"><span>Models</span><span>Electric</span><span>Configurator</span><span>Dealers</span></div>
<div class="icons">Search · Contact</div>
</nav>
<div class="hero">
<div class="herotxt">
<h1>The Neue Klasse. A new era begins.</h1>
<p>Precision engineering, reduced to what matters.</p>
</div>
<div class="road"></div>
<div class="carshape"><div class="wheel w1"></div><div class="wheel w2"></div></div>
</div>
<div class="ctarow">
<span class="cta-primary">Build Your Own</span>
<span class="cta-outline">Find a Dealer</span>
</div>
<div class="models">
<div class="model"><div class="badge"></div><h4>Sedan</h4><p>From $46,900</p></div>
<div class="model"><div class="badge"></div><h4>SUV (X)</h4><p>From $52,300</p></div>
<div class="model"><div class="badge"></div><h4>Electric (i)</h4><p>From $58,800</p></div>
<div class="model"><div class="badge"></div><h4>M Performance</h4><p>From $79,900</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #383838; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #d9d9d9; }
.brand { font-size:20px; font-weight:800; margin:0; letter-spacing:-.4px; }
.navlinks { display:flex; gap:0; }
.menurow { height:40px; display:flex; align-items:center; padding:0 14px; font-size:10px; color:#121212; }
.chips { display:flex; gap:8px; padding:16px 40px 10px; }
.chip { background:#f4f4f4; color:#454545; border:1px solid #f4f4f4; border-radius:25px; padding:0 16px;
height:40px; display:flex; align-items:center; font-size:15px; }
.chip.on { background:#121212; color:#fff; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:8px 40px 16px; }
.movie { position:relative; }
.poster { height:150px; border-radius:16px; position:relative; overflow:hidden; }
.m1 { background:linear-gradient(160deg,#1a1a2e,#fc5555); }
.m2 { background:linear-gradient(160deg,#0e2f2f,#26a862); }
.m3 { background:linear-gradient(160deg,#2a1a3a,#9933ff); }
.m4 { background:linear-gradient(160deg,#241a12,#f26d00); }
.m5 { background:linear-gradient(160deg,#101820,#209cff); }
.badge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.55); color:#fff; border-radius:4px;
padding:0 5px; height:20px; display:flex; align-items:center; font-size:11px; font-weight:700; }
.movie .t { font-size:14px; font-weight:700; margin-top:8px; letter-spacing:-.4px; }
.movie .m { font-size:14px; color:#454545; margin-top:2px; letter-spacing:-.2px; }
.action { border:1px solid #d9d9d9; border-radius:20px; padding:9px 24px; font-size:14px; font-weight:500;
background:#fff; color:#121212; display:inline-block; margin:0 40px 20px; }
</style></head>
<body>
<nav>
<p class="brand">CGV</p>
<div class="navlinks">
<span class="menurow">Movie Chart</span><span class="menurow">Theaters</span><span class="menurow">Events</span>
</div>
<div class="chip on" style="height:36px;">Book Now</div>
</nav>
<section class="chips">
<span class="chip on">All</span><span class="chip">Action</span><span class="chip">Drama</span>
<span class="chip">SF</span><span class="chip">Animation</span>
</section>
<section class="grid">
<div class="movie"><div class="poster m1"><span class="badge">4DX</span></div><div class="t">Red Signal</div><div class="m">Action · 15+</div></div>
<div class="movie"><div class="poster m2"><span class="badge">IMAX</span></div><div class="t">Forest Memory</div><div class="m">Drama · 12+</div></div>
<div class="movie"><div class="poster m3"><span class="badge">SCREENX</span></div><div class="t">Void Run</div><div class="m">SF · 15+</div></div>
<div class="movie"><div class="poster m4"><span class="badge">2D</span></div><div class="t">Orange Days</div><div class="m">Comedy · All Ages</div></div>
<div class="movie"><div class="poster m5"><span class="badge">3D</span></div><div class="t">Deep Dive</div><div class="m">Animation · All Ages</div></div>
</section>
<div class="action">View Full Showtimes</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #11aac1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #11aac1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8ed3de; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #117e96; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #11aac1; color: #000000;
border: 1px solid #117e96; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #11aac1; color: #f5f5f5;
border: 1px solid #35b6c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8ed3de; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #11a3ba; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#464646; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, "PingFang TC", "Microsoft JhengHei", sans-serif; }
* { box-sizing:border-box; }
.topnav { height:44px; background:#ffffff; border-bottom:1px solid #e5e7eb; display:flex;
align-items:center; padding:0 20px; gap:8px; }
.brand { font-size:16px; font-weight:700; color:#2d2d2d; margin-right:14px; }
.tab { font-size:14px; font-weight:400; padding:8px 12px; border-radius:4px; color:#464646; }
.tab.active { background:#11aac1; color:#ffffff; font-weight:700; }
.navspacer { flex:1; }
.searchbar { width:180px; height:26px; border:1px solid #e5e7eb; border-radius:4px; font-size:12px;
color:#8c8c8c; display:flex; align-items:center; padding:0 10px; }
.authlink { font-size:13px; color:#117e96; font-weight:700; margin-left:14px; }
.body { display:flex; padding:14px 20px; gap:14px; }
.col-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.col-side { width:220px; flex:0 0 220px; display:flex; flex-direction:column; gap:12px; }
.card { background:#ffffff; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,0.08); padding:14px 16px; }
.card h3 { font-size:15px; font-weight:700; color:#2d2d2d; margin:0 0 10px; display:flex;
align-items:center; justify-content:space-between; }
.card h3 .more { font-size:12px; font-weight:400; color:#117e96; }
.thread { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid #f3f3f3; font-size:13px; }
.thread:last-child { border-bottom:none; }
.thread .badge { background:#e60012; color:#ffffff; border-radius:2px; font-size:10px; font-weight:700;
padding:2px 5px; flex:0 0 auto; }
.thread .tt { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#464646; }
.thread .cnt { color:#8c8c8c; font-size:12px; flex:0 0 auto; }
.gamegrid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.gametile { border-radius:4px; height:64px; display:flex; align-items:flex-end; padding:6px 8px;
color:#ffffff; font-size:11px; font-weight:700; }
.g1 { background:linear-gradient(135deg,#11aac1,#117e96); }
.g2 { background:linear-gradient(135deg,#8c8c8c,#464646); }
.g3 { background:linear-gradient(135deg,#e60012,#a6000d); }
.g4 { background:linear-gradient(135deg,#009cad,#2d2d2d); }
.rankrow { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12px; }
.rankrow .num { width:16px; color:#8c8c8c; font-weight:700; }
.rankrow .num.top { color:#e60012; }
.rankrow .nm { flex:1; color:#464646; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tag-mini { background:#f3f3f3; color:#464646; border-radius:4px; font-size:11px; padding:3px 7px; margin-right:6px; }
</style></head>
<body>
<div class="topnav">
<span class="brand">Bahamut</span>
<span class="tab active">Home</span>
<span class="tab">GNN News</span>
<span class="tab">Forums</span>
<span class="tab">Games</span>
<div class="navspacer"></div>
<div class="searchbar">Search boards</div>
<span class="authlink">Login</span>
<span class="authlink">Register</span>
</div>
<div class="body">
<div class="col-main">
<div class="card">
<h3>GNN News <span class="more">More ›</span></h3>
<div class="thread"><span class="badge">HOT</span><span class="tt">New patch brings full controller remapping and 4K UI scaling</span><span class="cnt">2.1k</span></div>
<div class="thread"><span class="tt">Interview: the localization team behind this season's biggest RPG</span><span class="cnt">884</span></div>
<div class="thread"><span class="badge">HOT</span><span class="tt">Ranked season 12 begins next week with new map rotation</span><span class="cnt">1.6k</span></div>
<div class="thread"><span class="tt">Indie spotlight: five community favorites climbing the charts</span><span class="cnt">412</span></div>
<div class="thread"><span class="tt">Anime adaptation announced for long-running fantasy series</span><span class="cnt">905</span></div>
</div>
<div class="card">
<h3>Game Boards <span class="more">More ›</span></h3>
<div class="gamegrid">
<div class="gametile g1">Star Voyage</div>
<div class="gametile g2">Iron Frontline</div>
<div class="gametile g3">Crimson Order</div>
<div class="gametile g4">Nightfall Tactics</div>
</div>
</div>
</div>
<div class="col-side">
<div class="card">
<h3>Weekly Ranking</h3>
<div class="rankrow"><span class="num top">1</span><span class="nm">Star Voyage</span></div>
<div class="rankrow"><span class="num top">2</span><span class="nm">Crimson Order</span></div>
<div class="rankrow"><span class="num">3</span><span class="nm">Iron Frontline</span></div>
<div class="rankrow"><span class="num">4</span><span class="nm">Nightfall Tactics</span></div>
<div class="rankrow"><span class="num">5</span><span class="nm">Ember Rally</span></div>
</div>
<div class="card">
<h3>Categories</h3>
<span class="tag-mini">RPG</span><span class="tag-mini">Strategy</span><span class="tag-mini">ACG</span>
<span class="tag-mini">Mobile</span><span class="tag-mini">Anime</span><span class="tag-mini">Esports</span>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #cc0000; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #cc0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', Helvetica, -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
.announce { height:22px; background:#222222; color:#ffffff; font-size:11px; letter-spacing:0.2px;
display:flex; align-items:center; justify-content:center; }
nav.top { height:52px; border-bottom:1px solid #e0e0e0; display:flex; align-items:center;
padding:0 24px; gap:20px; }
.logo { font-size:20px; font-weight:700; letter-spacing:-0.5px; color:#313131; white-space:nowrap; }
.search { flex:1; height:32px; border:2px solid #e0e0e0; border-radius:4px; display:flex; align-items:center;
padding:0 0 0 12px; color:#767676; font-size:13px; }
.search span.go { margin-left:auto; height:32px; width:44px; background:#cc0000; color:#fff;
display:flex; align-items:center; justify-content:center; border-radius:0 3px 3px 0; font-weight:700; font-size:12px; }
.navlinks { display:flex; gap:14px; font-size:11px; font-weight:700; color:#313131; white-space:nowrap; }
.crumbs { padding:8px 24px 0; font-size:11px; color:#767676; }
.crumbs b { color:#313131; }
main { display:flex; padding:12px 24px 0; gap:28px; height:456px; }
.gallery { width:400px; display:flex; flex-direction:column; gap:8px; }
.frame-main { flex:1; border:1px solid #f0f0f0; position:relative;
background:
linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.0) 60%),
radial-gradient(circle at 30% 20%, #e08a2b, transparent 55%),
radial-gradient(circle at 75% 70%, #2b5f8a, transparent 55%),
linear-gradient(160deg, #1a1a2e, #16213e 60%, #0f3460); }
.frame-main::before { content:'MOVIE STILL PRINT'; position:absolute; bottom:10px; left:10px;
background:rgba(255,255,255,0.92); color:#313131; font-size:10px; font-weight:700; padding:3px 7px; letter-spacing:0.3px; }
.sale-badge { position:absolute; top:0; left:0; background:#cc0000; color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.3px; text-transform:uppercase; padding:3px 8px; }
.thumbs { display:flex; gap:6px; }
.thumbs div { width:60px; height:44px; border:1px solid #e0e0e0; background:#f7f7f7; }
.thumbs div:nth-child(1) { background:linear-gradient(160deg,#1a1a2e,#0f3460); }
.thumbs div:nth-child(2) { background:linear-gradient(160deg,#0f3460,#e08a2b); }
.thumbs div:nth-child(3) { background:linear-gradient(160deg,#2b5f8a,#1a1a2e); }
.thumbs div:nth-child(4) { background:#eeeeee; }
.info { flex:1; display:flex; flex-direction:column; }
.title { font-size:20px; font-weight:700; line-height:1.3; margin:0 0 4px; }
.sub { font-size:12px; color:#767676; margin-bottom:8px; }
.stars { font-size:12px; color:#f5a623; display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.stars span.count { color:#767676; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:26px; font-weight:700; color:#cc0000; }
.was { font-size:13px; color:#767676; text-decoration:line-through; }
.save { font-size:11px; font-weight:700; color:#fff; background:#cc0000; padding:2px 6px; }
.field { margin-bottom:12px; }
.field label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
color:#313131; margin-bottom:6px; }
.pills { display:flex; gap:8px; flex-wrap:wrap; }
.pill { border:1px solid #e0e0e0; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:700; color:#313131; }
.pill.active { background:#cc0000; color:#fff; border-color:#cc0000; }
.swatch { border:2px solid #e0e0e0; padding:5px 12px; font-size:11px; font-weight:700; }
.swatch.active { border-color:#cc0000; color:#cc0000; }
.cta { margin-top:auto; display:flex; gap:8px; }
.btn-cart { flex:1; background:#cc0000; color:#fff; border:none; border-radius:4px; height:44px;
font-size:14px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.btn-save { width:44px; height:44px; border:1px solid #e0e0e0; border-radius:4px; display:flex;
align-items:center; justify-content:center; font-size:16px; color:#313131; }
.trust { display:flex; gap:16px; margin-top:12px; font-size:11px; color:#767676; }
.trust b { color:#313131; }
footer { border-top:1px solid #e0e0e0; margin-top:10px; padding:10px 24px; display:flex;
justify-content:space-between; font-size:11px; color:#767676; background:#222222; color:#cccccc; }
footer b { color:#fff; }
</style></head>
<body>
<div class="announce">FREE SHIPPING ON ORDERS OVER $79 · 500,000+ PRINTS IN STOCK</div>
<nav class="top">
<div class="logo">Allposters</div>
<div class="search">Search movies, art, photos, and more…<span class="go">GO</span></div>
<div class="navlinks"><span>MOVIES</span><span>MUSIC</span><span>FINE ART</span><span>PHOTOGRAPHY</span></div>
</nav>
<div class="crumbs">Home › Movies › Sci-Fi › <b>Nebula Drift (2019)</b></div>
<main>
<div class="gallery">
<div class="frame-main"><span class="sale-badge">SALE</span></div>
<div class="thumbs"><div></div><div></div><div></div><div></div></div>
</div>
<div class="info">
<p class="sub">MOVIE POSTER</p>
<h1 class="title">Nebula Drift — Regular Style Print</h1>
<div class="stars">★★★★★ <span class="count">(1,204 reviews)</span></div>
<div class="price-row">
<span class="price">$24.99</span>
<span class="was">$34.99</span>
<span class="save">SAVE 29%</span>
</div>
<div class="field">
<label>Size</label>
<div class="pills">
<span class="pill">11x17</span>
<span class="pill active">24x36</span>
<span class="pill">27x40</span>
</div>
</div>
<div class="field">
<label>Format</label>
<div class="pills">
<span class="swatch active">Poster</span>
<span class="swatch">Framed</span>
<span class="swatch">Canvas</span>
</div>
</div>
<div class="cta">
<button class="btn-cart">Add to Cart</button>
<div class="btn-save">♡</div>
</div>
<div class="trust"><span><b>Ships in 1–2 days</b></span><span><b>Satisfaction guaranteed</b></span></div>
</div>
</main>
<footer>
<span>© Allposters</span>
<span>Help · Track Order · Returns</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3d00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3d00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa287; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3d00; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3d00; color: #f5f5f5;
border: 1px solid #fd5a27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa287; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e44327; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:'Pretendard Std Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e4e4e4; }
.brand { font-size:18px; font-weight:700; margin:0; }
.search { background:#f5f5f5; border-radius:40px; padding:8px 15px 8px 32px; font-size:15px; font-weight:500;
color:#000; width:300px; }
.icon { width:36px; height:36px; border-radius:8px; border:1px solid #e4e4e4; }
.hero { padding:22px 40px 16px; }
.hero h1 { font-size:20px; font-weight:700; margin:0 0 14px; }
.cats { display:flex; gap:10px; }
.cat { background:#ffffff; border:1px solid #e4e4e4; border-radius:8px; height:32px; padding:0 16px;
font-size:14px; display:flex; align-items:center; color:#000; }
.cat.on { background:#000; color:#fff; border-color:#000; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:14px 40px 20px; }
.tile { border-radius:6px; overflow:hidden; }
.photo { height:100px; border-radius:6px; }
.p1 { background:linear-gradient(135deg,#ffe8d6,#ff3d0033); }
.p2 { background:linear-gradient(135deg,#dceeea,#26a86233); }
.p3 { background:linear-gradient(135deg,#f0e6ff,#640faf22); }
.p4 { background:linear-gradient(135deg,#fff0f0,#fc555522); }
.tile .t { font-size:14px; font-weight:700; margin-top:8px; }
.tile .m { font-size:12px; color:#666666; margin-top:2px; }
.tile .star { font-size:12px; color:#ff3d00; font-weight:700; margin-top:4px; }
.reserve { background:#002d4e; margin:0 40px; border-radius:8px; padding:22px 26px; display:flex;
justify-content:space-between; align-items:center; }
.reserve h2 { color:#fff; font-size:16px; font-weight:700; margin:0; }
.reserve p { color:#a8c2d4; font-size:13px; margin:4px 0 0; }
.reserve button { background:#ff3d00; color:#fff; border:none; border-radius:15px; padding:10.5px 24px; font-size:16px; }
</style></head>
<body>
<nav>
<p class="brand">CatchTable</p>
<div class="search">Where do you want to eat?</div>
<div class="icon"></div>
</nav>
<section class="hero">
<h1>Tonight's best tables</h1>
<div class="cats">
<span class="cat on">All</span><span class="cat">Korean BBQ</span><span class="cat">Omakase</span>
<span class="cat">Italian</span><span class="cat">Cafe</span>
</div>
</section>
<section class="grid">
<div class="tile"><div class="photo p1"></div><div class="t">Hanwoo House</div><div class="m">Gangnam · KRW $$$</div><div class="star">★ 4.8 (2,140)</div></div>
<div class="tile"><div class="photo p2"></div><div class="t">Omakase Sui</div><div class="m">Seongsu · KRW $$$$</div><div class="star">★ 4.9 (860)</div></div>
<div class="tile"><div class="photo p3"></div><div class="t">Osteria Blu</div><div class="m">Itaewon · KRW $$$</div><div class="star">★ 4.7 (1,320)</div></div>
<div class="tile"><div class="photo p4"></div><div class="t">Morning Bloom Cafe</div><div class="m">Yeonnam · KRW $$</div><div class="star">★ 4.6 (940)</div></div>
</section>
<section class="reserve">
<div><h2>Own a restaurant?</h2><p>Manage reservations, waitlists, and orders in one place.</p></div>
<button>See merchant plans</button>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #14161a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #14161a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #909192; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcfcfc; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #14161a; color: #fcfcfc;
border: 1px solid #fcfcfc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #14161a; color: #f5f5f5;
border: 1px solid #383a3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #909192; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #393b3e; color: #fcfcfc;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfcfc; color:#14161a; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #e5e7eb; }
.brand { font-family:"Playfair Display", Georgia, serif; font-size:20px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#6c727f; }
.btn { background:#14161a; color:#fafafa; border-radius:6px; padding:8px 16px; font-size:14px; font-weight:500; }
.hero { padding:40px 36px 26px; display:flex; align-items:center; gap:30px; }
.hero-txt { flex:1; }
.hero h1 { font-family:"Playfair Display", Georgia, serif; font-size:42px; font-weight:400; letter-spacing:0.4px; line-height:1.2; margin:0 0 16px; }
.hero p { font-size:16px; color:#6c727f; line-height:1.625; margin:0 0 20px; max-width:400px; }
.btn-cta { display:inline-block; background:#14161a; color:#fafafa; border-radius:6px; padding:12px 32px; font-size:16px; font-weight:500; }
.hero-visual { width:250px; height:170px; position:relative; flex-shrink:0; }
.ring { position:absolute; border-radius:50%; border:1px solid #e8eaed; }
.r1 { width:170px; height:170px; top:0; left:40px; }
.r2 { width:110px; height:110px; top:30px; left:70px; background:#f1f2f4; }
.r3 { width:60px; height:60px; top:55px; left:95px; background:#14161a; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 36px 26px; }
.card { background:#fafafa; border:1px solid #e5e7eb; border-radius:8px; padding:22px; }
.card h3 { font-family:"Playfair Display", Georgia, serif; font-size:20px; font-weight:600; margin:0 0 8px; }
.card p { font-size:14px; color:#6c727f; line-height:1.625; margin:0; }
.quote { margin:0 36px 24px; padding:20px 24px; border-left:2px solid #14161a; background:#f1f2f4; }
.quote p { font-family:"Playfair Display", Georgia, serif; font-size:18px; font-style:italic; margin:0; color:#14161a; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e5e7eb; padding:12px 36px;
display:flex; justify-content:space-between; font-size:12px; color:#6c727f; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Riiid</span>
<div class="navlinks"><span>Santa</span><span>Research</span><span>Careers</span><span>About</span></div>
<span class="btn">Try Santa</span>
</nav>
<section class="hero">
<div class="hero-txt">
<h1>AI that grows humans</h1>
<p>Personalized learning built on adaptive AI — helping every learner reach their own pace of mastery.</p>
<span class="btn-cta">Get started</span>
</div>
<div class="hero-visual"><span class="ring r1"></span><span class="ring r2"></span><span class="ring r3"></span></div>
</section>
<div class="cards">
<div class="card"><h3>Adaptive Pathways</h3><p>Every question adjusts to what the learner already knows.</p></div>
<div class="card"><h3>Diagnostic Precision</h3><p>Pinpoint the exact concept holding a learner back.</p></div>
<div class="card"><h3>Human in the Loop</h3><p>Tutors and teachers stay central — AI amplifies, not replaces.</p></div>
</div>
<div class="quote"><p>"Education should meet each learner exactly where they are."</p></div>
<footer>
<span>© Riiid</span>
<span>Santa · Research · Careers · About</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffde00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffde00;
border: 1px solid #ffde00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292400; color: #ffde00;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#000; padding:20px 0 0; position:relative; }
.topbar { display:flex; justify-content:space-between; padding:0 16px; margin-bottom:14px; align-items:center; }
.mask { color:#FFDE00; font-weight:800; font-size:16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.tile { position:relative; aspect-ratio:1; overflow:hidden; }
.g1 { background:linear-gradient(160deg,#7a4a6a,#2a1a24); }
.g2 { background:linear-gradient(160deg,#4a6a7a,#1a222a); }
.g3 { background:linear-gradient(160deg,#8a6a4a,#2a201a); }
.g4 { background:linear-gradient(160deg,#5a7a5a,#1a2a1a); }
.g5 { background:linear-gradient(160deg,#7a5a8a,#241a2a); }
.g6 { background:linear-gradient(160deg,#6a4a4a,#221818); }
.scrim { position:absolute; left:0; right:0; bottom:0; height:45%;
background:linear-gradient(transparent, rgba(0,0,0,0.65)); }
.tname { position:absolute; bottom:14px; left:8px; font-size:12px; font-weight:700; }
.tdist { position:absolute; bottom:3px; left:8px; font-size:9px; font-weight:700; letter-spacing:0.2px; }
.onl { position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:#4CD964; border:2px solid #000; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:52px; background:rgba(0,0,0,0.94);
border-top:0.5px solid #2C2C2C; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#999; text-align:center; }
.tab.on { color:#FFDE00; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; background:#000; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.brand span { color:#FFDE00; }
.tag { font-size:14px; color:#999; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:0; border:1px solid #2C2C2C; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#999; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#999; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:700; padding:6px 12px; border-radius:999px;
background:#1A1A1A; border:1px solid #2C2C2C; color:#999; }
.footer { margin-top:auto; border-top:1px solid #2C2C2C; padding-top:16px; font-size:11px; color:#5C5C5C; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="topbar"><span class="mask">▲</span><span style="font-size:11px;color:#999">Filter</span></div>
<div class="grid">
<div class="tile g1"><div class="scrim"></div><div class="onl"></div><span class="tname">Alex</span><span class="tdist">220 ft</span></div>
<div class="tile g2"><div class="scrim"></div><span class="tname">Jordan</span><span class="tdist">0.4 mi</span></div>
<div class="tile g3"><div class="scrim"></div><div class="onl"></div><span class="tname">Sam</span><span class="tdist">0.6 mi</span></div>
<div class="tile g4"><div class="scrim"></div><span class="tname">Chris</span><span class="tdist">0.8 mi</span></div>
<div class="tile g5"><div class="scrim"></div><div class="onl"></div><span class="tname">Kai</span><span class="tdist">1.1 mi</span></div>
<div class="tile g6"><div class="scrim"></div><span class="tname">Theo</span><span class="tdist">1.3 mi</span></div>
</div>
<div class="tabbar"><div class="tab on">Browse</div><div class="tab">Taps</div><div class="tab">Messages</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Grindr (iOS)<span>.</span></h1>
<p class="tag">A true-black wall of photos, sorted nearest-first — one accent color, one presence dot, zero decoration.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#000000"></div><small>#000000</small></div>
<div class="sw"><div class="chip2" style="background:#FFDE00"></div><small>#FFDE00</small></div>
<div class="sw"><div class="chip2" style="background:#4CD964"></div><small>#4CD964</small></div>
<div class="sw"><div class="chip2" style="background:#1A1A1A"></div><small>#1A1A1A</small></div>
<div class="sw"><div class="chip2" style="background:#FF3B30"></div><small>#FF3B30</small></div>
</div>
<div class="typeblock">
<div class="t1">220 ft</div>
<div class="t2">Inter · 400/700 only · overlay text always bold + scrimmed</div>
</div>
<div class="taglist">
<span>3-col cascade grid</span><span>2pt gutter, 0pt radius</span><span>Online presence dot</span>
<span>Distance scrim label</span><span>Black-on-yellow Tap</span>
</div>
<div class="footer">Pure black #000000 · yellow reserved for the Tap action + active tab only</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #25d366; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #25d366; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #1a6837; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #075e54; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #25d366; color: #075e54;
border: 1px solid #075e54; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #25d366; color: #111111;
border: 1px solid #22b458; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #1a6837; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #20c063; color: #075e54;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ECE5DD; color:#111B21; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; }
header { height:64px; background:#F0F2F5; border-bottom:1px solid #E9EDEF; flex:none;
display:flex; align-items:center; padding:0 22px; gap:12px; }
header .back { font-size:20px; color:#075E54; }
.avatar { width:38px; height:38px; border-radius:50%;
background:linear-gradient(135deg,#128C7E,#075E54); display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:700; font-size:14px; }
.who { flex:1; }
.who .name { font-size:16px; font-weight:600; margin:0; }
.who .status { font-size:12px; color:#25D366; margin:1px 0 0; }
.hicons { display:flex; gap:22px; color:#075E54; font-size:17px; }
.thread { flex:1; position:relative; padding:18px 60px; overflow:hidden;
background-image:
radial-gradient(rgba(7,94,84,0.05) 1.4px, transparent 1.4px),
radial-gradient(rgba(7,94,84,0.045) 1.4px, transparent 1.4px);
background-size:64px 64px, 64px 64px;
background-position:0 0, 32px 32px; }
.daypill { text-align:center; margin:2px 0 16px; }
.daypill span { background:rgba(255,255,255,0.75); color:#54636D; font-size:12px; font-weight:600;
padding:5px 14px; border-radius:8px; }
.row { display:flex; margin-bottom:8px; }
.row.out { justify-content:flex-end; }
.bubble { max-width:420px; padding:8px 12px; font-size:15px; line-height:1.35; position:relative; }
.bubble.in { background:#FFFFFF; border-radius:12px 12px 12px 0; }
.bubble.out { background:#D9FDD3; border-radius:12px 12px 0 12px; }
.bubble .meta { display:flex; justify-content:flex-end; gap:4px; margin-top:4px; font-size:11px; color:#667781;
align-items:center; }
.bubble .meta .tick { color:#53BDEB; font-size:13px; }
.voice { display:flex; align-items:center; gap:10px; width:260px; }
.voice .pb { width:34px; height:34px; border-radius:50%; background:#25D366; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:13px; flex:none; }
.voice .wave { flex:1; display:flex; align-items:center; gap:2px; height:20px; }
.voice .wave span { width:2px; background:#25D366; border-radius:1px; }
.voice .wave span.dim { background:#8696A0; }
.voice .dur { font-size:11px; color:#667781; }
.encbanner { text-align:center; margin:0 0 16px; }
.encbanner span { background:#FFF5C4; color:#54636D; font-size:12px; font-weight:500; padding:8px 16px;
border-radius:8px; display:inline-block; max-width:440px; }
.composer { flex:none; height:60px; background:#FFFFFF; border-top:1px solid #E9EDEF;
display:flex; align-items:center; padding:0 16px; gap:12px; }
.composer .ic { font-size:20px; color:#8696A0; }
.field { flex:1; background:#F0F2F5; border-radius:20px; height:40px; display:flex; align-items:center;
padding:0 16px; color:#8696A0; font-size:15px; }
.sendbtn { width:36px; height:36px; border-radius:50%; background:#25D366; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:15px; }
</style></head>
<body>
<div class="app">
<header>
<span class="back">‹</span>
<div class="avatar">JW</div>
<div class="who">
<p class="name">Jihoon</p>
<p class="status">typing…</p>
</div>
<div class="hicons"><span>📹</span><span>📞</span><span>⋮</span></div>
</header>
<div class="thread">
<div class="daypill"><span>WhatsApp (iOS)</span></div>
<div class="encbanner"><span>🔒 Messages are end-to-end encrypted. No one outside of this chat can read them.</span></div>
<div class="daypill"><span>Today</span></div>
<div class="row"><div class="bubble in">Haven't packed away the camping tent yet, right?<div class="meta">10:04</div></div></div>
<div class="row out"><div class="bubble out">Not yet! Still sitting in the trunk lol<div class="meta">10:05 <span class="tick">✓✓</span></div></div></div>
<div class="row"><div class="bubble in">
<div class="voice">
<div class="pb">▶</div>
<div class="wave">
<span style="height:6px"></span><span style="height:14px"></span><span style="height:9px"></span>
<span style="height:18px"></span><span style="height:11px"></span><span style="height:7px"></span>
<span class="dim" style="height:13px"></span><span class="dim" style="height:8px"></span>
<span class="dim" style="height:15px"></span><span class="dim" style="height:6px"></span>
</div>
<div class="dur">0:23</div>
</div>
<div class="meta">10:06</div>
</div></div>
<div class="row out"><div class="bubble out">Sounds great, I'll pick you up at 6<div class="meta">10:07 <span class="tick">✓✓</span></div></div></div>
<div class="row"><div class="bubble in">Deal! Bring some coffee too ☕<div class="meta">10:08</div></div></div>
</div>
<div class="composer">
<span class="ic">😊</span>
<div class="field">Message</div>
<span class="ic">📎</span>
<span class="ic">📷</span>
<div class="sendbtn">🎙</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #209cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #209cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95cdfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff874d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #209cff; color: #000000;
border: 1px solid #ff874d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #209cff; color: #f5f5f5;
border: 1px solid #42aafd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95cdfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4499e3; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#333333; box-sizing:border-box;
font-family:"PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.nav { height:56px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.nav .brand { font-weight:700; font-size:18px; color:#209cff; }
.nav .links { display:flex; gap:22px; font-size:16px; }
.nav .links .cur { font-weight:700; }
.nav .links .off { color:#666; font-weight:400; }
.search { width:200px; height:36px; border:1px solid #cbcbcb; border-radius:4px; padding:0 10px; font-size:13px; color:#686868;
display:flex; align-items:center; }
.hero { margin:18px 28px 0; height:180px; border-radius:20px; background:linear-gradient(120deg,#209cff,#5cbcff);
display:flex; align-items:center; justify-content:space-between; padding:0 40px; color:#fff; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%;
background:rgba(255,255,255,0.15); }
.hero h1 { font-size:32px; font-weight:700; margin:0 0 8px; line-height:1.4; position:relative; z-index:2; }
.hero p { font-size:16px; margin:0; opacity:0.95; position:relative; z-index:2; }
.herobtn { background:#fff; color:#209cff; border-radius:100px; height:50px; padding:0 35px; font-size:16px; font-weight:700;
display:flex; align-items:center; position:relative; z-index:2; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:22px 28px 0; }
.card { background:#fff; border-radius:16px; padding:20px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.08); position:relative; }
.card .ic { width:44px; height:44px; border-radius:12px; margin:0 auto 10px; }
.i1{background:#e4f2ff;} .i2{background:#fff0e6;} .i3{background:#e4f2ff;} .i4{background:#fff0e6;}
.card h4 { font-size:15px; font-weight:700; margin:0 0 4px; }
.card p { font-size:12px; color:#666; margin:0; }
.badge { position:absolute; top:12px; right:12px; background:#ff874d; color:#fff; font-size:10px; font-weight:700;
border-radius:4px; padding:2px 6px; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Chunghwa Telecom</div>
<div class="links"><span class="cur">Personal & Home</span><span class="off">Business Services</span><span class="off">International Services</span><span class="off">About Us</span></div>
<div class="search">Search services…</div>
</nav>
<div class="hero">
<div>
<h1>5G Unlimited Data<br>Limited-Time Offer</h1>
<p>New sign-ups get up to NT$8,000 off a phone</p>
</div>
<div class="herobtn">Learn More</div>
</div>
<div class="cards">
<div class="card"><div class="ic i1"></div><h4>5G Mobile Network</h4><p>Unlimited Plan</p></div>
<div class="card"><span class="badge">Limited</span><div class="ic i2"></div><h4>HiNet Fiber</h4><p>Up to 1G speed</p></div>
<div class="card"><div class="ic i3"></div><h4>MOD Streaming</h4><p>4K Channel Package</p></div>
<div class="card"><div class="ic i4"></div><h4>Enterprise Cloud</h4><p>ICT Integrated Services</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f0f0; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f0f0; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #334499; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #f2f0f0; color: #334499;
border: 1px solid #334499; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #bab8b8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #22522f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f0f0; color:#121212; box-sizing:border-box;
font-family:'Josefin Sans', 'sofia-pro', sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'Ivy Presto', 'ivypresto-display', serif; }
nav { height:64px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-family:'Ivy Presto', serif; font-size:24px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#595959; }
.navlinks span:first-child { color:#334499; }
.navicons { display:flex; align-items:center; gap:16px; }
.cart { position:relative; width:22px; height:22px; border:2px solid #f8da52; border-radius:5px; }
.cart::after { content:'3'; position:absolute; top:-8px; right:-9px; width:16px; height:16px; border-radius:999px;
background:#334499; color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; }
.hero { padding:30px 36px; display:flex; align-items:center; gap:34px; }
.hero-copy { flex:1.2; }
.hero h1 { font-size:38px; font-weight:400; line-height:1.15; letter-spacing:-0.5px; margin:0 0 10px; }
.hero p { font-size:14px; color:#1f1c1a; line-height:1.5; margin:0 0 16px; max-width:400px; }
.row { display:flex; gap:10px; }
.btn-primary { background:#334499; color:#fff; border:none; border-radius:8px; padding:14px 26px;
font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; height:46px; }
.btn-gold { background:#f8da52; color:#121212; border:none; border-radius:8px; padding:14px 26px;
font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; height:46px; }
.hero-visual { flex:1; height:170px; border-radius:20px; position:relative; overflow:hidden;
background:radial-gradient(circle at 30% 30%, #fef3c7, #f8da52 60%, #d9a f6d); }
.hero-visual { background: radial-gradient(circle at 30% 30%, #fff3c1, #f8da52 55%, #c9962e 100%); }
.hero-visual::before { content:''; position:absolute; width:80px; height:80px; border-radius:50%;
background:#334499; opacity:0.16; right:20px; bottom:-20px; }
.section { padding:14px 36px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-family:'Ivy Presto', serif; font-size:24px; font-weight:400; margin:0; }
.sec-head span { font-size:12px; font-weight:600; color:#334499; letter-spacing:0.5px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#ffffff; border-radius:20px; overflow:hidden; padding-bottom:14px; }
.thumb { height:110px; position:relative; border-radius:20px 20px 0 0; }
.t1 { background:linear-gradient(160deg,#fff3c1,#f8da52); }
.t2 { background:linear-gradient(160deg,#d7e6da,#22522f22); background:linear-gradient(160deg,#e4f0e7,#a9cdb1); }
.t3 { background:linear-gradient(160deg,#e3e8f7,#a9b8e8); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.8px;
text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.badge.gold { background:#f8da52; color:#121212; }
.badge.green { background:#22522f; color:#fff; }
.cbody { padding:10px 14px 0; }
.stars { color:#f8da52; font-size:12px; letter-spacing:1px; }
.card h3 { font-family:'Ivy Presto', serif; font-size:20px; font-weight:400; margin:4px 0 2px; }
.card .price { font-size:14px; color:#1f1c1a; margin:0 0 8px; }
.addbtn { width:100%; background:#f2f0f0; color:#334499; border:none; border-radius:8px; padding:9px;
font-size:11px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; }
footer { background:#121212; color:#858585; font-size:12px; padding:16px 36px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#858585; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Beekeeper S Naturals</p>
<div class="navlinks"><span>Shop All</span><span>Immunity</span><span>Kids</span><span>Our Bees</span></div>
<div class="navicons"><div class="cart"></div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1 class="serif">Nature's medicine cabinet, backed by bees</h1>
<p>Propolis, royal jelly, and raw honey — clean remedies made without seed oils, fillers, or refined sugar.</p>
<div class="row">
<button class="btn-primary">Shop Now</button>
<button class="btn-gold">Subscribe & Save</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2 class="serif">Best Sellers</h2><span>Shop All →</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge gold">Sale</span></div>
<div class="cbody">
<div class="stars">★★★★★</div>
<h3 class="serif">Propolis Throat Spray</h3>
<p class="price">$24.99</p>
<button class="addbtn">Add to Cart</button>
</div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge green">Subscribe</span></div>
<div class="cbody">
<div class="stars">★★★★★</div>
<h3 class="serif">B.LXR Brain Fuel</h3>
<p class="price">$44.99</p>
<button class="addbtn">Add to Cart</button>
</div>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="cbody">
<div class="stars">★★★★☆</div>
<h3 class="serif">Raw Manuka Honey</h3>
<p class="price">$32.00</p>
<button class="addbtn">Add to Cart</button>
</div>
</div>
</div>
</section>
<footer>
<span>© Beekeeper S Naturals</span>
<div><a href="#">Sustainability</a><a href="#">Wholesale</a><a href="#">Reviews</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #242428; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #242428; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #979799; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242428; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #242428; color: #f5f5f5;
border: 1px solid #454549; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979799; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2c2e48; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f6f3; color:#000000; box-sizing:border-box;
font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:16px; font-weight:600; color:#716f6d; }
.btn { background:#242428; color:#fff; border:none; border-radius:9999px; height:40px; padding:0 22px; font-size:16px; font-weight:400; }
.hero { text-align:center; padding:20px 40px 20px; }
.hero h1 { font-size:44px; font-weight:600; line-height:1.35; letter-spacing:-.5px; margin:0 0 10px; }
.hero p { font-size:18px; color:#716f6d; margin:0 0 18px; line-height:1.4; }
.widget-stage { display:flex; justify-content:center; padding:6px 40px 20px; }
.phone { width:300px; height:220px; background:#3a3530; border-radius:35px; padding:16px; position:relative; }
.chatbox { background:#fff; border-radius:16px; height:100%; padding:14px; display:flex; flex-direction:column; gap:8px; }
.bubble { max-width:70%; border-radius:12px; padding:8px 12px; font-size:12px; }
.bubble.them { background:#f0efec; align-self:flex-start; color:#000; }
.bubble.me { background:#242428; align-self:flex-end; color:#fff; }
.fab { position:absolute; bottom:-14px; right:6px; width:52px; height:52px; border-radius:50%; background:#242428;
display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; }
.tabs { display:flex; gap:10px; justify-content:center; padding:0 40px 14px; }
.tab { border-radius:6px; padding:8px 16px; font-size:16px; font-weight:600; color:#716f6d; }
.tab.on { color:#000; background:#fff; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px 24px; }
.card { background:#fff; border:1px solid #e4e4e5; border-radius:35px; padding:20px; }
.card h3 { font-size:15px; font-weight:700; margin:0 0 6px; }
.card p { font-size:13px; color:#716f6d; margin:0; line-height:1.5; }
</style></head>
<body>
<nav>
<p class="brand">Channel Talk</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span></div>
<button class="btn">Start for Free</button>
</nav>
<section class="hero">
<h1>Every conversation with your customers,<br>in one channel</h1>
<p>From support to marketing to AI auto-response — Channel Talk is all you need.</p>
</section>
<section class="widget-stage">
<div class="phone">
<div class="chatbox">
<div class="bubble them">Hello! How can I help you today? 😊</div>
<div class="bubble me">I'd like to track my shipment</div>
<div class="bubble them">Share your order number and I'll check right away.</div>
</div>
<div class="fab">💬</div>
</div>
</section>
<section class="tabs">
<span class="tab on">Support</span><span class="tab">Marketing</span><span class="tab">AI Chatbot</span>
</section>
<section class="cards">
<div class="card"><h3>Live Support</h3><p>Respond to customer inquiries instantly while your whole team collaborates.</p></div>
<div class="card"><h3>Personalized Marketing</h3><p>Send messages at exactly the right time, based on customer data.</p></div>
<div class="card"><h3>AI Auto-Response</h3><p>AI handles repetitive questions first, reducing your team's workload.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #bb1919; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #bb1919;
border: 1px solid #bb1919; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e0404; color: #bb1919;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202224; box-sizing:border-box;
font-family:"BBC Reith Sans", Arial, Helvetica, freesans, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:38px; background:#000000; display:flex; align-items:center; padding:0 28px; }
.topbar .logo { color:#ffffff; font-size:14px; font-weight:700; letter-spacing:0.02em; }
.topbar .logo b { color:#eb0000; }
nav { height:52px; display:flex; align-items:center; padding:0 28px; gap:22px; border-bottom:1px solid #e6e8ea; }
.brand { font-size:20px; font-weight:700; margin:0 22px 0 0; }
.navlinks { display:flex; gap:20px; flex:1; }
.navlinks span { font-size:14px; font-weight:500; }
.navlinks span.active { font-weight:700; border-bottom:3px solid #000000; padding-bottom:14px; }
.register { background:#000000; color:#ffffff; border:2px solid #000000; padding:6px 14px; font-size:14px; font-weight:500; }
.signin { background:transparent; color:#000000; border:2px solid transparent; padding:6px 14px; font-size:14px; font-weight:500; margin-left:8px; }
.content { padding:20px 28px; height:496px; display:flex; gap:24px; }
.lead { width:560px; }
.live { display:inline-block; background:#bb1919; color:#ffffff; font-size:12px; font-weight:700; padding:2px 6px; margin-bottom:10px; }
.lead h1 { font-size:28px; font-weight:700; line-height:1.25; margin:0 0 10px; max-width:520px; }
.lead .byline { font-size:13px; color:#545658; margin:0 0 14px; }
.leadimg { width:100%; height:220px; background:linear-gradient(135deg,#3a3c3e,#8a8d90); margin-bottom:10px; }
.lead p.body { font-size:16px; line-height:1.5; color:#3a3c3e; max-width:65ch; margin:0; }
.side { flex:1; }
.side h3 { font-size:14px; font-weight:700; text-transform:uppercase; border-bottom:2px solid #bb1919; padding-bottom:8px; margin:0 0 10px; }
.teaser { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #e6e8ea; }
.teaser .img { width:80px; height:56px; background:linear-gradient(135deg,#dcdcdc,#b5b5b5); flex-shrink:0; }
.teaser h4 { font-size:14px; font-weight:400; margin:0 0 4px; line-height:1.3; }
.teaser span { font-size:12px; color:#545658; }
</style></head>
<body>
<div class="topbar"><span class="logo">bbc</span></div>
<nav>
<p class="brand">BBC</p>
<div class="navlinks"><span class="active">News</span><span>Sport</span><span>Weather</span><span>iPlayer</span><span>Sounds</span></div>
<button class="signin">Sign In</button>
<button class="register">Register</button>
</nav>
<div class="content">
<div class="lead">
<span class="live">LIVE</span>
<h1>Global markets steady as central banks signal coordinated rate pause</h1>
<p class="byline">By Business Correspondent · Reith Sans · Updated 3 hours ago</p>
<div class="leadimg"></div>
<p class="body">Policymakers across three continents indicated a shared pause on rate changes this quarter, easing pressure on currency markets and giving analysts room to reassess growth forecasts for the year ahead.</p>
</div>
<div class="side">
<h3>More stories</h3>
<div class="teaser"><div class="img"></div><div><h4>Coastal cities test new flood defences ahead of storm season</h4><span>Science · 1 hr ago</span></div></div>
<div class="teaser"><div class="img"></div><div><h4>Championship final draws record streaming audience</h4><span>Sport · 2 hrs ago</span></div></div>
<div class="teaser"><div class="img"></div><div><h4>New Reith lecture series to explore digital trust</h4><span>Culture · 4 hrs ago</span></div></div>
<div class="teaser"><div class="img"></div><div><h4>Weather: Mild week ahead across the UK</h4><span>Weather · 5 hrs ago</span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f0ee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f0ee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #777574; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141413; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f3f0ee; color: #141413;
border: 1px solid #141413; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f3f0ee; color: #111111;
border: 1px solid #cfcccb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777574; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cfcdcb; color: #141413;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F3F0EE; color:#141413; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.navpill { margin:16px auto 0; width:820px; background:rgba(255,255,255,0.92); border-radius:999px;
box-shadow:rgba(0,0,0,0.04) 0px 4px 24px 0px; display:flex; align-items:center; justify-content:space-between;
padding:12px 28px; }
.brand { font-size:14px; font-weight:700; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:26px; font-size:12px; font-weight:500; color:#141413; }
.searchdot { width:30px; height:30px; border-radius:50%; border:1px solid #141413; display:flex; align-items:center; justify-content:center; font-size:11px; }
.watermark { position:relative; text-align:center; margin-top:6px; }
.watermark .ghost { font-size:56px; font-weight:500; letter-spacing:-1.1px; color:#E8E2DA; margin:0; line-height:1; }
.orbitwrap { position:relative; height:260px; margin:-30px 20px 0; }
.portrait { position:absolute; width:150px; height:150px; border-radius:50%; }
.p1 { left:70px; top:20px; background:radial-gradient(circle at 35% 30%, #F37338, #9A3A0A 75%); }
.p2 { left:400px; top:70px; background:radial-gradient(circle at 40% 35%, #F3D6B0, #CF4500 75%); }
.p3 { left:700px; top:10px; background:radial-gradient(circle at 35% 30%, #D8CFC2, #696969 75%); }
.sat { position:absolute; width:40px; height:40px; border-radius:50%; background:#fff; display:flex; align-items:center;
justify-content:center; font-size:14px; color:#141413; }
.sat1 { left:190px; top:130px; } .sat2 { left:520px; top:180px; } .sat3 { left:820px; top:120px; }
.cap { position:absolute; width:150px; text-align:center; font-size:11px; }
.cap1 { left:70px; top:178px; } .cap2 { left:400px; top:228px; } .cap3 { left:700px; top:168px; }
.cap .eyebrow { font-size:10px; font-weight:700; letter-spacing:0.56px; text-transform:uppercase; color:#CF4500; }
.cap h3 { font-size:14px; font-weight:500; margin:2px 0 0; letter-spacing:-0.2px; }
.arc { position:absolute; top:0; left:0; width:960px; height:260px; }
.ctarow { display:flex; justify-content:center; gap:12px; margin-top:8px; }
.btn-ink { background:#141413; color:#F3F0EE; border:none; border-radius:20px; padding:8px 24px; font-size:13px; font-weight:500; }
.btn-outline { background:#fff; color:#141413; border:1.5px solid #141413; border-radius:20px; padding:8px 24px; font-size:13px; font-weight:400; }
footer { position:absolute; left:0; right:0; bottom:0; background:#141413; color:#fff; padding:14px 40px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; }
footer .h2mini { font-size:16px; font-weight:500; }
</style></head>
<body>
<nav class="navpill">
<span class="brand">Mastercard</span>
<div class="navlinks"><span>For you</span><span>For business</span><span>For the world</span><span>News</span></div>
<span class="searchdot">⌕</span>
</nav>
<div class="watermark"><p class="ghost">SERVICES</p></div>
<div class="orbitwrap">
<svg class="arc" viewBox="0 0 960 260"><path d="M145 95 Q 300 40 400 145" stroke="#F37338" stroke-width="1.3" fill="none" opacity="0.7"/>
<path d="M475 145 Q 620 90 700 85" stroke="#F37338" stroke-width="1.3" fill="none" opacity="0.7"/></svg>
<div class="portrait p1"></div>
<div class="sat sat1">→</div>
<div class="cap cap1"><span class="eyebrow">• Services</span><h3>Payments network</h3></div>
<div class="portrait p2"></div>
<div class="sat sat2">→</div>
<div class="cap cap2"><span class="eyebrow">• Solutions</span><h3>Cyber & intelligence</h3></div>
<div class="portrait p3"></div>
<div class="sat sat3">→</div>
<div class="cap cap3"><span class="eyebrow">• Innovators</span><h3>Start Path</h3></div>
</div>
<div class="ctarow"><button class="btn-ink">Explore</button><button class="btn-outline">Learn more</button></div>
<footer>
<span class="h2mini">We're always here when you need us</span>
<span>Mastercard · Careers · Newsroom · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2b2622; color: #f7f5f0;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2b2622; color: #f7f5f0;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.4px; margin: 0; color: #f7f5f0; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; margin: 0; color: #aea69c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; background: #f7f5f0; color: #2b2622;
border: none; border-radius: 3px; padding: {spacing.sm} {spacing.lg};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; background: #2b2622; color: #f7f5f0;
border: 1px solid #f7f5f0; border-radius: 3px;
padding: {spacing.sm} {spacing.lg}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #383330; color: #f7f5f0;
border: 1px solid #3f3a36; border-radius: 3px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea69c; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #48433f; color: #f7f5f0;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2b2622; color:#f7f5f0; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia,"Times New Roman",Times,serif; font-style:italic; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #3f3a36; }
.brand { font-size:14px; font-weight:600; letter-spacing:.02em; color:#f7f5f0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#c9c0ad; }
.navcta { border:1px solid #3f3a36; border-radius:6px; padding:7px 16px; font-size:12.5px; color:#f7f5f0; }
.split { display:flex; gap:0; padding:44px 32px 30px; align-items:center; }
.left { flex:1; padding-right:26px; }
.left h1 { font-size:38px; font-weight:400; line-height:1.14; margin:0 0 14px; letter-spacing:-.6px; }
.left p { font-size:13.5px; color:#c9c0ad; margin:0 0 20px; max-width:340px; line-height:1.5; }
.btnrow { display:flex; gap:10px; }
.btn { border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.btn-p { background:#f7f5f0; color:#2b2622; }
.btn-o { background:transparent; color:#dad2c1; border:1px solid #3f3a36; }
.right { flex:1; background:#383330; border:1px solid #3f3a36; border-radius:10px; overflow:hidden; }
.rbar { height:28px; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid #3f3a36; }
.rdot { width:7px; height:7px; border-radius:50%; background:#4a453f; }
.rbody { padding:14px 16px; font-size:11.5px; line-height:1.9; }
.rbody .p { color:#aea69c; } .rbody .c { color:#f7f5f0; } .rbody .a { color:#dad2c1; }
.press { padding:6px 32px 30px; }
.press .lbl { font-size:11px; color:#aea69c; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.presrow { display:flex; gap:26px; }
.presrow span { font-size:13px; color:#c9c0ad; font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">Warp</div>
<div class="navlinks"><span>Terminal</span><span>Agents</span><span>Pricing</span><span>Docs</span></div>
<div class="navcta">Download Warp</div>
</nav>
<div class="split">
<div class="left">
<h1>Code at the speed of <span class="serif">thought</span></h1>
<p>An agentic development environment built for coding with AI — a terminal that reads, plans, and executes alongside you.</p>
<div class="btnrow"><button class="btn btn-p">Download</button><button class="btn btn-o">Read the docs</button></div>
</div>
<div class="right">
<div class="rbar"><span class="rdot"></span><span class="rdot"></span><span class="rdot"></span></div>
<div class="rbody mono">
<span class="p">~/app ›</span> <span class="c">warp agent run</span><br>
<span class="a">Planning 3 steps to fix the failing test...</span><br>
<span class="p">1.</span> <span class="c">read src/api/handler.ts</span><br>
<span class="p">2.</span> <span class="c">patch missing null check</span><br>
<span class="p">3.</span> <span class="c">re-run test suite</span><br>
<span class="a">✓ All 42 tests passing</span>
</div>
</div>
</div>
<div class="press">
<div class="lbl">Trusted by engineers at</div>
<div class="presrow"><span>Databricks</span><span>Perplexity</span><span>Cursor</span><span>Vercel</span><span>Ramp</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1ed760; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1ed760; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #176a35; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f1f1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1ed760; color: #1f1f1f;
border: 1px solid #1f1f1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1ed760; color: #111111;
border: 1px solid #1cb753; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #176a35; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1eba56; color: #1f1f1f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:"SpotifyMixUI", -apple-system, sans-serif; }
* { box-sizing:border-box; }
.layout { display:grid; grid-template-columns:220px 1fr; height:640px; }
aside { background:#000000; padding:20px 16px; }
.brand { font-size:16px; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.brand .dot { width:22px; height:22px; border-radius:50%; background:#1ed760; }
.navitem { padding:9px 4px; font-size:13px; color:#b3b3b3; font-weight:700; }
.navitem.on { color:#fff; }
main { padding:18px 26px; }
.topbar { display:flex; align-items:center; gap:14px; }
.search { flex:1; max-width:340px; background:#1f1f1f; border-radius:500px; height:40px;
padding:0 20px; display:flex; align-items:center; color:#fff; font-size:13px; }
.iconc { width:40px; height:40px; border-radius:50%; background:#1f1f1f; }
.outline-btn { border:1px solid #7c7c7c; border-radius:9999px; padding:6px 16px 6px 18px; font-size:12px; font-weight:700; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.card { background:#1a1a1a; border-radius:8px; padding:14px; }
.cover { height:96px; border-radius:6px; margin-bottom:10px; }
.c1 { background:linear-gradient(135deg,#1ed760,#0a3d1f); }
.c2 { background:linear-gradient(135deg,#4c2882,#0d0d0d); }
.c3 { background:linear-gradient(135deg,#e5484d,#450a0a); }
.card h4 { font-size:13px; margin:0 0 4px; }
.card span { font-size:11px; color:#b3b3b3; }
.playbar { position:absolute; bottom:0; width:960px; height:64px; background:#181818; border-top:1px solid #282828;
display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.nowplay { display:flex; align-items:center; gap:10px; font-size:12px; }
.nowplay .art { width:44px; height:44px; border-radius:4px; background:linear-gradient(135deg,#1ed760,#101010); }
</style></head>
<body>
<div class="layout">
<aside>
<div class="brand"><span class="dot"></span>Spotify</div>
<div class="navitem on">Home</div>
<div class="navitem">Search</div>
<div class="navitem">Your Library</div>
</aside>
<main>
<div class="topbar">
<div class="iconc"></div>
<div class="search">What do you want to play?</div>
<span class="outline-btn">Premium</span>
</div>
<div class="cards">
<div class="card"><div class="cover c1"></div><h4>Daily Mix 1</h4><span>Made for you</span></div>
<div class="card"><div class="cover c2"></div><h4>Release Radar</h4><span>New this week</span></div>
<div class="card"><div class="cover c3"></div><h4>Focus Flow</h4><span>Deep concentration</span></div>
</div>
</main>
</div>
<div class="playbar">
<div class="nowplay"><div class="art"></div><div>Midnight Drive<br><span style="color:#b3b3b3;">The Wavelength</span></div></div>
<span style="font-size:12px;color:#b3b3b3;">One note, one voice, one idea at a time</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #778385; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f6b700; color: #222222;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #f6b700; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #778385; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f6b700; color: #222222;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#ffffff; color:#333c3e; box-sizing:border-box; font-family:'Obvia',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; border-bottom:1px solid #d6d6d6; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#222222; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:#333c3e; }
.navlinks span.active { color:#f6b700; }
.cart-badge { background:#f6b700; color:#222222; border-radius:8px; padding:8px 18px; font-size:12px; font-weight:700; }
.hero { background:#1f1f1f; color:#fff; height:130px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; right:0; top:0; bottom:0; width:220px; background:linear-gradient(160deg,#e4002b,#0069b1); opacity:0.3; }
.hero h1 { font-size:26px; font-weight:700; margin:0; letter-spacing:0.3px; position:relative; }
.hero p { font-size:12px; color:#969696; margin:4px 0 0; position:relative; }
.hero-cta { background:#f6b700; color:#222222; border:none; border-radius:8px; padding:10px 24px; font-weight:700; font-size:13px; position:relative; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:14px 32px; }
.card { background:#fff; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; }
.card-img { height:110px; position:relative; display:flex; align-items:center; justify-content:center; }
.card:nth-child(1) .card-img { background:#333c3e; }
.card:nth-child(2) .card-img { background:#778385; }
.card:nth-child(3) .card-img { background:#0069b1; }
.card:nth-child(4) .card-img { background:#e4002b; }
.figure { width:44px; height:70px; background:rgba(255,255,255,0.4); border-radius:6px; }
.badge-sale { position:absolute; top:8px; left:8px; background:#e4002b; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.badge-preorder { position:absolute; top:8px; left:8px; background:#0069b1; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.card-body { padding:10px 12px; }
.card-body h3 { font-size:13px; font-weight:700; margin:0 0 4px; text-transform:uppercase; }
.card-body .price { font-size:14px; font-weight:600; color:#222222; }
.card-body .price-old { font-size:11px; color:#969696; text-decoration:line-through; margin-left:6px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#1f1f1f; color:#fff; padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bandai Namco Store</p>
<div class="navlinks"><span class="active">Dragon Ball</span><span>One Piece</span><span>Elden Ring</span><span>Gundam</span></div>
<div class="cart-badge">🛒 3</div>
</nav>
<div class="hero">
<div><h1>Elden Ring Collector's Line</h1><p>Statues, apparel, and figures from the Lands Between</p></div>
<button class="hero-cta">Shop the Drop</button>
</div>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge-preorder">Pre-Order</span><div class="figure"></div></div>
<div class="card-body"><h3>Malenia Figure</h3><span class="price">$189.99</span></div>
</div>
<div class="card">
<div class="card-img"><div class="figure"></div></div>
<div class="card-body"><h3>Goku Ultra Instinct</h3><span class="price">$79.99</span></div>
</div>
<div class="card">
<div class="card-img"><span class="badge-sale">Sale</span><div class="figure"></div></div>
<div class="card-body"><h3>Luffy Gear 5 Statue</h3><span class="price">$64.99</span><span class="price-old">$89.99</span></div>
</div>
<div class="card">
<div class="card-img"><div class="figure"></div></div>
<div class="card-body"><h3>RX-78-2 Gunpla Kit</h3><span class="price">$54.99</span></div>
</div>
</div>
<footer>
<span>© Bandai Namco Store</span>
<span>Bandai Namco Store · Franchises · Support · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Inter,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-weight:700; font-size:16px; }
.navlinks { display:flex; gap:10px; }
.navlinks .pill { background:#f5f3f1; border-radius:9999px; padding:8px 16px; font-size:14px; }
.navlinks .pill.on { background:#000; color:#fff; }
.hero { text-align:center; padding:30px 40px 20px; }
.hero h1 { font-family:"Waldenburg",Inter,sans-serif; font-weight:300; font-size:48px; line-height:1.08; margin:0 0 16px; letter-spacing:-0.5px; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-black { background:#000; color:#fff; border-radius:9999px; padding:0 20px; height:44px; display:flex;
align-items:center; font-size:15px; }
.btn-white { background:#fff; color:#000; border-radius:9999px; padding:0 20px; height:44px; display:flex;
align-items:center; font-size:15px; box-shadow:rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 4px; }
.tabs { display:flex; gap:8px; justify-content:center; padding:16px 0 0; }
.tab { border-radius:14px; padding:0 20px; height:36px; display:flex; align-items:center; font-size:16px; color:#777169; }
.tab.sel { background:#f5f3f1; color:#000; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:24px 40px; }
.card { background:#fff; border-radius:16px; padding:16px; box-shadow:rgba(0,0,0,0.4) 0px 0px 1.143px, rgba(0,0,0,0.04) 0px 2px 4px; }
.card .wave { height:50px; border-radius:8px; background:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 6px);
margin-bottom:10px; opacity:0.85; }
.card h4 { font-size:14px; margin:0 0 4px; }
.card p { font-size:12px; color:#777169; margin:0; }
</style></head>
<body>
<nav>
<span class="brand">ElevenLabs</span>
<div class="navlinks"><span class="pill on">Agents</span><span class="pill">Creative</span><span class="pill">API</span></div>
</nav>
<section class="hero">
<h1>The most realistic<br>voice AI platform</h1>
<div class="row"><div class="btn-black">Sign up</div><div class="btn-white">Contact sales</div></div>
<div class="tabs">
<div class="tab sel">Text to Speech</div><div class="tab">Voice Cloning</div><div class="tab">Dubbing</div>
</div>
</section>
<section class="grid">
<div class="card"><div class="wave"></div><h4>Narrate a chapter</h4><p>Turn manuscript text into a lifelike audiobook voice.</p></div>
<div class="card"><div class="wave"></div><h4>Clone your own voice</h4><p>A few minutes of audio is enough to start.</p></div>
<div class="card"><div class="wave"></div><h4>Dub into 29 languages</h4><p>Preserve emotion and timing automatically.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00704a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00704a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b9a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e3932; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00704a; color: #ffffff;
border: 1px solid #1e3932; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00704a; color: #f5f5f5;
border: 1px solid #278565; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b9a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #056746; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F9F9F9; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Lato", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.top { text-align:center; padding:24px 0 6px; }
.ring { width:170px; height:170px; margin:0 auto; border-radius:50%;
background: conic-gradient(#CBA258 0deg 260deg, #E8E8E8 260deg 360deg);
display:flex; align-items:center; justify-content:center; }
.ring-in { width:130px; height:130px; border-radius:50%; background:#F9F9F9; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-in b { font-size:42px; font-weight:800; color:#CBA258; }
.ring-in span { font-size:12px; font-weight:600; color:#595959; }
.sub { font-size:14px; color:#595959; margin-top:8px; }
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 34px 0; }
.cat { position:relative; aspect-ratio:2/3; border-radius:16px; overflow:hidden; box-shadow: rgba(0,0,0,0.08) 0 2px 8px; }
.cat::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,0.5) 100%); }
.cat-label { position:absolute; bottom:10px; left:10px; z-index:1; color:#fff; font-size:14px; font-weight:700; }
.reward-tile { margin:18px 34px 0; background:#D4E9E2; border-radius:16px; padding:14px 18px; display:flex; align-items:center; }
.rt-left { font-size:14px; font-weight:700; }
.rt-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.redeem { background:#00704A; color:#fff; font-size:13px; font-weight:700; padding:8px 16px; border-radius:20px; }
.size-row { display:flex; gap:8px; padding:16px 34px 0; }
.size-pill { flex:1; text-align:center; border:1.5px solid #E8E8E8; border-radius:18px; padding:8px 0; font-size:12px; font-weight:600; }
.size-pill.on { background:#00704A; color:#fff; border-color:#00704A; }
</style></head>
<body>
<div class="top">
<div class="ring"><div class="ring-in"><b>47</b><span>Stars</span></div></div>
<div class="sub">Starbucks (iOS) · 75 Stars until free reward</div>
</div>
<div class="cat-grid">
<div class="cat" style="background:linear-gradient(135deg,#8a5a3a,#5a3620);"><div class="cat-label">Hot Coffees</div></div>
<div class="cat" style="background:linear-gradient(135deg,#7ac6d6,#3a8fa8);"><div class="cat-label">Cold Coffees</div></div>
<div class="cat" style="background:linear-gradient(135deg,#e07a5f,#c65a3f);"><div class="cat-label">Refreshers</div></div>
<div class="cat" style="background:linear-gradient(135deg,#f2cc8f,#c99a5b);"><div class="cat-label">Frappuccino</div></div>
</div>
<div class="reward-tile"><div class="rt-left">⭐ 25 Stars · Free Drink</div><div class="rt-right"><div class="redeem">Redeem</div></div></div>
<div class="size-row">
<div class="size-pill">Short</div>
<div class="size-pill">Tall</div>
<div class="size-pill on">Grande</div>
<div class="size-pill">Venti</div>
<div class="size-pill">Trenta</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #01a4ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #01a4ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d1fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faf9f6; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #01a4ff; color: #faf9f6;
border: 1px solid #faf9f6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #01a4ff; color: #000000;
border: 1px solid #28b1fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29b2fe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141311; color:#faf9f6; box-sizing:border-box;
font-family:"Matter Regular",-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-weight:400; font-size:16px; }
.navlinks { display:flex; gap:22px; font-size:15px; color:#868584; }
.pill { background:#353534; color:#afaeac; border-radius:50px; padding:10px 18px; font-size:15px; }
.hero { padding:34px 34px 18px; }
.hero h1 { font-size:52px; font-weight:400; letter-spacing:-1.6px; line-height:1.02; margin:0 0 12px; max-width:600px; }
.hero p { font-size:18px; color:#afaeac; margin:0 0 18px; max-width:480px; line-height:1.3; }
.row { display:flex; gap:12px; }
.terminal { margin:6px 34px 20px; background:#1a1a18; border-radius:12px; padding:20px 24px; }
.tline { font-family:"Matter Mono Regular",monospace; font-size:14px; line-height:1.9; }
.tline .p { color:#666469; }
.tline .cmd { color:#faf9f6; }
.tline .out { color:#868584; }
.photo { position:relative; margin:0 34px; height:150px; border-radius:8px; overflow:hidden;
background:linear-gradient(120deg,#2b3a2c,#3f5940 40%,#8a7a4a 100%); display:flex; align-items:flex-end; padding:16px; }
.photo span { font-size:12px; letter-spacing:2.4px; text-transform:uppercase; color:#faf9f6; }
</style></head>
<body>
<nav>
<span class="brand">Warp</span>
<div class="navlinks"><span>Product</span><span>Enterprise</span><span>Pricing</span><span>Blog</span></div>
<span class="pill">Download</span>
</nav>
<section class="hero">
<h1>The Agentic Development Environment</h1>
<p>A terminal built for coding with multiple agents, blocks, and calm dark focus.</p>
<div class="row"><span class="pill">Download Warp</span><span class="pill">Read the docs</span></div>
</section>
<div class="terminal">
<div class="tline"><span class="p">~/projects/atlas</span> <span class="cmd">warp ai "add retry logic to the fetch client"</span></div>
<div class="tline"><span class="out">→ Editing src/http/client.ts · added exponential backoff, 3 retries</span></div>
<div class="tline"><span class="p">~/projects/atlas</span> <span class="cmd">git commit -m "add retry logic"</span></div>
</div>
<div class="photo"><span>Terminal Reimagined for the Agent Era</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d74ce;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d74ce;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.5px; margin: 0; color: #0d74ce; overflow: hidden; max-height: 2.6em; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #ffffff; color: #171717;
border: 1px solid #000000; border-radius: 8px;
padding: 9px 17px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #171717;
border: 1px solid #c2dcf3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background: #f0f0f3; color: #171717;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171717; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.skywash { position:absolute; top:-60px; left:0; right:0; height:340px;
background:radial-gradient(ellipse 70% 100% at 50% 0%, #cfe7ff 0%, #a8c8e8 40%, transparent 75%); z-index:0; }
nav { position:relative; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #f0f0f3; }
.brand { font-size:17px; font-weight:600; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#60646c; font-weight:500; }
.btn-black { background:#000000; color:#fff; border:none; border-radius:8px; padding:9px 16px;
font-size:13px; font-weight:500; white-space:nowrap; }
.hero { position:relative; z-index:2; padding:30px 40px 6px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap:10px; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-1.1px; line-height:1.08; margin:0; max-width:600px; }
.hero p { font-size:14px; color:#60646c; margin:0; }
.row { display:flex; gap:10px; margin-top:4px; }
.btn-outline { background:#fff; color:#171717; border:1px solid #dcdee0; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:500; }
.devicewrap { position:relative; z-index:2; display:flex; justify-content:center; margin-top:10px; }
.macbook { width:560px; background:#171717; border-radius:14px 14px 4px 4px; padding:16px 16px 26px; position:relative; }
.macbook::after { content:''; position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:60px; height:4px;
background:#3a3a3a; border-radius:2px; }
.screen { background:#0d0d0d; border-radius:6px; height:150px; padding:10px; display:flex; gap:8px; }
.dash-col { flex:1; background:#1a1a1a; border-radius:6px; padding:8px; }
.dash-bar { height:8px; background:#2a2a2a; border-radius:3px; margin-bottom:6px; }
.dash-bar.blue { background:#0d74ce; width:60%; }
.dash-code { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:9px; color:#8ad0ff; line-height:1.6; }
.iphone { position:absolute; right:-30px; bottom:-16px; width:100px; height:200px; background:#111; border-radius:20px;
border:3px solid #2a2a2a; padding:8px; }
.iphone .app { background:linear-gradient(160deg,#0d74ce,#000); height:100%; border-radius:12px; display:flex;
align-items:center; justify-content:center; }
.iphone .app span { color:#fff; font-size:9px; font-weight:600; }
.steps { position:relative; z-index:2; display:flex; gap:16px; padding:28px 40px 14px; }
.step { flex:1; background:#fff; border:1px solid #dcdee0; border-radius:12px; padding:16px; }
.step .icon { width:30px; height:30px; background:#f0f0f3; border-radius:8px; margin-bottom:8px; }
.step h4 { font-size:14px; font-weight:600; margin:0 0 4px; }
.step p { font-size:11px; color:#60646c; margin:0; line-height:1.4; }
.codeblock { position:relative; z-index:2; margin:0 40px; background:#171717; border-radius:12px; padding:12px 16px;
font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:10px; color:#fff; line-height:1.6; }
.codeblock .c1 { color:#7fd97f; } .codeblock .c2 { color:#8ad0ff; } .codeblock .c3 { color:#e8b96a; }
footer { position:relative; z-index:2; margin-top:auto; border-top:1px solid #f0f0f3; padding:10px 40px;
display:flex; justify-content:space-between; font-size:10px; color:#60646c; }
</style></head>
<body>
<div class="skywash"></div>
<nav>
<p class="brand">Expo</p>
<div class="navlinks"><span>Tools</span><span>Workflows</span><span>EAS</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-black">Get started</button>
</nav>
<section class="hero">
<h1>Build apps for iOS and Android</h1>
<p>The universal React platform. Ship native apps with a single codebase.</p>
<div class="row"><button class="btn-black">Create a project</button><button class="btn-outline">View docs</button></div>
</section>
<div class="devicewrap">
<div class="macbook">
<div class="screen">
<div class="dash-col">
<div class="dash-bar" style="width:40%"></div>
<div class="dash-bar blue"></div>
<div class="dash-bar" style="width:70%"></div>
<div class="dash-bar" style="width:30%"></div>
</div>
<div class="dash-col">
<div class="dash-code">$ eas build --platform ios<br>✓ Bundling JS<br>✓ Uploading assets<br>✓ Build queued</div>
</div>
</div>
<div class="iphone"><div class="app"><span>Expo Go</span></div></div>
</div>
</div>
<div class="steps">
<div class="step"><div class="icon"></div><h4>Write once</h4><p>One codebase for iOS, Android, and web.</p></div>
<div class="step"><div class="icon"></div><h4>Build in the cloud</h4><p>EAS Build compiles native binaries for you.</p></div>
<div class="step"><div class="icon"></div><h4>Ship instantly</h4><p>Push OTA updates without an app-store review.</p></div>
</div>
<div class="codeblock"><span class="c1">npx</span> create-expo-app my-app <span class="c3">&&</span> <span class="c2">cd</span> my-app <span class="c3">&&</span> npx expo start</div>
<footer>
<span>© Expo</span>
<span>Expo · Docs · Showcase · GitHub</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fee500; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fee500; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3c1e1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fee500; color: #3c1e1e;
border: 1px solid #3c1e1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fee500; color: #111111;
border: 1px solid #d8c303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dfc505; color: #3c1e1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#191919; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.list { width:300px; flex:0 0 auto; background:#fff; border-right:1px solid #E6E6E6; }
.lh { padding:16px 16px 6px; font-size:20px; font-weight:700; }
.myrow { display:flex; gap:12px; padding:12px 16px; align-items:center; border-bottom:1px solid #E6E6E6; }
.rsq { width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg,#FEE500,#e6cf00); flex:0 0 auto; }
.rsq.b { background:linear-gradient(135deg,#8fb0c9,#5a7b96); }
.rsq.c { background:linear-gradient(135deg,#f0b8b8,#d98a8a); }
.rsq.d { background:linear-gradient(135deg,#b8d8b8,#8ac98a); }
.rn { font-size:15px; font-weight:600; }
.rs { font-size:12px; color:#6A6A6A; margin-top:2px; }
.sec { padding:10px 16px 6px; font-size:12px; color:#6A6A6A; font-weight:600; }
.frow { display:flex; gap:12px; padding:9px 16px; align-items:center; }
.thread { flex:1; display:flex; flex-direction:column; background:#B2C7DA; }
.nav { height:56px; background:#fff; border-bottom:1px solid #E6E6E6; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.msgs { flex:1; padding:20px; display:flex; flex-direction:column; }
.inrow { display:flex; gap:8px; align-items:flex-end; margin-bottom:12px; }
.av { width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,#8fb0c9,#5a7b96); }
.inname { font-size:12px; color:#3a3a3a; margin-bottom:4px; }
.bub-in { background:#fff; border-radius:4px 14px 14px 14px; padding:10px 14px; font-size:15px; max-width:280px; }
.outrow { display:flex; justify-content:flex-end; align-items:flex-end; gap:6px; margin-bottom:12px; }
.unread { font-size:11px; color:#FEE500; font-weight:800; text-shadow:0 0 1px #3C1E1E; }
.time { font-size:10px; color:#3a3a3a; opacity:0.7; }
.metastack { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.bub-out { background:#FEE500; color:#3C1E1E; border-radius:14px 4px 14px 14px; padding:10px 14px; font-size:15px; font-weight:500; max-width:280px; }
.composer { background:#fff; padding:10px 14px; display:flex; align-items:center; gap:10px; }
.plus { width:30px; height:30px; border-radius:50%; background:#F5F5F5; display:flex; align-items:center; justify-content:center; font-weight:700; color:#6A6A6A; }
.field { flex:1; height:36px; background:#F5F5F5; border-radius:18px; }
.emo { font-size:18px; }
</style></head>
<body>
<div class="wrap">
<div class="list">
<div class="lh">Friends</div>
<div class="myrow"><div class="rsq"></div><div><div class="rn">KakaoTalk (iOS)</div><div class="rs">Heading to work... ☕</div></div></div>
<div class="sec">Friends · 128</div>
<div class="frow"><div class="rsq b"></div><div><div class="rn">Jiwoo</div><div class="rs">🎵 Now playing — IU</div></div></div>
<div class="frow"><div class="rsq c"></div><div><div class="rn">Minho</div><div class="rs">You've got this today!</div></div></div>
<div class="frow"><div class="rsq d"></div><div><div class="rn">Design Team</div><div class="rs">Channel</div></div></div>
</div>
<div class="thread">
<div class="nav">Jiwoo</div>
<div class="msgs">
<div class="inrow"><div class="av"></div><div><div class="inname">Jiwoo</div><div class="bub-in">Free this weekend?</div></div></div>
<div class="outrow">
<div class="metastack"><span class="unread">1</span><span class="time">2:14 PM</span></div>
<div class="bub-out">Yeah, Saturday works!</div>
</div>
<div class="inrow"><div class="av"></div><div><div class="bub-in">Great, let's meet at the station at 2 😊</div></div></div>
</div>
<div class="composer"><div class="plus">+</div><div class="field"></div><div class="emo">😊</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0fa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0fa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #75757a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0f0fa; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f0f0fa; color: #111111;
border: 1px solid #ccccd5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #75757a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cacad2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f0f0fa; box-sizing:border-box;
font-family:"D-DIN", Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px;
background:radial-gradient(ellipse at 30% 20%, #1a1a26 0%, #050508 55%, #000 100%); }
.stage::before { content:''; position:absolute; inset:0;
background-image:radial-gradient(1px 1px at 60px 90px, #fff 50%, transparent 50%),
radial-gradient(1px 1px at 220px 40px, #fff 50%, transparent 50%),
radial-gradient(1px 1px at 400px 150px, #fff 50%, transparent 50%),
radial-gradient(1px 1px at 700px 80px, #fff 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 850px 200px, #fff 50%, transparent 50%),
radial-gradient(1px 1px at 500px 300px, #fff 50%, transparent 50%);
opacity:0.6; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; letter-spacing:0.12em; font-weight:400; }
.navlinks { display:flex; gap:24px; font-size:13.3px; color:#c9c9d6; }
.navlinks span.on { color:#fff; border-bottom:1px solid #fff; padding-bottom:4px; }
.hero { position:relative; z-index:2; padding:110px 0 0; text-align:center; }
.hero h1 { font-size:44px; font-weight:400; letter-spacing:0.02em; margin:0 0 16px; }
.hero p { font-size:15px; color:#c9c9d6; margin:0 0 26px; }
.btn { display:inline-block; background:rgba(0,0,0,0.5); color:#f0f0fa; border:1px solid rgba(240,240,250,0.35);
border-radius:4px; padding:14px 20px; font-size:14px; }
.stats { position:relative; z-index:2; display:flex; justify-content:center; gap:70px; margin-top:80px; }
.stat h2 { font-size:30px; font-weight:400; margin:0; }
.stat span { font-size:12px; color:#9a9aa8; letter-spacing:0.06em; text-transform:uppercase; }
.circ { position:absolute; z-index:2; right:40px; bottom:26px; width:48px; height:48px; border-radius:32px;
background:rgba(240,240,250,0.1); display:flex; align-items:center; justify-content:center; font-size:13px; color:#000; }
</style></head>
<body>
<div class="stage">
<nav>
<p class="brand">SpaceX</p>
<div class="navlinks"><span class="on">FALCON</span><span>DRAGON</span><span>STARSHIP</span><span>STARLINK</span><span>HUMAN SPACEFLIGHT</span></div>
<span class="btn">LEARN MORE</span>
</nav>
<div class="hero">
<h1>MAKING LIFE MULTIPLANETARY</h1>
<p>Fully and rapidly reusable rockets, built for Earth orbit, the Moon, Mars, and beyond.</p>
<span class="btn">RESERVE YOUR RIDE</span>
</div>
<div class="stats">
<div class="stat"><h2>400+</h2><span>Launches</span></div>
<div class="stat"><h2>300+</h2><span>Booster Landings</span></div>
<div class="stat"><h2>2</h2><span>Reusable Vehicles</span></div>
</div>
<div class="circ">↻</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b64dd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b64dd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb4ea; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d2a3e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b64dd; color: #1d2a3e;
border: 1px solid #1d2a3e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b64dd; color: #f5f5f5;
border: 1px solid #307be1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb4ea; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e5bc4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d2a3e; box-sizing:border-box;
font-family:Inter,-apple-system,Helvetica,Arial,sans-serif; font-size:14px; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
.sidebar { width:220px; background:#ffffff; border-right:1px solid #cad3e2; padding:16px 0; }
.sidebar .brand { font-weight:700; font-size:15px; padding:0 16px 16px; color:#111c2c; }
.sidebar .cat { font-size:11px; text-transform:uppercase; color:#1d2a3e; opacity:0.6; padding:10px 16px 4px; letter-spacing:0.04em; }
.sidebar li { list-style:none; font-size:14px; font-weight:500; color:#1d2a3e; padding:6px 16px; }
.sidebar li.on { color:#0b64dd; background:#d9e8ff; }
.content { flex:1; padding:24px 32px; }
.breadcrumb { font-size:12px; color:#1d2a3e; opacity:0.6; margin-bottom:6px; }
.content h1 { font-size:20.0004px; font-weight:600; margin:0 0 6px; color:#111c2c; }
.content > p { font-size:14px; color:#1d2a3e; opacity:0.75; margin:0 0 20px; max-width:560px; line-height:1.5; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.card { background:#ecf1f9; border-radius:4px; padding:16px; }
.card h3 { font-size:16px; margin:0 0 6px; color:#111c2c; }
.card p { font-size:13px; color:#1d2a3e; opacity:0.7; margin:0 0 12px; }
.row-btns { display:flex; gap:8px; }
.btn { background:#0b64dd; color:#fff; border-radius:4px; padding:6px 14px; font-size:13px; font-weight:500; }
.btn.sub { background:#d9e8ff; color:#0b64dd; }
.codebox { margin-top:18px; background:#ecf1f9; border:1px solid #cad3e2; border-radius:4px; padding:12px 16px;
font-family:monospace; font-size:12.5px; color:#1d2a3e; }
</style></head>
<body>
<div class="shell">
<div class="sidebar">
<div class="brand">Elastic UI</div>
<div class="cat">Layout</div>
<ul style="margin:0;padding:0;">
<li>Grid</li><li>Flex</li><li>Page template</li>
</ul>
<div class="cat">Containers</div>
<ul style="margin:0;padding:0;">
<li class="on">Card</li><li>Panel</li><li>Modal</li>
</ul>
<div class="cat">Forms</div>
<ul style="margin:0;padding:0;">
<li>Form control</li><li>Combo box</li><li>Date picker</li>
</ul>
</div>
<div class="content">
<div class="breadcrumb">Components / Containers / Card</div>
<h1>Card</h1>
<p>Cards are used throughout the app for containing content. They can be interactive, clickable, and stateful.</p>
<div class="grid">
<div class="card"><h3>Selectable card</h3><p>Toggle a card into a selected state to build option pickers.</p>
<div class="row-btns"><div class="btn">Primary</div><div class="btn sub">Docs</div></div></div>
<div class="card"><h3>Beta badge card</h3><p>Flag a feature as beta or experimental directly on the card.</p>
<div class="row-btns"><div class="btn">Primary</div><div class="btn sub">Docs</div></div></div>
</div>
<div class="codebox"><EuiCard title="Elastic" description="..." /></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#F5F5F5; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:44px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #222222; }
.at { font-size:24px; font-weight:700; }
.feed { width:560px; margin:0 auto; padding:8px 0; }
.post { display:flex; gap:12px; padding:16px 20px 12px; border-bottom:1px solid #222222; position:relative; }
.avwrap { display:flex; flex-direction:column; align-items:center; }
.av { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; }
.tline { width:1px; flex:1; background:#333333; margin-top:6px; }
.pbody { flex:1; }
.prow { display:flex; align-items:baseline; gap:6px; }
.pname { font-weight:600; font-size:15px; }
.ptime { color:#777777; font-size:14px; }
.ptext { font-size:15px; line-height:1.4; margin:4px 0 10px; }
.actions { display:flex; gap:20px; color:#777777; font-size:18px; }
.actions .liked { color:#FE2C55; }
.cnt { font-size:12px; color:#777777; margin-left:4px; }
.reply { margin-left:48px; padding-left:12px; border-left:2px solid #333333; margin-top:8px; }
.reply .prow { }
.reply .pname { font-size:13px; }
.reply .ptext { font-size:14px; }
.compose { position:absolute; right:40px; bottom:26px; width:52px; height:52px; border-radius:50%; background:#F5F5F5; color:#000; display:flex; align-items:center; justify-content:center; font-size:24px; }
</style></head>
<body>
<div class="topnav"><div class="at">@</div></div>
<div class="feed">
<div class="post">
<div class="avwrap"><div class="av" style="background:#405DE6">JD</div><div class="tline"></div></div>
<div class="pbody">
<div class="prow"><span class="pname">jamie.codes</span><span class="ptime">· 2h</span></div>
<div class="ptext">shipped the new onboarding for Threads (iOS) today — feels so much calmer now. thread below 🧵</div>
<div class="actions"><span class="liked">♥</span><span class="cnt">248</span><span>💬</span><span class="cnt">31</span><span>⟲</span><span class="cnt">9</span><span>↗</span></div>
<div class="reply">
<div class="prow"><span class="pname">reneeb</span><span class="ptime">· 1h</span></div>
<div class="ptext">this is such a good change, the old flow was rough</div>
<div class="actions"><span>♡</span><span class="cnt">12</span><span>💬</span><span class="cnt">2</span></div>
</div>
</div>
</div>
<div class="post">
<div class="avwrap"><div class="av" style="background:#833AB4">KL</div></div>
<div class="pbody">
<div class="prow"><span class="pname">kalel.m</span><span class="ptime">· 4h</span></div>
<div class="ptext">no hashtags, no trending panel, just people talking. this is what I wanted from the internet</div>
<div class="actions"><span>♡</span><span class="cnt">1.2K</span><span>💬</span><span class="cnt">87</span><span>⟲</span><span class="cnt">44</span><span>↗</span></div>
</div>
</div>
</div>
<div class="compose">+</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:40px; font-weight:700; letter-spacing:-1px; color:#000000; line-height:1; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#303033; }
.navlinks span.act { color:#000000; font-weight:700; }
.ghost { border:1px solid #dddddd; border-radius:4px; background:#ffffff; color:#000000;
height:36px; padding:0 16px; font-size:12px; font-weight:700; }
.hero { margin:0 32px 20px; height:180px; border-radius:0; position:relative; overflow:hidden;
background:linear-gradient(100deg,#111 0%, #333 45%, #555 100%); display:flex; align-items:flex-end; padding:20px 24px; }
.hero .cap { color:#ffffff; }
.hero .cap .k { font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; opacity:0.8; }
.hero .cap h2 { margin:4px 0 0; font-size:23px; font-weight:600; line-height:1.3; }
.row { display:flex; gap:24px; padding:0 32px; }
.col { flex:1; }
.sectitle { font-size:13px; font-weight:700; color:#000000; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.04em; }
.storyitem { display:flex; gap:12px; margin-bottom:14px; }
.storyitem .img { width:70px; height:70px; flex-shrink:0; background:linear-gradient(135deg,#eee,#ccc); }
.storyitem .t { font-size:13px; font-weight:600; line-height:1.35; color:#000; }
.storyitem .s { font-size:10px; color:#474747; margin-top:4px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard { display:flex; flex-direction:column; gap:5px; }
.pcard .img { aspect-ratio:3/4; background:linear-gradient(160deg,#f2f2f2,#dcdcdc); border-radius:4px; }
.pcard .brand-t { font-size:11px; font-weight:700; color:#000; }
.pcard .name { font-size:12px; font-weight:400; color:#303033; }
.pcard .price-row { display:flex; gap:6px; align-items:baseline; }
.pcard .disc { color:#ff4800; font-size:13px; font-weight:700; }
.pcard .price { font-size:13px; font-weight:700; color:#000; }
.pcard .flag { font-size:10px; font-weight:500; color:#5d5d5d; }
footer { position:absolute; bottom:0; left:0; right:0; padding:14px 32px; border-top:1px solid #dddddd;
display:flex; justify-content:space-between; font-size:10px; color:#5d5d5d; }
</style></head>
<body>
<nav>
<span class="brand">29CM</span>
<div class="navlinks"><span class="act">BEST</span><span>Magazine</span><span>Showcase</span><span>Brand</span></div>
<button class="ghost">SIGN IN</button>
</nav>
<div class="hero">
<div class="cap"><span class="k">29Magazine</span><h2>Taste, curated — not everything, only the right things.</h2></div>
</div>
<div class="row">
<div class="col" style="max-width:280px;">
<div class="sectitle">Showcase</div>
<div class="storyitem"><div class="img"></div><div><div class="t">A quiet studio, three years in the making</div><div class="s">Interview · Object</div></div></div>
<div class="storyitem"><div class="img"></div><div><div class="t">How this atelier chooses its fabric</div><div class="s">Interview · Material</div></div></div>
</div>
<div class="col">
<div class="sectitle">BEST — Hourly Popularity</div>
<div class="grid">
<div class="pcard"><div class="img"></div><span class="brand-t">STUDIO K</span><span class="name">Wool blend coat</span><div class="price-row"><span class="disc">30%</span><span class="price">₩168,000</span></div><span class="flag">Free shipping</span></div>
<div class="pcard"><div class="img"></div><span class="brand-t">MAISON L</span><span class="name">Cotton wide pants</span><div class="price-row"><span class="disc">20%</span><span class="price">₩89,000</span></div><span class="flag">Best seller</span></div>
<div class="pcard"><div class="img"></div><span class="brand-t">EDITION</span><span class="name">Leather crossbody bag</span><div class="price-row"><span class="disc">15%</span><span class="price">₩132,000</span></div><span class="flag">Limited</span></div>
<div class="pcard"><div class="img"></div><span class="brand-t">EDITION</span><span class="name">Merino knit sweater</span><div class="price-row"><span class="disc">25%</span><span class="price">₩98,000</span></div><span class="flag">Free shipping</span></div>
</div>
</div>
</div>
<footer>
<span>© 29CM</span>
<span>Editorial commerce, since taste matters</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff8000; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff8000; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4309; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff8000; color: #111111;
border: 1px solid #d96e03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4309; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff9429; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#262626; }
.brand { color:#ffffff; font-size:15px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; }
.navlinks span { color:#dddddd; font-size:12px; font-weight:400; }
.navlinks span.on { color:#ff8000; font-weight:700; }
.hero { background:#262626; padding:0 28px 16px; display:flex; flex-direction:column; gap:10px; }
.tabs { display:flex; gap:8px; }
.tab { border-radius:2px; padding:0 14px; height:26px; display:flex; align-items:center; font-size:13px; font-weight:700; }
.tab.active { background:#ff8000; color:#ffffff; }
.tab.inactive { color:#8a8a8a; }
.searchbar { display:flex; height:40px; }
.searchinput { flex:1; background:#ffffff; border-radius:2px 0 0 2px; padding:0 14px; display:flex;
align-items:center; font-size:13px; color:#999999; }
.searchbtn { width:90px; background:#ff8000; color:#ffffff; border-radius:0 2px 2px 0; display:flex;
align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.strip { display:flex; align-items:center; gap:16px; padding:8px 28px; background:#f5f5f5; border-bottom:1px solid #e6e6e6; }
.strip span { font-size:11px; color:#666666; }
.strip b { color:#ff8000; }
.listings { padding:10px 28px 0; display:flex; flex-direction:column; }
.row { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid #e6e6e6; align-items:stretch; }
.row.feat { background:#f2f8ff; margin:0 -12px; padding:12px; border-radius:0; }
.photo { width:150px; height:96px; border-radius:8px 8px 0 0; background:linear-gradient(135deg,#d8d8d8,#c9c9c9);
flex-shrink:0; position:relative; }
.photo .badge { position:absolute; top:6px; left:6px; background:#fff7e6; color:#ff8000; font-size:10px;
font-weight:700; border-radius:2px; padding:2px 6px; }
.rowbody { flex:1; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.rowbody h3 { font-size:15px; font-weight:700; margin:0; color:#333333; }
.rowmeta { font-size:11px; color:#666666; }
.tagline { display:flex; gap:6px; }
.tagline span { background:#fff7e6; color:#ff8000; font-size:10px; border-radius:2px; padding:2px 8px; }
.rowprice { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:3px; min-width:90px; }
.price { color:#e60012; font-size:17px; font-weight:700; }
.pricesub { color:#999999; font-size:10px; }
</style></head>
<body>
<nav>
<p class="brand">591</p>
<div class="navlinks"><span class="on">Rent</span><span>Resale</span><span>New Build</span><span>Land</span><span>Storefront</span></div>
</nav>
<section class="hero">
<div class="tabs">
<span class="tab active">Rent</span>
<span class="tab inactive">Resale</span>
<span class="tab inactive">New Build</span>
</div>
<div class="searchbar">
<div class="searchinput">Xinyi District · near MRT · 2 rooms</div>
<div class="searchbtn">Search</div>
</div>
</section>
<div class="strip"><span><b>82,000+</b> rentals</span><span><b>320,000+</b> resale homes</span><span><b>5,000+</b> new builds listed</span></div>
<section class="listings">
<div class="row feat">
<div class="photo"><span class="badge">Featured</span></div>
<div class="rowbody">
<h3>2-Room Suite near Xinyi MRT, Furnished</h3>
<div class="rowmeta">Xinyi District · 24 ping · 8F / 15F</div>
<div class="tagline"><span>Near MRT</span><span>Pet Friendly</span><span>Private Bath</span></div>
</div>
<div class="rowprice"><span class="price">NT$26,000</span><span class="pricesub">/ month</span></div>
</div>
<div class="row">
<div class="photo"></div>
<div class="rowbody">
<h3>Studio, Renovated, Da'an District</h3>
<div class="rowmeta">Da'an District · 12 ping · 3F / 7F</div>
<div class="tagline"><span>Renovated</span><span>Quiet Street</span></div>
</div>
<div class="rowprice"><span class="price">NT$18,500</span><span class="pricesub">/ month</span></div>
</div>
<div class="row">
<div class="photo"></div>
<div class="rowbody">
<h3>3-Bedroom Family Unit, Zhongshan</h3>
<div class="rowmeta">Zhongshan District · 38 ping · 5F / 12F</div>
<div class="tagline"><span>Balcony</span><span>Parking</span></div>
</div>
<div class="rowprice"><span class="price">NT$42,000</span><span class="pricesub">/ month</span></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #05141f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #05141f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #899095; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #697278; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #05141f; color: #697278;
border: 1px solid #697278; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #05141f; color: #f5f5f5;
border: 1px solid #2b3841; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #899095; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #15232d; color: #697278;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#05141f; box-sizing:border-box;
font-family: Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.topnav { width:960px; height:60px; background:#05141f; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { color:#ffffff; font-size:18px; font-weight:700; letter-spacing:0.4px; }
.navlinks { display:flex; gap:26px; }
.navlinks span { color:#ffffff; font-size:14px; font-weight:400; opacity:0.82; }
.stage { width:960px; height:580px; display:flex; }
.photo { width:560px; height:580px; position:relative; overflow:hidden;
background: radial-gradient(120% 100% at 20% 0%, #12324a 0%, #05141f 55%, #010e18 100%); }
.road { position:absolute; left:0; right:0; bottom:0; height:210px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 100%); }
.roadline { position:absolute; left:-40px; bottom:60px; width:640px; height:2px; background:rgba(255,255,255,0.12);
transform:rotate(-2deg); }
.car-body { position:absolute; left:60px; bottom:96px; width:420px; height:78px; border-radius:38px;
background:linear-gradient(180deg,#37444d,#1c2a33); }
.car-cabin { position:absolute; left:150px; bottom:150px; width:210px; height:58px;
clip-path: polygon(8% 100%, 20% 0%, 80% 0%, 92% 100%);
background:linear-gradient(180deg,#3d4a53,#232f38); }
.car-glass { position:absolute; left:168px; bottom:158px; width:174px; height:36px;
clip-path: polygon(10% 100%, 22% 0%, 78% 0%, 90% 100%);
background:linear-gradient(120deg, rgba(120,180,210,0.55), rgba(20,30,38,0.5)); }
.wheel { position:absolute; bottom:78px; width:64px; height:64px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, #4b5960, #05141f 70%); border:3px solid #0d1c26; }
.wheel.w1 { left:100px; } .wheel.w2 { left:380px; }
.badge { position:absolute; top:28px; left:32px; background:#f8f8f8; color:#05141f;
font-size:14px; font-weight:400; padding:6px 16px; }
.hero-title { position:absolute; left:32px; bottom:118px; color:#ffffff; font-size:42px;
font-weight:700; line-height:1.2; max-width:460px; }
.hero-sub { position:absolute; left:32px; bottom:88px; color:#c6ccd0; font-size:14px; font-weight:400;
max-width:420px; }
.panel { width:400px; height:580px; padding:28px 32px; display:flex; flex-direction:column;
background:#ffffff; }
.tabs { display:flex; gap:22px; border-bottom:1px solid #dadce0; padding-bottom:12px; margin-bottom:20px; }
.tab { font-size:16px; font-weight:700; color:#697278; padding-bottom:12px; position:relative; }
.tab.active { color:#05141f; }
.tab.active::after { content:""; position:absolute; left:0; right:0; bottom:-13px; height:2px; background:#05141f; }
.veh-name { font-size:26px; font-weight:700; margin:0 0 4px; }
.veh-cat { font-size:14px; font-weight:400; color:#697278; margin:0 0 20px; }
.specs { display:flex; flex-direction:column; }
.spec-row { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid #dadce0;
font-size:14px; }
.spec-row .k { color:#697278; font-weight:400; }
.spec-row .v { color:#05141f; font-weight:700; }
.price-row { display:flex; justify-content:space-between; align-items:baseline; margin:18px 0 20px; }
.price-label { font-size:13px; color:#697278; font-weight:400; }
.price-value { font-size:24px; color:#05141f; font-weight:700; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn { flex:1; height:48px; display:flex; align-items:center; justify-content:center;
font-size:14px; font-weight:700; border-radius:0px; }
.btn-primary { background:#05141f; color:#ffffff; border:1px solid #05141f; }
.btn-secondary { background:#ffffff; color:#05141f; border:1px solid #05141f; }
.card-note { margin-top:14px; display:flex; gap:8px; }
.swatch { width:18px; height:18px; border-radius:15px; border:1px solid #dadce0; }
.swatch.s1 { background:#05141f; } .swatch.s2 { background:#ffffff; } .swatch.s3 { background:#dadce0; }
.swatch-label { font-size:12px; color:#697278; align-self:center; }
</style></head>
<body>
<div class="topnav">
<div class="brand">Kia</div>
<div class="navlinks"><span>Vehicles</span><span>Purchase</span><span>Experience</span><span>Support</span></div>
</div>
<div class="stage">
<div class="photo">
<div class="road"></div>
<div class="roadline"></div>
<div class="car-body"></div>
<div class="wheel w1"></div>
<div class="wheel w2"></div>
<div class="car-cabin"></div>
<div class="car-glass"></div>
<div class="badge">Electric SUV</div>
<div class="hero-title">The 2026 Vantis EV</div>
<div class="hero-sub">Movement that inspires — long-range architecture with a 480km rated range.</div>
</div>
<div class="panel">
<div class="tabs">
<div class="tab active">Features</div>
<div class="tab">Specs</div>
<div class="tab">Gallery</div>
<div class="tab">Compare</div>
</div>
<div class="veh-name">Vantis EV</div>
<div class="veh-cat">Electric · All-wheel drive · 5 seats</div>
<div class="specs">
<div class="spec-row"><span class="k">Range</span><span class="v">480 km</span></div>
<div class="spec-row"><span class="k">0–100 km/h</span><span class="v">5.2 sec</span></div>
<div class="spec-row"><span class="k">Battery</span><span class="v">84 kWh</span></div>
<div class="spec-row"><span class="k">Charging (10–80%)</span><span class="v">18 min</span></div>
</div>
<div class="price-row">
<span class="price-label">Starting from</span>
<span class="price-value">₩58,900,000</span>
</div>
<div class="card-note">
<div class="swatch s1"></div><div class="swatch s2"></div><div class="swatch s3"></div>
<span class="swatch-label">3 exterior colors available</span>
</div>
<div class="btn-row">
<div class="btn btn-primary">Get a Quote</div>
<div class="btn btn-secondary">Book Test Drive</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.4; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.38; letter-spacing: 0.2px; background: #4a154b; color: #ffffff;
border: none; border-radius: 90px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.38; letter-spacing: 0.2px; background: #f9f0ff; color: #1d1d1d;
border: 1px solid #4a154b; border-radius: 90px;
padding: 10px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1d1d1d;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #e6dee6; color: #4a154b;
border-radius: 90px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d1d1d; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:16px; color:#4a154b; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#1d1d1d; }
.pill { border-radius:90px; padding:10px 28px; font-size:14px; font-weight:700; border:none; }
.pill.primary { background:#4a154b; color:#fff; }
.pill.secondary { background:#f9f0ff; color:#1d1d1d; }
.hero { position:relative; padding:24px 32px 20px; overflow:hidden;
background:
radial-gradient(ellipse 420px 220px at 15% 20%, rgba(255,214,168,.55), transparent 65%),
radial-gradient(ellipse 460px 260px at 85% 10%, rgba(233,216,255,.6), transparent 65%),
radial-gradient(ellipse 400px 240px at 60% 90%, rgba(197,224,197,.45), transparent 65%),
#f9f0ff; }
.hero h1 { position:relative; font-size:52px; font-weight:700; line-height:1.12; letter-spacing:-.7px; margin:0 0 12px; max-width:560px; }
.hero p { position:relative; font-size:14px; margin:0 0 16px; max-width:400px; color:#1d1d1d; }
.heroctas { position:relative; display:flex; gap:10px; }
.mockrow { position:relative; margin-top:10px; display:flex; gap:14px; }
.mock { width:190px; height:100px; border-radius:12px; background:#fff; box-shadow:0 0 32px rgba(0,0,0,.12); padding:10px; }
.mock .line { height:7px; border-radius:4px; background:#e6e6e6; margin-bottom:6px; }
.mock .line.short { width:60%; background:#4a154b; opacity:.5; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 32px; text-align:center; }
.stat .num { font-size:44px; font-weight:700; color:#4a154b; letter-spacing:-.5px; line-height:1; }
.stat .cap { font-size:11.5px; color:#696969; margin-top:6px; }
.band { background:#4a154b; color:#fff; padding:28px 32px; text-align:center; }
.band h2 { font-size:26px; font-weight:700; margin:0 0 14px; }
footer { padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; color:#696969; }
</style></head>
<body>
<nav>
<div class="brand">Slack</div>
<div class="navlinks"><span>Features</span><span>Enterprise</span><span>Pricing</span></div>
<div style="display:flex;gap:8px;">
<button class="pill secondary" style="padding:8px 20px;font-size:13px;">Sign In</button>
<button class="pill primary" style="padding:8px 20px;font-size:13px;">Try For Free</button>
</div>
</nav>
<section class="hero">
<h1>Where work<br>happens</h1>
<p>Slack brings the team, tools, and automation together in one place.</p>
<div class="heroctas">
<button class="pill primary">Try for free</button>
<button class="pill secondary">See how it works</button>
</div>
<div class="mockrow">
<div class="mock"><div class="line"></div><div class="line short"></div><div class="line"></div></div>
<div class="mock"><div class="line"></div><div class="line"></div><div class="line short"></div></div>
</div>
</section>
<section class="stats">
<div class="stat"><div class="num">90%</div><div class="cap">of Fortune 100 companies use Slack</div></div>
<div class="stat"><div class="num">43</div><div class="cap">minutes saved per user per week</div></div>
<div class="stat"><div class="num">87%</div><div class="cap">of teams report faster decisions</div></div>
</section>
<div class="band">
<h2>Bring your team together, wherever you are.</h2>
<button class="pill" style="background:#fff;color:#4a154b;">Try Slack for free</button>
</div>
<footer>
<span>© Slack</span>
<span>Slack · Enterprise · Pricing · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5577; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5577; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faadbc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5577; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5577; color: #f5f5f5;
border: 1px solid #fd6f8b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faadbc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff708d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d1d1d; box-sizing:border-box;
font-family:"Noto Sans JP", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #cccccf; }
.brand { font-size:17px; font-weight:700; color:#1d1d1d; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#6d6d75; }
.btn { border-radius:9999px; padding:8px 20px; font-size:13px; background:#ff5577; color:#fff; }
.hero { padding:24px 32px 18px; }
.hero h1 { font-size:28px; font-weight:600; margin:0 0 8px; }
.hero p { font-size:14px; color:#6d6d75; margin:0 0 18px; max-width:520px; line-height:1.75; }
.tabs { display:flex; gap:10px; padding:0 32px 18px; }
.tab { flex:1; border:2px solid #cccccf; border-radius:8px; padding:16px; height:78px; display:flex; flex-direction:column; justify-content:center; }
.tab.selected { border-color:#ff5577; }
.tab h4 { font-size:15px; font-weight:600; margin:0 0 4px; }
.tab p { font-size:12px; color:#6d6d75; margin:0; }
.services { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:0 32px 20px; }
.service { padding:0; }
.service .sw { width:100%; height:80px; border-radius:8px; margin-bottom:12px; }
.sw1 { background:linear-gradient(135deg,#ff5577,#a83350); }
.sw2 { background:linear-gradient(135deg,#1d1d1d,#4a4a4a); }
.sw3 { background:linear-gradient(135deg,#6d6d75,#1d1d1d); }
.service h3 { font-size:15px; font-weight:700; margin:0 0 6px; }
.service p { font-size:12px; color:#6d6d75; margin:0; line-height:1.75; }
.footerband { background:#1d1d1d; color:#f1f1f1; padding:14px 32px; display:flex; justify-content:space-between; font-size:12px; }
</style></head>
<body>
<nav>
<span class="brand">SAKURA internet</span>
<div class="navlinks"><span>Cloud</span><span>Dedicated Servers</span><span>Data Centers</span><span>AI & GPU</span></div>
<span class="btn">Contact Us</span>
</nav>
<section class="hero">
<h1>Turning what you want to do into what you can do.</h1>
<p>It started in 1996, building servers and lending them to friends. Today we've grown into a platform that expands what's possible for society, from cloud computing to AI infrastructure.</p>
</section>
<div class="tabs">
<div class="tab selected"><h4>Case Study: Manufacturing DX</h4><p>Optimizing operating costs through cloud migration</p></div>
<div class="tab"><h4>Case Study: AI Development</h4><p>Accelerating R&D with GPU cloud</p></div>
<div class="tab"><h4>Case Study: Game Streaming</h4><p>Building a stable streaming backbone with dedicated servers</p></div>
</div>
<div class="services">
<div class="service"><div class="sw sw1"></div><h3>SAKURA internet Cloud</h3><p>A flexibly scaling cloud infrastructure service.</p></div>
<div class="service"><div class="sw sw2"></div><h3>Dedicated Servers</h3><p>Physical servers for businesses that demand high reliability.</p></div>
<div class="service"><div class="sw sw3"></div><h3>High-Power GPU Cloud</h3><p>High-performance GPU infrastructure for AI development and research.</p></div>
</div>
<div class="footerband">
<span>© SAKURA internet</span>
<span>Cloud · Dedicated Servers · Data Centers · Company</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064d2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0064d2;
border: 1px solid #0064d2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6e6f8; color: #0064d2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#191919; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; padding:24px 36px 0; gap:40px; }
.gallery { width:340px; height:340px; border-radius:8px; background:linear-gradient(135deg,#dfe6ee,#aebccb); position:relative; flex-shrink:0; }
.pcount { position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,0.5); color:#fff; font-size:12px; padding:3px 8px; border-radius:4px; }
.dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:4px; }
.dots span { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.6); }
.dots span.on { background:#fff; }
.detail { flex:1; padding-top:4px; }
.title { font-size:22px; font-weight:700; letter-spacing:-0.2pt; line-height:1.3; }
.pricebig { font-size:24px; font-weight:700; margin-top:12px; }
.badges { display:flex; gap:8px; margin-top:10px; }
.badge { font-size:12px; font-weight:700; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.badge.bin { background:rgba(0,100,210,0.10); color:#0064D2; }
.badge.bo { color:#86B817; padding-left:0; }
.timeleft { margin-top:8px; font-size:13px; font-weight:700; color:#E53238; }
.ctarow { display:flex; gap:10px; margin-top:18px; }
.cta-primary { background:#0064D2; color:#fff; padding:15px 28px; border-radius:999px; font-weight:700; font-size:16px; }
.cta-sec { background:#fff; border:1.5px solid #0064D2; color:#0064D2; padding:13px 24px; border-radius:999px; font-weight:700; font-size:15px; }
.seller { margin-top:24px; border-top:1px solid #E5E5E5; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
.seller .nm { font-weight:700; font-size:15px; }
.seller .fb { font-size:13px; color:#707070; margin-top:2px; }
.stars { color:#F5AF02; }
.outline-btn { border:1px solid #E5E5E5; border-radius:999px; padding:8px 16px; font-size:14px; font-weight:600; }
</style>
</head>
<body>
<div class="stage">
<div class="gallery">
<div class="pcount">1 / 9</div>
<div class="dots"><span class="on"></span><span></span><span></span><span></span></div>
</div>
<div class="detail">
<div style="font-size:12px;font-weight:700;color:#0064D2;text-transform:uppercase;letter-spacing:0.3pt;margin-bottom:6px">eBay (iOS)</div>
<div class="title">Vintage Leica M3 35mm Rangefinder Camera — Fully Serviced</div>
<div class="pricebig">$1,249.00</div>
<div class="badges"><span class="badge bin">Buy It Now</span><span class="badge bo">or Best Offer</span></div>
<div class="timeleft">Time left: 4h 12m left</div>
<div style="font-size:13px;color:#707070;margin-top:6px">Brand New · Free returns · Free shipping</div>
<div class="ctarow">
<div class="cta-primary">Buy It Now</div>
<div class="cta-sec">Add to cart</div>
</div>
<div class="seller">
<div><div class="nm">camera_relics_co</div><div class="fb"><span class="stars">★★★★★</span> 99.2% positive (12,481)</div></div>
<div class="outline-btn">Visit store</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff485a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff485a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faa7af; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141413; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff485a; color: #141413;
border: 1px solid #141413; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff485a; color: #f5f5f5;
border: 1px solid #fd6473; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faa7af; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9404f; color: #141413;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141413; box-sizing:border-box;
font-family:"Noto Sans TC","Microsoft JhengHei","PingFang TC",-apple-system,Helvetica,sans-serif; }
* { box-sizing:border-box; }
header { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #ddd9d8; }
.brand { font-weight:700; font-size:18px; color:#ff485a; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#535150; }
.cta { background:#ff485a; color:#ffffff; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:36px 40px 20px; }
.hero h1 { font-size:38px; font-weight:700; margin:0 0 10px; line-height:1.3; }
.hero .sub { font-size:15px; color:#535150; margin:0 0 18px; }
.outlinebtn { display:inline-block; background:#ffffff; color:#141413; border:4px solid #141413; border-radius:16px;
padding:13px 22px; font-size:16px; font-weight:500; }
.article { display:flex; gap:24px; margin:14px 60px 0; }
.col { flex:1; }
.col h2 { font-size:22px; margin:0 0 8px; }
.col p { font-size:14px; line-height:1.9; letter-spacing:0.5px; color:#535150; margin:0 0 10px; }
.col a { color:#00b3c6; }
.side { width:220px; display:flex; flex-direction:column; gap:12px; }
.badge { background:#f6f6f6; color:#7a7574; border-radius:14px; padding:2px 8px; font-size:12px; display:inline-block; width:fit-content; }
.card { border:1px solid #ddd9d8; border-radius:16px; padding:14px; }
.card h4 { font-size:13px; margin:0 0 4px; }
.card p { font-size:11px; color:#a29c9b; margin:0; }
.tags { display:flex; gap:8px; flex-wrap:wrap; }
.tags span { font-size:12px; color:#a29c9b; }
</style></head>
<body>
<header>
<span class="brand">Vocus</span>
<div class="navlinks"><span>Home</span><span>Articles</span><span>Community Lounge</span><span>For Business</span></div>
<span class="cta">Sign up / Log in</span>
</header>
<section class="hero">
<h1>Where the Sparks Begin</h1>
<div class="sub">Let creation be the origin of everything</div>
<span class="outlinebtn">Sign up now</span>
</section>
<section class="article">
<div class="col">
<span class="badge">Creation Partner</span>
<h2>Why I stopped renting an audience from a feed</h2>
<p>Every square is a small frame where a private thought becomes public writing. This week I moved my paid column here, and here is what changed for readers who stayed.</p>
<p>The reading rhythm matters more than I expected — <a href="#">line height and spacing</a> decide whether a long essay survives past the first paragraph.</p>
<div class="tags"><span>#writing</span><span>#independent-creators</span></div>
</div>
<div class="side">
<div class="card"><h4>Content & Data</h4><p>Track what your readers actually finish.</p></div>
<div class="card"><h4>Growth & Monetization</h4><p>Own your subscriber relationship end to end.</p></div>
<div class="card"><h4>Fan Community</h4><p>Reply, gather, and grow together.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #101010;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #101010;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #101010; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #606f7b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffc617; color: #101010;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #101010;
border: 1px solid #ffc617; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #101010;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #606f7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #ffc617; color: #101010;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101010; box-sizing:border-box;
font-family:'Jost', 'Segoe UI', system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:20px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#606f7b; }
.navlinks span:first-child { color:#101010; }
.navicons { display:flex; gap:14px; align-items:center; }
.search { width:150px; height:34px; background:#f8f9fa; border-radius:8px; font-size:12px; color:#a7a7a7; display:flex; align-items:center; padding-left:14px; }
.hero { background:#f8f9fa; padding:30px 40px; display:flex; align-items:center; gap:34px; }
.hero-copy { flex:1.2; }
.hero h1 { font-size:34px; font-weight:600; line-height:1.15; letter-spacing:-0.4px; margin:0 0 10px; max-width:420px; }
.hero p { font-size:14px; color:#3d4852; margin:0 0 18px; max-width:380px; line-height:1.5; }
.btn-primary { background:#ffc617; color:#101010; border:none; border-radius:8px; padding:14px 32px;
font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; height:48px; }
.hero-visual { flex:1; height:160px; border-radius:8px; background:#fff; position:relative; overflow:hidden; border:1px solid #dae1e7; }
.hero-visual::before { content:''; position:absolute; width:100px; height:120px; border-radius:8px; background:linear-gradient(160deg,#ffe899,#ffc617); left:40px; top:14px; }
.hero-visual::after { content:''; position:absolute; width:70px; height:90px; border-radius:8px; background:linear-gradient(160deg,#252627,#101010); right:60px; bottom:14px; }
.section { padding:20px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:22px; font-weight:600; margin:0; }
.sec-head span { font-size:12px; font-weight:600; text-transform:uppercase; color:#101010; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.08); padding:14px; }
.thumb { aspect-ratio:1/1; border-radius:8px; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(150deg,#ffe899,#ffc617); }
.t2 { background:linear-gradient(150deg,#e9f9ee,#38c172); }
.t3 { background:linear-gradient(150deg,#f9e4ef,#ef228b); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase;
padding:2px 8px; border-radius:2px; }
.badge.new { background:#ffc617; color:#101010; }
.badge.sale { background:#ef228b; color:#fff; }
.card h3 { font-size:16px; font-weight:500; margin:0 0 4px; }
.card .price { font-size:16px; color:#3d4852; margin:0; }
footer { background:#101010; color:#a7a7a7; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#a7a7a7; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Better Life</p>
<div class="navlinks"><span>Shop All</span><span>Dish</span><span>Laundry</span><span>Home</span></div>
<div class="navicons"><div class="search">Search…</div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>The Better Ingredient</h1>
<p>Plant-powered cleaning that skips the harsh chemicals and never skips the clean.</p>
<button class="btn-primary">Shop Now</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Best Sellers</h2><span>Shop All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<h3>Foaming Hand Soap, Citrus</h3>
<p class="price">$5.99</p>
</div>
<div class="card">
<div class="thumb t2"></div>
<h3>Laundry Detergent, Free & Clear</h3>
<p class="price">$14.99</p>
</div>
<div class="card">
<div class="thumb t3"><span class="badge sale">Sale</span></div>
<h3>All-Purpose Cleaner Bundle</h3>
<p class="price">$18.99</p>
</div>
</div>
</section>
<footer>
<span>© Better Life</span>
<div><a href="#">Shop</a><a href="#">Learn</a><a href="#">About</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden;
background:radial-gradient(circle at 30% 20%, #2a2422 0%, #000 55%),
radial-gradient(circle at 75% 75%, #201d2b 0%, #000 60%); }
.stage::after { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px); }
.storybars { position:absolute; top:16px; left:16px; right:16px; display:flex; gap:5px; z-index:5; }
.storybars i { flex:1; height:2.5px; background:rgba(255,255,255,0.3); border-radius:2px; display:block; }
.storybars i.played { background:#FFFFFF; }
.ticker { position:absolute; top:30px; left:16px; z-index:5; display:flex; align-items:center; gap:8px; }
.note { width:13px; height:13px; border:2px solid #fff; border-radius:50%; position:relative; }
.ticker-text { font-size:11px; font-weight:500; color:rgba(255,255,255,0.85); }
.eq { display:flex; gap:2px; align-items:flex-end; height:10px; }
.eq span { width:2px; background:#fff; border-radius:1px; }
.eq span:nth-child(1){height:4px;} .eq span:nth-child(2){height:9px;} .eq span:nth-child(3){height:6px;} .eq span:nth-child(4){height:8px;}
.wordmark { position:absolute; top:16px; right:20px; font-size:20px; font-weight:600; letter-spacing:-0.5px; z-index:5; color:#fff; }
.scrim { position:absolute; left:0; right:0; bottom:0; height:62%;
background:linear-gradient(to top, rgba(0,0,0,0.92), transparent); z-index:2; }
.caption { position:absolute; left:20px; right:20px; bottom:96px; z-index:6; }
.name { font-size:28px; font-weight:600; letter-spacing:-0.4px; margin:0 0 6px; color:#fff; }
.role { font-size:13px; font-weight:500; letter-spacing:0.4px; text-transform:uppercase; color:rgba(255,255,255,0.92); margin-bottom:8px; }
.bio { font-size:15px; color:rgba(255,255,255,0.72); line-height:1.4; margin-bottom:8px; max-width:520px; }
.loc { font-size:13px; color:rgba(255,255,255,0.6); }
.actions { position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center;
align-items:center; gap:56px; z-index:6; }
.skip { font-size:26px; color:rgba(255,255,255,0.9); font-weight:300; }
.heart { width:60px; height:60px; border-radius:50%; border:1px solid #fff; display:flex; align-items:center; justify-content:center; font-size:24px; }
.noteicon { font-size:22px; color:rgba(255,255,255,0.9); }
.chip-row { position:absolute; top:80px; right:20px; z-index:5; display:flex; gap:8px; flex-direction:column; align-items:flex-end; }
.chip { border:1px solid #2E2E2E; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:500; color:#fff; }
.chip.selected { background:#fff; color:#000; border-color:#fff; }
</style></head>
<body>
<div class="stage">
<div class="wordmark">Raya (iOS)</div>
<div class="storybars">
<i class="played"></i><i class="played"></i><i></i><i></i><i></i>
</div>
<div class="ticker">
<span class="note"></span>
<span class="ticker-text">Frank Ocean — Pink + White</span>
<div class="eq"><span></span><span></span><span></span><span></span></div>
</div>
<div class="chip-row">
<span class="chip selected">Film</span>
<span class="chip">Music</span>
<span class="chip">Travel</span>
</div>
<div class="scrim"></div>
<div class="caption">
<p class="name">Elena</p>
<p class="role">DIRECTOR · FILM & MUSIC</p>
<p class="bio">Making quiet films about loud cities. Currently based between LA and Lisbon.</p>
<p class="loc">📍 Los Angeles · 4 mi</p>
</div>
<div class="actions">
<span class="skip">✕</span>
<div class="heart">♡</div>
<span class="noteicon">✉</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f3f1; color: #fc4c5e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f3f1; color: #fc4c5e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #fc4c5e; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: 0.5px; margin: 0; color: #6c6c6c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #00558d; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #00558d;
border: 1px solid #00558d; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0a0a0a;
border: 1px solid #bdbdbd; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6c6c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #e02b27; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f3f1; color:#0a0a0a; box-sizing:border-box;
font-family:'Univers Medium','Univers Regular','Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.promo { flex:0 0 24px; background:#e02b27; color:#ffffff; display:flex; align-items:center; justify-content:center;
font-size:10.5px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; }
.utility { flex:0 0 24px; background:#002d5e; color:#ffffff; display:flex; align-items:center; justify-content:center;
gap:18px; font-size:10.5px; letter-spacing:0.2px; }
nav { flex:0 0 54px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#ffffff; border-bottom:1px solid #bdbdbd; }
.brand { font-size:16px; font-weight:600; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:20px; font-size:12.5px; font-weight:500; color:#0a0a0a; }
.navicons { display:flex; gap:10px; }
.icon-dot { width:26px; height:26px; border:1px solid #bdbdbd; border-radius:4px; display:flex; align-items:center;
justify-content:center; font-size:10px; color:#6c6c6c; }
.hero { flex:0 0 138px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; gap:20px; }
.hero-render { position:relative; width:150px; height:100px; flex-shrink:0; }
.platter { position:absolute; width:96px; height:96px; border-radius:9999px; background:radial-gradient(circle,#2a2a2a 0%,#111 60%,#000 100%);
left:0; top:2px; border:2px solid #00558d; }
.platter::after { content:''; position:absolute; inset:38%; background:#00558d; border-radius:9999px; }
.tonearm { position:absolute; width:70px; height:6px; background:#00558d; right:0; top:20px; border-radius:2px; transform:rotate(18deg); transform-origin:right center; }
.hero-copy { max-width:420px; text-align:right; }
.hero-copy .modeltag { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#6c6c6c; }
.hero h1 { font-size:24px; font-weight:600; letter-spacing:-0.2px; margin:6px 0 6px; }
.hero p { font-size:12.5px; color:#515153; margin:0 0 10px; }
.btn-primary { background:#00558d; color:#ffffff; border:none; border-radius:4px; padding:9px 18px;
font-weight:600; font-size:12px; letter-spacing:0.3px; text-transform:uppercase; }
.cattabs { flex:0 0 34px; display:flex; align-items:center; gap:22px; padding:0 32px; background:#ffffff;
border-bottom:1px solid #efefef; font-size:12.5px; font-weight:500; color:#515153; }
.cattabs .active { color:#00558d; border-bottom:2px solid #00558d; padding-bottom:9px; }
.tablewrap { flex:1 1 auto; padding:14px 32px; overflow:hidden; }
table { width:100%; border-collapse:collapse; background:#f5f5f5; border:1px solid #bdbdbd; }
thead th { background:#f1f1f1; font-size:10px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
color:#0a0a0a; text-align:left; padding:7px 10px; border-bottom:1px solid #bdbdbd; }
tbody td { font-size:12px; color:#515153; padding:8px 10px; border-bottom:1px solid #bdbdbd; }
tbody tr:last-child td { border-bottom:none; }
td.model { font-family:'Univers Condensed','Helvetica Neue',sans-serif; font-size:11.5px; letter-spacing:0.3px; color:#0a0a0a; font-weight:600; }
td.price { font-weight:600; color:#0a0a0a; }
.badge-new, .badge-sale { display:inline-block; font-size:9px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
color:#ffffff; padding:2px 6px; border-radius:0; }
.badge-new { background:#00558d; }
.badge-sale { background:#e02b27; }
.dash { color:#a6a6a6; }
footer { flex:0 0 42px; background:#0a0a0a; color:#bdbdbd; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-size:11px; }
footer .link { color:#bdbdbd; }
</style></head>
<body>
<div class="promo">Free 2-Day Shipping on Turntables $299+</div>
<div class="utility"><span>Support</span><span>Warranty Registration</span><span>Store Locator</span></div>
<nav>
<p class="brand">Audio Technica Vinyl AC 2</p>
<div class="navlinks">
<span>Turntables</span><span>Cartridges</span><span>Headphones</span><span>Microphones</span><span>Accessories</span>
</div>
<div class="navicons">
<div class="icon-dot">Q</div>
<div class="icon-dot">A</div>
</div>
</nav>
<section class="hero">
<div class="hero-render">
<div class="platter"></div>
<div class="tonearm"></div>
</div>
<div class="hero-copy">
<span class="modeltag">AT-LP120XBT-USB</span>
<h1>Direct-drive precision, built to last.</h1>
<p>Fully manual belt-alternative turntable with USB output and Bluetooth streaming.</p>
<button class="btn-primary">View Specifications</button>
</div>
</section>
<div class="cattabs">
<span class="active">All Products</span><span>Turntables</span><span>Cartridges</span><span>Headphones</span><span>Microphones</span>
</div>
<section class="tablewrap">
<table>
<thead>
<tr><th>Model</th><th>Type</th><th>Output</th><th>Price</th><th>Status</th></tr>
</thead>
<tbody>
<tr>
<td class="model">AT-LP120XBT-USB</td><td>Direct-Drive Turntable</td><td>USB / Bluetooth</td>
<td class="price">$299</td><td><span class="badge-new">New</span></td>
</tr>
<tr>
<td class="model">AT-VM95E</td><td>Dual Moving Magnet Cartridge</td><td>—</td>
<td class="price">$79</td><td><span class="dash">—</span></td>
</tr>
<tr>
<td class="model">ATH-M50x</td><td>Studio Monitor Headphones</td><td>38mm Driver</td>
<td class="price">$149</td><td><span class="badge-sale">Sale</span></td>
</tr>
<tr>
<td class="model">AT2020</td><td>Cardioid Condenser Microphone</td><td>XLR</td>
<td class="price">$99</td><td><span class="dash">—</span></td>
</tr>
</tbody>
</table>
</section>
<footer>
<span>© Audio Technica Vinyl AC 2</span>
<span><span class="link">Turntables</span> · <span class="link">Support</span> · <span class="link">Compare</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fee500; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fee500; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2d900; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fee500; color: #000000;
border: 1px solid #f2d900; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fee500; color: #111111;
border: 1px solid #d8c303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fce300; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Kakao T detail mock</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif; }
* { box-sizing:border-box; }
.wrap { width:960px; height:640px; position:relative; }
.map { position:absolute; top:0; left:0; right:0; height:210px; overflow:hidden;
background:linear-gradient(160deg, #eef1f3, #dfe3e6); }
.map .roadv { position:absolute; top:0; bottom:0; width:14px; background:#ffffff; }
.map .roadh { position:absolute; left:0; right:0; height:14px; background:#ffffff; }
.map .block { position:absolute; background:#e4e7ea; border-radius:4px; }
.map .pin { position:absolute; width:20px; height:20px; border-radius:50%; background:#191919;
box-shadow:0 0 0 6px rgba(254,229,0,0.45), 0 0 0 12px rgba(254,229,0,0.2); }
.map .topbar { position:absolute; top:14px; left:20px; background:#ffffff; border-radius:999px; padding:8px 16px;
font-size:14px; font-weight:700; color:#191919; box-shadow:0px 2px 12px rgba(0,0,0,0.08); }
.sheet { position:absolute; left:0; right:0; bottom:0; height:430px; background:#ffffff;
border-radius:20px 20px 0 0; box-shadow:0px -4px 16px rgba(0,0,0,0.10); padding:14px 24px 24px 24px;
display:flex; flex-direction:column; gap:14px; }
.handle { width:36px; height:4px; border-radius:999px; background:#e5e6e8; align-self:center; }
.sheet h1 { margin:0; font-size:22px; font-weight:700; line-height:1.35; color:#191919; }
.classes { display:flex; gap:12px; }
.vcard { flex:1; border:1px solid #e5e6e8; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.vcard.sel { border:2px solid #191919; }
.vicon { width:34px; height:34px; border-radius:10px; background:#f5f6f7; }
.vcard.sel .vicon { background:#fee500; }
.vcard .vname { font-size:16px; font-weight:600; color:#26282b; }
.vcard .veta { font-size:12px; font-weight:400; color:#76787a; }
.vcard .vfare { font-size:14px; font-weight:700; color:#191919; }
.farerow { display:flex; align-items:center; justify-content:space-between; }
.farerow .fareblock .flabel { font-size:12px; font-weight:400; color:#76787a; }
.farerow .fareblock .fval { font-size:24px; font-weight:700; letter-spacing:-0.4px; color:#191919; }
.pill-live { background:rgba(15,184,130,0.12); color:#0fb882; border-radius:999px; padding:4px 12px; font-size:12px; font-weight:700; }
.cta { width:100%; height:52px; border-radius:12px; background:#fee500; color:#191919; font-size:16px; font-weight:600;
display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="wrap">
<div class="map">
<div class="block" style="left:0; top:0; width:220px; height:80px;"></div>
<div class="block" style="right:0; top:100px; width:260px; height:90px;"></div>
<div class="block" style="left:260px; top:0; width:180px; height:60px;"></div>
<div class="roadv" style="left:240px;"></div>
<div class="roadv" style="left:560px;"></div>
<div class="roadh" style="top:96px;"></div>
<div class="pin" style="left:420px; top:70px;"></div>
<div class="topbar">Kakao T</div>
</div>
<div class="sheet">
<div class="handle"></div>
<h1>Choose a ride</h1>
<div class="classes">
<div class="vcard sel"><div class="vicon"></div><div class="vname">Standard</div><div class="veta">3 min away</div><div class="vfare">$18.40</div></div>
<div class="vcard"><div class="vicon"></div><div class="vname">Blue</div><div class="veta">5 min away</div><div class="vfare">$21.90</div></div>
<div class="vcard"><div class="vicon"></div><div class="vname">Black</div><div class="veta">8 min away</div><div class="vfare">$34.00</div></div>
</div>
<div class="farerow">
<div class="fareblock"><div class="flabel">Estimated fare</div><div class="fval">$18.40</div></div>
<div class="pill-live">Driver nearby</div>
</div>
<div class="cta">Call a ride</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0052ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0052ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87acfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7931a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0052ff; color: #f7931a;
border: 1px solid #f7931a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0052ff; color: #f5f5f5;
border: 1px solid #276cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87acfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #285cda; color: #f7931a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0A0B0D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric:tabular-nums; }
* { box-sizing:border-box; }
.screen { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:space-between;
padding:0 26px; border-bottom:0.5px solid #E1E4E8; }
.cmark { width:26px; height:26px; border-radius:50%; border:3px solid #0052FF; position:relative; }
.cmark::after { content:''; position:absolute; left:-1px; right:-1px; top:50%; height:3px;
background:#0052FF; transform:translateY(-1.5px); }
.navicons { display:flex; gap:18px; color:#5B616E; font-size:16px; }
.body { flex:1; display:flex; padding:20px 26px 0; gap:36px; overflow:hidden; }
.left { flex:1.15; }
.label { font-size:11px; font-weight:700; letter-spacing:0.6pt; color:#5B616E; text-transform:uppercase; }
.hero { font-size:38px; font-weight:700; margin:6px 0 2px; letter-spacing:-0.5pt; }
.change { font-size:15px; font-weight:500; color:#05B169; }
.chartwrap { margin-top:14px; }
.chips { display:flex; gap:6px; margin-top:8px; }
.chip { font-size:12px; font-weight:600; color:#5B616E; padding:5px 10px; border-radius:8px; letter-spacing:0.3pt; }
.chip.active { background:#EEF0F3; color:#0A0B0D; }
.quad { display:flex; gap:8px; margin-top:20px; }
.qbtn { flex:1; background:#F7F8FA; border-radius:12px; padding:12px 4px; text-align:center; }
.qbtn .ic { font-size:18px; color:#0052FF; }
.qbtn .lb { font-size:12px; font-weight:500; margin-top:6px; }
.right { flex:1; border-left:0.5px solid #E1E4E8; padding-left:30px; overflow:hidden; }
.sectitle { font-size:16px; font-weight:700; margin-bottom:8px; }
.row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:0.5px solid #E1E4E8; }
.icon { width:36px; height:36px; border-radius:50%; color:#fff; font-size:14px; font-weight:700;
display:flex; align-items:center; justify-content:center; flex:0 0 36px; }
.btc { background:#F7931A; }
.eth { background:#627EEA; }
.usdc { background:#2775CA; }
.amid { flex:1; }
.aname { font-size:14px; font-weight:600; }
.atick { font-size:11.5px; color:#5B616E; letter-spacing:0.3pt; }
.aend { text-align:right; }
.aprice { font-size:14px; font-weight:500; }
.achg { font-size:11.5px; font-weight:500; }
.up { color:#05B169; }
.down { color:#CF202F; }
.spark { width:44px; height:16px; }
</style></head>
<body>
<div class="screen">
<div class="nav"><div class="cmark"></div>
<div class="navicons"><span>🔔</span><span>🔍</span></div></div>
<div class="body">
<div class="left">
<div class="label">Portfolio Balance</div>
<div class="hero">$12,847.93</div>
<div class="change">+$847.93 (+6.59%)</div>
<div class="chartwrap">
<svg width="380" height="120" viewBox="0 0 380 120">
<polyline points="0,90 40,80 80,86 120,60 160,68 200,40 240,50 280,22 320,34 380,14"
fill="none" stroke="#05B169" stroke-width="2"/>
</svg>
<div class="chips"><span class="chip">1H</span><span class="chip active">1D</span>
<span class="chip">1W</span><span class="chip">1M</span><span class="chip">1Y</span><span class="chip">ALL</span></div>
</div>
<div class="quad">
<div class="qbtn"><div class="ic">↑</div><div class="lb">Buy</div></div>
<div class="qbtn"><div class="ic">↓</div><div class="lb">Sell</div></div>
<div class="qbtn"><div class="ic">✈</div><div class="lb">Send</div></div>
<div class="qbtn"><div class="ic">▤</div><div class="lb">Receive</div></div>
</div>
</div>
<div class="right">
<div class="sectitle">Coinbase (iOS)</div>
<div class="row"><div class="icon btc">₿</div>
<div class="amid"><div class="aname">Bitcoin</div><div class="atick">BTC · 0.1842 BTC</div></div>
<svg class="spark" viewBox="0 0 44 16"><polyline points="0,12 8,9 16,10 24,4 32,6 44,2" fill="none" stroke="#05B169" stroke-width="1.5"/></svg>
<div class="aend"><div class="aprice">$12,389.42</div><div class="achg up">+1.92%</div></div></div>
<div class="row"><div class="icon eth">◆</div>
<div class="amid"><div class="aname">Ethereum</div><div class="atick">ETH · 3.21 ETH</div></div>
<svg class="spark" viewBox="0 0 44 16"><polyline points="0,4 8,7 16,5 24,11 32,9 44,13" fill="none" stroke="#CF202F" stroke-width="1.5"/></svg>
<div class="aend"><div class="aprice">$8,102.10</div><div class="achg down">-0.84%</div></div></div>
<div class="row"><div class="icon usdc">$</div>
<div class="amid"><div class="aname">USD Coin</div><div class="atick">USDC · 356.51 USDC</div></div>
<svg class="spark" viewBox="0 0 44 16"><polyline points="0,8 8,8 16,8 24,8 32,8 44,8" fill="none" stroke="#05B169" stroke-width="1.5"/></svg>
<div class="aend"><div class="aprice">$356.51</div><div class="achg up">+0.01%</div></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #5f6368; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.2px; background: #0054a6; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.2px; background: #ffffff; color: #0054a6;
border: 1px solid #0054a6; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6368; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #d9d9d9; }
.brand { font-size:17px; font-weight:700; color:#0054a6; }
.navlinks { display:flex; gap:20px; font-size:12px; color:#333; }
.btn-primary { background:#0054a6; color:#fff; border:none; border-radius:2px; padding:9px 18px; font-size:12px; font-weight:700; }
.megabar { background:#f2f6fb; border-bottom:1px solid #d9d9d9; padding:6px 32px; font-size:11px; color:#5f6368; display:flex; gap:20px; }
main { display:flex; height:calc(640px - 58px - 27px - 40px); }
.gallery { width:300px; background:#f5f5f5; position:relative; display:flex; align-items:center; justify-content:center; }
.vial { width:44px; height:130px; border-radius:6px; background:linear-gradient(180deg,#e8f1fb,#0054a6 60%); position:relative; }
.vial::before { content:''; position:absolute; top:-16px; left:8px; width:28px; height:18px; background:#1a1a1a; border-radius:2px; }
.info { flex:1; padding:22px 30px; display:flex; flex-direction:column; gap:10px; border-right:1px solid #d9d9d9; }
.catnum { font-size:11px; color:#5f6368; font-family:monospace; }
h1 { font-size:19px; font-weight:700; margin:0; }
.metarow { display:flex; gap:16px; font-size:11px; color:#5f6368; flex-wrap:wrap; }
.metarow b { color:#1a1a1a; }
.apps { display:flex; gap:6px; }
.app { background:#e8f1fb; color:#0054a6; font-size:10px; font-weight:700; padding:3px 8px; border-radius:2px; }
.spectable { border:1px solid #d9d9d9; font-size:11px; }
.srow { display:flex; border-bottom:1px solid #ebebeb; }
.srow:last-child { border-bottom:none; }
.srow div { padding:6px 10px; flex:1; }
.srow div:first-child { color:#5f6368; background:#f2f6fb; }
.side { width:250px; padding:22px 24px; display:flex; flex-direction:column; gap:12px; }
.price { font-size:20px; font-weight:700; }
.avail { font-size:12px; color:#2e7d32; font-weight:700; }
.btn-add { background:#0054a6; color:#fff; border:none; border-radius:2px; padding:12px; font-size:13px; font-weight:700; }
.btn-quote { background:#fff; color:#0054a6; border:1px solid #0054a6; border-radius:2px; padding:12px; font-size:13px; font-weight:700; }
.link { font-size:11px; color:#0054a6; }
footer { padding:10px 32px; border-top:1px solid #d9d9d9; font-size:10px; color:#5f6368; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bio Rad Laboratories</div>
<div class="navlinks"><span>Life Science</span><span>Clinical Diagnostics</span><span>Process Media</span></div>
<button class="btn-primary">Sign In</button>
</nav>
<div class="megabar"><span>Droplet Digital PCR</span><span>Western Blotting</span><span>Antibodies</span><span>Cell Biology</span><span>Food Safety</span></div>
<main>
<div class="gallery"><div class="vial"></div></div>
<div class="info">
<span class="catnum">Cat. #1704272 · 96-well</span>
<h1>QX600 ddPCR Supermix for Probes</h1>
<div class="metarow"><b>Reactivity:</b> Human, Mouse, Rat</div>
<div class="apps"><span class="app">ddPCR</span><span class="app">qPCR</span><span class="app">ELISA</span></div>
<div class="spectable">
<div class="srow"><div>Format</div><div>2 × 1.1 mL</div></div>
<div class="srow"><div>Storage</div><div>-20°C, protect from light</div></div>
<div class="srow"><div>Applications</div><div>Absolute quantification</div></div>
</div>
<span class="link">Download Datasheet · Download Protocol</span>
</div>
<div class="side">
<span class="price">$412.00</span>
<span class="avail">In Stock</span>
<button class="btn-add">Add to Cart</button>
<button class="btn-quote">Request a Quote</button>
</div>
</main>
<footer><span>© Bio Rad Laboratories</span><span>Support · Distributors · Documentation</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a73e8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a73e8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92baef; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a73e8; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a73e8; color: #f5f5f5;
border: 1px solid #3d88ea; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92baef; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2471ea; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3c4043; box-sizing:border-box;
font-family:'Google Sans Text','Google Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; background:#ffffff; }
.search-zone { flex:0 0 auto; height:236px; background:#22242a; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:14px; padding:14px 40px; }
.marks { display:flex; gap:8px; margin-bottom:2px; }
.dot { width:14px; height:14px; border-radius:50%; }
.dot.d1 { background:#1a73e8; }
.dot.d2 { background:#e8734a; }
.dot.d3 { background:#e8b91a; }
.dot.d4 { background:#3fa66a; }
.brand-dark { font-size:15px; font-weight:500; color:#e8e8e8; letter-spacing:0.2px; margin:0 0 6px; }
.searchbar { width:480px; height:48px; background:#ffffff; border-radius:24px; display:flex; align-items:center;
gap:10px; padding:0 20px; box-shadow:0 1px 6px rgba(0,0,0,0.25); }
.searchbar .glass { width:15px; height:15px; border:2px solid #5f6368; border-radius:50%; position:relative; flex:0 0 auto; }
.searchbar .glass::after { content:''; position:absolute; width:6px; height:2px; background:#5f6368;
right:-6px; bottom:-1px; transform:rotate(45deg); }
.searchbar span { font-size:16px; color:#474747; font-family:Arial,sans-serif; }
.keyrow { display:flex; gap:10px; margin-top:2px; }
.search-key { background:#303134; color:#e8eaed; border:1px solid #303134; border-radius:8px; padding:0 16px;
height:36px; font-size:14px; font-weight:500; font-family:Arial,sans-serif; }
.biz-zone { flex:1 1 auto; display:flex; padding:22px 40px; gap:26px; overflow:hidden; }
.results { flex:1 1 auto; display:flex; flex-direction:column; gap:12px; min-width:0; }
.biz-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.biz-head h2 { font-size:20px; font-weight:500; color:#202124; margin:0; letter-spacing:-0.2px; }
.biz-actions { display:flex; gap:10px; }
.btn-biz-primary { background:#1a73e8; color:#ffffff; border:1px solid transparent; border-radius:1000px;
padding:0 16px; height:42px; font-size:16px; font-weight:500; }
.btn-biz-secondary { background:#ffffff; color:#1a73e8; border:1px solid #dadce0; border-radius:1000px;
padding:0 16px; height:42px; font-size:16px; font-weight:500; }
.result-card { background:#ffffff; border-radius:24px; padding:18px 18px 20px; box-shadow:none;
border:1px solid #ecedf0; display:flex; flex-direction:column; gap:5px; }
.result-card .url { font-size:12px; color:#5f6368; }
.result-card .title { font-size:18px; color:#1a73e8; font-weight:500; margin:0; }
.result-card .snippet { font-size:14px; color:#3c4043; line-height:1.5; margin:0; }
.sidebar { width:210px; flex:0 0 auto; display:flex; flex-direction:column; gap:8px; }
.side-label { font-size:12px; font-weight:500; color:#5f6368; text-transform:uppercase; letter-spacing:0.06em;
margin-bottom:2px; }
.nav-item { height:48px; display:flex; align-items:center; padding:0 10px; border-radius:4px; font-size:14px;
font-weight:500; color:#202124; }
.nav-item.on { background:#e8f1fd; color:#1a73e8; }
</style></head>
<body>
<div class="page">
<div class="search-zone">
<div class="marks"><span class="dot d1"></span><span class="dot d2"></span><span class="dot d3"></span><span class="dot d4"></span></div>
<p class="brand-dark">Google</p>
<div class="searchbar"><span class="glass"></span><span>local bakery near me open now</span></div>
<div class="keyrow">
<button class="search-key">Google Search</button>
<button class="search-key">I'm Feeling Lucky</button>
</div>
</div>
<div class="biz-zone">
<div class="results">
<div class="biz-head">
<h2>Business Profile</h2>
<div class="biz-actions">
<button class="btn-biz-secondary">Message</button>
<button class="btn-biz-primary">Call now</button>
</div>
</div>
<div class="result-card">
<span class="url">maple-and-rye.example › home</span>
<p class="title">Maple & Rye Bakehouse</p>
<p class="snippet">Open now · Closes 7 PM · Sourdough, pastries, and cold brew on Elm Street. Rated 4.8 from 1,204 reviews.</p>
</div>
<div class="result-card">
<span class="url">riverside-coffee.example › locations</span>
<p class="title">Riverside Coffee Roasters</p>
<p class="snippet">Open now · Closes 8 PM · Small-batch roastery with a corner reading nook two blocks from the river.</p>
</div>
</div>
<div class="sidebar">
<span class="side-label">Menu</span>
<div class="nav-item on">Overview</div>
<div class="nav-item">Photos</div>
<div class="nav-item">Reviews</div>
<div class="nav-item">Hours</div>
<div class="nav-item">Products</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1e1e1e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1e1e1e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1e1e1e; color: #f5f5f5;
border: 1px solid #404040; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #424242; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202429; box-sizing:border-box;
font-family:"Noto Sans KR", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #eee; }
.nav .brand { font-weight:700; font-size:18px; }
.nav .links { display:flex; gap:20px; font-size:13px; color:#666; }
.layout { display:flex; padding:24px 28px 0; gap:32px; }
.gallery { width:340px; }
.maximg { width:340px; height:340px; border-radius:6px; background:linear-gradient(150deg,#f7d9e4,#f2c6d6 55%,#e9aec3); position:relative; }
.maximg::after { content:''; position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%;
background:rgba(0,0,0,0.15); }
.thumbs { display:flex; gap:8px; margin-top:8px; }
.thumb { width:60px; height:60px; border-radius:4px; background:linear-gradient(150deg,#f7d9e4,#f2c6d6); }
.thumb.sel { outline:2px solid #1e1e1e; }
.detail { flex:1; }
.brandtag { font-size:12px; color:#808893; margin-bottom:6px; }
.title { font-size:18px; font-weight:500; margin:0 0 10px; line-height:1.4; }
.price { font-size:24px; font-weight:700; margin:0 0 4px; }
.badge { display:inline-block; background:#ebeef2; color:#808893; font-size:13px; font-weight:700; border-radius:6px; padding:2px 8px 3px; margin-bottom:14px; }
.promo { display:inline-block; background:#ff365d; color:#fff; font-size:12px; font-weight:700; border-radius:4px; padding:3px 8px; margin-left:8px; }
.options { border-top:1px solid #e6e6e6; padding-top:14px; }
.optlabel { font-size:13px; color:#666; margin-bottom:6px; }
.optbox { border:1px solid #e6e6e6; border-radius:6px; padding:10px 14px; font-size:13px; display:flex; justify-content:space-between; margin-bottom:20px; }
.optbox .dis { color:#e1e1e1; }
.actions { display:flex; gap:10px; }
.buy-direct { flex:1; height:56px; background:#1e1e1e; color:#fff; border-radius:6px; font-size:17px; font-weight:500;
display:flex; align-items:center; justify-content:center; }
.buy-partner { flex:1; height:56px; background:#00c73c; color:#fff; border-radius:6px; font-size:17px; font-weight:500;
display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Brandi</div>
<div class="links"><span>Women</span><span>Bags</span><span>Shoes</span><span>Beauty</span><span>Sale</span></div>
</nav>
<div class="layout">
<div class="gallery">
<div class="maximg"></div>
<div class="thumbs">
<div class="thumb sel"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div>
</div>
</div>
<div class="detail">
<div class="brandtag">MINJI STUDIO</div>
<h1 class="title">Belted Wrap Midi Dress — Dusty Rose</h1>
<div class="price">₩58,900 <span class="promo">-30%</span></div>
<span class="badge">Free shipping</span>
<div class="options">
<div class="optlabel">Size</div>
<div class="optbox"><span>Small</span><span>In stock</span></div>
<div class="optbox"><span>Medium</span><span>In stock</span></div>
<div class="optbox"><span class="dis">Large</span><span class="dis">Sold out</span></div>
</div>
<div class="actions">
<div class="buy-direct">Buy now</div>
<div class="buy-partner">Partner checkout</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #245abc; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #245abc;
border: 1px solid #245abc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dce5f4; color: #245abc;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#15181D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.gallery { position:relative; width:100%; height:224px;
background:linear-gradient(160deg,#8fd3c7 0%,#4f8bc9 55%,#245ABC 100%); }
.scrim { position:absolute; top:0; left:0; right:0; height:70px;
background:linear-gradient(to bottom, rgba(16,19,23,0.45), transparent); }
.ovbtn { position:absolute; top:14px; width:36px; height:36px; border-radius:50%;
background:rgba(16,19,23,0.55); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; }
.ovback { left:16px; } .ovshare { right:60px; } .ovsave { right:16px; }
.galbrand { position:absolute; top:18px; left:50%; transform:translateX(-50%); color:#fff;
font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:5px; }
.dot { width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,0.45); }
.dot.on { width:16px; background:#FFFFFF; }
.counter { position:absolute; right:14px; bottom:12px; background:rgba(16,19,23,0.7); color:#fff;
font-size:12px; font-weight:600; border-radius:999px; padding:4px 10px; }
.content { padding:14px 18px 0; overflow:hidden; }
.badgerow { display:flex; gap:8px; margin-bottom:8px; }
.badge { font-size:12px; font-weight:700; border-radius:6px; padding:4px 10px; }
.badge.premier { color:#245ABC; background:rgba(36,90,188,0.12); }
.badge.instant { color:#1F9D57; background:rgba(31,157,87,0.12); }
.title { font-size:21px; font-weight:700; margin:0 0 4px; letter-spacing:-0.3px; }
.locrow { font-size:14px; color:#5A6470; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.locrow .gold { color:#F2B01E; font-weight:700; }
.locrow .rev { color:#15181D; font-weight:700; }
.hr { border:none; border-top:1px solid #E1E5EB; margin:10px 0; }
.factsrow { display:flex; }
.fact { flex:1; text-align:center; }
.fact b { display:block; font-size:16px; font-weight:700; }
.fact span { font-size:12px; color:#5A6470; }
.wholehome { margin-top:12px; background:#F3F5F8; border-radius:8px; padding:9px 12px;
font-size:13px; color:#15181D; font-weight:600; }
.wholehome b { color:#1F9D57; }
.desc { margin-top:12px; font-size:14px; color:#5A6470; line-height:1.5; }
.bookingbar { position:absolute; bottom:0; left:0; right:0; height:76px;
background:rgba(16,19,23,0.97); display:flex; align-items:center; justify-content:space-between;
padding:0 22px; }
.price { font-size:24px; font-weight:800; color:#EDEFF2; }
.price span { font-size:13px; font-weight:400; color:#A3AAB4; }
.dateline { font-size:12px; color:#A3AAB4; text-decoration:underline; margin-top:2px; }
.bookbtn { background:#245ABC; color:#FFFFFF; font-size:16px; font-weight:700; border:none;
border-radius:10px; padding:14px 30px; }
</style></head>
<body>
<div class="gallery">
<div class="scrim"></div>
<p class="galbrand">Vrbo (iOS)</p>
<div class="ovbtn ovback">←</div>
<div class="ovbtn ovshare">↑</div>
<div class="ovbtn ovsave">♡</div>
<div class="dots"><span class="dot on"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<div class="counter">▧ 1 / 42</div>
</div>
<div class="content">
<div class="badgerow">
<span class="badge premier">Premier Host</span>
<span class="badge instant">Instant Book</span>
</div>
<p class="title">Cliffside Bluff House with Private Pool</p>
<div class="locrow"><span class="gold">★ 4.9</span><span class="rev">186 reviews</span><span>· Outer Banks, NC</span></div>
<hr class="hr">
<div class="factsrow">
<div class="fact"><b>8</b><span>Guests</span></div>
<div class="fact"><b>4</b><span>Bedrooms</span></div>
<div class="fact"><b>3</b><span>Bathrooms</span></div>
<div class="fact"><b>Entire</b><span>Whole home</span></div>
</div>
<div class="wholehome"><b>✓</b> You'll have the entire place to yourself</div>
<div class="desc">Perched above the dunes with wraparound decks and an unheated saltwater pool, this whole-home retreat sleeps eight across four quiet bedrooms.</div>
</div>
<div class="bookingbar">
<div>
<div class="price">$486 <span>/ night</span></div>
<div class="dateline">Jun 14 – 21 · 7 nights</div>
</div>
<button class="bookbtn">Book now</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #3d3935;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #3d3935;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #3d3935; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #0075fe; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #3d3935;
border: 1px solid #0075fe; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3d3935;
border: 1px solid #cececc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #02c316; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3d3935; box-sizing:border-box;
font-family:'Jost', 'Avenir', 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'Kopius', Georgia, 'Times New Roman', serif; }
nav { height:64px; background:#fff; border-bottom:1px solid #eeeeee; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-family:'Kopius', Georgia, serif; font-size:22px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:500; color:#645f59; }
.navlinks span:first-child { color:#0075fe; border-bottom:2px solid #0075fe; padding-bottom:4px; }
.cart { width:22px; height:22px; border:1.5px solid #3d3935; border-radius:5px; }
.hero { background:#f4f9ff; padding:28px 40px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.2; }
.hero h1 { font-family:'Kopius', Georgia, serif; font-size:36px; font-weight:700; line-height:1.15;
letter-spacing:-0.5px; margin:0 0 10px; max-width:480px; }
.hero p { font-size:14px; color:#645f59; margin:0 0 16px; max-width:400px; line-height:1.5; }
.row { display:flex; gap:10px; align-items:center; }
.btn-primary { background:#0075fe; color:#fff; border:none; border-radius:8px; padding:14px 26px;
font-size:14px; font-weight:600; height:48px; }
.btn-secondary { background:#fff; color:#3d3935; border:2px solid #dbdbdb; border-radius:8px; padding:12px 24px;
font-size:14px; font-weight:600; height:48px; }
.eco { display:flex; align-items:center; gap:4px; font-size:12px; color:#04af53; font-weight:600; }
.hero-visual { flex:1; height:170px; border-radius:8px; background:#fff; border:1px solid #dbdbdb; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:110px; height:130px; border-radius:16px; background:linear-gradient(160deg,#eaf3ff,#c6dcff); left:30px; top:18px; }
.hero-visual::after { content:''; position:absolute; width:60px; height:60px; border-radius:50%; background:#04af53; opacity:0.16; right:40px; bottom:20px; }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-family:'Kopius', Georgia, serif; font-size:22px; font-weight:600; margin:0; }
.sec-head span { font-size:13px; color:#0075fe; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border:1px solid #eeeeee; border-radius:8px; padding:16px; }
.thumb { aspect-ratio:1/1; border-radius:8px; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(150deg,#eaf3ff,#c6dcff); }
.t2 { background:linear-gradient(150deg,#e8f8ec,#b7e8c3); }
.t3 { background:linear-gradient(150deg,#f2f2f2,#dcdcdc); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:4px 10px; border-radius:9999px; color:#fff; }
.badge.new { background:#02c316; }
.badge.eco { background:#04af53; }
.stars { color:#f14336; font-size:12px; letter-spacing:1px; margin-bottom:4px; }
.card h3 { font-family:'Kopius', Georgia, serif; font-size:17px; font-weight:600; margin:0 0 4px; }
.card .price { font-size:16px; font-weight:600; margin:0; }
footer { background:#3d3935; color:#dbdbdb; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#dbdbdb; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Believe Diapers</p>
<div class="navlinks"><span>Diapers</span><span>Wipes</span><span>Subscribe</span><span>Our Story</span></div>
<div class="cart"></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Premium bamboo diapers you can believe in</h1>
<p>Ultra-soft, biodegradable fibers and a leak-lock core — gentle on skin, gentle on the planet.</p>
<div class="row">
<button class="btn-primary">Subscribe Now</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Shop Essentials</h2><span>View All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<div class="stars">★★★★★</div>
<h3>Bamboo Diapers, Size 3</h3>
<p class="price">$24.99</p>
</div>
<div class="card">
<div class="thumb t2"><span class="badge eco">Eco</span></div>
<div class="stars">★★★★★</div>
<h3>Bamboo Baby Wipes</h3>
<p class="price">$8.99</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="stars">★★★★☆</div>
<h3>Overnight Bundle</h3>
<p class="price">$42.00</p>
</div>
</div>
</section>
<footer>
<span>© Believe Diapers</span>
<div><a href="#">Subscriptions</a><a href="#">Sustainability</a><a href="#">Support</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f5f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f5f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#1E1919; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:24px 40px 0; position:relative; }
h1 { font-size:28px; font-weight:700; margin:0; letter-spacing:-0.4pt; }
.shelf-h { font-size:22px; font-weight:700; margin:24px 0 12px; }
.shelf { display:flex; gap:12px; }
.rcard { width:140px; height:160px; border-radius:12px; border:1px solid #E6E1DA; flex-shrink:0; }
.rthumb { width:140px; height:96px; border-radius:12px 12px 0 0; }
.rname { font-size:13px; font-weight:600; padding:8px 8px 2px; }
.rmeta { font-size:11px; color:#6F6A65; padding:0 8px; }
.filerow { display:flex; align-items:center; padding:12px 0; border-bottom:1px solid #E4E5E5; }
.typeicon { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:800; margin-right:14px; flex-shrink:0; }
.filemain { flex:1; }
.filemain .n { font-size:16px; font-weight:600; }
.filemain .m { font-size:14px; color:#6F6A65; margin-top:2px; }
.dots { color:#6F6A65; font-size:18px; }
.fab { position:absolute; bottom:16px; right:32px; width:56px; height:56px; border-radius:50%; background:#0061FF; display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; box-shadow:0 8px 20px rgba(0,97,255,0.32); }
.uploadbar { position:absolute; bottom:88px; left:40px; right:112px; }
.ub-label { font-size:14px; font-weight:600; margin-bottom:6px; }
.ub-track { height:3px; background:#E6E1DA; border-radius:2px; }
.ub-fill { width:52%; height:3px; background:#0061FF; border-radius:2px; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#6F6A65;margin-bottom:4px;">Dropbox (iOS)</div>
<h1>Home</h1>
<div class="shelf-h">Recents</div>
<div class="shelf">
<div class="rcard"><div class="rthumb" style="background:linear-gradient(135deg,#cfe6ff,#8bb8ee)"></div><div class="rname">Site Redesign.fig</div><div class="rmeta">12 KB · Today</div></div>
<div class="rcard"><div class="rthumb" style="background:#F7F5F2;display:flex;align-items:center;justify-content:center;font-size:28px;color:#FA551E">📄</div><div class="rname">Q3 Report.pdf</div><div class="rmeta">2.4 MB · Apr 12</div></div>
<div class="rcard"><div class="rthumb" style="background:linear-gradient(135deg,#ffe0c8,#f0a878)"></div><div class="rname">Trip photos</div><div class="rmeta">18 items</div></div>
<div class="rcard"><div class="rthumb" style="background:#F7F5F2;display:flex;align-items:center;justify-content:center;font-size:28px;color:#1A8754">📊</div><div class="rname">Budget 2026.xlsx</div><div class="rmeta">88 KB · Mar 2</div></div>
</div>
<div class="shelf-h">All files</div>
<div class="filerow">
<div class="typeicon" style="background:#FA551E">PDF</div>
<div class="filemain"><div class="n">Q3 Report.pdf</div><div class="m">2.4 MB · Modified Apr 12</div></div>
<div class="dots">⋯</div>
</div>
<div class="filerow">
<div class="typeicon" style="background:#0061FF">DOC</div>
<div class="filemain"><div class="n">Meeting Notes.paper</div><div class="m">14 KB · Modified Apr 10</div></div>
<div class="dots">⋯</div>
</div>
<div class="filerow">
<div class="typeicon" style="background:#1A8754">XLS</div>
<div class="filemain"><div class="n">Budget 2026.xlsx</div><div class="m">88 KB · Modified Mar 2</div></div>
<div class="dots">⋯</div>
</div>
<div class="uploadbar">
<div class="ub-label">Uploading 3 of 8 · 4.2 MB</div>
<div class="ub-track"><div class="ub-fill"></div></div>
</div>
<div class="fab">+</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2d2d2d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2d2d2d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #018849; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d2d2d; color: #018849;
border: 1px solid #018849; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2d2d2d; color: #f5f5f5;
border: 1px solid #4d4d4d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #263c31; color: #018849;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Futura", "Century Gothic", "Trebuchet MS", Tahoma, Geneva, Verdana, Arial, sans-serif; }
* { box-sizing:border-box; }
.lime { background:#ccff00; color:#000000; height:26px; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; }
nav { height:52px; background:#2d2d2d; display:flex; align-items:center; padding:0 24px; gap:20px; }
.brand { color:#ffffff; font-size:16px; font-weight:900; letter-spacing:0.04em; margin:0 26px 0 0; }
.gtab { color:#ffffff; font-size:12px; font-weight:900; letter-spacing:0.03em; padding:6px 4px; }
.gtab.on { border-bottom:2px solid #ffffff; }
.searchbar { margin-left:auto; background:#ffffff; color:#2d2d2d; border-radius:19px; height:28px; width:220px;
display:flex; align-items:center; padding:0 14px; font-size:11px; color:#858585; }
.subnav { height:34px; background:#525050; display:flex; align-items:center; gap:18px; padding:0 24px; }
.subnav span { color:#ffffff; font-size:11px; }
.subnav span.sale { color:#ffcccc; font-weight:700; }
.stage { display:flex; height:528px; }
.gallery { width:420px; background:#f0f0f0; position:relative; display:flex; align-items:center; justify-content:center; }
.gallery .shape1 { position:absolute; width:220px; height:300px; background:linear-gradient(160deg,#d1d1d1,#9a9a9a); left:60px; top:40px; }
.gallery .shape2 { position:absolute; width:150px; height:190px; background:linear-gradient(160deg,#ececec,#c7c7c7); right:40px; bottom:50px; }
.thumbs { position:absolute; left:16px; top:16px; display:flex; flex-direction:column; gap:8px; }
.thumb { width:44px; height:56px; background:#dddddd; border:1px solid #ffffff; }
.thumb.on { border-color:#2d2d2d; }
.details { flex:1; padding:26px 30px; display:flex; flex-direction:column; }
.brandline { font-size:12px; color:#666666; letter-spacing:0.05em; text-transform:uppercase; margin:0 0 6px; }
.details h2 { font-size:19px; font-weight:400; margin:0 0 12px; line-height:1.3; max-width:340px; }
.pricebox { display:flex; align-items:baseline; gap:10px; margin-bottom:18px; }
.pricebox .now { font-size:20px; font-weight:700; color:#d01345; }
.pricebox .was { font-size:14px; color:#666666; text-decoration:line-through; }
.salebadge { background:#d01345; color:#ffffff; font-size:11px; font-weight:700; padding:3px 8px; }
.sizelabel { font-size:12px; color:#2d2d2d; font-weight:700; margin:0 0 8px; }
.sizes { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.size { width:44px; height:36px; background:#e8e8e8; display:flex; align-items:center; justify-content:center; font-size:12px; }
.size.out { color:#999999; text-decoration:line-through; }
.size.on { background:#2d2d2d; color:#ffffff; }
.addbag { margin-top:auto; background:#018849; color:#ffffff; border:none; height:44px; font-size:15px; font-weight:700;
text-transform:uppercase; letter-spacing:0.02em; width:100%; }
.wish { margin-top:8px; background:#ffffff; border:2px solid #2d2d2d; color:#000000; height:40px; font-size:13px; font-weight:700; width:100%; }
.meta { display:flex; gap:16px; margin-top:16px; font-size:11px; color:#858585; }
</style></head>
<body>
<div class="lime">Download our new app for exclusive drops</div>
<nav>
<p class="brand">ASOS</p>
<span class="gtab on">WOMEN</span>
<span class="gtab">MEN</span>
<div class="searchbar">Search for items and brands</div>
</nav>
<div class="subnav">
<span class="sale">Sale</span><span>New in</span><span>Clothing</span><span>Dresses</span><span>Shoes</span><span>Accessories</span><span>Brands</span>
</div>
<div class="stage">
<div class="gallery">
<div class="thumbs"><div class="thumb on"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
<div class="shape1"></div>
<div class="shape2"></div>
</div>
<div class="details">
<p class="brandline">ASOS DESIGN</p>
<h2>Oversized cropped jacket in washed grey with contrast stitching</h2>
<div class="pricebox">
<span class="now">£38.00</span>
<span class="was">£60.00</span>
<span class="salebadge">SALE</span>
</div>
<p class="sizelabel">Size — UK 6 to 18</p>
<div class="sizes">
<div class="size">6</div><div class="size on">8</div><div class="size">10</div>
<div class="size">12</div><div class="size out">14</div><div class="size">16</div><div class="size">18</div>
</div>
<div class="meta"><span>Free delivery over £30</span><span>Free returns</span></div>
<button class="addbag">Add to bag</button>
<button class="wish">Save for later</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6fbf8; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6fbf8; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787a79; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1ec677; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6fbf8; color: #000000;
border: 1px solid #1ec677; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f6fbf8; color: #111111;
border: 1px solid #d1d6d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787a79; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d3f3e3; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F6FBF8; color:#0F1A14; box-sizing:border-box;
font-family:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric:tabular-nums; }
.topbar { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.greet { font-size:19px; font-weight:700; }
.icons { display:flex; gap:14px; align-items:center; font-size:18px; color:#5C6E63; }
.wrap { display:flex; gap:24px; padding:0 28px 20px; height:560px; }
.left { width:400px; flex-shrink:0; }
.hero { background:linear-gradient(150deg,#1EC677,#12A862); border-radius:24px; padding:22px 24px;
box-shadow:0 16px 32px -16px rgba(30,198,119,0.45); }
.hero .lbl { font-size:13px; font-weight:600; color:rgba(6,32,20,0.7); }
.hero .amt { font-size:44px; font-weight:700; letter-spacing:-1.5px; color:#062014; margin:2px 0; }
.hero .amt sup { font-size:26px; }
.hero .sub { font-size:13px; font-weight:600; color:rgba(6,32,20,0.65); margin-bottom:16px; }
.hero .acts { display:flex; gap:10px; }
.hbtn { flex:1; background:rgba(6,32,20,0.14); border-radius:12px; height:40px; display:flex; align-items:center;
justify-content:center; gap:6px; color:#062014; font-size:13px; font-weight:700; }
.spotme { background:#FFFFFF; border:1px solid #E4EDE8; border-radius:16px; padding:14px 16px; margin-top:16px;
display:flex; align-items:center; gap:12px; }
.spot-icon { width:38px; height:38px; border-radius:12px; background:#E4F7EE; display:flex; align-items:center;
justify-content:center; color:#12B981; font-size:16px; flex-shrink:0; }
.spot-title { font-size:14px; font-weight:700; }
.spot-sub { font-size:12px; color:#5C6E63; }
.spot-val { margin-left:auto; font-size:15px; font-weight:700; color:#12B981; }
.right { flex:1; min-width:0; }
.sec-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.sec-h h3 { font-size:18px; font-weight:700; margin:0; }
.seeall { font-size:13px; font-weight:700; color:#0FAE63; }
.txn { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #E4EDE8; }
.tile { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center;
font-weight:700; color:#fff; font-size:14px; flex-shrink:0; }
.tname { font-size:15px; font-weight:600; }
.tmeta { font-size:12px; color:#5C6E63; margin-top:1px; }
.tamt { margin-left:auto; font-size:15px; font-weight:700; }
.pos { color:#0FAE63; }
.neu { color:#0F1A14; }
.early { color:#0FAE63; font-weight:600; }
.chip { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; margin-left:6px; }
.chip.posted { background:#E4F7EE; color:#0FAE63; }
.chip.pending { background:#FCEEDA; color:#E08600; }
</style></head>
<body>
<div class="topbar">
<div class="greet">Hi, Jordan</div>
<div style="font-size:13px;font-weight:800;letter-spacing:0.2pt;color:#0F1A14;">Chime (iOS)</div>
<div class="icons"><span>🔔</span><span>👤</span></div>
</div>
<div class="wrap">
<div class="left">
<div class="hero">
<div class="lbl">Checking 💳</div>
<div class="amt tnum">$2,847<sup>.19</sup></div>
<div class="sub">Available to spend</div>
<div class="acts">
<div class="hbtn">⇄ Move money</div>
<div class="hbtn">💬 Pay anyone</div>
</div>
</div>
<div class="spotme">
<div class="spot-icon">★</div>
<div>
<div class="spot-title">SpotMe is on</div>
<div class="spot-sub">Overdraft up to your limit, fee-free</div>
</div>
<div class="spot-val tnum">$200</div>
</div>
</div>
<div class="right">
<div class="sec-h"><h3>Recent activity</h3><span class="seeall">See all</span></div>
<div class="txn">
<div class="tile" style="background:#1EC677;">DD</div>
<div><div class="tname">Direct Deposit — Payroll</div><div class="tmeta">Fri · <span class="early">2 days early</span></div></div>
<div class="tamt pos tnum">+$1,284.10</div>
</div>
<div class="txn">
<div class="tile" style="background:#8A6B4F;">MC</div>
<div><div class="tname">Trader Joe's</div><div class="tmeta">Today · Card ····4821 <span class="chip posted">Posted</span></div></div>
<div class="tamt neu tnum">-$38.42</div>
</div>
<div class="txn">
<div class="tile" style="background:#5C8CE0;">LY</div>
<div><div class="tname">Lyft</div><div class="tmeta">Today · Card ····4821 <span class="chip pending">Pending</span></div></div>
<div class="tamt neu tnum">-$14.20</div>
</div>
<div class="txn">
<div class="tile" style="background:#E4F7EE; color:#0FAE63;">PA</div>
<div><div class="tname">Pay Anyone — Sam R.</div><div class="tmeta">Yesterday <span class="chip posted">Posted</span></div></div>
<div class="tamt pos tnum">+$60.00</div>
</div>
<div class="txn" style="border-bottom:none;">
<div class="tile" style="background:#B08968;">SB</div>
<div><div class="tname">Starbucks</div><div class="tmeta">Yesterday · Card ····4821</div></div>
<div class="tamt neu tnum">-$6.75</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0078ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0078ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bdfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0078ff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0078ff; color: #f5f5f5;
border: 1px solid #278cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bdfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #298eff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#354153; box-sizing:border-box;
font-family:Pretendard, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
header { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:18px; font-weight:700; display:flex; align-items:center; gap:8px; }
.mark { width:20px; height:14px; background:#0078ff; clip-path:polygon(15% 0,100% 0,85% 100%,0 100%); }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:600; color:#354153; }
.hero { padding:6px 30px 18px; text-align:center; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 18px; }
.booking { max-width:820px; margin:0 auto; background:#f9f9fb; border:1px solid #e5e8ef; border-radius:16px;
display:flex; gap:0; padding:10px; }
.field { flex:1; padding:12px 16px; border-right:1px solid #e5e8ef; }
.field:last-child { border-right:none; flex:0 0 130px; }
.field label { font-size:11px; color:#697383; display:block; margin-bottom:3px; }
.field .v { font-size:15px; font-weight:600; }
.search-btn { background:#0078ff; color:#fff; border-radius:12px; font-size:14px; font-weight:600;
display:flex; align-items:center; justify-content:center; }
.regions { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:20px 30px 0; }
.rcard { background:#ffffff; border:1px solid #e5e8ef; border-radius:14px; padding:20px 16px; text-align:center; }
.rcard .ic { width:38px; height:38px; margin:0 auto 10px; border-radius:12px;
background:linear-gradient(135deg,#d6e8ff,#0078ff33); }
.rcard h3 { font-size:16px; font-weight:600; margin:0; }
.rcard span { font-size:12px; color:#697383; }
.articles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 30px 0; }
.acard { background:#ffffff; border-radius:16px; box-shadow:rgba(0,0,0,0.1) 0px 4px 8px 0px; overflow:hidden; }
.acard .img { height:78px; background:linear-gradient(135deg,#bcd7ff,#7fb0ff); }
.acard .body { padding:12px 14px; }
.acard h4 { font-size:13.5px; font-weight:600; margin:0; line-height:1.4; }
footer { position:absolute; bottom:0; width:960px; background:#f5f5f5; padding:14px 30px; font-size:12px; color:#697383;
display:flex; justify-content:space-between; }
</style></head>
<body>
<header>
<p class="brand"><span class="mark"></span>SOCAR</p>
<div class="navlinks"><span>Book Now</span><span>Services</span><span>Blog</span></div>
<span></span>
</header>
<section class="hero">
<h1>Need a car? SOCAR.</h1>
<div class="booking">
<div class="field"><label>Pickup Location</label><div class="v">Gangnam Station Exit 3</div></div>
<div class="field"><label>Rental Period</label><div class="v">Today 3:00 PM - 7:00 PM</div></div>
<div class="field search-btn">Search</div>
</div>
</section>
<section class="regions">
<div class="rcard"><div class="ic"></div><h3>Jeju</h3><span>Popular</span></div>
<div class="rcard"><div class="ic"></div><h3>Seoul</h3><span>Airport</span></div>
<div class="rcard"><div class="ic"></div><h3>Busan</h3><span>Haeundae</span></div>
<div class="rcard"><div class="ic"></div><h3>Gangneung</h3><span>Beach</span></div>
</section>
<section class="articles">
<div class="acard"><div class="img"></div><div class="body"><h4>Top May Drive Routes 2026</h4></div></div>
<div class="acard"><div class="img"></div><div class="body"><h4>Spring Festivals in Busan & Ulsan</h4></div></div>
<div class="acard"><div class="img"></div><div class="body"><h4>Best Jeju Day-Trip Spots</h4></div></div>
</section>
<footer>
<span>Where do you want to go?</span>
<span>SOCAR · Car Zones · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 300; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; background: #111111; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; background: transparent; color: #111111;
border: 1px solid #b43f69; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.05em; background: #f5f5f5; color: #444444;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:Helvetica, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.serif { font-family:'Times New Roman', Georgia, serif; font-weight:300; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:1px solid #dedede; }
nav .brand { font-size:15px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; margin:0; }
nav .links { position:absolute; left:32px; display:flex; gap:22px; font-size:11px; letter-spacing:0.1em;
text-transform:uppercase; color:#111111; }
nav .cart { position:absolute; right:32px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }
.hero { flex:0 0 auto; height:230px; background:#121212; color:#ffffff; display:flex; flex-direction:column;
align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0;
background:radial-gradient(ellipse at 30% 30%, rgba(180,63,105,0.30), transparent 55%),
radial-gradient(ellipse at 75% 70%, rgba(255,255,255,0.06), transparent 50%); }
.hero .eyebrow { position:relative; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#dedede; margin-bottom:10px; }
.hero h1 { position:relative; font-size:38px; margin:0 0 12px; letter-spacing:-0.02em; }
.hero button { position:relative; background:transparent; border:1px solid #ffffff; color:#ffffff; padding:11px 28px;
font-size:11px; letter-spacing:0.12em; text-transform:uppercase; }
main { flex:1 1 auto; display:flex; padding:20px 32px; gap:18px; min-height:0; }
.card { flex:1; display:flex; flex-direction:column; gap:8px; position:relative; }
.card .thumb { flex:1; border-radius:0; background:#0f0f0f; position:relative; min-height:0; }
.ring1 { background:radial-gradient(circle at 50% 42%, #b43f69 0 10px, transparent 12px), #0f0f0f; }
.ring2 { background:radial-gradient(circle at 50% 42%, #d9d9d9 0 9px, transparent 11px), #0f0f0f; }
.ring3 { background:radial-gradient(circle at 50% 42%, #ffffff 0 8px, transparent 10px), #0f0f0f; }
.card .wish { position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:999px;
border:1px solid #dedede; }
.card .name { font-size:14px; font-weight:300; margin:2px 0 0; }
.card .price { font-size:16px; font-weight:300; margin:0; }
.swatches { display:flex; gap:6px; }
.sw { width:12px; height:12px; border-radius:999px; }
.sw.a { background:#c4bdb7; }
.sw.b { background:#8b0000; }
.sw.c { background:#111111; box-shadow:0 0 0 2px #fff, 0 0 0 3px #111; }
footer { flex:0 0 auto; height:52px; background:#121212; color:#888888; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:11px; letter-spacing:0.05em; }
footer .cols { display:flex; gap:22px; }
</style></head>
<body>
<nav>
<div class="links"><span>Collections</span><span>Fine Jewelry</span></div>
<p class="brand">Anita KO</p>
<div class="cart">Bag (0)</div>
</nav>
<div class="hero">
<span class="eyebrow">Los Angeles — Est. Fine Jewelry</span>
<h1 class="serif">The Voltage of Rose</h1>
<button>Shop the Edit</button>
</div>
<main>
<div class="card">
<div class="thumb ring1"></div>
<div class="wish"></div>
<p class="name serif">Diamond Baguette Huggie</p>
<p class="price serif">$2,450</p>
<div class="swatches"><span class="sw a"></span><span class="sw b"></span><span class="sw c"></span></div>
</div>
<div class="card">
<div class="thumb ring2"></div>
<div class="wish"></div>
<p class="name serif">Pavé Eternity Band</p>
<p class="price serif">$3,150</p>
<div class="swatches"><span class="sw c"></span><span class="sw a"></span></div>
</div>
<div class="card">
<div class="thumb ring3"></div>
<div class="wish"></div>
<p class="name serif">Emerald Cut Solitaire</p>
<p class="price serif">$5,900</p>
<div class="swatches"><span class="sw a"></span><span class="sw b"></span><span class="sw c"></span></div>
</div>
</main>
<footer>
<span>© Anita KO</span>
<div class="cols"><span>Care Guide</span><span>Shipping</span><span>Contact</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f70e0e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f70e0e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f68d8d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa3e3e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f70e0e; color: #000000;
border: 1px solid #fa3e3e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f70e0e; color: #f5f5f5;
border: 1px solid #f73333; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f68d8d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f71616; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box; font-family:"Open Sans","Noto Sans TC",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #dddddd; }
.brand { font-weight:800; font-size:17px; color:#000; }
.navlinks { display:flex; gap:16px; font-size:15px; color:#0066cc; }
.btn { background:#f70e0e; color:#fff; border:none; border-radius:6px; padding:11px 22px; font-size:14px; font-weight:600; }
.hero { padding:24px 30px 14px; }
.hero h1 { font-size:32px; font-weight:800; letter-spacing:-1px; margin:0 0 8px; color:#000; max-width:600px; }
.hero p { font-size:14px; color:#222; margin:0 0 12px; max-width:500px; }
.tabs { display:flex; gap:10px; padding:6px 30px 14px; }
.tab { border:1px solid #dddddd; border-radius:5px; padding:8px 16px; font-size:13px; color:#aaaaaa; }
.tab.active { border-color:#65a4f4; color:#65a4f4; }
.stats { display:flex; gap:20px; padding:0 30px 16px; }
.stat { flex:1; background:#fafafa; border:1px solid #dddddd; border-radius:6px; padding:16px; text-align:center; }
.stat b { font-size:28px; font-weight:300; color:#fa3e3e; display:block; }
.stat span { font-size:12px; color:#333333; }
.band { background:#d50e0e; color:#fff; padding:16px 30px; text-align:center; }
.band h2 { font-size:18px; font-weight:800; margin:0; }
</style></head>
<body>
<nav>
<div class="brand">Ragic</div>
<div class="navlinks"><span>Try it now</span><span>Templates</span><span>How to get started?</span></div>
<button class="btn">Create account</button>
</nav>
<div class="hero">
<h1>The #1 No Code database builder</h1>
<p>Build powerful, relational business apps the way you'd lay out a spreadsheet.</p>
</div>
<div class="tabs">
<div class="tab active">Featured templates</div>
<div class="tab">Sales</div>
<div class="tab">HR</div>
<div class="tab">Accounting</div>
</div>
<div class="stats">
<div class="stat"><b>$200,000</b><span>Saved on custom software</span></div>
<div class="stat"><b>50,000+</b><span>Businesses running on Ragic</span></div>
<div class="stat"><b>0</b><span>Lines of code required</span></div>
</div>
<div class="band"><h2>No Code AI tool for your business — Create account for free</h2></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a1f60; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a1f60; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9a95b2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a1f60; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a1f60; color: #f5f5f5;
border: 1px solid #4a4178; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a95b2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4c4379; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Apple SD Gothic Neo", -apple-system, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#2a1f60; }
.brand { color:#ffffff; font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:20px; }
.navlinks span { color:#ffffff; font-size:15px; opacity:0.85; }
.navlinks span.on { opacity:1; font-weight:700; }
.body { padding:20px 32px 0; }
.sectitle { font-size:16px; font-weight:700; margin-bottom:12px; color:#000; }
.grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.card { display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; }
.icon { width:72px; height:72px; border-radius:0px; background:linear-gradient(135deg, #2a1f60, #6a53c9);
position:relative; }
.icon::after { content:''; position:absolute; left:22px; top:22px; width:28px; height:28px; border-radius:6px;
background:rgba(255,255,255,0.35); }
.appname { font-size:13px; color:#000; }
.apprating { font-size:12px; color:#454545; }
.devbar { position:absolute; bottom:0; left:0; right:0; height:120px; background:#efefef; border-top:1px solid #767676;
padding:16px 32px; display:flex; align-items:center; gap:14px; }
.devlabel { font-size:14px; color:#000; }
.devinput { width:220px; height:21px; background:#ffffff; border:2px solid #767676; padding:1px 2px; font-size:13px; color:#000; }
.devbtn { background:#efefef; color:#000; border:2px solid #000; padding:0 20px; height:50px; font-size:13px;
display:flex; align-items:center; }
</style></head>
<body>
<nav>
<span class="brand">ONE store</span>
<div class="navlinks"><span class="on">Games</span><span>Apps</span><span>OnePlay</span><span>Story</span></div>
</nav>
<div class="body">
<div class="sectitle">Popular Games</div>
<div class="grid">
<div class="card"><div class="icon"></div><div class="appname">Rift Kingdoms</div><div class="apprating">★ 4.7</div></div>
<div class="card"><div class="icon"></div><div class="appname">Puzzle Garden</div><div class="apprating">★ 4.5</div></div>
<div class="card"><div class="icon"></div><div class="appname">Speed Circuit</div><div class="apprating">★ 4.3</div></div>
<div class="card"><div class="icon"></div><div class="appname">Tower Siege</div><div class="apprating">★ 4.6</div></div>
<div class="card"><div class="icon"></div><div class="appname">Farm Story</div><div class="apprating">★ 4.4</div></div>
</div>
</div>
<div class="devbar">
<span class="devlabel">Developer Login</span>
<span class="devinput"></span>
<span class="devbtn">Sign In</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00de5a; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00de5a; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096d32; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17191d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00de5a; color: #17191d;
border: 1px solid #17191d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00de5a; color: #111111;
border: 1px solid #03bd4e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096d32; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #04be50; color: #17191d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#17191d; box-sizing:border-box;
font-family:"Malgun Gothic", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #ececec; }
.brand { font-size:19px; font-weight:700; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:16px; color:#17191d; padding-bottom:16px; }
.navlinks span.on { border-bottom:2px solid #00de5a; }
.searchbox { width:180px; height:32px; border:1px solid #e5e5e5; border-radius:4px; padding:0 12px;
font-size:12px; color:#919191; display:flex; align-items:center; }
.hero { position:relative; height:210px; overflow:hidden;
background:linear-gradient(120deg, #0d1210 0%, #142218 55%, #0d1210 100%); }
.hero::before { content:''; position:absolute; right:-40px; top:-30px; width:280px; height:280px; border-radius:50%;
background:radial-gradient(circle, rgba(0,222,90,0.35), transparent 65%); }
.herotext { position:relative; z-index:2; padding:26px 32px 0; }
.kicker { color:#00de5a; font-size:12px; font-weight:700; letter-spacing:0.05em; margin-bottom:8px; }
.hero h1 { color:#fff; font-size:32px; font-weight:700; margin:0 0 16px; }
.cta-green { display:inline-flex; align-items:center; background:#00de5a; color:#000000; font-size:14px;
font-weight:700; padding:12px 24px; border-radius:0px; }
.body { position:absolute; top:264px; left:0; right:0; bottom:0; padding:18px 32px 0; }
.sectitle { font-size:16px; font-weight:700; color:#17191d; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.card { background:#ffffff; border-radius:4px; box-shadow:rgba(0,0,0,0.08) 0px 2px 8px; overflow:hidden; }
.art { height:80px; background:linear-gradient(135deg, rgba(0,222,90,0.18), rgba(23,25,29,0.06)); position:relative; }
.badge { position:absolute; top:6px; left:6px; background:#00de5a; color:#000; font-size:10px; font-weight:700;
padding:1px 7px; border-radius:4px; }
.cbody { padding:10px 10px 12px; }
.ctitle { font-size:13px; font-weight:700; margin-bottom:4px; }
.cmeta { font-size:11px; color:#737881; }
.footer-line { position:absolute; bottom:14px; left:32px; right:32px; display:flex; justify-content:space-between;
font-size:11px; color:#9fa1a7; font-weight:700; border-top:1px solid #ececec; padding-top:10px; }
</style></head>
<body>
<nav>
<span class="brand">Nexon</span>
<div class="navlinks"><span class="on">Games</span><span>Events</span><span>Community</span><span>Company</span></div>
<span class="searchbox">Search games</span>
</nav>
<div class="hero">
<div class="herotext">
<div class="kicker">PRE-REGISTRATION OPEN</div>
<h1>Second Life Guild: New Season</h1>
<span class="cta-green">Play Now</span>
</div>
</div>
<div class="body">
<div class="sectitle">Popular This Week</div>
<div class="grid">
<div class="card"><div class="art"><span class="badge">NEW</span></div><div class="cbody"><div class="ctitle">Iron Frontier</div><div class="cmeta">MMORPG · PC</div></div></div>
<div class="card"><div class="art"></div><div class="cbody"><div class="ctitle">Kart Rally X</div><div class="cmeta">Racing · Mobile</div></div></div>
<div class="card"><div class="art"><span class="badge">EVENT</span></div><div class="cbody"><div class="ctitle">Dungeon Rift</div><div class="cmeta">Action RPG · PC</div></div></div>
<div class="card"><div class="art"></div><div class="cbody"><div class="ctitle">Sky Command</div><div class="cmeta">Strategy · PC</div></div></div>
</div>
</div>
<div class="footer-line">
<span>© Nexon</span>
<span>Games · Events · Support · Company</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c73e3a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #c73e3a;
border: 1px solid #c73e3a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #200a09; color: #c73e3a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#F5F5F5; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'Playfair Display', 'New York', Georgia, serif; }
.hero { position:relative; width:960px; height:230px; overflow:hidden;
background:linear-gradient(135deg,#3a1e1c 0%, #000 70%); }
.hero::before { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 70% 30%, rgba(199,62,58,0.25), transparent 50%); }
.navcircle { position:absolute; top:16px; width:32px; height:32px; border-radius:50%;
background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; font-size:14px; }
.back { left:20px; } .heart-nav { right:64px; } .share-nav { right:20px; }
.dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:5px; }
.dots span { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.4); }
.dots span.active { background:#fff; }
.content { padding:16px 20px 0; }
.rname { font-size:27px; font-weight:700; letter-spacing:-0.3px; margin:0 0 6px; }
.metarow { display:flex; align-items:center; gap:8px; font-size:13px; color:#9E9E9E; margin-bottom:8px; }
.gold { color:#C9A24B; font-weight:700; font-family:'Inter',sans-serif; }
.tagline { font-style:italic; font-size:15px; color:#9E9E9E; margin:0 0 16px; max-width:560px; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#9E9E9E; margin-bottom:10px; }
.datestrip { display:flex; gap:8px; margin-bottom:14px; }
.datecell { width:64px; height:56px; border-radius:10px; background:#121212; border:1px solid #262626;
display:flex; flex-direction:column; align-items:center; justify-content:center; }
.datecell .wd { font-size:10px; font-weight:600; text-transform:uppercase; color:#9E9E9E; }
.datecell .dn { font-size:17px; font-weight:700; }
.datecell.selected { background:#C73E3A; border-color:#C73E3A; }
.datecell.selected .wd, .datecell.selected .dn { color:#fff; }
.context { font-size:14px; color:#9E9E9E; margin-bottom:14px; }
.context b { color:#F5F5F5; font-weight:600; }
.slotgrid { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:20px; }
.slot { width:96px; height:56px; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.slot.avail { border:1px solid #C73E3A; background:transparent; }
.slot.avail .t { font-size:14px; font-weight:700; color:#F5F5F5; }
.slot.avail .s { font-size:9px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; color:#9E9E9E; }
.slot.primary { background:#C73E3A; }
.slot.primary .t { font-size:14px; font-weight:700; color:#fff; }
.slot.primary .s { font-size:9px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; color:rgba(255,255,255,0.82); }
.slot.notify { border:1px dashed #262626; }
.slot.notify .t { font-size:12px; font-weight:700; color:#D99A2B; }
.slot.notify .s { font-size:9px; font-weight:600; text-transform:uppercase; color:#D99A2B; }
.bookbar { display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.booktext { font-size:13px; color:#9E9E9E; }
.bookbtn { background:#C73E3A; color:#fff; font-weight:700; font-size:16px; border-radius:8px; padding:12px 28px; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:52px; background:rgba(0,0,0,0.96);
border-top:1px solid #262626; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:10px; font-weight:600; color:#6A6A6A; }
.tab.active { color:#E2504B; }
.wrap { position:relative; width:960px; height:640px; }
.brandmark { position:absolute; top:16px; left:20px; font-size:16px; font-weight:700; letter-spacing:0.3px; z-index:3; }
</style></head>
<body>
<div class="wrap">
<div class="hero">
<span class="brandmark">Resy (iOS)</span>
<div class="navcircle back">←</div>
<div class="navcircle heart-nav">♡</div>
<div class="navcircle share-nav">↗</div>
<div class="dots"><span class="active"></span><span></span><span></span></div>
</div>
<div class="content">
<h1 class="rname serif">Casa Ember</h1>
<div class="metarow"><span class="gold">★ 9.4</span><span>·</span><span>Italian · $$$ · Williamsburg</span></div>
<p class="tagline serif">A wood-fired room that feels like your favorite aunt's kitchen, if your aunt trained under a Michelin chef.</p>
<p class="eyebrow">Select a date</p>
<div class="datestrip">
<div class="datecell"><span class="wd">Wed</span><span class="dn">21</span></div>
<div class="datecell selected"><span class="wd">Thu</span><span class="dn">22</span></div>
<div class="datecell"><span class="wd">Fri</span><span class="dn">23</span></div>
<div class="datecell"><span class="wd">Sat</span><span class="dn">24</span></div>
<div class="datecell"><span class="wd">Sun</span><span class="dn">25</span></div>
</div>
<p class="context">2 guests · <b>Thu May 22</b> · Dinner</p>
<div class="slotgrid">
<div class="slot avail"><span class="t">6:00</span><span class="s">Dining Room</span></div>
<div class="slot primary"><span class="t">6:30</span><span class="s">Dining Room</span></div>
<div class="slot avail"><span class="t">7:15</span><span class="s">Bar</span></div>
<div class="slot notify"><span class="t">Notify</span><span class="s">8:00</span></div>
</div>
</div>
<div class="bookbar">
<span class="booktext">Confirmation is instant</span>
<span class="bookbtn">Book Now</span>
</div>
<div class="tabbar">
<span class="tab active">Search</span>
<span class="tab">Hit List</span>
<span class="tab">Reservations</span>
<span class="tab">Notify</span>
<span class="tab">Account</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f6f8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f5f6f8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1D1D1F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.sidebar { width:250px; background:#FFFFFF; border-right:1px solid #ECECEC; padding:24px 14px; }
.sb-item { display:flex; align-items:center; gap:10px; height:40px; padding:0 10px; border-radius:8px; font-size:16px; color:#1D1D1F; }
.sb-item.active { background:rgba(79,151,255,0.10); font-weight:600; color:#4F97FF; }
.sb-item .cnt { margin-left:auto; font-size:15px; color:#8A8A8E; }
.sb-item.active .cnt { color:#4F97FF; }
.dot { width:18px; text-align:center; }
.main { flex:1; position:relative; padding:24px 40px; }
.listtitle { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.listtitle h1 { font-size:28px; font-weight:700; margin:0; letter-spacing:0.3px; }
.star { color:#FFD60A; font-size:22px; }
.heading { font-size:17px; font-weight:700; margin:24px 0 6px; padding-top:2px; }
.hr { height:1px; background:#ECECEC; margin-bottom:8px; }
.todo { display:flex; align-items:center; gap:12px; height:44px; }
.cb { width:22px; height:22px; border-radius:50%; border:1.5px solid #C7C7CC; flex-shrink:0; }
.cb.p3 { border-color:#246FE0; background:rgba(36,111,224,0.08); }
.cb.done { background:#4F97FF; border-color:#4F97FF; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
.title { font-size:17px; }
.title.done { color:#C7C7CC; text-decoration:line-through; }
.tag { margin-left:auto; font-size:13px; color:#8A8A8E; background:#F5F6F8; border-radius:999px; padding:3px 10px; }
.fab { position:absolute; right:32px; bottom:32px; width:56px; height:56px; border-radius:50%; background:#4F97FF;
color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; box-shadow:rgba(79,151,255,0.35) 0 8px 20px; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="sb-item"><span class="dot">📥</span>Inbox<span class="cnt">3</span></div>
<div class="sb-item active"><span class="dot">★</span>Today<span class="cnt">5</span></div>
<div class="sb-item"><span class="dot">📅</span>Upcoming<span class="cnt">12</span></div>
<div class="sb-item"><span class="dot">◻</span>Anytime</div>
<div class="sb-item"><span class="dot">📦</span>Someday</div>
</div>
<div class="main">
<div class="listtitle"><h1>Today</h1><span class="star">★</span></div>
<div class="heading">This Morning</div>
<div class="hr"></div>
<div class="todo"><div class="cb done">✓</div><div class="title done">Reply to Things 3 (iOS) feedback</div></div>
<div class="todo"><div class="cb p3"></div><div class="title">Draft Q3 roadmap outline</div><div class="tag"># Work</div></div>
<div class="heading">This Evening</div>
<div class="hr"></div>
<div class="todo"><div class="cb"></div><div class="title">Pack for the weekend trip</div></div>
<div class="todo"><div class="cb"></div><div class="title">Call mom</div><div class="tag"># Personal</div></div>
<div class="todo"><div class="cb"></div><div class="title">Read one chapter</div></div>
<div class="fab">+</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f4ed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f4ed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787774; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f4ed; color: #1c1c1c;
border: 1px solid #1c1c1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f7f4ed; color: #111111;
border: 1px solid #d2d0ca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787774; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d4d1cc; color: #1c1c1c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f4ed; color:#1c1c1c; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#1c1c1c; }
.btn-dark { background:#1c1c1c; color:#fcfbf8; border:none; border-radius:6px; padding:8px 16px; font-size:13px;
box-shadow:rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset; }
.hero { text-align:center; padding:16px 40px 10px; }
.hero h1 { font-size:44px; font-weight:600; letter-spacing:-1.2px; line-height:1.05; margin:0 0 10px; }
.hero p { font-size:13px; color:#5f5f5d; margin:0 0 14px; }
.chatinput { margin:0 auto 12px; width:520px; background:#fff; border:1px solid #eceae4; border-radius:16px; padding:14px 16px; text-align:left; }
.chatinput .ph { font-size:13px; color:#5f5f5d; margin-bottom:10px; }
.chippills { display:flex; gap:6px; flex-wrap:wrap; }
.chip { border:1px solid #eceae4; border-radius:9999px; padding:5px 12px; font-size:11px; color:#1c1c1c; }
.iconbtn { width:26px; height:26px; border-radius:9999px; background:#f7f4ed; display:inline-flex; align-items:center; justify-content:center; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:8px 40px 14px; }
.template { background:#fff; border:1px solid #eceae4; border-radius:12px; overflow:hidden; }
.template .img { height:70px; background:linear-gradient(135deg,#f4c5a8,#c8b8e0 60%,#a8c8e8); }
.template .cap { padding:8px 10px; font-size:11px; font-weight:400; }
.statsbar { display:flex; justify-content:space-around; padding:10px 40px 16px; }
.statitem { text-align:center; }
.statitem .n { font-size:26px; font-weight:600; letter-spacing:-0.6px; }
.statitem .l { font-size:11px; color:#5f5f5d; }
footer { margin-top:auto; padding:12px 40px; border-top:1px solid #eceae4; display:flex; justify-content:space-between;
font-size:11px; color:#5f5f5d; }
</style></head>
<body>
<nav>
<span class="brand">Lovable</span>
<div class="navlinks"><span>Community</span><span>Enterprise</span><span>Pricing</span></div>
<button class="btn-dark">Start Building</button>
</nav>
<section class="hero">
<h1>Build something Lovable</h1>
<p>Create apps and websites by chatting with AI.</p>
</section>
<div class="chatinput">
<div class="ph">Ask Lovable to create a landing page for my startup...</div>
<div class="chippills">
<span class="chip"><span class="iconbtn">＋</span></span>
<span class="chip">Dashboard</span>
<span class="chip">Landing page</span>
<span class="chip">Mobile app</span>
</div>
</div>
<div class="gallery">
<div class="template"><div class="img"></div><div class="cap">Portfolio site</div></div>
<div class="template"><div class="img" style="background:linear-gradient(135deg,#a7e5d3,#c8b8e0)"></div><div class="cap">Habit tracker</div></div>
<div class="template"><div class="img" style="background:linear-gradient(135deg,#e8b8c4,#a8c8e8)"></div><div class="cap">Recipe finder</div></div>
</div>
<div class="statsbar">
<div class="statitem"><div class="n">10M+</div><div class="l">Apps built</div></div>
<div class="statitem"><div class="n">2M+</div><div class="l">Users</div></div>
<div class="statitem"><div class="n">180+</div><div class="l">Countries</div></div>
</div>
<footer>
<span>© Lovable</span>
<span>Lovable · Community · Enterprise · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60012; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60012; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee878f; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #cc0010; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60012; color: #ffffff;
border: 1px solid #cc0010; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60012; color: #f5f5f5;
border: 1px solid #e82736; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee878f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e20012; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 44px;
border-bottom:1px solid #e1e4e8; }
.brand-mark { display:flex; align-items:center; gap:10px; }
.thread { width:34px; height:4px; background:#E60012; border-radius:2px; }
.brand { font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#33383f; }
.cta { background:#E60012; color:#ffffff; border:none; border-radius:4px; padding:11px 22px; font-size:14px; font-weight:700; }
.hero { padding:44px 44px 26px; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.35; margin:0 0 14px; max-width:600px; }
.hero p { font-size:16px; color:#4a5159; line-height:1.75; max-width:480px; margin:0 0 20px; }
.row { display:flex; gap:12px; }
.outl { background:#ffffff; color:#E60012; border:1.5px solid #E60012; border-radius:4px; padding:9.5px 21px; font-size:16px; font-weight:700; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:8px 44px 0; }
.card { background:#ffffff; border:1px solid #e1e4e8; border-radius:8px; padding:22px; box-shadow:0 1px 3px rgba(26,26,26,0.06); }
.badge { display:inline-block; background:#fdecec; color:#cc0010; font-size:12px; font-weight:700; border-radius:4px; padding:3px 8px; margin-bottom:10px; }
.card h3 { font-size:18px; font-weight:600; margin:0 0 8px; }
.card p { font-size:13px; color:#4a5159; line-height:1.5; margin:0; }
</style></head>
<body>
<nav>
<div class="brand-mark"><span class="brand">Sansan</span><span class="thread"></span></div>
<div class="navlinks"><span>Services</span><span>Case Studies</span><span>Careers</span></div>
<button class="cta">Request Materials</button>
</nav>
<section class="hero">
<h1>From encounters,<br>to innovation.</h1>
<p>Turning every business card exchange into a shared company asset. Sales, elevated.</p>
<div class="row">
<button class="cta">Request Materials</button>
<button class="outl">Learn More</button>
</div>
</section>
<section class="cards">
<div class="card"><span class="badge">Recommended</span><h3>Business Card Cloud</h3><p>Scanned cards become a shared company asset.</p></div>
<div class="card"><span class="badge">NEW</span><h3>Bill One</h3><p>Receive and pay invoices from a single dashboard.</p></div>
<div class="card"><span class="badge">Trusted Widely</span><h3>Contract One</h3><p>Smooth, thorough contract management — nothing slips through.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; position:relative; }
.navbar { height:66px; background:#00AFF0; display:flex; align-items:center; gap:10px; padding:0 14px 0 10px; color:#fff; }
.gav { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#FF6B6B,#FF8E53); }
.gname { font-size:19px; font-weight:700; }
.gsub { font-size:10px; color:rgba(255,255,255,0.82); }
.msgs { padding:14px; }
.inbrow { display:flex; gap:8px; margin-bottom:10px; }
.iav { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#2ECC71,#16A085); flex-shrink:0; }
.sender { font-size:11px; font-weight:600; color:#2ECC71; margin-bottom:2px; }
.inbub { background:#F0F0F0; border-radius:18px 18px 18px 5px; padding:9px 13px; font-size:14px; max-width:76%; position:relative; }
.likepill { position:absolute; bottom:-8px; right:8px; background:#fff; border:1px solid #E4E4E6; border-radius:999px;
padding:2px 7px 2px 5px; font-size:9px; font-weight:700; color:#6A6A6A; display:flex; align-items:center; gap:2px; }
.outrow { display:flex; justify-content:flex-end; margin:18px 0 10px; }
.outbub { background:#00AFF0; color:#fff; border-radius:18px 18px 5px 18px; padding:9px 13px; font-size:14px; max-width:76%; }
.composer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#fff; border-top:0.5px solid #E4E4E6;
display:flex; align-items:center; padding:0 10px; gap:8px; }
.plus { color:#00AFF0; font-size:20px; font-weight:700; }
.field { flex:1; height:38px; background:#F0F0F0; border-radius:999px; display:flex; align-items:center; padding:0 14px;
font-size:13px; color:#9A9A9A; }
.sendc { width:38px; height:38px; border-radius:50%; background:#00AFF0; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:14px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:800; letter-spacing:-0.3px; margin:0; }
.brand span { color:#00AFF0; }
.tag { font-size:14px; color:#6A6A6A; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:18px; border:1px solid #E4E4E6; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6A6A6A; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#6A6A6A; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#F7F7F8; border:1px solid #E4E4E6; color:#6A6A6A; }
.footer { margin-top:auto; border-top:1px solid #E4E4E6; padding-top:16px; font-size:11px; color:#9A9A9A; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="navbar"><span>‹</span><div class="gav"></div><div><div class="gname">Roadtrip 🚐</div><div class="gsub">8 members · Maya is typing…</div></div></div>
<div class="msgs">
<div class="inbrow">
<div class="iav"></div>
<div><div class="sender">Maya</div>
<div class="inbub">are we still leaving at 6am tomorrow??<div class="likepill">❤ 3</div></div>
</div>
</div>
<div class="outrow"><div class="outbub">yes! gas is full, snacks are packed 🎉</div></div>
</div>
<div class="composer"><span class="plus">+</span><div class="field">Send a message</div><div class="sendc">➤</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">GroupMe (iOS)<span>.</span></h1>
<p class="tag">A group chat that feels like a party — a solid blue chrome header, a heart-like docked below every bubble, and a wall of gradient faces.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#00AFF0"></div><small>#00AFF0</small></div>
<div class="sw"><div class="chip2" style="background:#FF3B5C"></div><small>#FF3B5C</small></div>
<div class="sw"><div class="chip2" style="background:#F0F0F0"></div><small>#F0F0F0</small></div>
<div class="sw"><div class="chip2" style="background:#2ECC71"></div><small>#2ECC71</small></div>
<div class="sw"><div class="chip2" style="background:#9B59B6"></div><small>#9B59B6</small></div>
</div>
<div class="typeblock">
<div class="t1">Roadtrip 🚐</div>
<div class="t2">SF Pro (system) · group name always bold white on the blue nav bar</div>
</div>
<div class="taglist">
<span>Solid blue chat header</span><span>Heart like pill</span><span>Per-group themes</span>
<span>Gradient avatars</span><span>Image gallery grid</span>
</div>
<div class="footer">GroupMe Blue #00AFF0 chrome · outbound bubbles always blue, never the group accent</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f43e37; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f43e37; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f5a3a0; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f43e37; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f43e37; color: #f5f5f5;
border: 1px solid #f45b55; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f5a3a0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d13832; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; background:#1A1A1A; display:flex; }
.queue { width:260px; height:588px; border-right:1px solid #383838; padding:16px; flex-shrink:0; }
.queuehdr { font-size:15px; font-weight:700; color:#FFFFFF; margin:0 0 12px; }
.qrow { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #383838; }
.qhandle { color:#757575; font-size:14px; }
.qthumb { width:40px; height:40px; border-radius:6px; flex-shrink:0; }
.qt1 { background:linear-gradient(150deg,#E0533C,#3E7BC2); }
.qt2 { background:linear-gradient(150deg,#3FA66A,#7E57C2); }
.qt3 { background:linear-gradient(150deg,#D6457E,#E0533C); }
.qt4 { background:linear-gradient(150deg,#3E7BC2,#3FA66A); }
.qmeta { flex:1; min-width:0; }
.qtitle { font-size:13px; font-weight:600; color:#FFFFFF; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qshow { font-size:11px; font-weight:400; color:#757575; margin:0; }
.qremove { color:#757575; font-size:14px; }
.player { flex:1; height:588px; padding:20px 36px; display:flex; flex-direction:column; align-items:center; }
.ptop { width:100%; display:flex; align-items:center; justify-content:space-between; height:20px; margin-bottom:16px; }
.pchev { color:#B8B8B8; font-size:16px; }
.peyebrow { font-size:12px; font-weight:700; letter-spacing:0.08em; color:#B8B8B8; }
.pmenu { color:#B8B8B8; font-size:16px; }
.cover { width:240px; height:240px; border-radius:8px; background:linear-gradient(150deg,#E0533C,#7E3F2c);
box-shadow:rgba(224,83,60,0.55) 0 8px 24px -6px; margin-bottom:16px; }
.etitle { font-size:20px; font-weight:700; color:#FFFFFF; margin:0 0 4px; text-align:center; }
.eshow { font-size:14px; font-weight:500; color:#E0533C; margin:0 0 12px; text-align:center; }
.scrubwrap { width:100%; max-width:440px; margin-bottom:12px; }
.scrubtrack { height:4px; border-radius:2px; background:#2E2E2E; position:relative; }
.scrubfill { position:absolute; left:0; top:0; height:4px; border-radius:2px; background:#E0533C; width:38%; }
.scrubknob { position:absolute; top:50%; left:38%; width:13px; height:13px; border-radius:50%; background:#fff;
transform:translate(-50%,-50%); box-shadow:rgba(0,0,0,0.5) 0 1px 4px; }
.timerow { display:flex; justify-content:space-between; font-size:12px; font-weight:500; color:#B8B8B8; margin-top:6px; }
.transport { display:flex; align-items:center; gap:22px; margin-bottom:16px; }
.tbtn { color:#B8B8B8; font-size:20px; }
.playbtn { width:68px; height:68px; border-radius:50%; background:#E0533C; display:flex; align-items:center;
justify-content:center; color:#fff; font-size:24px; box-shadow:rgba(224,83,60,0.55) 0 8px 24px -6px; }
.chiprow { display:flex; gap:26px; }
.chip { display:flex; flex-direction:column; align-items:center; gap:5px; }
.chip .ci { font-size:17px; color:#B8B8B8; }
.chip .cl { font-size:10px; font-weight:600; color:#B8B8B8; }
.chip.active .ci, .chip.active .cl { color:#E0533C; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:52px; background:rgba(26,26,26,0.94);
border-top:0.5px solid #383838; display:flex; align-items:center; justify-content:space-around; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; }
.tab .ic { font-size:19px; color:#757575; }
.tab .lb { font-size:10px; font-weight:600; color:#757575; }
.tab.active .ic, .tab.active .lb { color:#F43E37; }
.brandtag { position:absolute; top:8px; left:16px; font-size:12px; font-weight:700; color:#F43E37; letter-spacing:0.04em; }
</style></head>
<body>
<div class="app">
<span class="brandtag">Pocket Casts (iOS)</span>
<div class="queue">
<p class="queuehdr">Up Next</p>
<div class="qrow"><span class="qhandle">≡</span><div class="qthumb qt1"></div>
<div class="qmeta"><p class="qtitle">The Signal Room</p><p class="qshow">Late Night Frequencies</p></div>
<span class="qremove">×</span></div>
<div class="qrow"><span class="qhandle">≡</span><div class="qthumb qt2"></div>
<div class="qmeta"><p class="qtitle">Field Notes Ep. 44</p><p class="qshow">Wild Air</p></div>
<span class="qremove">×</span></div>
<div class="qrow"><span class="qhandle">≡</span><div class="qthumb qt3"></div>
<div class="qmeta"><p class="qtitle">A Quiet Correction</p><p class="qshow">Ledger & Light</p></div>
<span class="qremove">×</span></div>
<div class="qrow"><span class="qhandle">≡</span><div class="qthumb qt4"></div>
<div class="qmeta"><p class="qtitle">Deep Dive: Coral</p><p class="qshow">Ocean Desk</p></div>
<span class="qremove">×</span></div>
</div>
<div class="player">
<div class="ptop"><span class="pchev">⌄</span><span class="peyebrow">NOW PLAYING</span><span class="pmenu">⋮</span></div>
<div class="cover"></div>
<p class="etitle">The Signal Room</p>
<p class="eshow">Late Night Frequencies</p>
<div class="scrubwrap">
<div class="scrubtrack"><div class="scrubfill"></div><div class="scrubknob"></div></div>
<div class="timerow"><span>14:22</span><span>-19:48</span></div>
</div>
<div class="transport">
<span class="tbtn">15</span>
<span class="tbtn">⏮</span>
<div class="playbtn">▌▌</div>
<span class="tbtn">⏭</span>
<span class="tbtn">30</span>
</div>
<div class="chiprow">
<div class="chip active"><span class="ci">≡</span><span class="cl">UP NEXT</span></div>
<div class="chip active"><span class="ci">1.2×</span><span class="cl">SPEED</span></div>
<div class="chip"><span class="ci">✂</span><span class="cl">TRIM</span></div>
<div class="chip"><span class="ci">★</span><span class="cl">STAR</span></div>
<div class="chip"><span class="ci">⚙</span><span class="cl">EFFECTS</span></div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="ic">🎤</span><span class="lb">PODCASTS</span></div>
<div class="tab"><span class="ic">☰</span><span class="lb">FILTERS</span></div>
<div class="tab"><span class="ic">✦</span><span class="lb">DISCOVER</span></div>
<div class="tab"><span class="ic">👤</span><span class="lb">PROFILE</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a3ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a3ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d0fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a3ff; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a3ff; color: #f5f5f5;
border: 1px solid #27b0fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d0fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e99fd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f0f0f0; box-sizing:border-box;
font-family:"Inter", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid rgba(214,235,253,0.12); }
.brand { font-size:16px; font-weight:600; color:#f0f0f0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#a1a4a5; }
.cta { border:1px solid rgba(214,235,253,0.19); border-radius:9999px; padding:5px 16px; font-size:14px; color:#f0f0f0; }
.hero { padding:44px 32px 20px; text-align:center; }
.hero h1 { font-family:"Domaine Display", Georgia, serif; font-size:52px; font-weight:400; letter-spacing:-1.2px;
line-height:1; margin:0 0 16px; color:#f0f0f0; }
.hero p { font-size:15px; color:#a1a4a5; margin:0 0 22px; max-width:460px; margin-left:auto; margin-right:auto; }
.herobtns { display:flex; gap:10px; justify-content:center; }
.btn-primary { background:#00a3ff; color:#ffffff; border-radius:4px; padding:10px 20px; font-size:14px; font-weight:600; }
.btn-outline { border:1px solid rgba(214,235,253,0.19); color:#f0f0f0; border-radius:9999px; padding:9px 20px; font-size:14px; }
.codepanel { margin:0 32px 24px; background:#0d0d0d; border:1px solid rgba(214,235,253,0.12); border-radius:16px; padding:20px; }
.codepanel .tabs { display:flex; gap:8px; margin-bottom:12px; }
.codetab { font-size:12px; color:#a1a4a5; padding:5px 12px; border-radius:16px; }
.codetab.active { background:rgba(214,235,253,0.19); color:#f0f0f0; }
.codeline { font-family:monospace; font-size:12px; color:#d6ebfd; line-height:1.9; }
.codeline .kw { color:#00a3ff; }
.codeline .str { color:#9fe6a0; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.06); }
.feat { background:#000; padding:22px; }
.feat h3 { font-family:"ABC Favorit", sans-serif; font-size:18px; font-weight:400; margin:0 0 8px; color:#f0f0f0; }
.feat p { font-size:13px; color:#a1a4a5; line-height:1.6; margin:0; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid rgba(214,235,253,0.12); padding:12px 32px;
display:flex; justify-content:space-between; font-size:12px; color:#4a4a4a; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Resend</span>
<div class="navlinks"><span>Product</span><span>Docs</span><span>Pricing</span><span>Changelog</span></div>
<span class="cta">Sign in</span>
</nav>
<section class="hero">
<h1>Email for developers</h1>
<p>The best way to reach humans instead of spam folders — build, test, and deliver emails at scale.</p>
<div class="herobtns">
<span class="btn-primary">Start building</span>
<span class="btn-outline">Read the docs</span>
</div>
</section>
<div class="codepanel">
<div class="tabs"><span class="codetab active">index.ts</span><span class="codetab">curl</span><span class="codetab">python</span></div>
<div class="codeline"><span class="kw">import</span> { Resend } <span class="kw">from</span> <span class="str">'resend'</span>;</div>
<div class="codeline"><span class="kw">const</span> resend = <span class="kw">new</span> Resend(process.env.API_KEY);</div>
<div class="codeline">resend.emails.send({ from: <span class="str">'[email protected]'</span>, to: <span class="str">'[email protected]'</span> });</div>
</div>
<div class="features">
<div class="feat"><h3>Audiences</h3><p>Manage subscriber lists and segment your sends with precision.</p></div>
<div class="feat"><h3>Automations</h3><p>Trigger sequences on events without leaving your codebase.</p></div>
<div class="feat"><h3>Broadcasts</h3><p>Send one-off campaigns to thousands of contacts in seconds.</p></div>
</div>
<footer>
<span>© Resend</span>
<span>Product · Docs · Pricing · Changelog</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1e1e1e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1e1e1e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262626; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: 1px solid #262626; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1e1e1e; color: #f5f5f5;
border: 1px solid #404040; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1f1f1f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1E1E1E; color:#DCDDDE; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
.app { display:flex; width:960px; height:640px; }
.ribbon { width:40px; background:#1E1E1E; border-right:1px solid #363636; display:flex;
flex-direction:column; align-items:center; gap:18px; padding-top:16px; flex-shrink:0; }
.ribbon .ic { font-size:16px; color:#999999; }
.ribbon .ic.on { color:#A78BFA; }
.filetree { width:190px; background:#262626; border-right:1px solid #363636; padding:10px 0; flex-shrink:0; }
.ft-head { font-size:11px; font-weight:700; letter-spacing:0.06em; color:#999999; text-transform:uppercase; padding:4px 12px 8px; }
.ft-head.vault { color:#DCDDDE; text-transform:none; font-size:13px; letter-spacing:0; padding-top:10px; }
.ft-row { display:flex; align-items:center; gap:6px; height:28px; padding:0 12px; font-size:13px; color:#DCDDDE; }
.ft-row .chev { color:#6B6B6B; font-size:9px; width:8px; }
.ft-row .doc { font-size:11px; color:#6B6B6B; }
.ft-row.d1 { padding-left:28px; }
.ft-row.active { background:rgba(124,58,237,0.14); border-left:2px solid #7C3AED; padding-left:26px; }
.ft-row .dot { margin-left:auto; width:6px; height:6px; border-radius:50%; background:#A78BFA; }
.editor { width:340px; border-right:1px solid #363636; display:flex; flex-direction:column; flex-shrink:0; }
.note-toolbar { height:40px; display:flex; align-items:center; padding:0 14px; font-size:13px;
font-weight:600; color:#DCDDDE; border-bottom:1px solid #363636; justify-content:space-between; }
.note-toolbar .tt { color:#999999; font-weight:400; font-size:12px; }
.src { padding:14px; font-size:13px; line-height:1.55; flex:1; }
.src .marker { color:#6B6B6B; }
.src .h1 { font-weight:700; font-size:16px; }
.src .h2 { font-weight:700; font-size:14.5px; }
.src .link { color:#A78BFA; }
.src .ext { color:#7C9CBF; }
.src .tag { background:rgba(124,58,237,0.14); color:#A78BFA; border-radius:999px; padding:1px 8px; font-weight:600; font-size:11.5px; }
.src .quote { border-left:3px solid #7C3AED; padding-left:10px; color:#999999; display:block; margin:6px 0; }
.src .hi { background:rgba(255,213,79,0.25); }
.src p { margin:0 0 8px; }
.backlinks { border-top:1px solid #363636; background:#262626; padding:10px 14px; }
.bl-head { font-size:10.5px; font-weight:700; letter-spacing:0.06em; color:#999999; text-transform:uppercase; margin-bottom:6px; }
.bl-item { margin-bottom:6px; }
.bl-title { font-size:13px; font-weight:600; color:#DCDDDE; }
.bl-ctx { font-size:11.5px; color:#999999; }
.bl-ctx .link { color:#A78BFA; }
.graphpane { flex:1; position:relative; background:#1E1E1E; }
.g-head { position:absolute; top:12px; left:14px; font-size:11px; font-weight:700; letter-spacing:0.06em; color:#999999; text-transform:uppercase; }
.edge { position:absolute; height:1px; background:#363636; transform-origin:0 0; }
.edge.on { background:#7C3AED; }
.node { position:absolute; border-radius:50%; background:#7C3AED; }
.node.active { background:#A78BFA; box-shadow:0 0 0 14px rgba(124,58,237,0.14); }
.nlabel { position:absolute; font-size:10px; font-weight:600; color:#999999; white-space:nowrap; }
</style></head>
<body>
<div class="app">
<div class="ribbon">
<span class="ic on vaultmark" title="Obsidian (iOS)">◈</span>
<span class="ic">⌘</span>
<span class="ic">🔍</span>
<span class="ic">＋</span>
<span class="ic">⚙</span>
</div>
<div class="filetree">
<div class="ft-head vault">Obsidian (iOS)</div>
<div class="ft-head">Files</div>
<div class="ft-row"><span class="chev">▾</span> 📁 Zettelkasten</div>
<div class="ft-row d1 active"><span class="doc">📄</span> Design Systems<span class="dot"></span></div>
<div class="ft-row d1"><span class="doc">📄</span> Type Scale</div>
<div class="ft-row d1"><span class="doc">📄</span> Color Theory</div>
<div class="ft-row"><span class="chev">▾</span> 📁 Daily</div>
<div class="ft-row d1"><span class="doc">📄</span> 2026-09-04</div>
<div class="ft-row d1"><span class="doc">📄</span> 2026-09-03</div>
</div>
<div class="editor">
<div class="note-toolbar">Design Systems <span class="tt">Source</span></div>
<div class="src mono">
<p><span class="marker">## </span><span class="h2">Structural accents</span></p>
<p>The <span class="tag">#design-system</span> lives between <span class="link">[[Type Scale]]</span> and <span class="link">[[Color Theory]]</span>.</p>
<p><span class="marker">**</span>Purple<span class="marker">**</span> marks the single connective color — see <span class="ext">Obsidian (iOS).md</span> for context.</p>
<p><span class="quote">Restraint is the identity — one accent, two type systems.</span></p>
<p>A note can <span class="hi">==highlight==</span> its own claims for later review.</p>
<p><span class="marker">- </span>Nodes scale with link count</p>
<p><span class="marker">- </span>Edges brighten toward the active note</p>
</div>
<div class="backlinks">
<div class="bl-head">Linked mentions · 2</div>
<div class="bl-item"><div class="bl-title">Type Scale</div><div class="bl-ctx">…builds on <span class="link">[[Design Systems]]</span> for hierarchy…</div></div>
<div class="bl-item"><div class="bl-title">Color Theory</div><div class="bl-ctx">…the accent rule from <span class="link">[[Design Systems]]</span> applies here…</div></div>
</div>
</div>
<div class="graphpane">
<div class="g-head">Graph</div>
<div class="edge on" style="left:195px; top:170px; width:100px; transform:rotate(18deg);"></div>
<div class="edge on" style="left:195px; top:170px; width:120px; transform:rotate(-22deg);"></div>
<div class="edge" style="left:295px; top:130px; width:90px; transform:rotate(-40deg);"></div>
<div class="edge" style="left:315px; top:220px; width:70px; transform:rotate(60deg);"></div>
<div class="edge" style="left:195px; top:170px; width:150px; transform:rotate(65deg);"></div>
<div class="edge" style="left:340px; top:280px; width:60px; transform:rotate(-10deg);"></div>
<div class="node active" style="left:180px; top:158px; width:24px; height:24px;"></div>
<div class="nlabel" style="left:150px; top:186px;">Design Systems</div>
<div class="node" style="left:288px; top:122px; width:16px; height:16px;"></div>
<div class="nlabel" style="left:270px; top:112px;">Type Scale</div>
<div class="node" style="left:308px; top:212px; width:14px; height:14px;"></div>
<div class="nlabel" style="left:288px; top:230px;">Color Theory</div>
<div class="node" style="left:60px; top:80px; width:8px; height:8px;"></div>
<div class="node" style="left:90px; top:340px; width:10px; height:10px;"></div>
<div class="node" style="left:210px; top:400px; width:8px; height:8px;"></div>
<div class="node" style="left:40px; top:430px; width:6px; height:6px;"></div>
<div class="node" style="left:130px; top:250px; width:6px; height:6px;"></div>
<div class="node" style="left:280px; top:420px; width:10px; height:10px;"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #f15a22; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #ffffff;
border: 1px solid #f15a22; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1a1a1a; color: #ffffff;
border: 1px solid #404040; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffd100; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:64px; background:#000000; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #333333; }
.brand { font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-size:20px; font-weight:700;
letter-spacing:0.5px; margin:0; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-family:'Montserrat', Arial, sans-serif; font-size:13px; font-weight:600;
letter-spacing:0.4px; text-transform:uppercase; color:#ffffff; padding-bottom:4px; }
.navlinks span.active { color:#f15a22; border-bottom:2px solid #f15a22; }
.navicons { font-size:15px; color:#f15a22; }
.hero { height:148px; background:#1a1a1a; display:flex; flex-direction:column; justify-content:center;
padding:0 44px; gap:6px; }
.hero h1 { font-family:'Montserrat', Arial, sans-serif; font-size:30px; font-weight:700; line-height:1.2;
letter-spacing:-0.3px; margin:0; max-width:520px; }
.hero p { font-size:14px; color:#999999; margin:0 0 6px; max-width:460px; }
.hero button { align-self:flex-start; background:#f15a22; color:#ffffff; border:none; border-radius:4px;
padding:11px 24px; font-family:'Montserrat', Arial, sans-serif; font-size:13px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; cursor:default; }
.strip { height:36px; background:#000000; border-bottom:1px solid #333333; display:flex; align-items:center;
gap:22px; padding:0 40px; }
.strip span { font-family:'Montserrat', Arial, sans-serif; font-size:12px; font-weight:600;
letter-spacing:0.3px; text-transform:uppercase; color:#999999; padding:4px 0; }
.strip span.active { color:#f15a22; border-bottom:2px solid #f15a22; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 40px; }
.card { background:#1a1a1a; border:1px solid #333333; border-radius:4px; padding:16px; display:flex;
flex-direction:column; gap:6px; }
.thumb { position:relative; width:100%; height:118px; border-radius:4px; }
.t1 { background:linear-gradient(135deg,#5a3a2a,#f15a22 60%,#9c3814); }
.t2 { background:linear-gradient(135deg,#2a3a4a,#37628f 60%,#12222f); }
.t3 { background:linear-gradient(135deg,#3a2a4a,#7a4fb0 60%,#241633); }
.badge { position:absolute; top:8px; left:8px; background:#ffd100; color:#000000; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:2px; }
.badge.sale { background:#f15a22; color:#ffffff; }
.card .title { font-family:'Montserrat', Arial, sans-serif; font-size:16px; font-weight:600; margin:4px 0 0; }
.row2 { display:flex; align-items:center; justify-content:space-between; }
.price { font-size:16px; font-weight:700; color:#f15a22; }
.players { font-size:12px; color:#999999; }
footer { height:86px; background:#000000; border-top:1px solid #333333; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.footcol span { display:block; font-size:12px; color:#666666; line-height:1.8; }
.footcol .head { font-family:'Montserrat', Arial, sans-serif; font-size:13px; font-weight:600; color:#ffffff;
margin-bottom:2px; }
</style></head>
<body>
<nav>
<p class="brand">Asmodee</p>
<div class="navlinks"><span class="active">New Releases</span><span>Board Games</span><span>Card Games</span><span>Expansions</span></div>
<div class="navicons">⚲</div>
</nav>
<section class="hero">
<h1>Every game is a world</h1>
<p>Strategy, discovery, and story — new titles and classic favorites for every table.</p>
<button>Shop New Releases</button>
</section>
<div class="strip">
<span class="active">All Games</span><span>Strategy</span><span>Party</span><span>Cooperative</span><span>Family</span>
</div>
<section class="cards">
<div class="card">
<div class="thumb t1"><span class="badge">New</span></div>
<p class="title">Ember Ridge</p>
<div class="row2"><span class="players">2–4 players · 45 min</span><span class="price">$39.99</span></div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge sale">Sale</span></div>
<p class="title">Deep Current</p>
<div class="row2"><span class="players">1–5 players · 60 min</span><span class="price">$34.99</span></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<p class="title">Violet Crown</p>
<div class="row2"><span class="players">3–6 players · 30 min</span><span class="price">$24.99</span></div>
</div>
</section>
<footer>
<div class="footcol"><span class="head">Shop</span><span>New Releases</span><span>Expansions</span></div>
<div class="footcol"><span class="head">Support</span><span>Rulebooks</span><span>FAQ</span></div>
<div class="footcol"><span class="head">Asmodee</span><span>© Asmodee</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ebebeb; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ebebeb; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; background: #bd2426; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; background: #ffffff; color: #272727;
border: 1px solid #bd2426; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272727;
border: 1px solid #bababa; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ebebeb; color:#272727; box-sizing:border-box;
font-family:Arial, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
nav { height:48px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 20px; }
.brand { font-size:20px; font-weight:700; }
.brand small { font-size:11px; font-weight:600; color:#bd2426; margin-left:6px; text-transform:uppercase; }
.navlinks { display:flex; gap:16px; font-size:13px; font-weight:600; color:#404040; }
.search { background:#ffffff; border:1px solid #bfbfbf; border-radius:8px; height:32px; width:200px;
font-size:12px; color:#595959; display:flex; align-items:center; padding:0 10px; }
.catnav { height:34px; background:#ebebeb; display:flex; align-items:center; gap:14px; padding:0 20px;
font-size:12px; font-weight:600; color:#404040; }
.catnav .active { color:#bd2426; }
main { display:flex; gap:18px; padding:12px 20px 0; height:480px; }
.left { width:230px; display:flex; flex-direction:column; gap:8px; }
.case { background:#ffffff; border:1px solid #bfbfbf; border-radius:4px; height:340px; position:relative;
overflow:hidden; }
.case .art { position:absolute; inset:14px 14px 60px; border-radius:2px;
background:linear-gradient(200deg,#2b2b2b 0%,#521010 55%,#000 100%); }
.case .art::after { content:''; position:absolute; left:10%; right:10%; top:38%; height:2px; background:#f68b1f; opacity:.7; }
.case .spine { position:absolute; left:14px; right:14px; bottom:14px; top:284px; background:#f5f5f5;
border:1px solid #dedede; border-radius:2px; display:flex; align-items:center; padding:0 8px;
font-size:10px; color:#595959; font-family:Courier, monospace; }
.badges-float { position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:5px; z-index:2; }
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
padding:2px 6px; border-radius:4px; color:#fff; }
.b-sale { background:#bd2426; }
.b-preorder { background:#f68b1f; }
.thumbs { display:flex; gap:6px; }
.thumb { flex:1; height:44px; background:#ffffff; border:1px solid #bfbfbf; border-radius:4px; }
.thumb.sel { border-color:#bd2426; border-width:2px; }
.right { flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.crumb { font-size:11px; color:#737373; }
h1 { font-size:19px; font-weight:700; margin:2px 0 0; line-height:1.3; }
.meta { font-size:11px; color:#595959; font-family:Courier, monaco, monospace; }
.stars { font-size:12px; color:#f68b1f; }
.stars span.n { color:#595959; margin-left:6px; font-family:Arial; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:22px; font-weight:700; color:#bd2426; }
.price-old { font-size:13px; color:#595959; text-decoration:line-through; }
.save { font-size:11px; font-weight:700; color:#516b1d; }
.formats { display:flex; gap:8px; margin-top:2px; }
.chip { font-size:12px; font-weight:600; color:#404040; background:#ffffff; border:1px solid #bfbfbf;
border-radius:4px; padding:7px 14px; }
.chip.sel { border-color:#bd2426; border-width:2px; color:#bd2426; }
.cta-row { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#bd2426; color:#fff; font-size:13px; font-weight:700; border-radius:4px; height:40px;
padding:0 22px; display:flex; align-items:center; justify-content:center; }
.btn-secondary { background:#0051c3; color:#fff; font-size:13px; font-weight:700; border-radius:4px; height:40px;
padding:0 20px; display:flex; align-items:center; justify-content:center; }
.specs { margin-top:4px; background:#ffffff; border:1px solid #bfbfbf; border-radius:4px; padding:10px 14px;
display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }
.spec-item { font-size:11px; }
.spec-item .lab { color:#737373; text-transform:uppercase; letter-spacing:.4px; font-size:10px; }
.spec-item .val { color:#272727; font-weight:600; font-size:12px; }
.related { display:flex; gap:8px; margin-top:auto; }
.rel { flex:1; height:50px; background:#ffffff; border:1px solid #dedede; border-radius:4px; }
footer { position:absolute; bottom:0; left:0; right:0; height:26px; background:#272727; color:#62a1d8;
display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:10px; }
</style></head>
<body>
<nav>
<span class="brand">Amiami Movies A 2<small>Movies & Media</small></span>
<div class="navlinks"><span>Anime</span><span>Live Action</span><span>Box Sets</span><span>Pre-Order</span></div>
<div class="search">Search title, SKU…</div>
</nav>
<div class="catnav"><span class="active">Blu-ray</span><span>4K UHD</span><span>DVD</span><span>Steelbook</span><span>Box Sets</span></div>
<main>
<div class="left">
<div class="case">
<div class="badges-float">
<span class="badge b-sale">Sale</span>
<span class="badge b-preorder">Pre-Order</span>
</div>
<div class="art"></div>
<div class="spine">SKU BRAY-40912-LE</div>
</div>
<div class="thumbs">
<div class="thumb sel"></div><div class="thumb"></div><div class="thumb"></div>
</div>
</div>
<div class="right">
<div class="crumb">Home / Movies & Media / Blu-ray / <b>Crimson Static — Collector's Edition</b></div>
<h1>Crimson Static: Collector's Edition (Blu-ray + Booklet)</h1>
<div class="meta">Region A · Runtime 118 min · Reserve ships Q2 2027</div>
<div class="stars">★★★★★ <span class="n">4.8 (52 reviews)</span></div>
<div class="price-row">
<span class="price">$54.99</span>
<span class="price-old">$64.99</span>
<span class="save">Save 15%</span>
</div>
<div class="formats">
<span class="chip sel">Blu-ray + Booklet</span>
<span class="chip">4K UHD Steelbook</span>
<span class="chip">Standard DVD</span>
</div>
<div class="cta-row">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Proceed to Checkout</div>
</div>
<div class="specs">
<div class="spec-item"><div class="lab">Audio</div><div class="val">JP 5.1 / EN Dub 2.0</div></div>
<div class="spec-item"><div class="lab">Subtitles</div><div class="val">English, Japanese</div></div>
<div class="spec-item"><div class="lab">Extras</div><div class="val">40-page art booklet</div></div>
<div class="spec-item"><div class="lab">Case</div><div class="val">Rigid slipcase</div></div>
</div>
<div class="related"><div class="rel"></div><div class="rel"></div><div class="rel"></div><div class="rel"></div></div>
</div>
</main>
<footer><span>© Amiami Movies A 2</span><span>Region-locked — verify player compatibility</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #9146ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #9146ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c8a6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5c16c5; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9146ff; color: #ffffff;
border: 1px solid #5c16c5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #9146ff; color: #f5f5f5;
border: 1px solid #a162fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c8a6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #893ef6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f8; color:#0e0e10; box-sizing:border-box;
font-family:Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; gap:20px; padding:0 24px; background:#ffffff; }
.brand { font-size:16px; font-weight:600; color:#5c16c5; }
.navlinks { display:flex; gap:18px; font-size:14px; }
.navlinks span.on { color:#5c16c5; font-weight:600; }
.search { flex:1; max-width:240px; background:#ffffff; border-radius:8px; height:36px; display:flex;
align-items:center; padding:0 12px; font-size:14px; color:#747484; box-shadow:rgba(50,50,57,0.62) 0px 0px 0px 1px inset; }
.loginbtn { background:rgba(173,173,184,0.22); color:#0e0e10; border-radius:9000px; padding:0 16px; height:32px;
font-size:14px; font-weight:600; display:flex; align-items:center; }
.signup { background:#9146ff; color:#ffffff; border-radius:9000px; padding:0 16px; height:32px;
font-size:14px; font-weight:600; display:flex; align-items:center; }
.side { display:flex; height:584px; }
.rail { width:76px; background:#ffffff; display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:14px; }
.rail .avatar { width:36px; height:36px; border-radius:9000px; background:linear-gradient(135deg,#c9a6ff,#5c16c5); }
.content { flex:1; padding:16px 24px; }
h2 { font-size:16px; font-weight:600; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tile { background:#f7f7f8; border-radius:4px; overflow:hidden; }
.tile .thumb { height:110px; background:linear-gradient(150deg,#efeff1,#c9a6ff); position:relative; }
.live { position:absolute; top:6px; left:6px; background:#eb0400; color:#fff; font-size:12px; padding:1px 5px; border-radius:4px; }
.viewers { position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:14px; padding:0 4px; border-radius:2px; }
.tile .meta { padding:8px 4px; }
.tile .t { font-size:14px; font-weight:600; }
.tile .m { font-size:12px; color:#747484; }
</style></head>
<body>
<nav>
<span class="brand">Twitch</span>
<div class="navlinks"><span class="on">Browse</span><span>Following</span></div>
<span class="search">Search</span>
<span class="loginbtn">Log In</span>
<span class="signup">Sign Up</span>
</nav>
<div class="side">
<div class="rail">
<div class="avatar"></div><div class="avatar"></div><div class="avatar"></div>
</div>
<div class="content">
<h2>Live channels</h2>
<div class="grid">
<div class="tile"><div class="thumb"><span class="live">LIVE</span><span class="viewers">12.4K</span></div><div class="meta"><div class="t">Skyline Strategy</div><div class="m">Puzzle League</div></div></div>
<div class="tile"><div class="thumb"><span class="live">LIVE</span><span class="viewers">3.1K</span></div><div class="meta"><div class="t">Northwind Plays</div><div class="m">Just Chatting</div></div></div>
<div class="tile"><div class="thumb"><span class="live">LIVE</span><span class="viewers">890</span></div><div class="meta"><div class="t">Copper Coast Radio</div><div class="m">Music</div></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fd5744; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fd5744; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f9aea5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f86453; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd5744; color: #000000;
border: 1px solid #f86453; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fd5744; color: #f5f5f5;
border: 1px solid #fc7060; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f9aea5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fc5946; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #f0f0f0; }
.brand { font-size:18px; font-weight:700; }
.search { flex:1; max-width:280px; margin:0 24px; background:#f0f0f0; border-radius:9999px; height:36px;
display:flex; align-items:center; padding:0 16px; font-size:13px; color:#6d6d6d; }
.navbtn { background:#000000; color:#fff; border-radius:9999px; padding:8px 16px; font-size:13px; font-weight:700; }
.cats { display:flex; gap:8px; padding:14px 32px 6px; }
.cat { background:#f0f0f0; color:#545454; border-radius:9999px; padding:6px 12px; font-size:12px; font-weight:700; }
.cat.on { background:#000000; color:#ffffff; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:14px 32px 24px; }
.card { display:flex; flex-direction:column; gap:6px; }
.thumb { height:100px; border-radius:8px; background:linear-gradient(145deg,#ffe2dc,#fd5744); position:relative; }
.thumb .flag { position:absolute; top:6px; left:6px; background:#fd5744; color:#fff; font-size:10px; font-weight:700; padding:2px 5px; border-radius:4px; }
.name { font-size:12px; color:#6d6d6d; }
.title { font-size:14px; font-weight:700; line-height:1.3; }
.bar { background:#f0f0f0; height:6px; border-radius:9999px; overflow:hidden; margin-top:2px; }
.bar .fill { height:100%; background:#fd5744; }
.pct { font-size:13px; font-weight:700; color:#fd5744; }
.days { font-size:11px; color:#6d6d6d; }
</style></head>
<body>
<nav>
<span class="brand">Tumblbug</span>
<span class="search">Search projects, creators</span>
<span class="navbtn">Start a project</span>
</nav>
<div class="cats">
<span class="cat on">Popular</span>
<span class="cat">New</span>
<span class="cat">Ending soon</span>
<span class="cat">Publishing</span>
<span class="cat">Music</span>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="flag">NEW</span></div><span class="name">Studio Marlowe</span><span class="title">A hand-inked art book</span><div class="bar"><div class="fill" style="width:82%"></div></div><span class="pct">82% funded</span><span class="days">14 days left</span></div>
<div class="card"><div class="thumb"></div><span class="name">Analog Sound Co.</span><span class="title">First vinyl EP release</span><div class="bar"><div class="fill" style="width:152%"></div></div><span class="pct">152% funded</span><span class="days">3 days left</span></div>
<div class="card"><div class="thumb"><span class="flag">END</span></div><span class="name">Table Nine Games</span><span class="title">Cooperative board game</span><div class="bar"><div class="fill" style="width:61%"></div></div><span class="pct">61% funded</span><span class="days">1 day left</span></div>
<div class="card"><div class="thumb"></div><span class="name">Paper Crane Films</span><span class="title">Short documentary project</span><div class="bar"><div class="fill" style="width:38%"></div></div><span class="pct">38% funded</span><span class="days">20 days left</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #212529; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #212529; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969799; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212529; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #212529; color: #f5f5f5;
border: 1px solid #43464a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969799; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c1f22; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard",-apple-system,"Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:6px; }
.navlinks span { font-size:16px; color:#212429; padding:5.5px 12px; border-radius:4px; }
.hero { padding:44px 40px 30px; text-align:center; }
.hero h1 { font-size:44px; font-weight:700; margin:0 0 12px; letter-spacing:-0.5px; }
.hero p { font-size:16px; color:#8c8c8c; margin:0; }
.band { background:#f3f4f6; padding:26px 40px; display:flex; justify-content:center; gap:60px; }
.stat b { display:block; font-size:23px; font-weight:700; }
.stat span { font-size:14px; color:#71717a; }
.blogsec { padding:24px 40px 0; }
.blogsec h2 { font-size:23px; font-weight:700; margin:0 0 16px; }
.postrow { display:flex; gap:16px; }
.post { flex:1; background:#ffffff; border:1px solid #e4e4e7; border-radius:6px; padding:18px; }
.chip { display:inline-block; background:#e5e7eb; color:#4b5563; font-size:12px; border-radius:6px; padding:3px 10px; margin-bottom:10px; }
.post h3 { font-size:16px; font-weight:600; margin:0 0 6px; }
.post p { font-size:13px; color:#595959; margin:0; line-height:1.5; }
.scrolltop { position:absolute; right:36px; bottom:24px; width:48px; height:48px; border-radius:24px;
background:#212529; color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:18px;
box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.06); }
</style></head>
<body>
<nav>
<p class="brand">Scatter Lab</p>
<div class="navlinks"><span>About Zeta</span><span>Culture</span><span>Blog</span><span>Careers</span><span>AI Ethics</span></div>
</nav>
<section class="hero">
<h1>zeta: a new paradigm for entertainment</h1>
<p>An AI entertainment service used 12 hours a week</p>
</section>
<div class="band">
<div class="stat"><b>2h 40m a day</b><span>average usage time</span></div>
<div class="stat"><b>800,000 users</b><span>every month</span></div>
</div>
<section class="blogsec">
<h2>Blog</h2>
<div class="postrow">
<div class="post"><span class="chip">Product</span><h3>What makes zeta special shows up in usage time</h3><p>Why people come back to zeta every day.</p></div>
<div class="post"><span class="chip">Business</span><h3>The Scatter Lab Ethos: how we work</h3><p>Book a coffee chat — meet our culture.</p></div>
</div>
</section>
<div class="scrolltop">↑</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5160; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5160; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #faabb2; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5160; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5160; color: #f5f5f5;
border: 1px solid #fd6b78; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #faabb2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e45477; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1f1f1f; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { width:300px; height:640px; float:left; border-right:1px solid #dddddd; padding:16px; position:relative; }
.apptop { display:flex; justify-content:space-between; align-items:center; }
.abrand { font-size:16px; font-weight:600; color:#ff5160; letter-spacing:-0.4px; }
.openapp { border:1px solid #dddddd; background:#ffffff; color:#1f1f1f; border-radius:20px; padding:0 8px;
height:28px; font-size:12px; font-weight:600; }
.feedtitle { font-size:16px; font-weight:600; margin:14px 0 8px; letter-spacing:-0.4px; }
.feedgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.pcard .img { aspect-ratio:3/4; border-radius:8px; background:linear-gradient(150deg,#ffe3e6,#ffd0d6); }
.pcard .nm { font-size:12px; font-weight:600; margin-top:6px; }
.pcard .pr { font-size:12px; color:#777777; }
.heartrow { display:flex; gap:6px; margin-top:16px; }
.htag { background:#fff2ea; color:#ff5160; border-radius:20px; padding:6px 12px; font-size:11px; font-weight:600; }
.team { margin-left:300px; padding:32px 40px; }
.tbrand { font-size:48px; font-weight:600; letter-spacing:-0.3px; line-height:1.1; margin:0 0 10px; }
.tsub { font-size:16px; color:#757575; max-width:480px; line-height:1.5; margin:0 0 20px; }
.tcta-row { display:flex; gap:12px; }
.tprimary { background:#ff5160; color:#ffffff; border:none; border-radius:12px; width:160px; height:56px; font-size:18px; font-weight:600; }
.tsoft { background:#fff2ea; color:#ff5160; border:none; border-radius:12px; width:200px; height:48px; font-size:16px; font-weight:600; }
.storyrow { display:flex; gap:16px; margin-top:28px; }
.story { flex:1; background:#ffffff; border-radius:12px; box-shadow:0 4px 48px rgba(0,0,0,0.08); padding:18px; }
.story h4 { margin:0 0 6px; font-size:24px; font-weight:600; }
.story p { margin:0; font-size:14px; color:#757575; line-height:1.5; }
footer { position:absolute; bottom:0; left:300px; right:0; padding:12px 40px; font-size:11px; color:#757575; border-top:1px solid #e5e7eb; }
</style></head>
<body>
<div class="app">
<div class="apptop"><span class="abrand">Ably</span><button class="openapp">Open app</button></div>
<div class="feedtitle">Curated for your taste</div>
<div class="feedgrid">
<div class="pcard"><div class="img"></div><div class="nm">Oversized knit cardigan</div><div class="pr">₩28,900</div></div>
<div class="pcard"><div class="img"></div><div class="nm">Wide leg denim</div><div class="pr">₩32,000</div></div>
<div class="pcard"><div class="img"></div><div class="nm">Soft pastel blouse</div><div class="pr">₩19,800</div></div>
<div class="pcard"><div class="img"></div><div class="nm">Minimal tote bag</div><div class="pr">₩24,500</div></div>
</div>
<div class="heartrow"><span class="htag">My Style</span><span class="htag">New In</span></div>
</div>
<div class="team">
<div class="tbrand">Ably</div>
<p class="tsub">Style commerce built on personal taste — discover, buy, make, and sell, with less friction.</p>
<div class="tcta-row">
<button class="tprimary">Start Selling</button>
<button class="tsoft">Explore the App</button>
</div>
<div class="storyrow">
<div class="story"><h4>Taste-driven discovery</h4><p>A feed that adapts to what you're expressing or looking for, beyond fashion alone.</p></div>
<div class="story"><h4>An open seller ecosystem</h4><p>Lower friction for anyone who wants to make and sell their own style.</p></div>
</div>
</div>
<footer>© Ably · Next commerce, powered by taste</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d70b8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d70b8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #94b9da; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffdd00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d70b8; color: #ffdd00;
border: 1px solid #ffdd00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d70b8; color: #f5f5f5;
border: 1px solid #4085c2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #94b9da; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #41819b; color: #ffdd00;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0b0c0c; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
header.crown { background:#1d70b8; color:#ffffff; padding:12px 32px;
display:flex; align-items:center; justify-content:space-between; }
.crown .brand { font-size:22px; font-weight:700; letter-spacing:0.2px; }
.crown .tag { font-size:13px; opacity:0.85; }
.banner { background:#1d70b8; color:#ffffff; padding:14px 32px; font-size:16px; font-weight:400;
border-bottom:5px solid #1d70b8; }
.banner b { display:block; font-size:13px; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px; }
.service-header { border-bottom:1px solid #cecece; padding:6px 32px; font-size:16px; color:#484949; }
main { padding:24px 32px; display:flex; gap:32px; }
.content { flex:2; }
.content h1 { font-size:36px; font-weight:700; line-height:1.11; margin:0 0 16px; }
.content p.lead { font-size:19px; line-height:1.31; margin:0 0 20px; color:#0b0c0c; }
.task-list { list-style:none; margin:0 0 24px; padding:0; border-top:1px solid #cecece; }
.task-list li { display:flex; align-items:center; justify-content:space-between;
padding:14px 0; border-bottom:1px solid #cecece; font-size:19px; }
.tag { display:inline-block; background:#d2e2f1; color:#0f385c; border-radius:1px;
padding:2px 8px 3px; font-size:16px; font-weight:400; }
.tag.grey { background:#f3f3f3; color:#0b0c0c; }
.tag.green { background:#cce2d8; color:#00703c; }
.btn { display:inline-block; border-radius:0px; font-family:Arial, sans-serif; cursor:default; }
.btn-primary { background:#0f7a52; color:#ffffff; padding:8px 10px 7px; font-size:19px;
box-shadow:0 2px 0 #083d29; border:none; }
.btn-secondary { background:#f3f3f3; color:#0b0c0c; padding:8px 10px 7px; font-size:19px;
box-shadow:0 2px 0 #858686; border:none; margin-left:8px; }
.inset { border-left:10px solid #cecece; padding:15px; margin:0 0 20px; font-size:16px; line-height:1.4; }
aside.rail { flex:1; }
aside h2 { font-size:19px; font-weight:700; margin:0 0 10px; }
aside ul { list-style:none; margin:0; padding:0; }
aside li { padding:8px 0; border-bottom:1px solid #cecece; font-size:16px; color:#1a65a6; }
aside li.visited { color:#54319f; }
.focus-demo { display:inline-block; margin-top:20px; padding:8px 10px 7px; background:#f3f3f3;
color:#0b0c0c; font-size:16px; outline:3px solid #ffdd00; box-shadow:0 -2px #ffdd00, 0 4px #0b0c0c; }
footer { border-top:1px solid #cecece; padding:12px 32px; display:flex; justify-content:space-between;
font-size:13px; color:#484949; }
</style></head>
<body>
<header class="crown">
<span class="brand">GOV.UK</span>
<span class="tag">GOV.UK</span>
</header>
<div class="banner">
<b>Important</b>
Your application has been received
</div>
<div class="service-header">Check your State Pension</div>
<main>
<div class="content">
<h1>Apply for Universal Credit</h1>
<p class="lead">You can use this service to check your eligibility and start a new claim.</p>
<ul class="task-list">
<li>Check eligibility <span class="tag green">Completed</span></li>
<li>Create an account <span class="tag">In progress</span></li>
<li>Provide your details <span class="tag grey">Cannot start yet</span></li>
<li>Confirm and send <span class="tag grey">Cannot start yet</span></li>
</ul>
<div class="inset">
For example, if you were born on 27 March 2007, enter it as 27 3 2007.
</div>
<button class="btn btn-primary">Save and continue</button>
<button class="btn btn-secondary">Find address</button>
<div class="focus-demo">Continue</div>
</div>
<aside class="rail">
<h2>Related content</h2>
<ul>
<li>Check your Income Tax</li>
<li>Report a change of address</li>
<li class="visited">Get help with claims</li>
<li>Contact your local council</li>
</ul>
</aside>
</main>
<footer>
<span>© GOV.UK</span>
<span>All content is available under the Open Government Licence</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ccbc; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ccbc; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #09655e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ccbc; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ccbc; color: #111111;
border: 1px solid #03aea1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #09655e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #03aea1; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e0e0e0; }
.brand { font-size:20px; font-weight:700; font-style:italic; letter-spacing:-0.5px; color:#003733; }
.btn-teal { background:#00CCBC; color:#003733; border-radius:9999px; padding:10px 20px; font-size:14px; font-weight:600; }
.hero { padding:24px 40px; display:flex; gap:14px; align-items:center; }
.search { flex:1; background:#f5f5f5; border:1.5px solid #e0e0e0; border-radius:9999px; padding:12px 18px;
font-size:14px; color:#767676; }
.search-btn { background:#00CCBC; color:#003733; border-radius:9999px; padding:12px 22px; font-size:14px; font-weight:600; }
h1.title { font-family:Georgia,serif; font-style:italic; font-size:34px; font-weight:700; margin:8px 40px 4px;
letter-spacing:-0.5px; }
.sub { margin:0 40px 20px; color:#4a4a4a; font-size:15px; }
.cats { display:flex; gap:10px; padding:0 40px 20px; }
.cat { background:#f5f5f5; border-radius:9999px; padding:8px 16px; font-size:13px; color:#1a1a1a; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px; }
.card { background:#fff; border-radius:8px; box-shadow:0px 2px 8px rgba(0,0,0,0.10); overflow:hidden; }
.card .img { height:80px; background:linear-gradient(135deg,#FFC100,#00CCBC); }
.card .info { padding:12px 14px; }
.card h4 { font-size:15px; margin:0 0 4px; }
.card .row { display:flex; gap:8px; }
.badge-teal { background:#00CCBC; color:#003733; font-size:11px; font-weight:600; border-radius:9999px; padding:3px 9px; }
.badge-gray { background:#f5f5f5; color:#1a1a1a; font-size:11px; border-radius:9999px; padding:3px 9px; }
.promo { margin:18px 40px 0; background:#FFC100; color:#1a1a1a; border-radius:8px; padding:16px 20px;
display:flex; align-items:center; justify-content:space-between; }
.promo b { font-size:16px; }
.promo button { background:#1a1a1a; color:#fff; border-radius:9999px; padding:10px 18px; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<span class="brand">Deliveroo</span>
<button class="btn-teal">Sign up</button>
</nav>
<section class="hero">
<div class="search">Enter your delivery address</div>
<div class="search-btn">Find food</div>
</section>
<h1 class="title">Restaurants you love, delivered.</h1>
<p class="sub">Find your favourite cuisine, near you, right now.</p>
<div class="cats">
<div class="cat">Pizza</div><div class="cat">Sushi</div><div class="cat">Burgers</div><div class="cat">Asian</div><div class="cat">Healthy</div>
</div>
<div class="grid">
<div class="card"><div class="img"></div><div class="info"><h4>Mama's Kitchen</h4><div class="row"><span class="badge-teal">25–35 min</span><span class="badge-gray">Asian</span></div></div></div>
<div class="card"><div class="img"></div><div class="info"><h4>Burger Junction</h4><div class="row"><span class="badge-teal">15–25 min</span><span class="badge-gray">Fast food</span></div></div></div>
<div class="card"><div class="img"></div><div class="info"><h4>Green Bowl Co.</h4><div class="row"><span class="badge-teal">20–30 min</span><span class="badge-gray">Healthy</span></div></div></div>
</div>
<div class="promo"><b>20% off your next order</b><button>Claim deal</button></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ccb4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ccb4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #09655a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a3ffe8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ccb4; color: #000000;
border: 1px solid #a3ffe8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ccb4; color: #111111;
border: 1px solid #03ae9a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #09655a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1ad4bc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f7f9; color:#262626; box-sizing:border-box;
font-family:"PingFang TC","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#ffffff; }
.logo { font-size:20px; font-weight:600; color:#00ccb4; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#595959; }
.btn-outline { background:transparent; color:#00ccb4; border:2px solid #dcf9f3; border-radius:8px;
padding:10px 20px; height:42px; font-size:16px; font-weight:600; display:flex; align-items:center; }
.hero { padding:28px 36px; text-align:center; }
.hero h1 { font-size:26px; font-weight:600; margin:0 0 8px; }
.hero p { font-size:14px; color:rgba(0,0,0,0.65); margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 36px 24px; }
.card { background:#ffffff; border-radius:8px; padding:14px; }
.card .thumb { height:90px; border-radius:8px; margin-bottom:10px; background:linear-gradient(135deg,#a3ffe8,#23d9bd); }
.card h3 { font-size:14px; font-weight:600; margin:0 0 6px; }
.card .tags { display:flex; gap:6px; }
.chip { background:rgba(0,0,0,0.04); color:rgba(0,0,0,0.65); border-radius:20px; padding:0 10px;
height:24px; font-size:11px; display:flex; align-items:center; }
.promo { margin:0 36px 24px; background:linear-gradient(90deg,#fa8c16,#f65f55); border-radius:12px;
padding:18px 22px; color:#ffffff; display:flex; justify-content:space-between; align-items:center; }
.promo h2 { font-size:18px; margin:0; }
.promo .btn-white { background:#ffffff; color:#fa8c16; border-radius:8px; padding:8px 18px; font-size:13px;
font-weight:600; }
.footer-row { padding:0 36px 20px; display:flex; gap:14px; }
.footer-row .card { flex:1; }
</style></head>
<body>
<nav>
<span class="logo">Hahow</span>
<div class="navlinks"><span>Explore Courses</span><span>For Business</span><span>Become an Instructor</span></div>
<span class="btn-outline">Get Started</span>
</nav>
<section class="hero">
<h1>Good School · Everyone has knowledge worth sharing</h1>
<p>Join over a million learners and find your next class on Hahow</p>
</section>
<div class="grid">
<div class="card"><div class="thumb"></div><h3>Intro to UI/UX Design</h3><div class="tags"><span class="chip">Design</span><span class="chip">Popular</span></div></div>
<div class="card"><div class="thumb"></div><h3>Python Data Analysis</h3><div class="tags"><span class="chip">Coding</span><span class="chip">New</span></div></div>
<div class="card"><div class="thumb"></div><h3>Photography Fundamentals</h3><div class="tags"><span class="chip">Photography</span></div></div>
</div>
<div class="promo">
<h2>Limited Time: 20% Off Your First Course</h2>
<span class="btn-white">View Plans</span>
</div>
<div class="footer-row">
<div class="card"><h3>Become an Instructor</h3><p style="font-size:12px;color:rgba(0,0,0,0.65);margin:0;">Share your expertise and start your teaching journey.</p></div>
<div class="card"><h3>Corporate Training</h3><p style="font-size:12px;color:rgba(0,0,0,0.65);margin:0;">Build a custom learning plan for your team.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; background: #ff5501; color: #ffffff;
border: none; border-radius: 3px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; background: #ffffff; color: #1979c3;
border: 1px solid #ff5501; border-radius: 3px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #ff5501; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Open Sans',Arial,'Helvetica Neue',Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; border-bottom:1px solid #d1d1d1; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; }
.brand { font-size:20px; font-weight:700; color:#ff5501; }
.searchbar { flex:1; max-width:380px; margin:0 24px; display:flex; }
.searchbar input { flex:1; border:1px solid #d1d1d1; border-radius:3px 0 0 3px; padding:9px 12px; font-size:13px; color:#303030; background:#f2f2f2; }
.searchbar .go { background:#1979c3; color:#fff; border:none; border-radius:0 3px 3px 0; padding:0 16px; font-size:12px; font-weight:700; }
.acct { font-size:12px; color:#1979c3; font-weight:600; }
.breadcrumb { height:24px; padding:6px 28px 0; font-size:11px; color:#777777; }
.wrap { display:flex; height:508px; padding:14px 28px; gap:26px; }
.gallery { width:260px; flex-shrink:0; }
.shot { height:300px; border-radius:4px; background:linear-gradient(160deg,#f2f2f2,#ffffff); border:1px solid #e4e4e4;
display:flex; align-items:center; justify-content:center; position:relative; }
.cart-shape { width:60px; height:150px; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#303030,#111111); position:relative; }
.cart-shape::before { content:''; position:absolute; top:0; left:8px; right:8px; height:34px; background:#ff5501; border-radius:6px 6px 0 0; }
.save-badge { position:absolute; top:12px; left:12px; background:#c07600; color:#fff; font-size:10px; font-weight:700; padding:4px 8px; border-radius:3px; }
.thumbs { display:flex; gap:8px; margin-top:10px; }
.thumb { width:44px; height:44px; border:1px solid #d1d1d1; border-radius:3px; background:#f2f2f2; }
.info { flex:1; display:flex; flex-direction:column; gap:10px; }
.info h1 { margin:0; font-size:22px; font-weight:700; line-height:1.25; }
.sku { font-size:12px; color:#555555; }
.stars-row { font-size:12px; color:#555555; }
.stars { color:#ff5501; }
.price-block { background:#fdf0d5; border-radius:4px; padding:12px 16px; display:flex; align-items:baseline; gap:10px; }
.price { font-size:26px; font-weight:700; color:#6f4400; }
.price-old { font-size:14px; color:#777; text-decoration:line-through; }
.price-save { font-size:12px; color:#6f4400; font-weight:700; }
.compat { font-size:12px; color:#303030; }
.compat b { color:#111; }
.badges { display:flex; gap:8px; }
.badges span { font-size:11px; border:1px solid #d1d1d1; border-radius:3px; padding:4px 8px; color:#303030; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.qty { width:56px; border:1px solid #d1d1d1; border-radius:3px; text-align:center; font-size:13px; padding:9px 0; }
.btn-buy { flex:1; background:#ff5501; color:#fff; border:none; border-radius:3px; font-size:14px; font-weight:700; }
.btn-buy:after { content:'Add to Cart'; }
footer { height:52px; background:#f2f2f2; border-top:1px solid #d1d1d1; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; font-size:11px; color:#555555; }
.footer-badges { display:flex; gap:18px; }
.footer-badges span b { color:#1979c3; }
</style></head>
<body>
<nav>
<p class="brand">123inkjets</p>
<div class="searchbar"><input placeholder="Search by printer model, e.g. HP OfficeJet 6978"><span class="go">Search</span></div>
<span class="acct">My Account</span>
</nav>
<div class="breadcrumb">Ink & Toner / Compatible Cartridges / Multi-Pack</div>
<div class="wrap">
<div class="gallery">
<div class="shot"><span class="save-badge">Save 62% vs OEM</span><div class="cart-shape"></div></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<h1>Compatible Ink Cartridge 4-Pack — High Yield Replacement</h1>
<span class="sku">SKU: 123-CMY-BK-HY · In Stock, ships today</span>
<div class="stars-row"><span class="stars">★★★★★</span> 4.7 (2,184 reviews)</div>
<div class="price-block">
<span class="price">$34.99</span>
<span class="price-old">$92.00</span>
<span class="price-save">You save $57.01</span>
</div>
<p class="compat">Works with: <b>HP OfficeJet 6978, 6968, Pro 6978</b> — verify your printer model above before ordering.</p>
<div class="badges"><span>2-Year Guarantee</span><span>Free Returns</span><span>Ships Same Day</span></div>
<div class="buy-row">
<input class="qty" value="1">
<button class="btn-buy"></button>
</div>
</div>
</div>
<footer>
<span>© 123inkjets</span>
<div class="footer-badges"><span><b>✓</b> 100% Satisfaction</span><span><b>✓</b> Price Match</span><span><b>✓</b> Free Shipping $50+</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #3c3c3c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #3c3c3c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #3c3c3c; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #828282; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #e91a21; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: transparent; color: #e91a21;
border: 1px solid #e91a21; border-radius: 2px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3c3c3c;
border: 1px solid #cecece; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #828282; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 1px; background: #fcdfe0; color: #e91a21;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3c3c3c; color:#ffffff; box-sizing:border-box;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; }
.navlinks .active { border-bottom:2px solid #e91a21; padding-bottom:18px; margin-bottom:-19px; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:0 30px; min-height:0; }
.hero { flex:1 1 auto; display:flex; align-items:center; gap:24px; min-height:0; }
.hero-copy { flex:1; }
.hero-copy .series { display:inline-block; background:#7328cd; font-size:11px; font-weight:700; letter-spacing:1px;
text-transform:uppercase; padding:3px 8px; margin-bottom:10px; }
.hero-copy h1 { font-size:36px; font-weight:700; letter-spacing:-0.5px; margin:0 0 8px; line-height:1.1; }
.hero-copy p { font-size:14px; color:#c9c9c9; margin:0 0 14px; max-width:340px; }
.hero-copy button { background:#e91a21; color:#fff; border:none; padding:10px 24px; font-size:14px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; }
.monitor { flex:0 0 280px; height:170px; position:relative;
background:linear-gradient(150deg,#0d0d0d,#1a1a1a 70%); border:1px solid #555; }
.monitor::after { content:''; position:absolute; inset:14px;
background:radial-gradient(circle at 30% 30%, rgba(159,95,236,0.4), transparent 60%),
radial-gradient(circle at 75% 70%, rgba(233,26,33,0.35), transparent 55%); }
.pills { flex:0 0 auto; display:flex; gap:8px; padding:14px 0; }
.pill { background:transparent; border:1px solid #666; border-radius:999px; padding:6px 16px; font-size:12px; font-weight:700; }
.pill.active { background:#e91a21; border-color:#e91a21; }
.specgrid { flex:0 0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding-bottom:16px; }
.spec { background:#4a4a4a; border-radius:4px; padding:8px 10px; text-align:center; }
.spec .val { font-size:14px; font-weight:700; margin:0; }
.spec .lab { font-size:10px; color:#b9b9b9; text-transform:uppercase; letter-spacing:0.3px; margin:2px 0 0; }
footer { flex:0 0 auto; height:52px; background:#2e2e2e; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; color:#b9b9b9; }
</style></head>
<body>
<nav>
<p class="brand">Aoc</p>
<div class="navlinks"><span class="active">AGON</span><span>AGON PRO</span><span>Style</span><span>Business</span></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<span class="series">AGON PRO</span>
<h1>Built for the frame you can't afford to miss.</h1>
<p>27" QD-OLED, 240Hz, 0.03ms GtG — tuned for competitive play and color-accurate creative work alike.</p>
<button>Buy Now — $899</button>
</div>
<div class="monitor"></div>
</div>
<div class="pills">
<span class="pill active">27"</span><span class="pill">QHD</span><span class="pill">240Hz</span><span class="pill">HDR400</span>
</div>
<div class="specgrid">
<div class="spec"><p class="val">240Hz</p><p class="lab">Refresh</p></div>
<div class="spec"><p class="val">0.03ms</p><p class="lab">GtG</p></div>
<div class="spec"><p class="val">QD-OLED</p><p class="lab">Panel</p></div>
<div class="spec"><p class="val">DisplayHDR</p><p class="lab">400 True Black</p></div>
</div>
</main>
<footer>
<span>© Aoc</span>
<span>Compare Models · Warranty · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #25f4ee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #25f4ee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #1a7774; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fe2c55; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #25f4ee; color: #fe2c55;
border: 1px solid #fe2c55; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #25f4ee; color: #111111;
border: 1px solid #22d0cb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #1a7774; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #48d4d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#010101; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { display:flex; width:960px; height:640px; align-items:center; }
.hero { width:420px; padding:0 56px; display:flex; flex-direction:column; gap:14px; }
.chroma { position:relative; font-size:46px; font-weight:900; width:fit-content; }
.chroma span { position:absolute; top:0; left:0; }
.chroma .c1 { color:#25F4EE; transform:translate(-3px,0); }
.chroma .c2 { color:#FE2C55; transform:translate(3px,0); }
.chroma .base { color:#fff; position:relative; }
.tag { color:#9c9caa; font-size:15px; line-height:1.5; max-width:320px; }
.createbtn { width:70px; height:44px; border-radius:8px; position:relative; background:#fff; margin-top:8px; overflow:hidden; }
.createbtn i { position:absolute; top:0; bottom:0; width:24px; }
.createbtn .cy { left:-6px; background:#25F4EE; }
.createbtn .rs { right:-6px; background:#FE2C55; }
.createbtn b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:20px; color:#010101; font-weight:700; z-index:2; }
.phonewrap { flex:1; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:290px; height:600px; background:linear-gradient(200deg,#3a1a2a,#101018 60%,#010101); border-radius:38px; border:1px solid #222; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,0.7); }
.toptabs { position:absolute; top:22px; left:0; right:0; display:flex; justify-content:center; gap:18px; font-size:15px; font-weight:700; }
.toptabs .off { color:rgba(255,255,255,0.6); font-weight:400; }
.rail { position:absolute; right:12px; bottom:120px; display:flex; flex-direction:column; align-items:center; gap:20px; }
.rav { width:42px; height:42px; border-radius:50%; background:#FE2C55; border:2px solid #fff; }
.ric { text-align:center; font-size:24px; }
.ric .cnt { font-size:11px; font-weight:700; display:block; margin-top:2px; }
.disc { width:36px; height:36px; border-radius:50%; background:radial-gradient(circle,#333,#111); border:2px solid #444; }
.caption { position:absolute; left:14px; bottom:26px; width:190px; }
.caption .u { font-weight:700; font-size:14px; }
.caption .c { font-size:13px; margin-top:4px; line-height:1.3; }
.caption .c b { color:#fff; }
.music { display:flex; align-items:center; gap:6px; font-size:12px; margin-top:6px; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<div class="chroma"><span class="c1">TikTok (iOS)</span><span class="c2">TikTok (iOS)</span><span class="base">TikTok (iOS)</span></div>
<p class="tag">A full-bleed vertical video with nothing over it but a shadowed caption and a right-side rail. Chromatic aberration only lives in the logo.</p>
<div class="createbtn"><i class="cy"></i><i class="rs"></i><b>+</b></div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="toptabs"><span class="off">Following</span><span>For You</span></div>
<div class="rail">
<div class="rav"></div>
<div class="ric">♥<span class="cnt">248K</span></div>
<div class="ric">💬<span class="cnt">3,201</span></div>
<div class="ric">🔖<span class="cnt">982</span></div>
<div class="ric">↗<span class="cnt">Share</span></div>
<div class="disc"></div>
</div>
<div class="caption">
<div class="u">@studio.motion</div>
<div class="c">packing our whole <b>#studio</b> into one van 📦</div>
<div class="music">♪ original sound - studio.motion</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5d00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5d00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fab187; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5d00; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5d00; color: #f5f5f5;
border: 1px solid #fd7527; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fab187; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7729; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0C0C0C; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.nav .brand { font-weight:800; font-size:20px; }
.nav .brand span { color:#FF5D00; }
.nav .links { display:flex; gap:24px; font-size:15px; color:#373737; }
.navbtn { background:#0C0C0C; color:#fff; border-radius:8px; padding:9px 18px; font-size:14px; font-weight:700; }
.hero { padding:26px 32px 0; }
.hero h1 { font-size:40px; font-weight:800; line-height:1.25; letter-spacing:-1.12px; margin:0 0 10px; }
.hero h1 span { color:#FF5D00; }
.hero p { font-size:18px; color:#373737; margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:26px 32px 0; }
.card { border-radius:12px; overflow:hidden; border:1px solid #eee; }
.thumb { height:130px; }
.th1{background:linear-gradient(135deg,#ffe3d1,#ffb98a);} .th2{background:linear-gradient(135deg,#dbe9ff,#a9c8ff);} .th3{background:linear-gradient(135deg,#e3ffe6,#a9e6b6);}
.cbody { padding:14px; }
.ccat { font-size:11px; color:#FF5D00; font-weight:700; text-transform:uppercase; margin-bottom:4px; }
.ctitle { font-size:15px; font-weight:700; margin:0 0 6px; line-height:1.4; }
.cmeta { font-size:12px; color:#373737; }
.strip { display:flex; gap:14px; padding:22px 32px 0; }
.stripcard { flex:1; background:#0C0C0C; color:#fff; border-radius:12px; padding:18px; }
.stripcard h4 { font-size:16px; font-weight:800; margin:0 0 4px; }
.stripcard p { font-size:12px; color:#c7c7c7; margin:0; }
</style></head>
<body>
<nav class="nav">
<div class="brand">CLASS<span>101</span></div>
<div class="links"><span>Explore</span><span>Bestsellers</span><span>Membership</span></div>
<button class="navbtn">Start free trial</button>
</nav>
<div class="hero">
<h1>Learn something new,<br>every <span>day</span></h1>
<p>Thousands of classes from real creators — hobbies, skills, and side projects.</p>
</div>
<div class="cards">
<div class="card"><div class="thumb th1"></div><div class="cbody"><div class="ccat">Illustration</div><div class="ctitle">Watercolor for Beginners</div><div class="cmeta">By Jiwoo · 12,480 students</div></div></div>
<div class="card"><div class="thumb th2"></div><div class="cbody"><div class="ccat">Business</div><div class="ctitle">Freelance Design Ops</div><div class="cmeta">By Daniel · 8,210 students</div></div></div>
<div class="card"><div class="thumb th3"></div><div class="cbody"><div class="ccat">Music</div><div class="ctitle">Lo-fi Beat Making 101</div><div class="cmeta">By Yuna · 15,902 students</div></div></div>
</div>
<div class="strip">
<div class="stripcard"><h4>Class101+ Membership</h4><p>Unlimited access to every class, one flat price.</p></div>
<div class="stripcard"><h4>Become a Creator</h4><p>Turn your skill into a class — apply today.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #006aff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #006aff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b6fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #408fff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006aff; color: #ffffff;
border: 1px solid #408fff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #006aff; color: #f5f5f5;
border: 1px solid #2780fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a70ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Outfit", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:18px; font-weight:500; letter-spacing:1px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:15px; color:#ccc; }
.navcta { background:#006aff; color:#fff; border-radius:13px 13px 0px; padding:6px 16px; font-size:14px; font-weight:500; }
.hero { padding:30px 36px 0; text-align:center; }
.hero p.eyebrow { color:#8ca8cf; font-size:16px; margin:0 0 8px; }
.hero h1 { font-size:40px; font-weight:500; line-height:1.2; margin:0 0 18px; letter-spacing:1px;
background:linear-gradient(270deg, #ac9cff, #8e4dff, #69dfb2, #379afd);
-webkit-background-clip:text; background-clip:text; color:transparent; }
.heroCta { display:inline-flex; align-items:center; background:#3337f6; color:#fff; border-radius:10px;
padding:10px 22px; font-size:16px; font-weight:500; }
.band { position:absolute; top:260px; left:0; right:0; bottom:0; background:#ffffff; color:#333; padding:24px 36px 0; }
.bandtitle { font-size:22px; font-weight:500; color:#2e2e2e; margin-bottom:16px; text-align:center; }
.cards { display:flex; gap:16px; }
.card { flex:1; background:#ffffff; border:2px solid #ffffff; border-radius:20px; padding:20px 16px;
box-shadow:rgba(0,0,0,0.06) 3px 3px 15px 0px; text-align:center; }
.card.featured { border:2px solid #006aff; position:relative; }
.badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:#006aff; color:#fff;
font-size:13px; border-radius:5px; padding:1px 16px; white-space:nowrap; }
.card h3 { font-size:20px; font-weight:500; color:#3d3d3d; margin:6px 0 8px; }
.card p { font-size:13px; color:#666; margin:0 0 14px; }
.ribbon { display:inline-flex; background:#408fff; color:#fff; border-radius:0px 24px; padding:8px 20px 11px;
font-size:14px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="brand">Omnichat</span>
<div class="navlinks"><span>Platform</span><span>Solutions</span><span>Cases</span><span>Pricing</span></div>
<span class="navcta">Talk to an Expert</span>
</nav>
<div class="hero">
<p class="eyebrow">Omni AI by Omnichat</p>
<h1>The AI Omnichannel Customer Experience Platform</h1>
<span class="heroCta">Talk to an Expert</span>
</div>
<div class="band">
<div class="bandtitle">Choose the plan that fits your team</div>
<div class="cards">
<div class="card"><h3>Starter</h3><p>Essential live chat across LINE and WhatsApp.</p><span class="ribbon">Get a Quote</span></div>
<div class="card featured"><span class="badge">Most Popular</span><h3>Growth</h3><p>Omnichannel automation with AI-assisted replies.</p><span class="ribbon">Get a Quote</span></div>
<div class="card"><h3>Enterprise</h3><p>Full Social CDP with dedicated onboarding.</p><span class="ribbon">Contact Sales</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 0.95; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.4px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background: #ffed00; color: #000000;
border: none; border-radius: 2px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.4px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background: #000000; color: #ffffff;
border: 1px solid #ffed00; border-radius: 2px;
padding: 14px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background: #ffed00; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#ffffff; }
.diamond { width:20px; height:20px; background:#000; transform:rotate(45deg); }
.navlinks { display:flex; gap:26px; color:#000; opacity:.62; font-size:13px; font-weight:700; }
.navcta { background:#000; color:#fff; border:none; padding:9px 18px; font-size:12.5px; font-weight:700; letter-spacing:.1px; }
.hero { position:relative; height:280px; background:#000
radial-gradient(ellipse 700px 340px at 78% 40%, rgba(255,109,240,.35), transparent 60%),
radial-gradient(ellipse 600px 300px at 60% 70%, rgba(140,90,255,.30), transparent 60%),
radial-gradient(ellipse 500px 260px at 30% 30%, rgba(255,237,0,.22), transparent 60%);
display:flex; align-items:center; padding:0 32px; overflow:hidden; }
.hero::after { content:''; position:absolute; right:-40px; bottom:-60px; width:420px; height:220px;
background:linear-gradient(100deg, #050505 0%, #1a1a1a 40%, #333 55%, #111 70%, #050505 100%);
clip-path: polygon(0% 70%, 12% 40%, 30% 30%, 55% 24%, 78% 30%, 100% 45%, 100% 100%, 0% 100%);
opacity:.9; }
.herobadge { background:#ffed00; color:#000; font-size:10px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; padding:5px 12px; display:inline-block; margin-bottom:14px; }
.hero h1 { font-size:44px; font-weight:700; line-height:.95; margin:0 0 12px; max-width:420px; position:relative; z-index:2; }
.hero p { font-size:14px; color:rgba(255,255,255,.72); margin:0 0 18px; max-width:340px; position:relative; z-index:2; }
.herobtns { display:flex; gap:10px; position:relative; z-index:2; }
.btn-y { background:#ffed00; color:#000; border:none; padding:12px 22px; font-size:13px; font-weight:700; }
.btn-o { background:transparent; color:#fff; border:1px solid #fff; padding:11px 21px; font-size:13px; font-weight:700; }
.catalog { background:#fff; color:#000; padding:26px 32px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.vcard { position:relative; }
.vphoto { height:100px; background:linear-gradient(120deg,#e8e8e8,#f4f4f4 40%,#d8d8d8);
position:relative; overflow:hidden; }
.vphoto::after { content:''; position:absolute; left:14%; right:14%; bottom:18%; height:38%;
background:#111; clip-path: polygon(0% 100%, 6% 50%, 22% 30%, 45% 20%, 70% 22%, 92% 45%, 100% 60%, 100% 100%); }
.vbadge { position:absolute; left:8px; top:8px; background:#ffed00; color:#000; font-size:9px; font-weight:700;
letter-spacing:.05em; padding:3px 9px; text-transform:uppercase; z-index:3; }
.vname { font-size:15px; font-weight:700; margin:9px 0 2px; }
.vsub { font-size:11px; color:#666; }
.promo { margin:0 32px 20px; background:#ffed00; color:#000; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; }
.promo h3 { font-size:20px; font-weight:700; margin:0; line-height:1; }
.promo span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.7; }
.promo button { background:#000; color:#fff; border:none; padding:9px 18px; font-size:12px; font-weight:700; }
footer { background:#000; padding:14px 32px; display:flex; justify-content:space-between; align-items:center;
font-size:10.5px; color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.16); }
</style></head>
<body>
<nav>
<div class="diamond"></div>
<div class="navlinks"><span>MODELLER</span><span>HİZMETLER</span><span>YAŞAM</span><span>MYRENAULT</span></div>
<button class="navcta">RANDEVU AL</button>
</nav>
<section class="hero">
<div>
<span class="herobadge">Yeni</span>
<h1>E-TECH<br>ELEKTRİKLİ</h1>
<p>Renault R5 — sadeliğin ve gücün diamond işareti altında buluştuğu yeni nesil.</p>
<div class="herobtns">
<button class="btn-y">Konfigüratörü Başlat</button>
<button class="btn-o">Detayları Gör</button>
</div>
</div>
</section>
<section class="catalog">
<div class="vcard"><span class="vbadge">Yeni</span><div class="vphoto"></div><div class="vname">Renault 5</div><div class="vsub">E-Tech Elektrikli</div></div>
<div class="vcard"><div class="vphoto"></div><div class="vname">Clio</div><div class="vsub">Hybrid · Benzin</div></div>
<div class="vcard"><div class="vphoto"></div><div class="vname">Austral</div><div class="vsub">E-Tech Full Hybrid</div></div>
</section>
<div class="promo">
<div><span>PARLAK SARI</span><h3>Sunlight Yellow paket kampanyası</h3></div>
<button>Kampanyaları Gör</button>
</div>
<footer>
<span>© Renault</span>
<span>Modeller · Hizmetler · MyRenault · Yasal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d80c18; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d80c18; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e88c92; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c00b15; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d80c18; color: #ffffff;
border: 1px solid #c00b15; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d80c18; color: #f5f5f5;
border: 1px solid #dd313b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e88c92; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d40c18; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.nav .brand { font-weight:700; font-size:18px; color:#d80c18; }
.search { flex:1; max-width:380px; margin:0 20px; height:36px; border:1px solid #e5e5e5; border-radius:999px;
display:flex; align-items:center; padding:0 16px; font-size:14px; color:#999; background:#f6f6f6; }
.navbtn { background:#d80c18; color:#fff; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.chiprow { display:flex; gap:8px; padding:12px 24px 0; }
.chip { border:1px solid #e5e5e5; border-radius:999px; padding:6px 14px; font-size:12px; color:#666; }
.chip.sel { background:#191919; color:#fff; border-color:#191919; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:14px 24px 0; }
.card { border-radius:6px; overflow:hidden; }
.thumb { position:relative; aspect-ratio:81/100; background:#f6f6f6; }
.thumb .ph { position:absolute; inset:0; }
.p1{background:linear-gradient(150deg,#e9ecf5,#d3d9ea);} .p2{background:linear-gradient(150deg,#f5ece0,#ecdcc4);}
.p3{background:linear-gradient(150deg,#e6f5ec,#c8e8d4);} .p4{background:linear-gradient(150deg,#f5e0e6,#ecc4d0);} .p5{background:linear-gradient(150deg,#e0f0f5,#c4dfec);}
.heart { position:absolute; top:8px; right:8px; width:18px; height:18px; }
.chiptag { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; color:#fff; border-radius:6px; padding:2px 6px; }
.safe{background:#5558a8;} .info{background:#027aff;} .care{background:#ffe1a6; color:#191919;}
.meta { padding:8px 2px 0; }
.cprice { font-size:15px; font-weight:700; }
.ctitle { font-size:13px; color:#666; margin:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmeta { font-size:11px; color:#999; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Bunjang</div>
<div class="search">Search sneakers, phones, K-pop goods…</div>
<button class="navbtn">Sell</button>
</nav>
<div class="chiprow">
<div class="chip sel">All</div><div class="chip">Sneakers</div><div class="chip">Phones</div><div class="chip">K-pop</div><div class="chip">Beauty</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="ph p1"></div><span class="chiptag safe">Safe Payment</span><div class="heart"></div></div>
<div class="meta"><div class="cprice">₩128,000</div><div class="ctitle">Nike Dunk Low Panda 260</div><div class="cmeta">19 hours ago · Seoul · Likes 12</div></div></div>
<div class="card"><div class="thumb"><div class="ph p2"></div><span class="chiptag info">Price Check</span><div class="heart"></div></div>
<div class="meta"><div class="cprice">₩640,000</div><div class="ctitle">iPhone 14 Pro 128GB</div><div class="cmeta">2 hours ago · Gyeonggi · Likes 31</div></div></div>
<div class="card"><div class="thumb"><div class="ph p3"></div><div class="heart"></div></div>
<div class="meta"><div class="cprice">₩45,000</div><div class="ctitle">K-pop Album (Sealed)</div><div class="cmeta">5 hours ago · Incheon · Likes 8</div></div></div>
<div class="card"><div class="thumb"><div class="ph p4"></div><span class="chiptag care">Authenticated</span><div class="heart"></div></div>
<div class="meta"><div class="cprice">₩890,000</div><div class="ctitle">Chanel Classic Card Wallet</div><div class="cmeta">1 day ago · Busan · Likes 44</div></div></div>
<div class="card"><div class="thumb"><div class="ph p5"></div><div class="heart"></div></div>
<div class="meta"><div class="cprice">₩22,000</div><div class="ctitle">iPad Case (New)</div><div class="cmeta">30 min ago · Daejeon · Likes 3</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #337ab7;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #337ab7;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #337ab7; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #0198ab; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #ffffff; color: #555555;
border: 1px solid #0198ab; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #080808;
border: 1px solid #ccdeed; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #8fd300; color: #080808;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#080808; box-sizing:border-box;
font-family:'Roboto', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.kufi { font-family:'Reem Kufi', 'Roboto', sans-serif; }
.mono { font-family:Consolas, 'Courier New', Menlo, Monaco, monospace; }
.stripe { height:26px; background:#0198ab; color:#fff; font-size:11px; display:flex; align-items:center;
justify-content:center; letter-spacing:0.3px; }
nav { height:50px; background:#044a80; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { color:#fff; font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#fff; font-weight:500; }
.navlinks span:first-child { border-bottom:3px solid #8fd300; padding-bottom:14px; }
.crumb { font-size:11px; color:#777777; padding:6px 36px 0; }
.crumb b { color:#555555; font-weight:400; }
.hero { background:#044a80; border-top:4px solid #8fd300; padding:22px 36px; display:flex; align-items:center;
justify-content:space-between; gap:24px; min-height:120px; }
.hero h1 { color:#fff; font-size:28px; font-weight:700; letter-spacing:-0.3px; margin:0 0 6px; }
.hero p { color:#d7e6f0; font-size:13px; margin:0 0 12px; max-width:380px; }
.btnrow { display:flex; gap:8px; }
.btn-primary { background:#0198ab; color:#fff; border:none; border-radius:4px; padding:8px 16px; font-size:13px; height:36px; }
.btn-accent { background:#8fd300; color:#080808; border:none; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:600; height:36px; }
.section { padding:16px 36px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.sec-head h2 { font-size:18px; font-weight:700; margin:0; }
.sec-head span { font-size:12px; color:#337ab7; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#fff; border:1px solid #eeeeee; border-radius:4px; padding:14px; }
.thumb { aspect-ratio:4/3; background:#f5f5f5; position:relative; margin-bottom:8px; }
.t1::after { content:''; position:absolute; inset:24px; background:linear-gradient(150deg,#0198ab,#044a80); }
.t2::after { content:''; position:absolute; inset:24px; background:linear-gradient(150deg,#8fd300,#5a8a02); }
.t3::after { content:''; position:absolute; inset:24px; background:linear-gradient(150deg,#9d9d9d,#555); }
.badge { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:3px 8px; border-radius:4px; z-index:2; }
.badge.new { background:#0198ab; color:#fff; }
.badge.cat { background:#8fd300; color:#080808; }
.part { font-family:Consolas,monospace; font-size:11px; font-weight:600; color:#777777; letter-spacing:0.5px; }
.card h3 { font-size:14px; font-weight:600; margin:2px 0 6px; }
.price { color:#0198ab; font-size:17px; font-weight:600; margin:0 0 8px; }
.spec { border:1px solid #e7e7e7; border-radius:4px; margin-top:12px; }
.row { display:grid; grid-template-columns:1fr 1fr; font-size:12px; padding:6px 12px; }
.row.head { background:#f5f5f5; font-weight:700; }
.row:not(.head) .k { font-weight:700; color:#555555; }
.row:not(.head) .v { font-family:Consolas,monospace; }
footer { background:#044a80; border-top:4px solid #8fd300; color:#e5e5e5; font-size:12px; padding:14px 36px;
display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
footer a { color:#e5e5e5; margin-left:14px; }
</style></head>
<body>
<div class="stripe">Free shipping on orders over $500 · Trade & Institutional Accounts Welcome</div>
<nav>
<p class="brand">Benchmark Scientific</p>
<div class="navlinks"><span>Centrifuges</span><span>Shakers</span><span>Incubators</span><span>Support</span></div>
</nav>
<div class="crumb">Home / Lab Equipment / <b>Benchtop Centrifuges</b></div>
<section class="hero">
<div>
<h1 class="kufi">Precision equipment, ready to ship</h1>
<p>Centrifuges, shakers, and incubators engineered for the lab that can't afford downtime.</p>
<div class="btnrow"><button class="btn-primary">Request Quote</button><button class="btn-accent">Shop Category</button></div>
</div>
</section>
<section class="section">
<div class="sec-head"><h2>Featured Equipment</h2><span>View catalog →</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<p class="part">BSC-2400</p>
<h3>Refrigerated Microcentrifuge</h3>
<p class="price">$2,450.00</p>
<button class="btn-primary">Add to Cart</button>
</div>
<div class="card">
<div class="thumb t2"><span class="badge cat">Best Seller</span></div>
<p class="part">BSO-1000</p>
<h3>Orbital Shaker, Digital</h3>
<p class="price">$895.00</p>
<button class="btn-primary">Add to Cart</button>
</div>
<div class="card">
<div class="thumb t3"></div>
<p class="part">BSI-500</p>
<h3>CO2 Incubator, 5.0 cu ft</h3>
<p class="price">$3,120.00</p>
<button class="btn-primary">Add to Cart</button>
</div>
</div>
<div class="spec">
<div class="row head"><span>Spec</span><span>Value</span></div>
<div class="row"><span class="k">Max Speed</span><span class="v">15,000 RPM</span></div>
<div class="row"><span class="k">Rotor Capacity</span><span class="v">24 x 1.5/2.0mL</span></div>
</div>
</section>
<footer>
<span>© Benchmark Scientific</span>
<div><a href="#">Catalog</a><a href="#">SDS Library</a><a href="#">Contact Sales</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #222222; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #222222; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #222222; color: #f5f5f5;
border: 1px solid #444444; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #454545; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; border-radius:0 !important; }
.wrap { display:flex; flex-direction:column; height:640px; }
header { flex:0 0 44px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e6e6e6; }
.navleft { display:flex; gap:22px; font-size:13px; }
.navleft span:first-child { font-weight:700; }
.wordmark { font-size:15px; font-weight:700; letter-spacing:0.14em; }
.navright { display:flex; gap:16px; font-size:14px; color:#727272; }
.announce { flex:0 0 26px; background:#f5f5f5; display:flex; align-items:center; justify-content:center;
font-size:12px; color:#222222; }
.hero { flex:0 0 232px; position:relative; background:
linear-gradient(120deg, #2a2a2a 0%, #6b6b6b 42%, #d8d8d8 78%, #efefef 100%); overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 46px); }
.hero .cap { position:absolute; left:24px; bottom:18px; color:#ffffff; }
.hero .cap .k { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.8; }
.hero .cap h1 { font-size:28px; font-weight:700; margin:2px 0 0; letter-spacing:-0.3px; }
.grid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(4, 1fr); }
.tile { border-right:1px solid #e6e6e6; display:flex; flex-direction:column; }
.tile:last-child { border-right:none; }
.tile .img { flex:1; }
.g1 .img { background:linear-gradient(160deg,#dedede,#9a9a9a); }
.g2 .img { background:linear-gradient(160deg,#c9c9c9,#6f6f6f); }
.g3 .img { background:linear-gradient(160deg,#e2e2e2,#8a8a8a); }
.g4 .img { background:linear-gradient(160deg,#d3d3d3,#5c5c5c); }
.tile .cap2 { padding:8px 12px 12px; }
.tile .brandn { font-size:13px; font-weight:700; margin:0; }
.tile .item { font-size:13px; color:#727272; margin:2px 0 0; }
footer { flex:0 0 62px; background:#222222; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; font-size:12px; }
footer .cols { display:flex; gap:36px; }
footer .col b { display:block; font-size:12px; margin-bottom:4px; }
footer .col span { display:block; color:#c9c9c9; font-size:11.5px; line-height:1.8; }
</style></head>
<body>
<div class="wrap">
<header>
<div class="navleft"><span>Womenswear</span><span>Menswear</span><span>Kidswear</span></div>
<div class="wordmark">Farfetch</div>
<div class="navright"><span>Search</span><span>Wishlist</span><span>Account</span><span>Bag</span></div>
</header>
<div class="announce">New season: up to 60% off womenswear, menswear and kidswear</div>
<div class="hero">
<div class="cap">
<div class="k">Editorial</div>
<h1>New In</h1>
</div>
</div>
<div class="grid">
<div class="tile g1"><div class="img"></div><div class="cap2"><p class="brandn">LUNARIA</p><p class="item">Wool tailored coat</p></div></div>
<div class="tile g2"><div class="img"></div><div class="cap2"><p class="brandn">VESTRA NOIR</p><p class="item">Leather ankle boot</p></div></div>
<div class="tile g3"><div class="img"></div><div class="cap2"><p class="brandn">ORSAY MILAN</p><p class="item">Silk shirt dress</p></div></div>
<div class="tile g4"><div class="img"></div><div class="cap2"><p class="brandn">HALLE & CO</p><p class="item">Structured tote</p></div></div>
</div>
<footer>
<span>© Farfetch</span>
<div class="cols">
<div class="col"><b>Company</b><span>About us</span><span>Careers</span></div>
<div class="col"><b>Customer Service</b><span>Contact us</span><span>Returns and refunds</span></div>
<div class="col"><b>Help</b><span>Orders and delivery</span><span>FAQs</span></div>
</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #1c1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #1c1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #1c1d1d; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f9fafb; color: #1c1d1d;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9fafb; color: #333333;
border: 1px solid #c2c3c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f9fafb; color:#333333; box-sizing:border-box; font-family:'Open Sans','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f9fafb; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; font-weight:600; letter-spacing:0.2px; text-transform:uppercase; margin:0; color:#1c1d1d; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.2px; color:#1c1d1d; }
.navlinks span.active { color:#108474; border-bottom:2px solid #108474; padding-bottom:20px; }
.search-pill { background:#f4f4f4; border-radius:999px; padding:10px 20px; font-size:13px; color:#7b7b7b; }
.main { display:flex; height:456px; padding:12px 32px; gap:32px; align-items:center; }
.gallery { width:420px; height:420px; background:#f4f4f4; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.kettle { width:180px; height:200px; position:relative; }
.kettle::before { content:''; position:absolute; left:20px; top:60px; width:140px; height:120px; background:#fff; border-radius:0 0 60px 60px; border:2px solid #dadada; }
.kettle::after { content:''; position:absolute; left:50px; top:20px; width:80px; height:44px; background:#108474; border-radius:8px 8px 0 0; }
.info { flex:1; display:flex; flex-direction:column; gap:10px; }
.info h1 { font-size:26px; font-weight:600; margin:0; letter-spacing:-0.3px; }
.badge-new { display:inline-block; background:#108474; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; width:fit-content; }
.price { font-size:22px; font-weight:600; }
.desc { font-size:14px; line-height:1.6; color:#333333; max-width:420px; }
.star-row { color:#b19356; font-size:13px; }
.btn-row { display:flex; gap:10px; margin-top:8px; }
.btn-primary { height:44px; padding:0 28px; background:#108474; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:15px; }
.btn-secondary { height:44px; padding:0 24px; background:#f9fafb; color:#1c1d1d; border:1px solid #dadada; border-radius:8px; font-weight:600; font-size:15px; }
.feature-row { display:flex; gap:20px; padding:14px 32px; border-top:1px solid #eeeeee; }
.feature { flex:1; text-align:center; font-size:11px; color:#7b7b7b; }
.feature b { display:block; color:#108474; font-size:15px; margin-bottom:2px; }
</style></head>
<body>
<nav>
<p class="brand">Balmuda</p>
<div class="navlinks"><span class="active">Kitchen</span><span>Kettles</span><span>Toasters</span><span>Recipes</span></div>
<div class="search-pill">🔍 Search products</div>
</nav>
<div class="main">
<div class="gallery"><div class="kettle"></div></div>
<div class="info">
<span class="badge-new">New</span>
<h1>The Electric Gooseneck Kettle</h1>
<div class="star-row">★★★★★ 4.7 (612 reviews)</div>
<span class="price">$179.00</span>
<p class="desc">A precise pour-over kettle with variable temperature control and a quiet, considered form. Matte ceramic-coated body keeps water hot longer while staying cool to the touch.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
<div class="feature-row">
<div class="feature"><b>0.8L</b>Capacity</div>
<div class="feature"><b>1200W</b>Fast Boil</div>
<div class="feature"><b>±1°C</b>Precision Control</div>
<div class="feature"><b>1yr</b>Warranty</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1efe8; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1efe8; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #d02e2e; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f1efe8; color: #1a1a1a;
border: 1px solid #d02e2e; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #f1efe8; color: #1a1a1a;
border: 1px solid #bbbab4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #d02e2e; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f1efe8; color:#1a1a1a; box-sizing:border-box;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#1a1a1a; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#f1efe8; font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#b3b3b3; }
.navlinks span.on { color:#ffffff; }
.bag { color:#f1efe8; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.wrap { display:flex; height:524px; }
.photo { width:440px; background:linear-gradient(155deg,#3e3e3e 0%,#1a1a1a 60%,#0b0b0b 100%); position:relative; overflow:hidden; }
.photo::before { content:''; position:absolute; inset:0; background:
repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, transparent 6px 14px); }
.new-tag { position:absolute; top:20px; left:20px; background:#ecbd5e; color:#1a1a1a; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; }
.stock-tag { position:absolute; top:20px; right:20px; background:#56ad6a; color:#fff; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; }
.info { flex:1; padding:34px 40px; display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.eyebrow { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#808080; }
.info h1 { font-size:26px; margin:0; font-weight:700; letter-spacing:-.3px; }
.price { font-size:20px; font-weight:700; }
.desc { font-size:13px; color:#3e3e3e; line-height:1.6; max-width:440px; }
.size-label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#808080; }
.size-grid { display:flex; gap:8px; }
.size { width:42px; height:42px; border:1px solid #b3b3b3; display:flex; align-items:center; justify-content:center; font-size:12px; }
.size.on { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.size.out { color:#b3b3b3; border-color:#e6e6e6; text-decoration:line-through; }
.fabric-note { font-size:12px; color:#808080; border-top:1px solid #d3d3d3; padding-top:12px; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#1a1a1a; color:#fff; border:none; padding:15px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.btn-wish { border:1px solid #1a1a1a; padding:15px 20px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
footer { height:58px; background:#1a1a1a; color:#808080; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">18 East</p>
<div class="navlinks"><span>Outerwear</span><span class="on">Workshirts</span><span>Accessories</span><span>Archive</span></div>
<span class="bag">Bag (1)</span>
</nav>
<div class="wrap">
<div class="photo">
<span class="new-tag">New Arrival</span>
<span class="stock-tag">In Stock</span>
</div>
<div class="info">
<span class="eyebrow">Fall Collection — Waxed Canvas</span>
<h1>Trail Chore Jacket, Rust Waxed Canvas</h1>
<span class="price">$328.00</span>
<p class="desc">Reworked from a mid-century workwear pattern in a heavyweight waxed cotton canvas that only gets better with wear. Built for trail, jobsite, or neither.</p>
<span class="size-label">Size</span>
<div class="size-grid">
<div class="size">S</div><div class="size on">M</div><div class="size">L</div><div class="size">XL</div><div class="size out">XXL</div>
</div>
<span class="fabric-note">12oz waxed cotton canvas · corozo buttons · made in limited run</span>
<div class="buy-row">
<button class="btn-buy">Add to Bag</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© 18 East</span><span>Shipping · Returns · Size Guide</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafae1; color: #1a1918;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafae1; color: #1a1918;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #1a1918; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #43454b; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.8px; background: #003388; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.8px; background: transparent; color: #003388;
border: 1px solid #003388; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1918;
border: 1px solid #c2c2af; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #43454b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.8px; background: #c49800; color: #1a1918;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafae1; color:#1a1918; box-sizing:border-box;
font-family:Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
nav { height:66px; background:#fafae1; display:flex; align-items:center; justify-content:space-between;
padding:0 34px; border-bottom:1px solid #e8e8eb; }
.brand { font-size:20px; font-weight:400; letter-spacing:0.5px; margin:0; color:#003388; font-family:Georgia, serif; }
.navlinks { display:flex; gap:24px; font-family:'Arial Narrow', Arial, sans-serif; }
.navlinks span { font-size:12px; letter-spacing:0.8px; text-transform:uppercase; color:#43454b; }
.icons { font-family:'Arial Narrow', Arial, sans-serif; font-size:12px; color:#003388; }
main { display:flex; height:574px; }
.stage { width:340px; background:#e8e8eb; display:flex; align-items:center; justify-content:center; position:relative; }
.season-badge { position:absolute; top:22px; left:22px; background:#c49800; color:#1a1918; font-size:10px;
font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:5px 10px; font-family:'Arial Narrow',Arial,sans-serif; }
.lantern { width:80px; height:170px; position:relative; }
.lantern-top { width:40px; height:16px; background:#003388; margin:0 auto; border-radius:4px 4px 0 0; }
.lantern-cage { width:80px; height:110px; border:3px solid #003388; border-radius:6px; margin-top:0; position:relative;
background:linear-gradient(180deg,#fff9df,#f0b849 120%); }
.lantern-cage::before, .lantern-cage::after { content:''; position:absolute; top:0; bottom:0; width:3px; background:#003388; }
.lantern-cage::before { left:24px; } .lantern-cage::after { right:24px; }
.lantern-base { width:60px; height:20px; background:#757c71; margin:0 auto; border-radius:0 0 6px 6px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:12px; }
.cat-label { font-family:'Arial Narrow', Arial, sans-serif; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:#757c71; margin:0; }
h1 { font-size:27px; font-weight:400; margin:0; letter-spacing:0.2px; line-height:1.25; }
.sub { font-size:14px; color:#2f2f2f; margin:0; line-height:1.5; max-width:440px; }
.price-row { display:flex; align-items:baseline; gap:10px; font-family:'Arial Narrow', Arial, sans-serif; }
.price { font-size:22px; font-weight:700; color:#003388; }
.badge { display:inline-flex; background:#fafae1; border:1px solid #c49800; color:#c49800; font-size:11px;
font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:4px 10px; width:fit-content;
font-family:'Arial Narrow', Arial, sans-serif; }
.actions { display:flex; gap:12px; margin-top:8px; font-family:'Arial Narrow', Arial, sans-serif; }
.btn-primary { background:#003388; color:#fff; padding:14px 30px; height:46px; display:flex; align-items:center;
font-size:13px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; }
.btn-secondary { background:transparent; border:1px solid #003388; color:#003388; padding:13px 26px; height:46px;
display:flex; align-items:center; font-size:13px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; }
.footer-note { margin-top:auto; border-top:1px solid #e8e8eb; padding-top:12px; font-size:12px; color:#43454b;
font-family:'Arial Narrow', Arial, sans-serif; }
</style></head>
<body>
<nav>
<p class="brand">Authentic Provence</p>
<div class="navlinks"><span>Garden</span><span>Lighting</span><span>Table</span><span>Journal</span></div>
<span class="icons">Panier (0)</span>
</nav>
<main>
<div class="stage">
<span class="season-badge">Harvest Edition</span>
<div class="lantern"><div class="lantern-top"></div><div class="lantern-cage"></div><div class="lantern-base"></div></div>
</div>
<div class="info">
<p class="cat-label">Outdoor Lighting</p>
<h1>Lumière de Village Hanging Lantern</h1>
<p class="sub">Hand-finished iron lantern with amber glass, wired for warm outdoor evenings on the terrace.</p>
<span class="badge">Limited Harvest Run</span>
<div class="price-row"><span class="price">$128.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Panier</div>
<div class="btn-secondary">View the Collection</div>
</div>
<div class="footer-note">Ships direct from our atelier in Provence — allow 2–3 weeks for delivery.</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #f06bb8;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #f06bb8;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.35; margin: 0; color: #f06bb8; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a8b3bc; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #00ed64; color: #001e2b;
border: none; border-radius: 9999px; padding: 10px 22px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: transparent; color: #001e2b;
border: 1px solid #00ed64; border-radius: 9999px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #001e2b;
border: 1px solid #fbdaed; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8b3bc; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #00ed64; color: #001e2b;
border-radius: 6px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#001e2b; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 상단: 딥 틸 다크 히어로 + 브라이트 그린 필 CTA (MongoDB 의 상징).
하단: 순백 문서/가격 표면 — 이 이분법 자체가 브랜드의 핵심 시각언어. */
.hero { background:linear-gradient(160deg,#001e2b,#003d4f 70%); height:260px; position:relative; overflow:hidden; }
.leaf { position:absolute; width:340px; height:340px; border-radius:48% 52% 55% 45%/55% 45% 55% 45%;
background:#00684a; opacity:0.35; right:-90px; top:-60px; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:600; color:#fff; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:rgba(255,255,255,0.75); }
.btn-green { background:#00ed64; color:#001e2b; border:none; border-radius:6px; padding:9px 20px; font-weight:700; font-size:13px; }
.herocopy { position:relative; z-index:2; padding:16px 40px 0; }
.herocopy .tag { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#00ed64; }
.herocopy h1 { font-size:38px; font-weight:500; letter-spacing:-1px; margin:10px 0 0; color:#fff; max-width:520px; line-height:1.15; }
.herocopy .btn-green { margin-top:16px; display:inline-block; }
.pricing { display:flex; gap:16px; padding:26px 40px; }
.tier { flex:1; border:1px solid #e1e5e8; border-radius:10px; padding:18px; }
.tier.mid { border:2px solid #00ed64; position:relative; }
.tier .badge { position:absolute; top:-11px; left:16px; background:#00ed64; color:#001e2b; font-size:10px; font-weight:700;
border-radius:999px; padding:3px 10px; }
.tier h4 { font-size:14px; font-weight:600; margin:0 0 4px; color:#3d4f5b; }
.tier .price { font-size:26px; font-weight:600; margin:0 0 8px; }
.tier .price span { font-size:12px; color:#7c8c9a; font-weight:400; }
.tier ul { list-style:none; margin:0; padding:0; font-size:12px; color:#3d4f5b; }
.tier li { padding:3px 0; }
.tier li::before { content:"✓ "; color:#00a35c; font-weight:700; }
footer { border-top:1px solid #e1e5e8; padding:14px 40px; display:flex; justify-content:space-between;
font-size:11px; color:#7c8c9a; }
</style></head>
<body>
<div class="hero">
<div class="leaf"></div>
<nav>
<p class="brand">MongoDB</p>
<div class="navlinks"><span>Atlas</span><span>University</span><span>AI use cases</span><span>Pricing</span></div>
<button class="btn-green">Try free</button>
</nav>
<div class="herocopy">
<span class="tag">MongoDB Atlas</span>
<h1>The database for the AI era</h1>
</div>
</div>
<div class="pricing">
<div class="tier"><h4>Free</h4><div class="price">$0</div><ul><li>512MB storage</li><li>Shared cluster</li></ul></div>
<div class="tier mid"><span class="badge">Popular</span><h4>Flex</h4><div class="price">$8<span>/mo</span></div><ul><li>Auto-scaling</li><li>5GB storage</li></ul></div>
<div class="tier"><h4>Dedicated</h4><div class="price">$57<span>/mo</span></div><ul><li>Dedicated resources</li><li>Advanced security</li></ul></div>
</div>
<footer>
<span>© MongoDB</span>
<span>Atlas · University · Community · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0e11; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0e11; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8d8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b3139; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0e11; color: #ffffff;
border: 1px solid #2b3139; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0e11; color: #f5f5f5;
border: 1px solid #303335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #101417; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0E11; color:#EAECEF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-variant-numeric:tabular-nums; }
nav { height:48px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #2B3139; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:600; color:#848E9C; }
.navlinks span.on { color:#EAECEF; border-bottom:2px solid #F0B90B; padding-bottom:14px; }
.btn-y { background:#F0B90B; color:#0B0E11; border:none; border-radius:6px; padding:8px 18px;
font-weight:700; font-size:12px; }
.toprow { display:flex; padding:22px 32px 16px; gap:36px; }
.balancecol { width:290px; }
.balancecol .lbl { font-size:11px; color:#848E9C; margin-bottom:4px; }
.balancecol .num { font-size:26px; font-weight:600; letter-spacing:-0.4px; }
.balancecol .num small { font-size:13px; color:#848E9C; font-weight:600; margin-left:4px; }
.pnl { font-size:12px; color:#0ECB81; margin-top:4px; font-weight:600; }
.actions { display:flex; gap:8px; margin-top:14px; }
.a-btn { flex:1; text-align:center; padding:8px 0; border-radius:6px; font-size:11px; font-weight:700; }
.a-y { background:#F0B90B; color:#0B0E11; }
.a-g { background:#2B3139; color:#EAECEF; }
.marketscard { flex:1; background:#181A20; border-radius:8px; padding:12px 0; }
.mrow { display:flex; align-items:center; padding:8px 16px; border-bottom:1px solid #2B3139; }
.mrow:last-child { border-bottom:none; }
.coin { width:22px; height:22px; border-radius:50%; margin-right:10px; flex-shrink:0; }
.c-btc { background:#F7931A; } .c-eth { background:#627EEA; } .c-bnb { background:#F0B90B; }
.mpair { flex:1; }
.mpair b { font-size:13px; font-weight:600; display:block; }
.mpair small { font-size:10px; color:#5E6673; }
.mprice { text-align:right; margin-right:10px; }
.mprice b { font-size:13px; font-weight:600; display:block; }
.mprice small { font-size:10px; color:#848E9C; }
.pill { min-width:58px; text-align:center; padding:4px 0; border-radius:4px; font-size:11px; font-weight:600; color:#fff; }
.p-up { background:#0ECB81; } .p-down { background:#F6465D; }
.panels { display:flex; gap:20px; padding:6px 32px 0; }
.chartpanel { flex:1.6; background:#181A20; border-radius:8px; padding:14px 16px; }
.chpanel-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.chpanel-head b { font-size:13px; font-weight:600; }
.chpanel-head .px { font-size:15px; font-weight:600; color:#0ECB81; }
.intervals { display:flex; gap:10px; margin-bottom:10px; }
.intervals span { font-size:11px; color:#848E9C; font-weight:600; }
.intervals span.on { color:#F0B90B; background:rgba(240,185,11,0.12); padding:2px 7px; border-radius:4px; }
.candles { display:flex; align-items:flex-end; gap:5px; height:96px; }
.candles i { flex:1; border-radius:1px; }
.obookpanel { flex:1; background:#181A20; border-radius:8px; padding:14px 16px; }
.obookpanel b.title { font-size:13px; font-weight:600; display:block; margin-bottom:8px; }
.orow { position:relative; display:flex; justify-content:space-between; font-size:11px; padding:2px 0; }
.obar { position:absolute; top:0; right:0; height:100%; z-index:0; }
.obar.ask { background:rgba(246,70,93,0.14); } .obar.bid { background:rgba(14,203,129,0.14); }
.oval { position:relative; z-index:1; } .ask-px { color:#F6465D; } .bid-px { color:#0ECB81; }
.spread { display:flex; justify-content:center; padding:5px 0; font-size:12px; font-weight:600; color:#0ECB81; border-top:1px solid #2B3139; border-bottom:1px solid #2B3139; margin:4px 0; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; border-top:1px solid #2B3139;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:10px; color:#5E6673; }
</style></head>
<body>
<nav>
<p class="brand">Binance (iOS)</p>
<div class="navlinks"><span class="on">Markets</span><span>Trade</span><span>Futures</span><span>Wallets</span></div>
<button class="btn-y">Deposit</button>
</nav>
<div class="toprow">
<div class="balancecol">
<div class="lbl">Est. Total Value</div>
<div class="num mono">12,840.57 <small>USDT</small></div>
<div class="pnl mono">+$214.86 (+1.70%)</div>
<div class="actions">
<div class="a-btn a-y">Deposit</div>
<div class="a-btn a-g">Withdraw</div>
<div class="a-btn a-g">Convert</div>
</div>
</div>
<div class="marketscard">
<div class="mrow">
<div class="coin c-btc"></div>
<div class="mpair"><b>BTC</b><small>/USDT · Vol 1.42B</small></div>
<div class="mprice"><b class="mono">67,284.10</b><small class="mono">$67,284.10</small></div>
<div class="pill p-up mono">+2.34%</div>
</div>
<div class="mrow">
<div class="coin c-eth"></div>
<div class="mpair"><b>ETH</b><small>/USDT · Vol 812.0M</small></div>
<div class="mprice"><b class="mono">3,412.88</b><small class="mono">$3,412.88</small></div>
<div class="pill p-down mono">-0.92%</div>
</div>
<div class="mrow">
<div class="coin c-bnb"></div>
<div class="mpair"><b>BNB</b><small>/USDT · Vol 205.3M</small></div>
<div class="mprice"><b class="mono">592.14</b><small class="mono">$592.14</small></div>
<div class="pill p-up mono">+1.08%</div>
</div>
</div>
</div>
<div class="panels">
<div class="chartpanel">
<div class="chpanel-head"><b>BTC/USDT</b><span class="px mono">67,284.10</span></div>
<div class="intervals"><span>1m</span><span>5m</span><span class="on">1H</span><span>4H</span><span>1D</span><span>1W</span></div>
<div class="candles">
<i style="height:38%;background:#0ECB81"></i><i style="height:52%;background:#0ECB81"></i>
<i style="height:30%;background:#F6465D"></i><i style="height:64%;background:#0ECB81"></i>
<i style="height:44%;background:#F6465D"></i><i style="height:70%;background:#0ECB81"></i>
<i style="height:58%;background:#0ECB81"></i><i style="height:35%;background:#F6465D"></i>
<i style="height:80%;background:#0ECB81"></i><i style="height:47%;background:#F6465D"></i>
<i style="height:66%;background:#0ECB81"></i><i style="height:41%;background:#F6465D"></i>
<i style="height:74%;background:#0ECB81"></i><i style="height:55%;background:#0ECB81"></i>
<i style="height:29%;background:#F6465D"></i><i style="height:60%;background:#0ECB81"></i>
</div>
</div>
<div class="obookpanel">
<b class="title">Order Book</b>
<div class="orow"><div class="obar ask" style="width:70%"></div><span class="oval ask-px mono">67,301.2</span><span class="oval mono">0.842</span></div>
<div class="orow"><div class="obar ask" style="width:52%"></div><span class="oval ask-px mono">67,298.4</span><span class="oval mono">0.510</span></div>
<div class="orow"><div class="obar ask" style="width:30%"></div><span class="oval ask-px mono">67,290.0</span><span class="oval mono">0.212</span></div>
<div class="spread mono">67,284.10 ↓</div>
<div class="orow"><div class="obar bid" style="width:44%"></div><span class="oval bid-px mono">67,280.6</span><span class="oval mono">0.388</span></div>
<div class="orow"><div class="obar bid" style="width:64%"></div><span class="oval bid-px mono">67,276.1</span><span class="oval mono">0.601</span></div>
<div class="orow"><div class="obar bid" style="width:38%"></div><span class="oval bid-px mono">67,270.9</span><span class="oval mono">0.294</span></div>
</div>
</div>
<footer>
<span>© Binance (iOS)</span>
<span>Binance (iOS) · Markets · Trade · Futures · Wallets</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #0066ff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fafafa; color: #1c1c1c;
border: 1px solid #0066ff; border-radius: 8px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #1c1c1c;
border: 1px solid #c2c2c2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #0066ff; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#1c1c1c; box-sizing:border-box;
font-family:'DinPro', -apple-system, sans-serif; }
* { box-sizing:border-box; }
.cond { font-family:'DinProCondensed', 'DinPro', sans-serif; }
nav { height:64px; background:#fafafa; border-bottom:1px solid #dedede; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:19px; font-weight:700; margin:0; text-transform:uppercase; letter-spacing:0.5px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#777; }
.navlinks span:first-child { color:#1c1c1c; border-bottom:2px solid #0066ff; padding-bottom:20px; }
.search { width:150px; height:34px; background:#fff; border:1px solid #dedede; border-radius:9999px; font-size:12px;
color:#a4a4a4; display:flex; align-items:center; padding-left:14px; }
.hero { background:#121212; padding:30px 40px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.2; }
.hero h1 { color:#fff; font-family:'DinProCondensed'; font-size:40px; font-weight:700; line-height:1.1;
letter-spacing:-0.5px; margin:0 0 10px; max-width:420px; }
.hero p { color:#a4a4a4; font-size:14px; margin:0 0 18px; max-width:380px; line-height:1.5; }
.btn-primary { background:#0066ff; color:#fff; border:none; border-radius:8px; padding:16px 32px;
font-size:15px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; height:56px; }
.hero-visual { flex:1; height:150px; border-radius:8px; background:#1c1c1c; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:60px; height:110px; border-radius:8px 8px 20px 20px;
background:linear-gradient(160deg,#0066ff,#0052cc); left:70px; top:16px; }
.hero-visual::after { content:''; position:absolute; width:50px; height:90px; border-radius:8px 8px 20px 20px;
background:linear-gradient(160deg,#1990c6,#136f99); right:80px; bottom:16px; }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-family:'DinProCondensed'; font-size:22px; font-weight:700; margin:0; }
.sec-head span { font-size:12px; color:#0066ff; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border:1px solid #dedede; border-radius:12px; padding:16px; }
.thumb { aspect-ratio:1/1; border-radius:8px; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(150deg,#0066ff,#0052cc); }
.t2 { background:linear-gradient(150deg,#1990c6,#136f99); }
.t3 { background:linear-gradient(150deg,#dedede,#a4a4a4); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
padding:2px 8px; border-radius:4px; color:#fff; }
.badge.new { background:#0066ff; }
.badge.sale { background:#1990c6; }
.card h3 { font-size:16px; font-weight:600; margin:4px 0 2px; }
.price { font-size:16px; margin:0; }
footer { background:#121212; color:#a4a4a4; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#a4a4a4; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Bevel</p>
<div class="navlinks"><span>Shave</span><span>Skin</span><span>Hair</span><span>Trial Kit</span></div>
<div class="search">Search…</div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1 class="cond">Precision built for every man</h1>
<p>Single-blade razors and formulations engineered to prevent bumps and ingrown hairs.</p>
<button class="btn-primary">Shop the Kit</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Best Sellers</h2><span>Shop All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<h3>Single Blade Razor</h3>
<p class="price">$65.00</p>
</div>
<div class="card">
<div class="thumb t2"><span class="badge sale">Sale</span></div>
<h3>Priming Shave Oil</h3>
<p class="price">$18.00</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<h3>Trial Kit, Full Routine</h3>
<p class="price">$39.95</p>
</div>
</div>
</section>
<footer>
<span>© Bevel</span>
<div><a href="#">Shave School</a><a href="#">Support</a><a href="#">Company</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f47521; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #f47521;
border: 1px solid #f47521; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #271305; color: #f47521;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { position:relative; width:960px; height:640px; }
.hero { position:relative; width:960px; height:340px; overflow:hidden;
background:linear-gradient(135deg,#3a1f0d,#1a1220 45%,#0d1a1c); }
.hero::before { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 30% 20%, rgba(244,117,33,0.25), transparent 55%),
radial-gradient(circle at 75% 60%, rgba(43,182,115,0.16), transparent 50%); }
.scrim { position:absolute; left:0; right:0; bottom:0; height:220px;
background:linear-gradient(180deg, transparent, rgba(0,0,0,0.55) 55%, #000 100%); }
.topcontrols { position:absolute; top:0; left:0; right:0; height:44px; display:flex; align-items:center;
justify-content:space-between; padding:0 20px; z-index:3; }
.back { width:22px; height:22px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(45deg); }
.topicons { display:flex; gap:16px; }
.topicons span { width:20px; height:20px; border-radius:4px; background:rgba(255,255,255,0.5); }
.badgerow { position:absolute; left:26px; bottom:130px; display:flex; gap:8px; z-index:3; }
.badge { font-size:11px; font-weight:900; letter-spacing:0.04em; text-transform:uppercase;
padding:4px 6px; border-radius:4px; }
.badge.sim { background:#2BB673; color:#fff; }
.badge.prem { background:#FFC107; color:#1A1304; }
.hero-title { position:absolute; left:26px; bottom:86px; font-size:28px; font-weight:900; letter-spacing:-0.5px; z-index:3; }
.hero-meta { position:absolute; left:26px; bottom:64px; font-size:14px; color:#D8D8D8; z-index:3; }
.cta-row { position:absolute; left:26px; right:26px; bottom:18px; display:flex; gap:10px; z-index:3; }
.btn-play { flex:1; height:44px; background:#F47521; border-radius:8px; display:flex; align-items:center;
justify-content:center; gap:8px; font-size:15px; font-weight:900; letter-spacing:0.3px; }
.btn-play::before { content:''; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent;
border-left:10px solid #fff; }
.btn-watchlist { width:44px; height:44px; border-radius:8px; border:1.5px solid rgba(255,255,255,0.4);
display:flex; align-items:center; justify-content:center; font-size:18px; }
.actionrow { display:flex; gap:34px; padding:14px 26px 6px; }
.action-item { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#A0A0A0; }
.action-item .ic { width:22px; height:22px; border:2px solid #A0A0A0; border-radius:5px; }
.segrow { display:flex; gap:24px; padding:10px 26px; border-bottom:1px solid #2A2C31; }
.seg { font-size:14px; font-weight:900; color:#A0A0A0; padding-bottom:8px; position:relative; }
.seg.active { color:#fff; }
.seg.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#F47521; border-radius:2px; }
.eplist { padding:8px 26px; display:flex; flex-direction:column; }
.eprow { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #2A2C31; }
.epthumb { position:relative; width:112px; height:64px; border-radius:6px; flex-shrink:0;
background:linear-gradient(135deg,#2a1a30,#12222a); }
.epnum { position:absolute; top:4px; left:4px; background:rgba(0,0,0,0.7); color:#fff; font-size:10px;
font-weight:900; padding:2px 6px; border-radius:3px; }
.epprog-track { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.25); }
.epprog-fill { position:absolute; left:0; bottom:0; height:3px; background:#F47521; }
.eptext b { display:block; font-size:15px; font-weight:700; margin-bottom:3px; }
.eptext span { font-size:13px; color:#A0A0A0; line-height:1.35; }
.subdub { position:absolute; top:44px; right:26px; z-index:3; display:flex; border:1px solid rgba(255,255,255,0.5);
border-radius:6px; overflow:hidden; }
.subdub div { padding:5px 12px; font-size:11px; font-weight:900; }
.subdub .on { background:#F47521; }
</style></head>
<body>
<div class="shell">
<div class="hero">
<div class="scrim"></div>
<div class="topcontrols"><div class="back"></div><div class="topicons"><span></span><span></span></div></div>
<div class="subdub"><div class="on">SUB</div><div>DUB</div></div>
<div class="badgerow"><span class="badge sim">Simulcast</span></div>
<div class="hero-title">Crunchyroll (iOS)</div>
<div class="hero-meta">★ 4.9 · 2026 · TV-14 · Action, Fantasy</div>
<div class="cta-row"><div class="btn-play">Resume E7</div><div class="btn-watchlist">+</div></div>
</div>
<div class="actionrow">
<div class="action-item"><span class="ic"></span>Watchlist</div>
<div class="action-item"><span class="ic"></span>Rate</div>
<div class="action-item"><span class="ic"></span>Share</div>
<div class="action-item"><span class="ic"></span>Comments</div>
</div>
<div class="segrow">
<div class="seg active">Episodes</div>
<div class="seg">Details</div>
<div class="seg">More Like This</div>
</div>
<div class="eplist">
<div class="eprow">
<div class="epthumb"><span class="epnum">E7</span><div class="epprog-track"></div><div class="epprog-fill" style="width:64%"></div></div>
<div class="eptext"><b>E7 — The Blade Awakens</b><span>The squad regroups at the border outpost as a new threat emerges from the fog.</span></div>
</div>
<div class="eprow">
<div class="epthumb"><span class="epnum">E8</span></div>
<div class="eptext"><b>E8 — Ashes of Tomorrow</b><span>A fractured alliance forces a choice that will decide the fate of the capital.</span></div>
</div>
<div class="eprow">
<div class="epthumb"><span class="epnum">E9</span></div>
<div class="eptext"><b>E9 — Crimson Horizon</b><span>The final stand begins as old rivals are forced to fight side by side.</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #003268; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #003268; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879db6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c8102e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003268; color: #ffffff;
border: 1px solid #c8102e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #003268; color: #f5f5f5;
border: 1px solid #27517f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879db6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #202d5f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0B1320; color:#E8ECF3; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:26px 40px; display:flex; gap:36px; }
.left { width:520px; }
.header { display:flex; align-items:center; justify-content:space-between; }
.header .lbl { font-size:11px; font-weight:700; letter-spacing:0.6pt; color:#8FB4DD; text-transform:uppercase; }
.header .val { font-size:13px; font-weight:700; margin-top:4px; }
.timeline { margin-top:26px; background:#131C2B; border-radius:16px; padding:20px; }
.timeline h3 { font-size:13px; font-weight:700; margin:0 0 16px; }
.step { display:flex; gap:12px; padding-bottom:16px; position:relative; }
.step:last-child { padding-bottom:0; }
.rail { display:flex; flex-direction:column; align-items:center; }
.dot { width:12px; height:12px; border-radius:50%; }
.dot.done { background:#1E8E5A; box-shadow:0 0 0 2px rgba(30,142,90,0.3); }
.dot.now { background:#0F4C9A; box-shadow:0 0 0 2px rgba(15,76,154,0.4); }
.dot.up { background:#5F6E88; box-shadow:0 0 0 2px rgba(95,110,136,0.3); }
.bar { width:2px; flex:1; background:#25314A; margin-top:2px; }
.steplabel .t { font-size:13px; font-weight:700; }
.steplabel .m { font-size:12px; color:#9AA6BC; margin-top:2px; }
.right { width:340px; }
.pass { background:#131C2B; border-radius:18px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.55); }
.strip { height:6px; background:linear-gradient(90deg,#003268,#C8102E); }
.passbody { padding:18px 18px 0; }
.plbl { font-size:10px; font-weight:700; letter-spacing:0.6pt; color:#9AA6BC; text-transform:uppercase; }
.pname { font-size:18px; font-weight:700; text-transform:uppercase; margin-top:4px; }
.grid3 { display:flex; margin-top:18px; }
.cell { flex:1; }
.cell .cl { font-size:10px; font-weight:700; letter-spacing:0.6pt; color:#9AA6BC; text-transform:uppercase; }
.cell .cv { font-size:22px; font-weight:800; margin-top:4px; }
.cell .cv.gold { color:#C99700; }
.zone { margin:18px 18px 0; background:#1C2738; border-radius:10px; padding:10px 14px; font-size:14px; font-weight:800; }
.barcode { margin:16px 0 0; height:56px; background:repeating-linear-gradient(90deg,#E8ECF3 0 2px, transparent 2px 5px, #E8ECF3 5px 7px, transparent 7px 12px); }
.route { margin-top:26px; text-align:center; }
.iata { font-size:34px; font-weight:800; letter-spacing:-0.5pt; display:flex; align-items:center; justify-content:center; gap:18px; }
.plane { font-size:18px; color:#8FB4DD; }
.subrow { display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:#8FB4DD; }
.statuspill { display:inline-block; margin-top:14px; padding:6px 14px; border-radius:999px; background:rgba(30,142,90,0.12); color:#1E8E5A; font-size:12px; font-weight:700; }
</style>
</head>
<body>
<div class="stage">
<div class="left">
<div class="header"><div><div class="lbl">Today · DL 1248</div><div class="val">ATL → JFK</div></div><span class="statuspill">On Time</span></div>
<div class="route">
<div class="iata">ATL <span class="plane">✈</span> JFK</div>
<div class="subrow"><span>Gate B16 · 10:42 AM</span><span>Seat 14C · 1:02 PM</span></div>
</div>
<div class="timeline">
<h3>Flight Status</h3>
<div class="step"><div class="rail"><div class="dot done"></div><div class="bar"></div></div><div class="steplabel"><div class="t">Departed ATL — On Time</div><div class="m">Gate B16 · 10:42 AM EDT</div></div></div>
<div class="step"><div class="rail"><div class="dot now"></div><div class="bar"></div></div><div class="steplabel"><div class="t">In Air — Cruising</div><div class="m">35,000 ft · Est. arrival 1:02 PM EDT</div></div></div>
<div class="step"><div class="rail"><div class="dot up"></div></div><div class="steplabel"><div class="t" style="color:#5F6E88">Arrive JFK</div><div class="m">Terminal 4 · Baggage Carousel 7</div></div></div>
</div>
</div>
<div class="right">
<div class="pass">
<div class="strip"></div>
<div class="passbody">
<div style="font-size:11px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:#8FB4DD;margin-bottom:6px;">Delta (iOS)</div>
<div class="plbl">Passenger</div>
<div class="pname">M. Rodriguez</div>
<div class="grid3">
<div class="cell"><div class="cl">Gate</div><div class="cv">B16</div></div>
<div class="cell"><div class="cl">Seat</div><div class="cv">14C</div></div>
<div class="cell"><div class="cl">Group</div><div class="cv gold">Zone 2</div></div>
</div>
<div class="zone">Boards 10:12 AM · SKY PRIORITY</div>
</div>
<div class="barcode"></div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #353535;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #353535;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0px; margin: 0; color: #353535; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #1a73e8; color: #ffffff;
border: none; border-radius: 4px; padding: 6px 14px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #ffffff; color: #1a73e8;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 6px 14px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; background: #ffffff; color: #353535;
border: 1px solid #dedede; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0px; background: #dae8fc; color: #6c8ebf;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트(현재 렌더 방식), html/body 는 단독 문서로
열었을 때를 위한 것 — 카드 템플릿과 같은 이유로 둘 다 필요하다. */
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#353535; box-sizing:border-box; }
* { box-sizing: border-box; }
nav {
height: 64px; display:flex; align-items:center; justify-content:space-between;
padding: 0 40px; border-bottom: 1px solid #e3e3e3;
}
.brand { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0px; font-size: 18px; margin:0; }
.navlinks { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; display:flex; gap:28px; color:#767676; }
.hero {
padding: 56px 40px 40px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap: 16px;
}
.hero h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -0.3px; margin:0; max-width:640px; color:#353535; }
.hero p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin:0; max-width:520px; color:#767676; }
.row { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background:#1a73e8; color:#ffffff;
border:none; border-radius:4px; padding:6px 14px;
white-space:nowrap; cursor:default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background:#ffffff; color:#1a73e8;
border:1px solid #c0c0c0; border-radius:4px;
padding:6px 14px; white-space:nowrap; cursor:default;
}
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0px; background:#dae8fc; color:#6c8ebf;
border-radius:2px; padding:4px 10px; display:inline-block;
white-space:nowrap; text-transform:uppercase;
}
.features {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding: 8px 40px 40px;
}
.feature-card {
border: 1px solid #e3e3e3; border-radius: 4px;
padding: 22px; display:flex; flex-direction:column; gap:10px;
}
.feature-card h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0px; font-size: 16px; margin:0; color:#353535; }
.feature-card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin:0; color:#767676; }
footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; border-top:1px solid #e3e3e3; padding: 18px 40px; color:#767676;
display:flex; justify-content:space-between; align-items:center;
}
</style></head>
<body>
<nav>
<p class="brand">draw.io</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-primary">Get Started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="features">
<div class="feature-card"><span class="badge">Fast</span><h3>Built for speed</h3><p>Every interaction responds instantly, tuned for the way people actually work.</p></div>
<div class="feature-card"><span class="badge">Scale</span><h3>Grows with you</h3><p>From a first project to a full team rollout, the system holds up at any size.</p></div>
<div class="feature-card"><span class="badge">Secure</span><h3>Trusted by default</h3><p>Security and privacy are part of the foundation, not an afterthought.</p></div>
</section>
<footer>
<span>© draw.io</span>
<span>draw.io · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #80c343; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #80c343; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #436128; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40810c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #80c343; color: #000000;
border: 1px solid #40810c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #80c343; color: #111111;
border: 1px solid #6ea73b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #436128; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #76b83a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #f8f8f8; }
.brand { font-size:20px; font-weight:600; color:#222222; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#474747; }
.locale { background:#474747; color:#f8f8f8; border-radius:24px; padding:8px 40px 8px 16px; font-size:13px; }
.hero { padding:36px 32px 24px; }
.hero h1 { font-size:42.7px; font-weight:600; margin:0 0 10px; max-width:600px; line-height:1.15; }
.hero p { font-size:16px; color:#474747; margin:0 0 18px; max-width:480px; }
.btnrow { display:flex; gap:16px; align-items:center; }
.primary { background:#80c343; color:#222222; border:none; border-radius:800px; padding:6px 24px; height:40px; font-size:18.9px; font-weight:600; }
.tertiary { background:transparent; color:#40810c; border:none; border-radius:800px; padding:6px 0; height:40px; font-size:18.9px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:10px 32px 0; }
.fcard { border-top:4px solid #80c343; padding:16px 14px 0 0; height:200px; }
.fcard .thumb { height:100px; background:linear-gradient(135deg,#eef7e5,#d3ecc0); margin-bottom:10px; }
.fcard h4 { margin:0 0 4px; font-size:16px; font-weight:600; color:#222222; }
.fcard p { margin:0; font-size:14px; color:#474747; line-height:1.4; }
.fcard .specs { margin-top:8px; display:flex; gap:8px; font-size:11px; color:#40810c; }
footer { position:absolute; bottom:0; left:0; right:0; padding:14px 32px; border-top:1px solid #f8f8f8;
display:flex; justify-content:space-between; font-size:11px; color:#474747; }
</style></head>
<body>
<header>
<span class="brand">Acer</span>
<div class="navlinks"><span>Laptops</span><span>Displays</span><span>Gaming</span><span>Support</span></div>
<span class="locale">English (US)</span>
</header>
<div class="hero">
<h1>Technology that breaks barriers.</h1>
<p>Discover laptops, displays, and gaming gear built for how you work, create, and play.</p>
<div class="btnrow">
<button class="primary">Shop Laptops</button>
<button class="tertiary">Explore Sustainability</button>
</div>
</div>
<div class="grid">
<div class="fcard"><div class="thumb"></div><h4>Swift Series</h4><p>Ultra-thin, lightweight design for everyday productivity.</p><div class="specs"><span>14"</span><span>·</span><span>1.2kg</span></div></div>
<div class="fcard"><div class="thumb" style="background:linear-gradient(135deg,#e5f2ff,#c0e0f7);"></div><h4>Predator Line</h4><p>High-refresh gaming performance with advanced cooling.</p><div class="specs"><span>16"</span><span>·</span><span>240Hz</span></div></div>
<div class="fcard"><div class="thumb" style="background:linear-gradient(135deg,#f5f0e0,#e8ddb8);"></div><h4>Vero Collection</h4><p>Built with recycled materials, part of Conscious Technology.</p><div class="specs"><span>Eco</span><span>·</span><span>OFL</span></div></div>
</div>
<footer>
<span>© Acer</span>
<span>Breaking barriers between people and technology</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4a154b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4a154b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a890a8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #611f69; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4a154b; color: #ffffff;
border: 1px solid #611f69; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4a154b; color: #f5f5f5;
border: 1px solid #653966; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a890a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e1750; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1D1C1D; box-sizing:border-box;
font-family:"Lato","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:640px; }
.sidebar { width:220px; background:#3F0E40; color:#ffffff; padding:20px 14px; }
.sidebar .ws { font-size:15px; font-weight:700; margin-bottom:18px; }
.chan { padding:8px 10px; border-radius:6px; font-size:15px; font-weight:700; margin-bottom:2px; }
.chan.active { background:#1164A3; }
.chan.inactive { color:rgba(255,255,255,0.7); font-weight:400; }
.main { flex:1; display:flex; flex-direction:column; }
header { height:52px; border-bottom:1px solid #E8E8E8; display:flex; align-items:center; padding:0 20px; font-weight:700; font-size:16px; }
.thread { flex:1; padding:20px; }
.msg { display:flex; gap:10px; margin-bottom:16px; }
.avatar { width:36px; height:36px; background:#E8E8E8; border-radius:4px; }
.name { font-size:15px; font-weight:700; }
.time { font-size:12px; color:#868686; margin-left:6px; }
.body { font-size:15px; color:#1D1C1D; margin-top:2px; line-height:1.46; }
.composer { margin:0 20px 20px; border:1px solid rgba(29,28,29,0.3); border-radius:8px; padding:8px 12px; font-size:15px; color:#868686; }
.cta { background:#007A5A; color:#ffffff; border-radius:4px; padding:0 12px; height:36px; display:inline-flex; align-items:center; font-size:15px; font-weight:700; margin-left:12px; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="ws">Slack</div>
<div class="chan active"># general</div>
<div class="chan inactive"># engineering</div>
<div class="chan inactive"># random</div>
<div class="chan inactive">+ Add channels</div>
</div>
<div class="main">
<header># general <span class="cta">Try for free</span></header>
<div class="thread">
<div class="msg"><div class="avatar"></div><div><span class="name">Maya</span><span class="time">10:24 AM</span><div class="body">This is the very beginning of the #general channel 👋</div></div></div>
<div class="msg"><div class="avatar"></div><div><span class="name">Daniel</span><span class="time">10:26 AM</span><div class="body">Where work happens — let's ship it.</div></div></div>
</div>
<div class="composer">Message #general</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fed05f; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fed05f; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6734; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc533; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fed05f; color: #000000;
border: 1px solid #ffc533; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fed05f; color: #111111;
border: 1px solid #d8b153; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6734; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fece58; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { height:64px; flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e6e6e6; background:#ffffff; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.4px; color:#212121; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#333333; letter-spacing:-0.4px; }
.navcta { display:flex; gap:10px; }
.btn { border-radius:8px; font-weight:700; letter-spacing:-0.4px; font-size:14px; white-space:nowrap; border:1px solid transparent; }
.btn-yellow { background:#fed05f; color:#000000; border-color:#ffc533; padding:8px 18px; }
.btn-outline { background:#ffffff; color:#000000; border-color:#cccccc; padding:8px 18px; }
.btn-dark { background:#000000; color:#ffffff; padding:8px 18px; }
.hero { flex:0 0 auto; padding:26px 40px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; background:#fafafa; }
.badge { background:#000000; color:#ffffff; border-radius:999px; padding:3px 12px; font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.hero h1 { font-size:32px; font-weight:700; line-height:1.3; letter-spacing:-0.6px; margin:0; color:#212121; max-width:640px; }
.hero p { font-size:14px; color:#333333; margin:0; max-width:520px; line-height:1.5; }
.herobtns { display:flex; gap:10px; margin-top:4px; }
.herobtns .btn-yellow, .herobtns .btn-outline { padding:10px 24px; font-size:15px; }
.steps { flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:22px 40px; align-content:center; }
.step { position:relative; border-radius:8px; padding:18px 16px 22px; border:1px solid #e6e6e6; background:#ffffff; }
.step.active { background:#f5f5f5; }
.stepnum { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px;
background:#fed05f; border:1px solid #ffc533; color:#000; font-weight:700; font-size:12px; margin-bottom:10px; }
.step h3 { font-size:16px; font-weight:700; margin:0 0 6px; color:#212121; letter-spacing:-0.4px; }
.step p { font-size:12.5px; color:#474747; margin:0; line-height:1.45; }
footer { flex:0 0 108px; display:flex; gap:16px; padding:0 40px 18px; }
.banner { flex:1; border-radius:12px; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.banner-grey { background:#f5f5f5; border:1px solid #f0f0f0; }
.banner-yellow { background:#fed05f; border:1px solid #ffb90a; }
.banner h4 { font-size:15px; font-weight:700; margin:0 0 3px; color:#212121; letter-spacing:-0.4px; }
.banner span { font-size:11.5px; color:#707070; }
.banner-yellow span { color:#5c4b12; }
.bannerbtn { border:none; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:700; white-space:nowrap; }
.bannerbtn.outline { background:#ffffff; border:1px solid #cccccc; color:#000; }
.bannerbtn.dark { background:#000000; color:#fff; }
</style></head>
<body>
<nav>
<p class="brand">Modusign</p>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Customers</span><span>Blog</span></div>
<div class="navcta">
<button class="btn btn-outline">Talk to sales</button>
<button class="btn btn-yellow">Start free trial</button>
</div>
</nav>
<section class="hero">
<span class="badge">Korea's #1 e-signature</span>
<h1>Everywhere a signature is needed,<br>Modusign</h1>
<p>From drafting to signing to filing — one product covers the entire contract lifecycle.</p>
<div class="herobtns">
<button class="btn btn-outline">Talk to sales</button>
<button class="btn btn-yellow">Start free trial</button>
</div>
</section>
<section class="steps">
<div class="step active"><span class="stepnum">1</span><h3>Prepare</h3><p>Load a standard template or upload a PDF and mark where signatures go.</p></div>
<div class="step"><span class="stepnum">2</span><h3>Request</h3><p>Send signers a link — they can sign instantly, no app install required.</p></div>
<div class="step"><span class="stepnum">3</span><h3>Sign</h3><p>Once every party has signed, a legally binding contract is issued instantly.</p></div>
<div class="step"><span class="stepnum">4</span><h3>Manage</h3><p>Search completed contracts and confirm history with an audit-trail certificate.</p></div>
</section>
<footer>
<div class="banner banner-grey">
<div><h4>Need a walkthrough first?</h4><span>Our sales team will prepare a tailored quote for you</span></div>
<button class="bannerbtn outline">Talk to sales</button>
</div>
<div class="banner banner-yellow">
<div><h4>Start right now</h4><span>14-day free trial, no credit card needed</span></div>
<button class="bannerbtn dark">Start free trial</button>
</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8f9196; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #6f5cae; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #212121;
border: 1px solid #6f5cae; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f9196; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #8071b3; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1a1a; color:#ffffff; box-sizing:border-box;
font-family:'Poppins','Microsoft Yahei',sans-serif; }
* { box-sizing:border-box; }
nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#212121; }
.brand { font-size:18px; font-weight:600; color:#6f5cae; }
.navlinks { display:flex; gap:22px; font-size:12.5px; color:#8f9196; font-weight:500; }
.search { background:#32373c; border-radius:9999px; padding:8px 16px; font-size:12px; color:#8f9196; width:170px; }
main { display:flex; height:578px; }
.gallery { width:400px; background:#121212; position:relative; display:flex; align-items:center; justify-content:center; }
.kb { width:260px; height:110px; background:#212121; border-radius:10px; position:relative;
box-shadow:0 20px 40px rgba(111,92,174,0.3); display:grid; grid-template-columns:repeat(8,1fr); gap:4px; padding:12px; }
.kb i { display:block; background:#32373c; border-radius:3px; }
.kb i:nth-child(3n) { background:#6f5cae; }
.cap-float { position:absolute; top:80px; right:120px; width:34px; height:34px; background:#8071b3;
border-radius:5px; box-shadow:0 10px 20px rgba(0,0,0,0.4); }
.badge-new { position:absolute; top:24px; left:24px; background:#8071b3; color:#fff; font-size:10px;
font-weight:600; padding:5px 12px; border-radius:9999px; text-transform:uppercase; }
.info { flex:1; padding:30px 36px; display:flex; flex-direction:column; gap:12px; background:#1a1a1a; }
.cat { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:#8f9196; }
h1 { font-size:22px; font-weight:600; margin:0; line-height:1.3; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:600; color:#f78da7; }
.desc { font-size:13px; color:#c8c8c8; line-height:1.5; max-width:340px; }
.switch-row { display:flex; gap:8px; }
.sw { border:1px solid #444444; border-radius:8px; padding:7px 14px; font-size:12px; color:#eeeeee; }
.sw.on { border-color:#6f5cae; color:#fff; background:#6f5cae; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#6f5cae; color:#fff; border:none; border-radius:9999px; padding:13px 18px;
font-size:14px; font-weight:600; }
.btn-outline { border:1.5px solid #8f9196; color:#eeeeee; background:transparent; border-radius:9999px; padding:11.5px 16px;
font-size:12.5px; font-weight:600; white-space:nowrap; }
.meta { font-size:11px; color:#8f9196; }
</style></head>
<body>
<nav>
<div class="brand">Akko</div>
<div class="navlinks"><span>Keyboards</span><span>Switches</span><span>Keycaps</span><span>Accessories</span></div>
<div class="search">Search switch type...</div>
</nav>
<main>
<div class="gallery">
<span class="badge-new">New</span>
<div class="kb"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="cap-float"></div>
</div>
<div class="info">
<span class="cat">75% Mechanical Keyboard</span>
<h1>Akko MOD007B-HE Wireless Keyboard</h1>
<div class="price-row"><span class="price">$99.99</span></div>
<p class="desc">Gasket-mounted, hot-swappable 75% board with translucent PBT keycaps and tri-mode connectivity.</p>
<div class="switch-row">
<span class="sw on">Linear</span>
<span class="sw">Tactile</span>
<span class="sw">Clicky</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Customize Keycaps</button>
</div>
<span class="meta">Free global shipping over $59</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a8aba; color: #8ba1d4;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a8aba; color: #8ba1d4;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; margin: 0; color: #8ba1d4; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #60619c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #ecab37; color: #21242e;
border: none; border-radius: 2px; padding: {spacing.md};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #21242e; color: #ffffff;
border: 1px solid #e60012; border-radius: 0px;
padding: {spacing.md}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #21242e;
border: 1px solid #7e90c0; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #60619c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.3; background: #ecab37; color: #21242e;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7a8aba; color:#21242e; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
/* Y2K 콘솔 크롬: 브러시드 페리윙클 바디 + 카본 하프톤 도트 네비 + 베벨 금속 패널.
모든 패널은 "게임기 페이스플레이트"처럼 라이트/다크 이중 보더로 입체를 낸다. */
.navbar { height:44px; background:#21242e; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; background-image:radial-gradient(#3d4f97 1px,transparent 1.3px); background-size:6px 6px;
background-color:#21242e; }
.navbar .brand { color:#e60012; font-family:Arial Black,Arial,sans-serif; font-weight:900; font-size:16px;
letter-spacing:-0.5px; text-shadow:1px 1px 0 #000; }
.navlinks { display:flex; gap:18px; }
.navlinks span { color:#e48600; font-size:11px; font-weight:700; letter-spacing:0.03em; text-shadow:0 1px 0 rgba(0,0,0,0.4); }
.navlinks span.on { color:#ecab37; text-decoration:underline; }
.subnav { height:26px; background:#9fbee7; border-top:1px solid #c0d5e6; border-bottom:1px solid #3d4f97;
display:flex; align-items:center; gap:16px; padding:0 24px; font-size:10px; font-weight:700; color:#3d4f97; }
.hero { height:220px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#acace7,#8ba1d4 60%,#7a8aba); }
.grid { position:absolute; inset:0; background-image:linear-gradient(#00000012 1px,transparent 1px),linear-gradient(90deg,#00000012 1px,transparent 1px);
background-size:20px 20px; }
.herotext { position:relative; z-index:2; padding:36px 40px 0; }
.herotext h1 { font-family:Arial Black,Arial,sans-serif; font-size:46px; font-weight:900; margin:0; letter-spacing:-1px;
color:#ffffff; -webkit-text-stroke:2px #21242e; text-shadow:3px 3px 0 #3d4f97; }
.herotext p { font-size:14px; font-weight:700; color:#21242e; margin-top:10px; max-width:400px; text-shadow:0 1px 0 rgba(255,255,255,0.4); }
.btn { position:relative; z-index:2; margin:16px 0 0 40px; background:linear-gradient(180deg,#f68d1f,#e48600);
color:#fff; border:2px solid #21242e; border-radius:4px; padding:9px 22px; font-weight:900; font-size:12px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 2px 2px 0 #21242e; }
/* 베벨 금속 패널 3장 — 라이트/다크 보더 페어로 "판금" 느낌 */
.panels { display:flex; gap:14px; padding:22px 40px 30px; }
.panel { flex:1; background:#dedede; border-top:2px solid #ffffff; border-left:2px solid #ffffff;
border-right:2px solid #3d4f97; border-bottom:2px solid #3d4f97; border-radius:3px; padding:14px; }
.panel .k { display:inline-block; background:#21242e; color:#ecab37; font-size:10px; font-weight:700;
padding:2px 8px; border-radius:2px; margin-bottom:8px; }
.panel h4 { font-family:Arial Black,Arial,sans-serif; font-size:16px; margin:0 0 4px; color:#21242e; }
.panel p { font-size:11px; color:#3d4f97; margin:0; font-weight:700; line-height:1.4; }
footer { height:34px; background:#21242e; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; font-size:10px; color:#e48600; font-weight:700; }
</style></head>
<body>
<div class="navbar">
<span class="brand">Nintendo.com (2001)</span>
<div class="navlinks"><span class="on">HOME</span><span>GAMES</span><span>SYSTEMS</span><span>DOWNLOADS</span></div>
</div>
<div class="subnav"><span>◆ WHAT'S NEW</span><span>◆ FUN STUFF</span><span>◆ CLUB NINTENDO</span></div>
<div class="hero">
<div class="grid"></div>
<div class="herotext">
<h1>PLAY IT ON</h1>
<p>The newest games, systems, and characters — straight from Nintendo.</p>
</div>
<button class="btn">ENTER »</button>
</div>
<div class="panels">
<div class="panel"><span class="k">SYSTEMS</span><h4>GameCube</h4><p>The little purple box with a big library.</p></div>
<div class="panel"><span class="k">GAMES</span><h4>F-Zero GX</h4><p>Racing at 1000 km/h — buckle up.</p></div>
<div class="panel"><span class="k">DOWNLOADS</span><h4>NES Classics</h4><p>Play the originals right in your browser.</p></div>
</div>
<footer>
<span>© Nintendo.com (2001)</span>
<span>GAMES · SYSTEMS · SUPPORT · LEGAL</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ed1d24; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ed1d24; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f19497; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c8161c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ed1d24; color: #000000;
border: 1px solid #c8161c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ed1d24; color: #f5f5f5;
border: 1px solid #ee4045; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f19497; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e71c23; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #e0e0e0; }
.logo { width:34px; height:34px; background:#ed1d24; color:#fff; font-size:11px; font-weight:700;
display:flex; align-items:center; justify-content:center; text-align:center; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:20px 30px; }
.tile { display:flex; flex-direction:column; }
.tile .img { aspect-ratio:3/4; background:linear-gradient(160deg,#f5f5f5,#e0e0e0); position:relative; }
.tile .flag { position:absolute; top:0; left:0; background:#ed1d24; color:#fff; font-size:11px; font-weight:700;
padding:2px 6px; letter-spacing:0.5px; }
.tile .flag.black { background:#1a1a1a; }
.tile .info { padding:8px 0; }
.tile .name { font-size:14px; font-weight:600; }
.tile .price { font-size:16px; font-weight:700; margin-top:2px; }
.tile .price.sale { color:#ed1d24; }
.tile .old { font-size:12px; color:#999999; text-decoration:line-through; margin-right:6px; }
.swatches { display:flex; gap:4px; margin-top:6px; }
.sw { width:14px; height:14px; }
.banner { background:#1a1a1a; color:#fff; text-align:center; font-size:13px; padding:8px; }
</style></head>
<body>
<div class="banner">LIMITED OFFER — HEATTECH from $9.90</div>
<nav>
<div class="logo">Uniqlo</div>
<div class="navlinks"><span>WOMEN</span><span>MEN</span><span>KIDS</span><span>LIFEWEAR</span></div>
</nav>
<div class="grid">
<div class="tile"><div class="img"><span class="flag">SALE</span></div><div class="info"><div class="name">Ultra Light Down Jacket</div><div class="price sale"><span class="old">$79.90</span>$59.90</div><div class="swatches"><div class="sw" style="background:#1a1a1a"></div><div class="sw" style="background:#ed1d24"></div><div class="sw" style="background:#999"></div></div></div></div>
<div class="tile"><div class="img"><span class="flag black">NEW</span></div><div class="info"><div class="name">AIRism Cotton T-Shirt</div><div class="price">$14.90</div><div class="swatches"><div class="sw" style="background:#fff;border:1px solid #ccc"></div><div class="sw" style="background:#1a1a1a"></div></div></div></div>
<div class="tile"><div class="img"></div><div class="info"><div class="name">HEATTECH Crew Neck</div><div class="price">$19.90</div><div class="swatches"><div class="sw" style="background:#333"></div><div class="sw" style="background:#ccc"></div></div></div></div>
<div class="tile"><div class="img"><span class="flag">SALE</span></div><div class="info"><div class="name">Wide Fit Trousers</div><div class="price sale"><span class="old">$49.90</span>$34.90</div><div class="swatches"><div class="sw" style="background:#5a4632"></div><div class="sw" style="background:#1a1a1a"></div></div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c805; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c805; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87e189; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c805; color: #000000;
border: 1px solid #ff5000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c805; color: #000000;
border: 1px solid #27cf2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87e189; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29b504; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.topbar { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; border-bottom:0.5px solid #E6E6E6; }
.title { font-size:20px; font-weight:700; }
.icons { display:flex; gap:16px; color:#5C6166; font-size:16px; }
.hero { padding:20px 34px 6px; }
.label { font-size:11px; font-weight:700; letter-spacing:.6px; color:#5C6166; text-transform:uppercase; }
.value { font-size:38px; font-weight:700; margin-top:6px; letter-spacing:-0.5px; }
.change { font-size:15px; font-weight:500; color:#00C805; margin-top:4px; }
.chart-wrap { padding:8px 0 0; position:relative; height:150px; margin:0 34px; }
svg { width:100%; height:100%; display:block; }
.range-row { display:flex; gap:22px; padding:10px 34px 0; }
.range { font-size:13px; font-weight:600; color:#5C6166; letter-spacing:.3px; }
.range.on { color:#000; border-bottom:2px solid #00C805; padding-bottom:6px; }
.list { padding:16px 34px; }
.row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:0.5px solid #E6E6E6; }
.row:last-child { border-bottom:none; }
.lead { display:flex; align-items:center; gap:12px; }
.logo { width:32px; height:32px; border-radius:8px; }
.co { font-size:16px; font-weight:600; }
.tick { font-size:13px; color:#5C6166; letter-spacing:.3px; }
.right { text-align:right; }
.mv { font-size:17px; font-weight:500; }
.dc { font-size:13px; font-weight:500; }
.up { color:#00C805; }
.down { color:#FF5000; }
.footer { position:absolute; bottom:0; left:0; right:0; height:64px; background:#fff; border-top:0.5px solid #E6E6E6;
display:flex; align-items:center; padding:0 34px; }
.trade { flex:1; background:#000; color:#fff; height:48px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; }
.side { width:300px; padding:20px 20px 0; float:right; }
</style></head>
<body>
<div class="topbar"><div class="title">Robinhood (iOS)</div><div class="icons">⌕ ◎</div></div>
<div style="display:flex;">
<div style="flex:1;">
<div class="hero">
<div class="label">Buying power</div>
<div class="value">$24,847.93</div>
<div class="change">+$847.93 (+3.52%) Today</div>
</div>
<div class="chart-wrap">
<svg viewBox="0 0 600 150" preserveAspectRatio="none">
<polyline fill="none" stroke="#00C805" stroke-width="2.5" points="0,90 60,70 120,95 180,60 240,80 300,40 360,55 420,30 480,50 540,20 600,35"/>
</svg>
</div>
<div class="range-row">
<div class="range on">1D</div><div class="range">1W</div><div class="range">1M</div><div class="range">3M</div><div class="range">YTD</div><div class="range">1Y</div><div class="range">ALL</div>
</div>
<div class="list">
<div class="row"><div class="lead"><div class="logo" style="background:#000;"></div><div><div class="co">Apple Inc.</div><div class="tick">AAPL · 4 shares</div></div></div><div class="right"><div class="mv">$1,247.92</div><div class="dc up">+$24.13 (+1.97%)</div></div></div>
<div class="row"><div class="lead"><div class="logo" style="background:linear-gradient(135deg,#5865F2,#4752C4);"></div><div><div class="co">Robinhood Markets</div><div class="tick">HOOD · 20 shares</div></div></div><div class="right"><div class="mv">$412.60</div><div class="dc down">-$8.20 (-1.95%)</div></div></div>
<div class="row"><div class="lead"><div class="logo" style="background:linear-gradient(135deg,#F7931A,#c9760a);"></div><div><div class="co">Bitcoin</div><div class="tick">BTC · 0.021</div></div></div><div class="right"><div class="mv">$1,940.10</div><div class="dc up">+$62.40 (+3.32%)</div></div></div>
<div class="row"><div class="lead"><div class="logo" style="background:#627EEA;"></div><div><div class="co">Ethereum</div><div class="tick">ETH · 1.4</div></div></div><div class="right"><div class="mv">$3,120.55</div><div class="dc up">+$40.00</div></div></div>
</div>
</div>
<div class="side">
<div style="font-size:13px;font-weight:700;color:#5C6166;margin-bottom:10px;">Lists</div>
<div style="font-size:14px;font-weight:600;padding:8px 0;border-bottom:0.5px solid #E6E6E6;">Watchlist</div>
<div style="font-size:14px;font-weight:600;padding:8px 0;border-bottom:0.5px solid #E6E6E6;">Tech Movers</div>
<div style="font-size:14px;font-weight:600;padding:8px 0;">Dividend Payers</div>
</div>
</div>
<div class="footer"><div class="trade">Trade</div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ff8b01; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #ff8b01; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff8b01; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #eceef0; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:15px; color:#2b2b2b; }
.navlinks .active { color:#ff8b01; border-bottom:2px solid #ff8b01; padding-bottom:20px; margin-bottom:-21px; }
main { flex:1 1 auto; display:flex; gap:22px; padding:20px 30px; min-height:0; }
.left { flex:1; border-radius:12px; position:relative; min-height:0;
background:linear-gradient(150deg,#1a1a1a,#3a3a3a 60%, #ff8b01 140%); }
.left::after { content:''; position:absolute; left:20px; right:20px; bottom:20px; height:8px; border-radius:999px;
background:rgba(255,139,1,0.5); filter:blur(2px); }
.right { flex:1.1; display:flex; flex-direction:column; min-height:0; }
.kicker { font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#256bc1; margin:0 0 6px; }
.title { font-size:24px; font-weight:700; margin:0 0 8px; }
.price { font-size:22px; font-weight:700; margin:0 0 10px; }
.desc { font-size:14px; color:#2b2b2b; margin:0 0 14px; line-height:1.5; }
.btnrow { display:flex; gap:10px; margin-bottom:16px; }
.btn-primary { background:#ff8b01; color:#fff; border:none; border-radius:8px; padding:14px 26px; font-weight:600; font-size:15px; }
.btn-secondary { background:#fff; color:#121212; border:2px solid #d9d9d9; border-radius:8px; padding:12px 24px; font-weight:600; font-size:15px; }
.steps { flex:1; display:flex; align-items:flex-start; gap:16px; min-height:0; }
.step { flex:1; text-align:center; }
.step .dot { width:32px; height:32px; border-radius:999px; background:#f7f7f7; color:#6a6a6a; display:flex;
align-items:center; justify-content:center; font-size:13px; font-weight:700; margin:0 auto 6px; }
.step.active .dot { background:#ff8b01; color:#fff; }
.step p { font-size:11px; color:#6a6a6a; margin:0; }
footer { flex:0 0 auto; height:56px; background:#121212; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
footer .links { display:flex; gap:16px; color:#929292; }
</style></head>
<body>
<nav>
<p class="brand">Anova Culinary</p>
<div class="navlinks"><span class="active">Precision Cooker</span><span>Combi Oven</span><span>Accessories</span><span>Recipes</span></div>
</nav>
<main>
<div class="left"></div>
<div class="right">
<p class="kicker">Precision Cooker Pro</p>
<h1 class="title">Sous vide, engineered.</h1>
<div class="price">$249.00</div>
<p class="desc">1200 watts of commercial-grade heating power with Wi-Fi control, so every steak comes out exactly medium-rare.</p>
<div class="btnrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Specs</button>
</div>
<div class="steps">
<div class="step active"><div class="dot">1</div><p>Attach</p></div>
<div class="step"><div class="dot">2</div><p>Set Temp</p></div>
<div class="step"><div class="dot">3</div><p>Seal</p></div>
<div class="step"><div class="dot">4</div><p>Sear</p></div>
</div>
</div>
</main>
<footer>
<span>© Anova Culinary</span>
<div class="links"><span>Warranty</span><span>App</span><span>Support</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb0014; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb0014; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f08790; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5254; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb0014; color: #ffffff;
border: 1px solid #ff5254; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb0014; color: #f5f5f5;
border: 1px solid #ed2738; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f08790; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee0d1e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#111115; color:#ffffff; box-sizing:border-box;
font-family:"Pretendard Variable","Pretendard",-apple-system,"Noto Sans KR","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#111115; border-bottom:1px solid #222225; }
.navleft { display:flex; align-items:center; gap:26px; }
.brand { font-size:17px; font-weight:700; color:#ffffff; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#a1a1a9; }
.navlinks span:first-child { color:#ffffff; }
.navright { display:flex; align-items:center; gap:10px; }
.coin { display:flex; align-items:center; gap:6px; background:#222225; border-radius:9999px; padding:6px 12px;
font-size:13px; font-weight:600; color:#ffffff; }
.coin .dot { width:12px; height:12px; border-radius:9999px; background:#ffd750; }
.btn-primary { background:#eb0014; color:#ffffff; border:none; border-radius:4px; height:34px; padding:0 16px;
font-size:13px; font-weight:600; }
.chiprow { flex:0 0 48px; display:flex; align-items:center; gap:10px; padding:0 32px; }
.chip { border:1px solid #e9e9ec22; border:1px solid rgba(255,255,255,0.12); border-radius:9999px; padding:0 14px;
height:30px; display:flex; align-items:center; font-size:12px; font-weight:600; color:#a1a1a9; }
.chip.selected { background:rgba(255,82,84,0.15); color:#ff5254; border-color:transparent; }
.sectitle { flex:0 0 30px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.sectitle h2 { font-size:16px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.sectitle span { font-size:12px; color:#6f6f77; }
.grid { flex:0 0 296px; display:flex; gap:14px; padding:8px 32px 0; }
.thumb { width:158px; flex:0 0 158px; }
.cover { width:158px; height:224px; border-radius:4px; position:relative; overflow:hidden; }
.cover .badge19 { position:absolute; top:6px; left:6px; background:#c40017; color:#fff; font-size:10px;
font-weight:700; border-radius:2px; padding:2px 5px; }
.cover .badgenew { position:absolute; top:6px; right:6px; background:#eb0014; color:#fff; font-size:10px;
font-weight:700; border-radius:2px; padding:2px 5px; }
.cover .grad { position:absolute; inset:0; }
.cover .ttl { position:absolute; left:8px; right:8px; bottom:8px; font-size:13px; font-weight:700; color:#ffffff;
line-height:1.25; text-shadow:0 1px 6px rgba(0,0,0,0.6); }
.meta { padding:6px 2px 0; }
.meta .g { font-size:11px; color:#6f6f77; }
.meta .up { font-size:12px; color:#a1a1a9; margin-top:2px; }
.g1 { background:linear-gradient(160deg,#3a2140,#1a1424 70%); }
.g2 { background:linear-gradient(160deg,#432017,#1c110d 70%); }
.g3 { background:linear-gradient(160deg,#173a2e,#0e1c17 70%); }
.g4 { background:linear-gradient(160deg,#1c2a44,#0e1420 70%); }
.g5 { background:linear-gradient(160deg,#442038,#1e0f1a 70%); }
.continue { flex:1 1 auto; padding:16px 32px 20px; border-top:1px solid #222225; display:flex; flex-direction:column; gap:12px; min-height:0; }
.continue h3 { font-size:14px; font-weight:700; margin:0; color:#ffffff; }
.circles { display:flex; gap:20px; }
.circ-item { display:flex; flex-direction:column; align-items:center; gap:6px; width:76px; }
.circ { width:64px; height:64px; border-radius:9999px; border:3px solid #eb0014; position:relative; }
.circ span { position:absolute; inset:3px; border-radius:9999px; }
.circ-item .nm { font-size:11px; color:#a1a1a9; text-align:center; line-height:1.3; }
</style></head>
<body>
<nav>
<div class="navleft">
<p class="brand">Lezhin Comics</p>
<div class="navlinks"><span>Home</span><span>Genre</span><span>Originals</span><span>Snack</span></div>
</div>
<div class="navright">
<div class="coin"><span class="dot"></span>2,480</div>
<button class="btn-primary">Charge</button>
</div>
</nav>
<section class="chiprow">
<div class="chip selected">Romance</div>
<div class="chip">Fantasy</div>
<div class="chip">Thriller</div>
<div class="chip">Drama</div>
<div class="chip">BL</div>
<div class="chip">Action</div>
</section>
<section class="sectitle"><h2>Today's Updates</h2><span>Updated daily</span></section>
<section class="grid">
<div class="thumb">
<div class="cover g1"><span class="badgenew">NEW</span><span class="ttl">Moonlit Vows</span></div>
<div class="meta"><div class="g">Romance · Ep. 42</div><div class="up">Updated today</div></div>
</div>
<div class="thumb">
<div class="cover g2"><span class="badge19">19</span><span class="ttl">Iron Heart Guild</span></div>
<div class="meta"><div class="g">Fantasy · Ep. 118</div><div class="up">Updated today</div></div>
</div>
<div class="thumb">
<div class="cover g3"><span class="ttl">Table for Two</span></div>
<div class="meta"><div class="g">Drama · Ep. 27</div><div class="up">Updated yesterday</div></div>
</div>
<div class="thumb">
<div class="cover g4"><span class="badgenew">NEW</span><span class="ttl">Nightshade Company</span></div>
<div class="meta"><div class="g">Thriller · Ep. 9</div><div class="up">Updated today</div></div>
</div>
<div class="thumb">
<div class="cover g5"><span class="badge19">19</span><span class="ttl">Crimson & Ivory</span></div>
<div class="meta"><div class="g">Romance · Ep. 63</div><div class="up">Updated today</div></div>
</div>
</section>
<section class="continue">
<h3>Continue Reading</h3>
<div class="circles">
<div class="circ-item"><div class="circ"><span class="g1"></span></div><div class="nm">Moonlit Vows</div></div>
<div class="circ-item"><div class="circ"><span class="g3"></span></div><div class="nm">Table for Two</div></div>
<div class="circ-item"><div class="circ"><span class="g4"></span></div><div class="nm">Nightshade Co.</div></div>
<div class="circ-item"><div class="circ"><span class="g2"></span></div><div class="nm">Iron Heart Guild</div></div>
<div class="circ-item"><div class="circ"><span class="g5"></span></div><div class="nm">Crimson & Ivory</div></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #e8d9b5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #111111; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 0px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e8d9b5; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.12em; background: #f8f7f5; color: #555555;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e5e5e5; background:#ffffff; }
.brand { font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size:22px;
font-weight:400; letter-spacing:0.5px; margin:0; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:11px; font-weight:400; letter-spacing:0.1em; text-transform:uppercase; color:#111111; opacity:0.75; }
.navicons { display:flex; gap:18px; align-items:center; font-size:15px; color:#111111; opacity:0.7; }
.hero { position:relative; height:206px; overflow:hidden; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:8px; text-align:center; color:#ffffff;
background:linear-gradient(158deg,#4a463c 0%,#33312a 42%,#171613 100%); }
.hero::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.28); }
.hero > * { position:relative; z-index:1; }
.hero .cap { font-size:11px; font-weight:400; letter-spacing:0.16em; text-transform:uppercase; opacity:0.85; }
.hero h1 { font-family:'Cormorant Garamond', Georgia, serif; font-size:38px; font-weight:300;
letter-spacing:-0.3px; margin:2px 0; }
.hero .sub { font-size:12px; letter-spacing:0.06em; opacity:0.8; margin-bottom:6px; }
.hero button { background:#ffffff; color:#111111; border:none; border-radius:0; padding:11px 26px;
font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; cursor:default; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:20px 40px; }
.card { display:flex; flex-direction:column; gap:6px; }
.thumb { width:100%; height:118px; border-radius:0; }
.t1 { background:linear-gradient(135deg,#cfd6d1,#8d9791 55%,#565f5a); }
.t2 { background:linear-gradient(135deg,#e3dccb,#b7a883 55%,#7a6a49); }
.t3 { background:linear-gradient(135deg,#d8d2d5,#9b9096 55%,#4c4448); }
.card .tag { font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#767676; margin-top:4px; }
.card .artist { font-family:'Cormorant Garamond', Georgia, serif; font-size:17px; font-weight:400; margin:0; }
.card .title { font-size:13px; font-weight:500; color:#333333; margin:0; }
.row2 { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.edition { display:inline-flex; background:#f8f7f5; color:#555555; font-size:10px; font-weight:400;
letter-spacing:0.1em; text-transform:uppercase; padding:5px 9px; }
.edition b { color:#c4a35a; font-weight:400; }
.price { font-size:16px; font-weight:400; color:#111111; }
footer { height:56px; background:#1a1a1a; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; font-size:11px; letter-spacing:0.06em; }
footer span.muted { color:#a0a0a0; }
</style></head>
<body>
<nav>
<p class="brand">Artphotolimited</p>
<div class="navlinks"><span>Landscape</span><span>Portrait</span><span>Abstract</span><span>Documentary</span><span>Artists</span></div>
<div class="navicons"><span>⚲</span><span>👜</span></div>
</nav>
<section class="hero">
<span class="cap">Limited Edition Collection</span>
<h1>Autumn Light</h1>
<span class="sub">Limited to 25 Prints — From £195</span>
<button>View Collection</button>
</section>
<section class="cards">
<div class="card">
<div class="thumb t1"></div>
<span class="tag">Landscape</span>
<p class="artist">Helena Voss</p>
<p class="title">Northern Field, No. 3</p>
<div class="row2"><span class="edition"><b>5</b> of 25 remaining</span></div>
<div class="row2"><span class="price">£245</span></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<span class="tag">Documentary</span>
<p class="artist">Marcus Reid</p>
<p class="title">Harbor Light, Study II</p>
<div class="row2"><span class="edition"><b>12</b> of 30 remaining</span></div>
<div class="row2"><span class="price">£195</span></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<span class="tag">Portrait</span>
<p class="artist">Alex Moreau</p>
<p class="title">Quiet Room, Grey</p>
<div class="row2"><span class="edition"><b>3</b> of 15 remaining</span></div>
<div class="row2"><span class="price">£310</span></div>
</div>
</section>
<footer>
<span>© Artphotolimited</span>
<span class="muted">Artists · Categories · Certificates of Authenticity</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00adf7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00adf7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87d5f6; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7b61ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00adf7; color: #000000;
border: 1px solid #7b61ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00adf7; color: #000000;
border: 1px solid #27b9f7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87d5f6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #14a1f8; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191a1f; box-sizing:border-box;
font-family:"Pretendard","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { font-size:18px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-size:15px; color:#1a1b1e; }
.tag { font-size:12px; font-weight:600; color:#7b61ff; }
.hero { background:#dfe7e4; text-align:center; padding:36px 40px; }
.hero h1 { font-size:44px; font-weight:500; line-height:1.2; margin:0 0 12px; }
.hero h1 .hl { color:#00adf7; }
.cta { display:inline-block; color:#28292d; border-bottom:1px solid #28292d; font-size:16px; padding-bottom:2px; }
.labels { display:flex; gap:30px; padding:20px 40px 10px; }
.labels .item span.idx { color:#7b61ff; font-size:14px; font-weight:500; margin-right:4px; }
.labels .item { font-size:14px; color:#191a1f; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 40px 24px; }
.card { background:#f4f6f9; border-radius:24px; padding:16px; }
.card h3 { font-size:16px; font-weight:500; margin:0 0 6px; }
.card p { font-size:12px; color:#5d5d60; margin:0; }
.data { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px 24px; }
.dcard { background:#c7e1ff; border-radius:32px; padding:16px; text-align:center; }
.dcard .num { font-size:26px; font-weight:600; }
.dcard .lbl { font-size:12px; color:#191a1f; }
.dot { display:inline-block; width:10px; height:10px; border-radius:9999px; background:#00adf7; margin-right:4px; }
</style></head>
<body>
<nav>
<span class="logo">Humanscape</span>
<div class="navlinks"><span>About Us</span><span>Our Business</span><span>Career</span></div>
<span class="tag">we're hiring</span>
</nav>
<section class="hero">
<h1>eXploring human <span class="hl">Life</span> through data-driven Intelligence</h1>
<span class="cta">eXplore Our Business</span>
</section>
<div class="labels">
<div class="item"><span class="idx">1.</span>Built on Healthcare Network</div>
<div class="item"><span class="idx">2.</span>Powered by Global User Base</div>
<div class="item"><span class="idx">3.</span>Scaled by Data Intelligence</div>
</div>
<div class="cards">
<div class="card"><h3>AI Growth Monitoring</h3><p>Track developmental milestones with data.</p></div>
<div class="card"><h3>Developmental Care</h3><p>Personalized care pathways for every stage.</p></div>
<div class="card"><h3>Care Navigation</h3><p>Guidance for patients with serious illness.</p></div>
</div>
<div class="data">
<div class="dcard"><div class="num"><span class="dot"></span>1,800+</div><div class="lbl">Healthcare Network</div></div>
<div class="dcard"><div class="num"><span class="dot"></span>2.5M+</div><div class="lbl">Global User Base</div></div>
<div class="dcard"><div class="num"><span class="dot"></span>230M+</div><div class="lbl">Data Intelligence</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2d72d2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2d72d2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9bbae5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111418; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d72d2; color: #111418;
border: 1px solid #111418; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2d72d2; color: #f5f5f5;
border: 1px solid #4d87d8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9bbae5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2963b4; color: #111418;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c2127; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:212px; background:#111418; padding:34px 40px; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:0; top:0; width:420px; height:212px;
background-image:
linear-gradient(rgba(45,114,210,0.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(45,114,210,0.18) 1px, transparent 1px);
background-size:28px 28px; opacity:0.7; }
.hero .kicker { color:#5f6b7c; font-size:13px; font-weight:400; margin:0 0 8px; position:relative; }
.hero h1 { color:#ffffff; font-size:28px; font-weight:400; line-height:1.2; margin:0 0 16px;
max-width:520px; position:relative; }
.hero .row { display:flex; gap:10px; position:relative; }
.hero .btn-blue { background:#2d72d2; color:#ffffff; border:none; border-radius:4px;
padding:4px 16px; height:30px; font-size:14px; font-weight:500; display:flex; align-items:center; }
.hero .btn-ghost { background:transparent; color:#ffffff; border:1px solid #5f6b7c; border-radius:4px;
padding:4px 16px; height:30px; font-size:14px; display:flex; align-items:center; }
.docs { display:flex; height:428px; }
.dside { width:190px; flex-shrink:0; border-right:1px solid #eaeef2; padding:18px 14px; }
.dside .grp { font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:#5f6b7c;
padding:10px 8px 4px; }
.dside .link { padding:6px 8px; font-size:13px; color:#1c2127; border-radius:4px; }
.dside .link.active { color:#215db0; background:#eef3fc; }
.dmain { flex:1; padding:22px 28px; }
.dmain h2 { font-size:22px; font-weight:600; margin:0 0 6px; }
.dmain .sub { font-size:14px; color:#5f6b7c; margin:0 0 18px; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.card { background:#ffffff; border-radius:4px; padding:16px 18px;
box-shadow:rgba(0,0,0,0.15) 0px 0px 0px 1px, rgba(0,0,0,0.02) 0px 0px 5px 0px;
height:118px; }
.card .tag { font-size:11px; color:#5f6b7c; margin-bottom:6px; }
.card .name { font-size:15px; font-weight:600; color:#1c2127; margin-bottom:6px; }
.card .desc { font-size:13px; color:#215db0; line-height:1.4; }
</style></head>
<body>
<section class="hero">
<p class="kicker">Palantir Blueprint · v6.2</p>
<h1>A React-based UI toolkit for the web,<br>optimized for complex data-dense interfaces.</h1>
<div class="row">
<div class="btn-blue">Get started</div>
<div class="btn-ghost">View on GitHub</div>
</div>
</section>
<div class="docs">
<aside class="dside">
<div class="grp">Foundations</div>
<div class="link">Colors</div>
<div class="link">Typography</div>
<div class="link active">Components</div>
<div class="grp">Components</div>
<div class="link">Button</div>
<div class="link">Card</div>
<div class="link">Table</div>
<div class="link">Select</div>
<div class="link">Dialog</div>
</aside>
<div class="dmain">
<h2>Components</h2>
<p class="sub">Optimized for building complex data-dense interfaces.</p>
<div class="cards">
<div class="card"><div class="tag">CORE</div><div class="name">Card</div><div class="desc">A bordered container with configurable elevation and padding.</div></div>
<div class="card"><div class="tag">CORE</div><div class="name">Table</div><div class="desc">A performant, scrollable data table with resizable columns.</div></div>
<div class="card"><div class="tag">SELECT</div><div class="name">Select</div><div class="desc">A dropdown list for choosing one item from a set of options.</div></div>
<div class="card"><div class="tag">DATETIME</div><div class="name">DateRangeInput</div><div class="desc">An input for selecting a range between two dates.</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb0b22; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb0b22; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f08c96; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb0b22; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb0b22; color: #f5f5f5;
border: 1px solid #ed3044; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f08c96; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee3245; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #ececec; }
.brand { font-size:19px; font-weight:800; letter-spacing:-0.4px; }
.brand b { color:#EB0B22; }
.actions { display:flex; gap:10px; align-items:center; }
.btn-out { border:1px solid #cfcfcf; border-radius:8px; padding:7px 16px; font-size:13px; font-weight:600; }
.btn-solid { background:#EB0B22; color:#fff; border-radius:8px; padding:7px 16px; font-size:13px; font-weight:700; }
.channels { display:flex; gap:26px; padding:0 28px; height:44px; align-items:center; border-bottom:1px solid #f0f0f0; }
.ch { font-size:14px; color:#666666; padding-bottom:12px; position:relative; }
.ch.active { color:#000000; font-weight:700; }
.ch.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#EB0B22; border-radius:2px; }
main { display:grid; grid-template-columns:1.3fr 1fr; gap:0; height:496px; }
.feed { padding:18px 24px; border-right:1px solid #f0f0f0; overflow:hidden; }
.lead { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid #f2f2f2; }
.lead .thumb { width:104px; height:78px; border-radius:8px; flex:0 0 auto;
background:linear-gradient(135deg,#dedede,#c9c9c9); }
.lead .meta { display:flex; gap:8px; align-items:center; font-size:11px; color:#8a8a8a; margin-bottom:6px; }
.badge-break { background:#EB0B22; color:#fff; font-weight:700; font-size:10px; letter-spacing:0.05em;
text-transform:uppercase; border-radius:4px; padding:2px 6px; }
.lead h3 { font-size:16px; font-weight:700; margin:0 0 4px; line-height:1.3; }
.lead p { font-size:12px; color:#3a3a3a; margin:0; line-height:1.4; }
.feature { position:relative; height:150px; border-radius:8px; overflow:hidden; margin-bottom:16px;
background:linear-gradient(145deg,#3a3a3a,#111); display:flex; align-items:flex-end; padding:16px; }
.feature::before { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0)); }
.feature h2 { position:relative; color:#fff; font-size:19px; font-weight:700; margin:0; max-width:70%; line-height:1.25; }
.side { padding:18px 22px; }
.side h4 { font-size:12px; font-weight:700; color:#8a8a8a; text-transform:uppercase; letter-spacing:0.06em; margin:0 0 10px; }
.srow { display:flex; justify-content:space-between; align-items:flex-start; padding:10px 0; border-bottom:1px solid #f2f2f2; gap:10px; }
.srow .n { font-size:20px; font-weight:800; color:#d8d8d8; width:22px; }
.srow h5 { font-size:13px; font-weight:600; margin:0; line-height:1.35; }
.srow span { font-size:10.5px; color:#999; }
footer { height:44px; border-top:1px solid #eee; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; font-size:11px; color:#8a8a8a; }
</style></head>
<body>
<header>
<p class="brand"><b>SmartNews</b></p>
<div class="actions">
<span class="btn-out">Sign in</span>
<span class="btn-solid">Get the app</span>
</div>
</header>
<div class="channels">
<span class="ch active">Top</span>
<span class="ch">World</span>
<span class="ch">Politics</span>
<span class="ch">Tech</span>
<span class="ch">Sports</span>
<span class="ch">Business</span>
</div>
<main>
<div class="feed">
<div class="feature">
<h2>Global chip shortage eases as new fabs come online</h2>
</div>
<div class="lead">
<div class="thumb"></div>
<div>
<div class="meta"><span class="badge-break">Breaking</span><span>Metro Wire · 2m ago</span></div>
<h3>City council approves new transit funding package</h3>
<p>Officials say the plan will expand coverage across three districts by next spring.</p>
</div>
</div>
<div class="lead">
<div class="thumb"></div>
<div>
<div class="meta"><span>Daily Ledger · 41m ago</span></div>
<h3>Regional exporters report steady quarterly growth</h3>
<p>Analysts point to stabilizing shipping costs as the main driver.</p>
</div>
</div>
<div class="lead">
<div class="thumb"></div>
<div>
<div class="meta"><span>Harbor Times · 1h ago</span></div>
<h3>New coastal park opens after two-year renovation</h3>
<p>The site adds walking trails and a restored wetland area.</p>
</div>
</div>
</div>
<div class="side">
<h4>Trending Now</h4>
<div class="srow"><span class="n">01</span><div><h5>Central bank holds rates steady for third straight month</h5><span>Finance Daily</span></div></div>
<div class="srow"><span class="n">02</span><div><h5>Startup unveils battery with twice the charge cycles</h5><span>Tech Wire</span></div></div>
<div class="srow"><span class="n">03</span><div><h5>League announces expanded playoff format for next season</h5><span>Sports Ledger</span></div></div>
<div class="srow"><span class="n">04</span><div><h5>Researchers map coral recovery across the reef system</h5><span>Science Now</span></div></div>
</div>
</main>
<footer>
<span>Delivering quality information, fast.</span>
<span>Top · World · Politics · Tech · Sports · Business</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #295eff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #295eff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99b1fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #295eff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #295eff; color: #f5f5f5;
border: 1px solid #4a76fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99b1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4b78ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0f141a; box-sizing:border-box;
font-family:"Open Sans", "Segoe UI", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.side { width:216px; flex:0 0 216px; background:#ffffff; border-right:1px solid #8c8c94;
padding:16px 0; display:flex; flex-direction:column; }
.side .logo { padding:0 20px 16px; font-size:14px; font-weight:600; color:#0f141a; border-bottom:1px solid #8c8c94; margin-bottom:8px; }
.navitem { padding:9px 20px; font-size:14px; color:#424650; border-left:3px solid transparent; }
.navitem.active { color:#295eff; border-left:3px solid #295eff; background:#f4f7ff; font-weight:600; }
.navsection { padding:14px 20px 6px; font-size:11px; font-weight:600; color:#424650; text-transform:uppercase; letter-spacing:0.04em; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height:52px; border-bottom:1px solid #8c8c94; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.crumb { font-size:14px; color:#424650; }
.crumb b { color:#0f141a; font-weight:600; }
.searchbox { width:220px; height:28px; border:1px solid #8c8c94; border-radius:8px; font-size:12px;
color:#424650; display:flex; align-items:center; padding:0 10px; }
.content { flex:1; padding:20px 24px; overflow:hidden; }
.pagehead { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.pagehead h1 { font-size:20px; font-weight:600; letter-spacing:-0.2px; margin:0; }
.pagehead p { font-size:14px; color:#424650; margin:4px 0 0; }
.btn-primary { background:#295eff; color:#ffffff; border:none; border-radius:8px; padding:8px 16px;
font-size:14px; font-weight:600; white-space:nowrap; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.stat { border:1px solid #8c8c94; border-radius:12px; padding:12px 14px; }
.stat .label { font-size:12px; color:#424650; }
.stat .value { font-size:20px; font-weight:600; margin-top:4px; }
.stat .value.up { color:#295eff; }
table { width:100%; border-collapse:collapse; font-size:14px; }
thead th { text-align:left; font-weight:600; color:#424650; font-size:12px; text-transform:uppercase;
letter-spacing:0.03em; padding:8px 10px; border-bottom:1px solid #8c8c94; }
tbody td { padding:10px 10px; border-bottom:1px solid #e5e7eb; color:#0f141a; }
.status { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.ok { background:#1a7a3d; }
.dot.warn { background:#946200; }
.mono { font-family:"Courier New", monospace; font-size:13px; color:#424650; }
</style></head>
<body>
<div class="app">
<div class="side">
<div class="logo">AWS Cloudscape</div>
<div class="navsection">Compute</div>
<div class="navitem active">Instances</div>
<div class="navitem">Auto Scaling</div>
<div class="navitem">Images</div>
<div class="navsection">Storage</div>
<div class="navitem">Volumes</div>
<div class="navitem">Snapshots</div>
<div class="navsection">Network</div>
<div class="navitem">Load Balancers</div>
<div class="navitem">Security Groups</div>
</div>
<div class="main">
<div class="topbar">
<div class="crumb">Compute > <b>Instances</b></div>
<div class="searchbox">Find instances</div>
</div>
<div class="content">
<div class="pagehead">
<div>
<h1>Instances</h1>
<p>Manage and monitor your running compute resources</p>
</div>
<button class="btn-primary">Launch instance</button>
</div>
<div class="stats">
<div class="stat"><div class="label">Running</div><div class="value up">18</div></div>
<div class="stat"><div class="label">Stopped</div><div class="value">4</div></div>
<div class="stat"><div class="label">Alarms</div><div class="value">2</div></div>
<div class="stat"><div class="label">Est. monthly cost</div><div class="value">$1,240</div></div>
</div>
<table>
<thead>
<tr><th>Name</th><th>Instance ID</th><th>Type</th><th>Region</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>web-frontend-01</td><td class="mono">i-0a2f9c1e</td><td>t3.medium</td><td>us-east-1</td><td><span class="status"><span class="dot ok"></span>Running</span></td></tr>
<tr><td>api-worker-02</td><td class="mono">i-0f8d21ab</td><td>m5.large</td><td>us-east-1</td><td><span class="status"><span class="dot ok"></span>Running</span></td></tr>
<tr><td>batch-job-03</td><td class="mono">i-0c771bde</td><td>c5.xlarge</td><td>us-west-2</td><td><span class="status"><span class="dot warn"></span>Stopping</span></td></tr>
<tr><td>cache-node-01</td><td class="mono">i-0d34f902</td><td>r5.large</td><td>eu-west-1</td><td><span class="status"><span class="dot ok"></span>Running</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3621; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3621; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #fa9f96; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b2026; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3621; color: #0b2026;
border: 1px solid #0b2026; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3621; color: #f5f5f5;
border: 1px solid #fd5543; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #fa9f96; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d83222; color: #0b2026;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1B3139; box-sizing:border-box;
font-family:"DM Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:500; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; }
.btn-lava { background:#FF3621; color:#fff; border-radius:0; padding:8px 24px; font-size:14px; font-weight:500; }
.hero { padding:14px 40px 20px; }
.hero h1 { font-size:44px; font-weight:500; line-height:1.1; margin:0 0 10px; max-width:640px; }
.hero p { font-size:16px; color:#1B3139; opacity:0.7; max-width:440px; margin:0 0 14px; }
.row { display:flex; gap:10px; }
.btn-navy { background:#1B3139; color:#fff; padding:8px 24px; font-size:14px; font-weight:500; }
.darkband { background:#0B2026; padding:22px 40px; display:flex; gap:8px; }
.tab { border-radius:20px; padding:9px 16px; font-size:14px; font-weight:500; color:#fff; background:rgba(237,242,248,0.1); }
.tab.active { background:#fff; color:#1B3139; font-weight:700; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:20px 40px 26px; }
.card { border:1px solid #EEEDE9; padding:16px; }
.card h3 { font-size:18px; font-weight:400; margin:0 0 6px; }
.card p { font-size:13px; color:#1B3139; opacity:0.75; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Databricks</p>
<div class="navlinks"><span>Platform</span><span>Database</span><span>AI</span><span>BI</span></div>
<button class="btn-lava">Try Databricks</button>
</nav>
<section class="hero">
<h1>The database your AI agents deserve</h1>
<p>Build and run apps, agents, and AI on your data — on one unified lakehouse platform.</p>
<div class="row">
<button class="btn-lava">Start free trial</button>
<button class="btn-navy">See demo</button>
</div>
</section>
<div class="darkband">
<span class="tab active">Platform</span>
<span class="tab">Database</span>
<span class="tab">AI</span>
<span class="tab">BI</span>
<span class="tab">Governance</span>
</div>
<div class="cards">
<div class="card"><h3>Data Engineering</h3><p>Orchestrate, transform, and ingest at any scale.</p></div>
<div class="card"><h3>Data Warehousing</h3><p>Serverless SQL with lakehouse economics.</p></div>
<div class="card"><h3>Unity Catalog</h3><p>Governance across every workspace and cloud.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; color: #afafaf; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 20px; background: #000000; color: #ffffff;
border: none; border-radius: 999px; padding: {spacing.md} {spacing.md};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 20px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 999px;
padding: {spacing.md} {spacing.md}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; background: #efefef; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #afafaf; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbdbdb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:14px; font-weight:500; }
.pill { border-radius:999px; padding:10px 20px; font-size:14px; font-weight:600; }
.pill-blk { background:#000000; color:#ffffff; }
.hero { padding:26px 32px 0; }
.hero h1 { font-size:46px; font-weight:700; letter-spacing:-1px; margin:0 0 22px; max-width:560px; line-height:1.05; }
.reqcard { background:#efefef; border-radius:14px; padding:14px; display:flex; gap:0; max-width:520px; }
.reqfield { flex:1; background:#ffffff; border-radius:10px; padding:12px 16px; }
.reqfield + .reqfield { margin-left:10px; }
.reqfield .lbl { font-size:12px; color:#5e5e5e; }
.reqfield .val { font-size:14px; font-weight:600; margin-top:2px; }
.reqbtn { border-radius:10px; background:#000000; color:#fff; font-size:14px; font-weight:600;
display:flex; align-items:center; justify-content:center; padding:0 22px; margin-left:10px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:28px 32px 0; }
.card { display:flex; flex-direction:column; gap:10px; }
.illus { aspect-ratio:4/3; border-radius:12px; position:relative; overflow:hidden; }
.i1 { background:#efefef; }
.i2 { background:#f3f3f3; }
.i3 { background:#e2e2e2; }
.shape { position:absolute; border-radius:999px; }
.i1 .shape { width:70px; height:70px; background:#000000; left:30px; top:30px; }
.i1 .shape2 { position:absolute; width:110px; height:12px; background:#000000; left:110px; bottom:40px; border-radius:999px; }
.i2 .shape { width:130px; height:130px; border:10px solid #000000; border-radius:999px; left:20px; top:14px; background:transparent; }
.i3 .shape { width:0; height:0; left:40px; top:36px; border-left:60px solid transparent; border-right:60px solid transparent; border-bottom:100px solid #000000; }
.card .tag { font-size:12px; font-weight:700; color:#5e5e5e; }
.card h3 { font-size:18px; font-weight:700; margin:0; }
.card .link { font-size:13px; color:#0000ee; font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">Uber</div>
<div class="navlinks"><span>Ride</span><span>Drive</span><span>Business</span><span>About</span></div>
<div class="pill pill-blk">Log in</div>
</nav>
<div class="hero">
<h1>Go anywhere with Uber</h1>
<div class="reqcard">
<div class="reqfield"><div class="lbl">Pickup location</div><div class="val">Current location</div></div>
<div class="reqfield"><div class="lbl">Dropoff location</div><div class="val">Where to?</div></div>
<div class="reqbtn">See prices</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="illus i1"><div class="shape"></div><div class="shape2"></div></div><div class="tag">RIDE</div><h3>Go where you need to</h3><span class="link">Get a ride →</span></div>
<div class="card"><div class="illus i2"><div class="shape"></div></div><div class="tag">DRIVE</div><h3>Earn on your schedule</h3><span class="link">Start driving →</span></div>
<div class="card"><div class="illus i3"><div class="shape"></div></div><div class="tag">BUSINESS</div><h3>Move your team, together</h3><span class="link">Get Uber for Business →</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #c8102e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1a1a1a;
border: 1px solid #c8102e; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f7dee2; color: #c8102e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.topnav { height:56px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #f0f0f0; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:0.2px; }
.icons { display:flex; align-items:center; gap:18px; }
.icons span { width:18px; height:18px; border-radius:4px; background:#1a1a1a; opacity:0.75; display:inline-block; }
.cart-dot { position:relative; }
.cart-dot::after { content:''; position:absolute; top:-4px; right:-6px; width:14px; height:14px; border-radius:999px;
background:#c8102e; }
.subnav { height:40px; flex:0 0 auto; display:flex; align-items:center; gap:26px; padding:0 28px;
border-bottom:1px solid #f0f0f0; font-size:13px; font-weight:500; color:#666666; }
.subnav .active { color:#1a1a1a; border-bottom:2px solid #c8102e; padding-bottom:11px; margin-bottom:-1px; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:20px 28px 0; min-height:0; }
.hero { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; background:#f7f7f7;
border-radius:8px; padding:20px 28px; margin-bottom:18px; }
.hero-text .badge { display:inline-block; background:#c8102e; color:#ffffff; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:3px 10px; border-radius:999px; margin-bottom:8px; }
.hero-text h1 { font-size:22px; font-weight:700; margin:0 0 6px; line-height:1.3; max-width:340px; }
.hero-text p { font-size:13px; color:#333333; margin:0 0 12px; max-width:340px; }
.hero-cta { background:#c8102e; color:#ffffff; border:none; border-radius:8px; padding:10px 22px;
font-weight:600; font-size:14px; }
.hero-art { width:150px; height:96px; border-radius:12px;
background:linear-gradient(135deg,#c8102e 0%,#7a0a1c 55%,#1a1a1a 100%); position:relative; flex:0 0 auto; }
.hero-art::after { content:''; position:absolute; inset:14px; border:2px solid rgba(255,255,255,0.35); border-radius:8px; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; min-height:0; }
.card { border:1px solid #f0f0f0; border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:6px; position:relative; }
.card .thumb { aspect-ratio:1/1; border-radius:4px; margin-bottom:2px; }
.thumb.t1 { background:linear-gradient(150deg,#e0e0e0,#c8102e 120%); }
.thumb.t2 { background:linear-gradient(150deg,#e0e0e0,#333333 120%); }
.thumb.t3 { background:linear-gradient(150deg,#e0e0e0,#ff8c00 120%); }
.card .badge { position:absolute; top:10px; left:10px; font-size:11px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; color:#fff; padding:2px 8px; border-radius:999px; }
.b-pre { background:#c8102e; }
.b-sold { background:#999999; }
.b-lim { background:#ff8c00; }
.card .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#666666; }
.card h3 { font-size:14px; font-weight:600; margin:0; line-height:1.4; }
.card .price { font-size:18px; font-weight:700; margin:4px 0 0; }
.card .stars { font-size:11px; color:#f5a623; }
footer { flex:0 0 auto; height:56px; background:#1a1a1a; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; font-size:12px; }
footer .links { display:flex; gap:18px; color:#999999; }
</style></head>
<body>
<nav class="topnav">
<p class="brand">Aniplex Usa</p>
<div class="icons"><span></span><span></span><span class="cart-dot"></span></div>
</nav>
<div class="subnav">
<span class="active">Demon Slayer</span><span>Fate</span><span>Gundam</span><span>Sword Art Online</span><span>Evangelion</span>
</div>
<main>
<div class="hero">
<div class="hero-text">
<span class="badge">Pre-Order Event</span>
<h1>Reserve the next drop before it's gone</h1>
<p>Collector-grade figures and apparel from your favorite franchises, shipped straight from the studio.</p>
<button class="hero-cta">Shop Pre-Orders</button>
</div>
<div class="hero-art"></div>
</div>
<div class="grid">
<div class="card">
<span class="badge b-pre">Pre-Order</span>
<div class="thumb t1"></div>
<span class="tag">Figure</span>
<h3>Deluxe Edition Statue — Ver. 2</h3>
<div class="stars">★★★★★ 4.8</div>
<div class="price">$189.00</div>
</div>
<div class="card">
<span class="badge b-lim">Limited</span>
<div class="thumb t2"></div>
<span class="tag">Apparel</span>
<h3>Embroidered Crest Jacket</h3>
<div class="stars">★★★★☆ 4.5</div>
<div class="price">$96.00</div>
</div>
<div class="card">
<span class="badge b-sold">Sold Out</span>
<div class="thumb t3"></div>
<span class="tag">Collectible</span>
<h3>Acrylic Diorama Stand Set</h3>
<div class="stars">★★★★★ 5.0</div>
<div class="price">$54.00</div>
</div>
</div>
</main>
<footer>
<span>© Aniplex Usa</span>
<div class="links"><span>Help</span><span>About</span><span>Privacy</span><span>Terms</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f7; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.nav { height:48px; display:flex; align-items:center; justify-content:center; gap:34px; font-size:12px;
color:rgba(245,245,247,0.8); border-bottom:1px solid rgba(255,255,255,0.08); }
.nav .dot { width:16px; height:16px; border-radius:50%; background:#f5f5f7;
-webkit-mask:none; }
.hero { text-align:center; padding:56px 0 20px; }
.hero h1 { font-size:56px; font-weight:600; line-height:60px; letter-spacing:-0.28px; margin:0 0 8px;
background:linear-gradient(180deg,#fff,#a1a1a6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { font-size:21px; color:#a1a1a6; margin:0 0 22px; }
.ctarow { display:flex; gap:14px; justify-content:center; }
.pill-primary { background:#0071e3; color:#fff; border-radius:980px; padding:11px 21px; font-size:17px; }
.pill-outline { background:transparent; color:#2997ff; border:1px solid #2997ff; border-radius:980px; padding:11px 21px; font-size:17px; }
.stage { margin:30px auto 0; width:640px; height:240px; border-radius:32px; position:relative;
background:radial-gradient(ellipse at 50% 30%, #3a3a3c, #1c1c1e 70%); overflow:hidden; }
.stage::after { content:''; position:absolute; left:50%; top:56%; transform:translateX(-50%);
width:280px; height:170px; border-radius:26px;
background:linear-gradient(160deg,#e8e8ed,#c7c7cc 60%,#9a9aa0);
box-shadow:0 30px 60px rgba(0,0,0,0.5); }
.stage .ring { position:absolute; left:50%; top:56%; transform:translateX(-50%); width:280px; height:170px;
border-radius:26px; border:1px solid rgba(255,255,255,0.25); }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:24px; background:rgba(255,255,255,0.06); }
.tile { background:#000; padding:22px 26px; }
.tile h3 { font-size:20px; font-weight:400; margin:0 0 6px; letter-spacing:0.196px; }
.tile p { font-size:13px; color:#a1a1a6; margin:0 0 10px; }
.tile .cbtn { background:#0071e3; color:#fff; border-radius:980px; padding:6px 15px; font-size:12px; display:inline-block; }
</style></head>
<body>
<nav class="nav">
<span>Apple</span><span>Store</span><span>Mac</span><span>iPad</span><span>iPhone</span><span>Watch</span><span>Support</span>
</nav>
<div class="hero">
<h1>Titanium. So strong. So light. So Pro.</h1>
<p>The ultimate device, reimagined.</p>
<div class="ctarow"><span class="pill-primary">Buy</span><span class="pill-outline">Learn more</span></div>
</div>
<div class="stage"><div class="ring"></div></div>
<div class="tiles">
<div class="tile"><h3>Chip</h3><p>The fastest chip ever in a personal device.</p><span class="cbtn">Learn more</span></div>
<div class="tile"><h3>Display</h3><p>Super Retina XDR, edge to edge.</p><span class="cbtn">Learn more</span></div>
<div class="tile"><h3>Battery</h3><p>All-day battery life. Every day.</p><span class="cbtn">Learn more</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0D0D0D; color: #FFFFFF;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0D0D0D; color: #FFFFFF;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.5px; margin: 0; color: #FFFFFF; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 1.5px; background: #00FFC8; color: #0D0D0D;
border: none; border-radius: 4px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 1.5px; background: transparent; color: #00FFC8;
border: 1px solid #00FFC8; border-radius: 4px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #141414; color: #FFFFFF;
border: 1px solid #4a4a4a; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #7B2FE0; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0D0D0D; color:#FFFFFF; box-sizing:border-box;
font-family:'Rajdhani','Share Tech',-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
.diag { position:absolute; top:0; left:38%; width:1px; height:100%; background:linear-gradient(180deg,transparent,rgba(0,255,200,0.35),transparent); transform:skewX(-12deg); z-index:0; }
.glow { position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(123,47,224,0.25),transparent 70%); right:-140px; top:-140px; z-index:0; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #2E2E2E; }
.brand { font-size:18px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#fff; margin:0; }
.brand span { color:#00FFC8; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:500; color:#808080; letter-spacing:0.3px; }
.navlinks span.on { color:#00FFC8; }
.cart { display:flex; align-items:center; gap:6px; font-size:12px; color:#B8B8B8; }
.cart .dot { width:18px; height:18px; border-radius:3px; background:#00FFC8; color:#0D0D0D; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
main { position:relative; z-index:2; display:grid; grid-template-columns:420px 1fr; gap:0; height:calc(640px - 56px); }
.stage { position:relative; padding:28px; display:flex; flex-direction:column; gap:14px; border-right:1px solid #2E2E2E; }
.badge-row { display:flex; gap:8px; }
.badge-new { background:#7B2FE0; color:#fff; font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.badge-sale { background:#00FFC8; color:#0D0D0D; font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.render { flex:1; border-radius:4px; position:relative; overflow:hidden;
background:
linear-gradient(135deg, #1A1A1A 0%, #141414 60%),
repeating-linear-gradient(115deg, rgba(0,255,200,0.05) 0 2px, transparent 2px 26px); }
.render::before { content:''; position:absolute; left:20%; top:18%; width:60%; height:64%;
background:linear-gradient(160deg,#242424,#1a1a1a 55%,#0d0d0d);
clip-path:polygon(10% 0,100% 6%,92% 100%,0% 92%);
box-shadow:0 0 40px rgba(0,255,200,0.10) inset; }
.render::after { content:''; position:absolute; left:23%; top:44%; width:54%; height:3px; background:#00FFC8; filter:blur(1px); opacity:0.8; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); }
.render .tag { position:absolute; bottom:10px; left:10px; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#5A5A5A; }
.info { padding:28px 36px; overflow:hidden; display:flex; flex-direction:column; gap:16px; }
.cat { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#00FFC8; }
h1 { margin:0; font-size:30px; font-weight:700; letter-spacing:-1px; line-height:1.05; }
.rating { display:flex; align-items:center; gap:8px; font-size:12px; color:#808080; }
.stars { color:#00FFC8; letter-spacing:2px; font-size:13px; }
.price-row { display:flex; align-items:baseline; gap:12px; }
.price { font-size:26px; font-weight:700; letter-spacing:-0.5px; color:#00FFC8; }
.price-from { font-size:11px; color:#808080; text-transform:uppercase; letter-spacing:0.5px; }
.spec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#2E2E2E; border:1px solid #2E2E2E; border-radius:8px; overflow:hidden; }
.spec-item { background:#141414; padding:10px 12px; }
.spec-item .l { font-size:9px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; color:#5A5A5A; margin-bottom:4px; }
.spec-item .v { font-size:13px; font-weight:600; color:#fff; }
.config { display:flex; gap:10px; }
.config-opt { flex:1; border:1px solid #2E2E2E; border-radius:4px; padding:10px 12px; background:#1A1A1A; }
.config-opt.sel { border:2px solid #00FFC8; background:#242424; box-shadow:0 0 12px rgba(0,255,200,0.12); }
.config-opt .t { font-size:11px; font-weight:600; color:#fff; margin-bottom:2px; }
.config-opt .p { font-size:10px; color:#00FFC8; }
.cta-row { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#00FFC8; color:#0D0D0D; border:none; height:46px; font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); display:flex; align-items:center; justify-content:center; }
.btn-secondary { width:150px; background:transparent; border:1px solid #00FFC8; color:#00FFC8; height:46px; font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="diag"></div>
<div class="glow"></div>
<nav>
<p class="brand">Alienware<span>.</span></p>
<div class="navlinks"><span class="on">Laptops</span><span>Desktops</span><span>Monitors</span><span>Accessories</span></div>
<div class="cart">Cart <span class="dot">2</span></div>
</nav>
<main>
<div class="stage">
<div class="badge-row"><span class="badge-new">New</span><span class="badge-sale">Sale</span></div>
<div class="render"><span class="tag">Alienware · Legend 2.0 Chassis</span></div>
</div>
<div class="info">
<span class="cat">Alienware Aurora Line</span>
<h1>x16 R2 Gaming Desktop</h1>
<div class="rating"><span class="stars">★★★★☆</span> 4.4 · 1,208 reviews</div>
<div class="price-row"><span class="price-from">Starting at</span><span class="price">$2,499.00</span></div>
<div class="spec-grid">
<div class="spec-item"><div class="l">GPU</div><div class="v">RTX 4080</div></div>
<div class="spec-item"><div class="l">CPU</div><div class="v">Core i9-14900</div></div>
<div class="spec-item"><div class="l">RAM</div><div class="v">32GB DDR5</div></div>
</div>
<div class="config">
<div class="config-opt sel"><div class="t">1TB SSD</div><div class="p">Included</div></div>
<div class="config-opt"><div class="t">2TB SSD</div><div class="p">+$180</div></div>
<div class="config-opt"><div class="t">4TB SSD</div><div class="p">+$420</div></div>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Configure</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfaf8; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfaf8; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #002360; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fcfaf8; color: #002360;
border: 1px solid #002360; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfaf8; color: #121212;
border: 1px solid #c6c4c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfaf8; color:#121212; box-sizing:border-box;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#002360; }
.brand { font-size:18px; font-weight:500; color:#fff; letter-spacing:0.02em; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#c5d9ed; }
.navlinks span.on { color:#fff; border-bottom:2px solid #1990c6; padding-bottom:20px; }
.cart { width:30px; height:30px; border-radius:9999px; background:#1990c6; color:#fff; font-size:12px;
font-weight:700; display:flex; align-items:center; justify-content:center; }
main { display:flex; height:576px; }
.gallery { width:410px; background:linear-gradient(180deg,#eef4fa 0%,#f6ece2 100%); position:relative;
display:flex; align-items:center; justify-content:center; }
.diffuser { width:140px; height:170px; position:relative; }
.diffuser .base { position:absolute; bottom:0; left:10px; right:10px; height:70px; background:#002360;
border-radius:8px; box-shadow:0 18px 32px rgba(0,35,96,0.25); }
.diffuser .cap { position:absolute; top:0; left:30px; right:30px; height:100px; background:
linear-gradient(180deg,#ffffff, #eef4fa); border-radius:70px 70px 8px 8px; border:1px solid #dedede; }
.diffuser .glow { position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:70px; height:24px;
background:#1990c6; border-radius:9999px; opacity:0.3; filter:blur(4px); }
.badge-scent { position:absolute; top:22px; left:22px; background:#002360; color:#fff; font-size:10px;
font-weight:600; letter-spacing:0.05em; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:32px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#136f99; }
h1 { font-size:24px; font-weight:500; margin:0; letter-spacing:-0.2px; line-height:1.3; }
.stars { font-size:12px; color:#222222; }
.stars .n { color:#6a6a6a; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:500; }
.desc { font-size:13.5px; color:#6a6a6a; line-height:1.6; max-width:340px; }
.scent-row { display:flex; gap:8px; }
.scent { border:1px solid #dedede; border-radius:9999px; padding:7px 16px; font-size:12px; }
.scent.on { border-color:#1990c6; color:#1990c6; background:#eef4fa; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#002360; color:#fff; border:none; border-radius:4px; padding:13px 18px;
font-size:14px; font-weight:500; }
.btn-outline { border:1.5px solid #002360; color:#002360; background:#fff; border-radius:4px; padding:11.5px 16px;
font-size:12.5px; font-weight:500; white-space:nowrap; }
.meta { font-size:11px; color:#929292; }
</style></head>
<body>
<nav>
<div class="brand">Aera</div>
<div class="navlinks"><span class="on">Devices</span><span>Fragrances</span><span>How It Works</span><span>Gifting</span></div>
<div class="cart">2</div>
</nav>
<main>
<div class="gallery">
<span class="badge-scent">Smart Diffusion</span>
<div class="diffuser"><div class="glow"></div><div class="cap"></div><div class="base"></div></div>
</div>
<div class="info">
<span class="cat">Fragrance System</span>
<h1>Aera Home Scent Diffuser + Capsule</h1>
<div class="stars">★★★★★ <span class="n">4.6 · 812 reviews</span></div>
<div class="price-row"><span class="price">$129.00</span></div>
<p class="desc">Precision-engineered diffusion delivers a consistent scent experience for months — app-controlled intensity, no flame, no mess.</p>
<div class="scent-row">
<span class="scent on">Amber Musc</span>
<span class="scent">Fig Leaf</span>
<span class="scent">Sea Salt</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add Device + Capsule</button>
<button class="btn-outline">Gift This</button>
</div>
<span class="meta">Free shipping · 60-day scent guarantee</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3959cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3959cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a0afe3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #304cad; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3959cc; color: #ffffff;
border: 1px solid #304cad; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3959cc; color: #f5f5f5;
border: 1px solid #5772d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a0afe3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3857c7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#32353a; box-sizing:border-box;
font-family:"Hiragino Kaku Gothic ProN", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dcdddd; }
.brand { font-size:17px; font-weight:700; color:#3959cc; }
.navlinks { font-size:13px; color:#686a6d; display:flex; gap:18px; }
.hero { text-align:center; padding:22px 32px 18px; }
h1 { font-size:26px; font-weight:700; margin:0 0 8px; }
.sub { font-size:14px; color:#686a6d; margin:0 0 16px; }
.qcard { max-width:480px; margin:0 auto; background:#ffffff; border:1px solid #dcdddd; border-radius:12px;
padding:24px; box-shadow:0px 1px 4px rgba(22,25,31,0.08); }
.qcard .q { font-size:16px; font-weight:700; margin-bottom:14px; }
.opt { border:1px solid #dcdddd; border-radius:12px; padding:12px 16px; font-size:14px; margin-bottom:8px;
display:flex; justify-content:space-between; align-items:center; }
.opt.on { border:1px solid #8296df; background:#f0f2fc; }
.buttonrow { display:flex; gap:12px; padding:18px 32px 0; justify-content:center; }
.btn-primary { background:#3959cc; color:#ffffff; border-radius:8px; padding:12px 24px; font-size:16px; font-weight:700; }
.btn-accent { background:#27cc91; color:#ffffff; border-radius:8px; padding:12px 24px; font-size:16px; font-weight:700; }
.tags { display:flex; gap:8px; justify-content:center; padding-top:20px; }
.tag { border-radius:4px; padding:2px 8px; font-size:12px; font-weight:700; }
.tag.green { background:#e9faf4; color:#1c9167; }
.tag.blue { background:#f0f2fc; color:#283f91; }
</style></head>
<body>
<nav>
<span class="brand">Ubie</span>
<div class="navlinks"><span>Search by symptom</span><span>Find a hospital</span><span>For healthcare providers</span></div>
</nav>
<section class="hero">
<h1>Just 3 minutes. Developed by doctors.</h1>
<p class="sub">What symptoms are you experiencing? Let's take it one step at a time.</p>
</section>
<div class="qcard">
<div class="q">Have you had headaches recently?</div>
<div class="opt on"><span>Yes, occasionally</span><span>◉</span></div>
<div class="opt"><span>No, never</span><span>○</span></div>
<div class="opt"><span>Not sure</span><span>○</span></div>
</div>
<div class="buttonrow">
<button class="btn-primary">Next</button>
<button class="btn-accent">Check my symptoms</button>
</div>
<div class="tags">
<span class="tag green">Safe and trusted to use</span>
<span class="tag blue">50,000+ medical sources</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0052cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0052cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87ace3; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0052cc; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0052cc; color: #f5f5f5;
border: 1px solid #276cd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87ace3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #296ed4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F7F8F9; color:#172B4D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { background:#fff; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #091E4224; }
.breadcrumb { font-size:13px; color:#626F86; }
.breadcrumb b { color:#172B4D; }
.create { background:#0052CC; color:#fff; font-size:13px; font-weight:600; padding:8px 16px; border-radius:4px; }
.board { display:flex; gap:12px; padding:16px 24px; }
.col { width:225px; flex:0 0 auto; }
.colhead { font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:#44546F; margin-bottom:10px; display:flex; justify-content:space-between; }
.card { background:#fff; border:1px solid #091E420F; border-radius:8px; padding:12px; margin-bottom:8px; box-shadow:0 1px 2px rgba(9,30,66,0.08); }
.csum { font-size:13px; font-weight:500; line-height:1.35; margin-bottom:8px; }
.labels { display:flex; gap:5px; margin-bottom:8px; flex-wrap:wrap; }
.lab { font-size:10px; font-weight:600; padding:2px 6px; border-radius:3px; }
.footer { display:flex; align-items:center; justify-content:space-between; }
.keyrow { display:flex; align-items:center; gap:6px; font-size:11px; color:#44546F; }
.typedot { width:8px; height:8px; border-radius:2px; display:inline-block; }
.avatar { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#8fb8f6,#0052CC); }
.pts { font-size:11px; font-weight:700; color:#44546F; margin-right:4px; }
.lozenge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:3px; text-transform:uppercase; letter-spacing:0.03em; }
</style></head>
<body>
<div class="top">
<div class="breadcrumb">Projects / Mobile Platform / <b>Jira (iOS) Board</b></div>
<div class="create">+ Create</div>
</div>
<div class="board">
<div class="col">
<div class="colhead">To Do <span>4</span></div>
<div class="card"><div class="labels"><span class="lab" style="background:#DCDFE4;color:#44546F;">design</span></div>
<div class="csum">Redesign onboarding flow for new sign-ups</div>
<div class="footer"><span class="keyrow"><span class="typedot" style="background:#36B37E;"></span>MOB-388</span><span class="avatar"></span></div></div>
<div class="card"><div class="labels"><span class="lab" style="background:#F0E6FF;color:#6A3DAA;">epic</span></div>
<div class="csum">Payments SDK v2 migration</div>
<div class="footer"><span class="keyrow"><span class="typedot" style="background:#6A3DAA;"></span>MOB-401</span><span class="avatar"></span></div></div>
</div>
<div class="col">
<div class="colhead">In Progress <span>3</span></div>
<div class="card"><div class="lozenge" style="background:#E9F2FF;color:#0055CC;margin-bottom:8px;display:inline-block;">In Progress</div>
<div class="csum">Fix crash on push-notification tap (iOS 18)</div>
<div class="labels"><span class="lab" style="background:#FFEBE6;color:#AE2A19;">bug</span></div>
<div class="footer" style="margin-top:8px;"><span class="keyrow"><span class="typedot" style="background:#E2483D;"></span>MOB-372</span>
<span><span class="pts">5</span><span class="avatar"></span></span></div></div>
<div class="card"><div class="csum">Refactor auth token refresh logic</div>
<div class="footer"><span class="keyrow"><span class="typedot" style="background:#0052CC;"></span>MOB-390</span><span class="avatar"></span></div></div>
</div>
<div class="col">
<div class="colhead">In Review <span>2</span></div>
<div class="card"><div class="csum">Add dark-mode support to settings screen</div>
<div class="labels"><span class="lab" style="background:#DCDFE4;color:#44546F;">ui</span><span class="lab" style="background:#FFF7D6;color:#7F5F01;">a11y</span></div>
<div class="footer" style="margin-top:8px;"><span class="keyrow"><span class="typedot" style="background:#0052CC;"></span>MOB-355</span><span class="avatar"></span></div></div>
</div>
<div class="col">
<div class="colhead">Done <span>12</span></div>
<div class="card"><div class="lozenge" style="background:#DCFFF1;color:#216E4E;margin-bottom:8px;display:inline-block;">Done</div>
<div class="csum">Update Story point estimates for Sprint 24</div>
<div class="footer"><span class="keyrow"><span class="typedot" style="background:#36B37E;"></span>MOB-330</span><span class="avatar"></span></div></div>
<div class="card"><div class="csum">Ship release notes for v4.2.0</div>
<div class="footer"><span class="keyrow"><span class="typedot" style="background:#36B37E;"></span>MOB-321</span><span class="avatar"></span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #08191b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #08191b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #08191b; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.02em; background: #003399; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.02em; background: #ffffff; color: #08191b;
border: 1px solid #003399; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #08191b;
border: 1px solid #c1c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: #007d00; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#08191b; box-sizing:border-box;
font-family:Akkurat, Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; border-bottom:1px solid #e1e1e1; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.wordmark { font-family:Cambon, Georgia, serif; font-size:19px; letter-spacing:0; }
.cities { display:flex; gap:22px; font-size:13px; color:#323232; }
.cities .on { color:#003399; }
.sections { display:flex; gap:22px; font-size:13px; color:#08191b; }
.crumb { padding:16px 40px 0; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#595959; }
main { display:flex; padding:16px 40px 0; gap:48px; height:460px; }
.art { width:400px; aspect-ratio:4/5; position:relative;
background:
radial-gradient(circle at 60% 30%, rgba(255,255,255,0.06), transparent 50%),
linear-gradient(150deg, #343957 0%, #24283e 55%, #08191b 100%); }
.art::after { content:''; position:absolute; inset:0;
background-image:
linear-gradient(115deg, transparent 40%, rgba(255,125,0,0.18) 41%, rgba(255,125,0,0.18) 43%, transparent 44%),
linear-gradient(70deg, transparent 60%, rgba(255,255,255,0.08) 61%, rgba(255,255,255,0.08) 63%, transparent 64%); }
.status { position:absolute; top:0; left:0; background:#007d00; color:#fff; font-size:11px; font-weight:500;
letter-spacing:0.08em; text-transform:uppercase; padding:2px 8px; }
.detail { flex:1; display:flex; flex-direction:column; padding-top:4px; }
.artist { font-family:Cambon, Georgia, serif; font-size:26px; margin:0 0 2px; }
.work-title { font-size:15px; font-style:italic; color:#323232; margin-bottom:14px; }
.meta-row { font-size:13px; color:#595959; line-height:1.7; margin-bottom:18px; }
.divider { height:1px; background:#e1e1e1; margin:0 0 18px; }
.desc { font-size:13px; color:#323232; line-height:1.7; max-width:400px; margin-bottom:20px; }
.price-block { margin-bottom:20px; }
.price-label { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#7d7d7d; margin-bottom:4px; }
.price { font-family:Cambon, Georgia, serif; font-size:22px; }
.actions { margin-top:auto; display:flex; gap:12px; }
.btn-primary { background:#003399; color:#fff; border:none; height:44px; padding:0 26px; font-size:14px;
letter-spacing:0.02em; }
.btn-secondary { background:#fff; color:#08191b; border:1px solid #08191b; height:44px; padding:0 26px; font-size:14px; }
.press { display:flex; gap:8px; margin-top:16px; }
.tag { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#595959;
background:#f1f1f1; padding:2px 8px; }
footer { border-top:1px solid #e1e1e1; margin-top:8px; padding:12px 40px; display:flex;
justify-content:space-between; font-size:12px; color:#08191b; }
</style></head>
<body>
<nav>
<div class="wordmark">Almine Rech</div>
<div class="cities"><span class="on">Paris</span><span>Brussels</span><span>London</span><span>New York</span></div>
<div class="sections"><span>Exhibitions</span><span>Artists</span><span>Art Fairs</span><span>Press</span></div>
</nav>
<div class="crumb">Artists › Represented Artists</div>
<main>
<div class="art"><span class="status">On View</span></div>
<div class="detail">
<h1 class="artist">Mira Solheim</h1>
<p class="work-title">Untitled (Field Study VII), 2023</p>
<div class="meta-row">
Oil and pigment on linen<br>
190 × 140 cm / 74.8 × 55.1 in<br>
Edition of 1 + 1 AP
</div>
<div class="divider"></div>
<p class="desc">Part of the Field Study series exploring topography and memory through
layered pigment and worked linen. Held in a private Paris collection since acquisition.</p>
<div class="price-block">
<div class="price-label">Price on Request</div>
<div class="price">Available for viewing</div>
</div>
<div class="actions">
<button class="btn-primary">Enquire</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
<div class="press"><span class="tag">Feature</span><span class="tag">Interview · Frieze</span></div>
</div>
</main>
<footer>
<span>© Almine Rech</span>
<span>Gallery · Artists · Exhibitions · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0182ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0182ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c1fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f6f9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0182ff; color: #f6f6f9;
border: 1px solid #f6f6f9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0182ff; color: #f5f5f5;
border: 1px solid #2894fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2895fe; color: #f6f6f9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#17191c; box-sizing:border-box;
font-family:Pretendard, -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #e8ebed; }
.brand { font-size:18px; font-weight:800; }
.search { flex:1; max-width:420px; margin:0 24px; background:#f6f6f6; border-radius:45px;
padding:0 70px 0 16px; height:36px; display:flex; align-items:center; color:#525661; font-size:13px; }
.navlinks { display:flex; gap:18px; font-size:14px; }
.navlinks a { color:#0182ff; }
.catrow { display:flex; gap:8px; padding:14px 28px 0; }
.chip { border-radius:30px; padding:6px 14px; background:#e8ebed; color:#757b8a; font-size:13px; }
.chip.active { background:#17191c; color:#fff; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:16px 28px 0; }
.room { background:#f6f6f9; border-radius:10px; overflow:hidden; }
.room .thumb { height:78px; background:linear-gradient(160deg,#cfe0ff,#0182ff55); position:relative; }
.room .live { position:absolute; top:6px; left:6px; background:#ff3b30; color:#fff; font-size:9.5px;
font-weight:700; border-radius:3px; padding:2px 5px; }
.room .info { padding:8px 10px; }
.room h4 { font-size:12.5px; font-weight:600; margin:0 0 3px; }
.room span { font-size:10.5px; color:#757b8a; }
.esrow { display:flex; gap:14px; padding:20px 28px 0; }
.escard { flex:1; background:#17191c; border-radius:10px; padding:16px; color:#fff; }
.escard h3 { font-size:14px; font-weight:700; margin:0 0 6px; }
.escard span { font-size:11px; color:#a9afb3; }
footer { position:absolute; bottom:0; width:960px; padding:12px 28px; border-top:1px solid #e8ebed;
display:flex; justify-content:space-between; font-size:11px; color:#757b8a; }
</style></head>
<body>
<nav>
<p class="brand">SOOP</p>
<div class="search">Search streams, hosts, categories</div>
<div class="navlinks"><span>Home</span><span>Community</span><a>Esports</a></div>
</nav>
<div class="catrow">
<span class="chip active">All</span><span class="chip">Just Chatting</span><span class="chip">Gaming</span>
<span class="chip">Esports</span><span class="chip">Music</span>
</div>
<div class="grid">
<div class="room"><div class="thumb"><span class="live">LIVE</span></div><div class="info"><h4>Streaming today too!</h4><span>1.2k viewers</span></div></div>
<div class="room"><div class="thumb"><span class="live">LIVE</span></div><div class="info"><h4>Looking for co-op players</h4><span>842 viewers</span></div></div>
<div class="room"><div class="thumb"><span class="live">LIVE</span></div><div class="info"><h4>Evening chill chat</h4><span>356 viewers</span></div></div>
<div class="room"><div class="thumb"><span class="live">LIVE</span></div><div class="info"><h4>New song cover live</h4><span>2.4k viewers</span></div></div>
</div>
<div class="esrow">
<div class="escard"><h3>Esports Finals Tonight</h3><span>Exclusive coverage on SOOP Esports</span></div>
<div class="escard"><h3>This Week's Highlights</h3><span>Catch up on plays you missed</span></div>
</div>
<footer>
<span>Find the stream you want to watch right now.</span>
<span>SOOP · Community · Esports</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1e1e1e;
border: 1px solid #1e1e1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1e1e1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1F1F1F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.grad { background:linear-gradient(90deg,#4285F4,#9B72CB,#D96570); }
.gradtext { background:linear-gradient(90deg,#4285F4,#9B72CB,#D96570); -webkit-background-clip:text;
background-clip:text; color:transparent; }
.phone { width:360px; height:640px; background:#fff; padding:26px 18px; position:relative; border-right:1px solid #E3E3E3; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.modelsel { font-size:15px; font-weight:500; }
.sparkle { font-size:16px; }
.userchip { align-self:flex-end; background:#F0F4F9; border-radius:20px 20px 4px 20px; padding:10px 14px;
font-size:14px; max-width:78%; margin-left:auto; margin-bottom:16px; }
.row { display:flex; }
.assistant { display:flex; gap:8px; margin-bottom:16px; }
.assistant .body { font-size:14px; line-height:1.55; }
.shimmer { background:linear-gradient(90deg,transparent,rgba(66,133,244,0.15),transparent); }
.chiprow { display:flex; gap:8px; overflow:hidden; margin-bottom:16px; }
.chiprow span { background:#F0F4F9; border:1px solid #E3E3E3; border-radius:18px; padding:8px 12px; font-size:12px; font-weight:500; white-space:nowrap; }
.chiprow span.g { border:1px solid transparent; background:linear-gradient(#F0F4F9,#F0F4F9) padding-box,
linear-gradient(90deg,#4285F4,#9B72CB,#D96570) border-box; }
.promptbar { position:absolute; left:18px; right:18px; bottom:20px; height:52px; border-radius:26px; background:#F0F4F9;
display:flex; align-items:center; padding:0 14px; gap:10px;
border:1.5px solid transparent; background-image:linear-gradient(#F0F4F9,#F0F4F9),
linear-gradient(90deg,#4285F4,#9B72CB,#D96570); background-origin:border-box; background-clip:padding-box, border-box; }
.promptbar .ph { font-size:14px; color:#5F6368; flex:1; }
.sendbtn { width:32px; height:32px; border-radius:50%; background:#4285F4; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:14px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:500; letter-spacing:-0.2px; margin:0; }
.tag { font-size:14px; color:#5F6368; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:10px; border:1px solid #E3E3E3; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#5F6368; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:400; }
.typeblock .t2 { font-size:13px; color:#5F6368; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:500; padding:6px 12px; border-radius:999px;
background:#F0F4F9; border:1px solid #E3E3E3; color:#5F6368; }
.footer { margin-top:auto; border-top:1px solid #E3E3E3; padding-top:16px; font-size:11px; color:#9AA0A6; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="topbar"><span>☰</span><span class="modelsel">Gemini ⌄</span><span>👤</span></div>
<div class="row"><div class="userchip">Summarize this week's product roadmap in three bullets.</div></div>
<div class="assistant">
<span class="sparkle gradtext">✦</span>
<div class="body">Here's the roadmap in three parts: onboarding redesign ships this sprint, the search rewrite lands next week, and the billing migration is scheduled for the following cycle.<span class="shimmer">▍</span></div>
</div>
<div class="chiprow">
<span class="g">✦ Brainstorm ideas</span><span>Summarize a document</span><span>Help me write</span>
</div>
<div class="promptbar"><span class="ph">Ask Gemini</span><div class="sendbtn">↑</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Google Gemini (iOS)<span class="gradtext">.</span></h1>
<p class="tag">A conversation treated as a document — plain text answers, a rationed gradient sparkle, and a listening ring on the composer.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#4285F4"></div><small>#4285F4</small></div>
<div class="sw"><div class="chip2" style="background:#9B72CB"></div><small>#9B72CB</small></div>
<div class="sw"><div class="chip2" style="background:#D96570"></div><small>#D96570</small></div>
<div class="sw"><div class="chip2" style="background:#F0F4F9"></div><small>#F0F4F9</small></div>
<div class="sw"><div class="chip2" style="background:#1F1F1F"></div><small>#1F1F1F</small></div>
</div>
<div class="typeblock">
<div class="t1">Ask Gemini</div>
<div class="t2">Google Sans / Inter · 16pt / 1.55 · answers read like prose, not chat snippets</div>
</div>
<div class="taglist">
<span>Gradient sparkle ✦</span><span>Streaming shimmer</span><span>Gradient focus ring</span>
<span>Side drawer nav</span><span>No bottom tabs</span>
</div>
<div class="footer">Document-not-feed canvas · gradient rationed to brand moments only</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f7f3; color: #202020;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f7f3; color: #202020;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.35px; margin: 0; color: #202020; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #646464; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; background: #ea2804; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; background: #ffffff; color: #202020;
border: 1px solid #ea2804; border-radius: 9999px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #202020;
border: 1px solid #c3c1be; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646464; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; background: #2b9a66; color: #fcfcfc;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f7f3; color:#202020; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid rgba(32,32,32,.12); }
.brand { font-weight:700; font-size:16px; letter-spacing:-.5px; }
.navlinks { display:flex; gap:24px; font-size:13.5px; color:#3a3a3a; font-weight:600; }
.gh { background:#24292e; color:#fff; border:none; border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; }
.hero { position:relative; background:radial-gradient(ellipse 900px 400px at 20% -20%, #ea2804 0%, #ff6a3d 45%, #f4a8a0 70%, #f9f7f3 100%);
padding:46px 32px 34px; color:#fff; overflow:hidden; }
.hero h1 { font-size:64px; font-weight:700; line-height:.92; letter-spacing:-2px; margin:0 0 12px; max-width:640px; }
.hero p { font-size:15px; margin:0 0 18px; max-width:420px; opacity:.92; }
.heroctas { display:flex; gap:10px; }
.btn-w { background:#fff; color:#ea2804; border:none; border-radius:999px; padding:11px 22px; font-size:14px; font-weight:600; }
.btn-d { background:#202020; color:#fff; border:none; border-radius:999px; padding:11px 22px; font-size:14px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:22px 32px 8px; }
.mcard { background:#fff; border-radius:10px; padding:12px; }
.mthumb { height:64px; border-radius:8px; margin-bottom:8px; }
.mthumb.t1 { background:linear-gradient(135deg,#ffb199,#ea2804); }
.mthumb.t2 { background:linear-gradient(135deg,#c9c7d2,#7d6f9a); }
.mthumb.t3 { background:linear-gradient(135deg,#ffd8a8,#ff6a3d); }
.mthumb.t4 { background:linear-gradient(135deg,#a8d8c9,#2b9a66); }
.mname { font-size:12.5px; font-weight:600; }
.mowner { font-size:11px; color:#8d8d8d; margin-bottom:4px; }
.mtag { display:inline-block; background:#2b9a66; color:#fff; font-size:9.5px; font-weight:600; border-radius:999px; padding:2px 8px; margin-top:6px; }
.codewrap { margin:16px 32px 20px; background:#202020; border-radius:10px; padding:18px; }
.codetabs { display:flex; gap:6px; margin-bottom:10px; }
.ctab { background:#000; color:rgba(252,252,252,.72); font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
font-size:10px; padding:4px 10px; border-radius:4px; }
.ctab.active { color:#fcfcfc; border-bottom:2px solid #ea2804; }
pre { color:#fcfcfc; font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:12px; line-height:1.5; margin:0; }
.tok-fn { color:#ff9b6a; } .tok-str { color:#c2e8c2; }
footer { display:flex; justify-content:space-between; padding:12px 32px; font-size:11px; color:#646464;
border-top:1px solid rgba(32,32,32,.12); }
</style></head>
<body>
<nav>
<div class="brand">Replicate</div>
<div class="navlinks"><span>Explore</span><span>Pricing</span><span>Docs</span><span>Blog</span></div>
<button class="gh">Sign in with GitHub</button>
</nav>
<section class="hero">
<h1>Run AI with<br>an API</h1>
<p>Get an API for a model without having to think about GPUs, or scaling.</p>
<div class="heroctas">
<button class="btn-w">Explore models</button>
<button class="btn-d">Try a model</button>
</div>
</section>
<div class="grid">
<div class="mcard"><div class="mthumb t1"></div><div class="mowner">stability-ai /</div><div class="mname">sdxl</div><span class="mtag">running</span></div>
<div class="mcard"><div class="mthumb t2"></div><div class="mowner">meta /</div><div class="mname">llama-3</div><span class="mtag">running</span></div>
<div class="mcard"><div class="mthumb t3"></div><div class="mowner">black-forest /</div><div class="mname">flux-schnell</div><span class="mtag">running</span></div>
<div class="mcard"><div class="mthumb t4"></div><div class="mowner">openai /</div><div class="mname">whisper</div><span class="mtag">running</span></div>
</div>
<div class="codewrap">
<div class="codetabs"><span class="ctab active">Python</span><span class="ctab">Node.js</span><span class="ctab">cURL</span></div>
<pre><span class="tok-fn">import</span> replicate
output = replicate.run(
<span class="tok-str">"stability-ai/sdxl"</span>,
input={ <span class="tok-str">"prompt"</span>: <span class="tok-str">"an astronaut riding a horse"</span> }
)</pre>
</div>
<footer>
<span>© Replicate</span>
<span>Replicate · Pricing · Docs · Status</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002991; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002991; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8799c8; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #60cdff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002991; color: #60cdff;
border: 1px solid #60cdff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002991; color: #f5f5f5;
border: 1px solid #274aa1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8799c8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f43a3; color: #60cdff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#000000; }
.brand { font-size:17px; font-weight:900; color:#ffffff; margin:0; letter-spacing:-0.3px; }
.navtabs { display:flex; gap:8px; }
.navtab { font-size:14px; padding:0 16px; height:34px; display:flex; align-items:center; border-radius:104px; color:#ffffff; }
.navtab.active { background:#ffffff; color:#000000; }
.btn-white { background:#ffffff; color:#000000; border:1px solid #ffffff; border-radius:1000px;
padding:8px 20px; font-size:13px; font-weight:900; }
.hero { background:#60cdff; padding:36px 40px 30px; }
.hero h1 { font-size:52px; font-weight:900; letter-spacing:-1.5px; line-height:1.05; margin:0 0 14px; color:#000000; max-width:640px; }
.row { display:flex; gap:12px; }
.btn-black { background:#000000; color:#ffffff; border-radius:1000px; padding:12px 26px; font-size:14px; font-weight:900; }
.btn-outline-dark { background:transparent; color:#000000; border:1px solid #000000; border-radius:1000px; padding:11px 26px; font-size:14px; font-weight:900; }
.midnight { background:#002991; padding:26px 40px; display:flex; gap:20px; }
.midnight h2 { font-size:26px; font-weight:900; color:#ffffff; margin:0 0 10px; letter-spacing:-0.5px; }
.btn-outline-light { background:transparent; color:#ffffff; border:1px solid #ffffff; border-radius:1000px; padding:10px 22px; font-size:12px; font-weight:900; }
.midnight .col { flex:1; }
.cards { padding:24px 40px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.card { background:#ffffff; border-radius:16px; padding:18px; box-shadow:rgba(0,0,0,0.08) 0px 24px 48px 0px; }
.card h3 { font-size:20px; font-weight:900; margin:0 0 6px; color:#000000; }
.card p { font-size:13px; color:#686a6d; margin:0; line-height:1.4; }
.tag { display:inline-block; background:#f0f2f9; color:#002991; border-radius:4px; padding:2px 8px; font-size:11px; margin-bottom:8px; }
</style></head>
<body>
<nav>
<p class="brand">PayPal</p>
<div class="navtabs">
<span class="navtab active">Personal</span>
<span class="navtab">Business</span>
</div>
<button class="btn-white">Sign Up</button>
</nav>
<section class="hero">
<h1>Pay, send, and save smarter</h1>
<div class="row">
<button class="btn-black">Sign Up</button>
<button class="btn-outline-dark">Learn More</button>
</div>
</section>
<section class="midnight">
<div class="col">
<h2>Pay now or pay over time. It's your choice.</h2>
<button class="btn-outline-light">Learn About Pay in 4</button>
</div>
<div class="col">
<h2>The tools your business runs on. In one place.</h2>
<button class="btn-outline-light">Get Paid</button>
</div>
</section>
<section class="cards">
<div class="card">
<span class="tag">Checkout</span>
<h3>Take your business further, faster</h3>
<p>Accept payments customers already trust, with one recognizable button at checkout.</p>
</div>
<div class="card">
<span class="tag">Security</span>
<h3>See How You're Safe</h3>
<p>Your card details stay hidden from every merchant — fraud protection built in.</p>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dd6d; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dd6d; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096d3a; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dd6d; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dd6d; color: #111111;
border: 1px solid #03bc5e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096d3a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00ba5c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#444444; box-sizing:border-box;
font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; }
* { box-sizing:border-box; }
.header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #f0f0f0; }
.header .logo { font-size:18px; font-weight:700; color:#000000; }
.header .nav { display:flex; gap:26px; font-size:15px; color:#444444; }
.header .auth { background:#000000; color:#ffffff; border-radius:8px; height:40px; padding:0 16px;
font-size:15px; font-weight:700; display:flex; align-items:center; }
.main { padding:18px 32px 0; }
.eyebrow { color:#00dd6d; font-size:13px; font-weight:700; margin:0 0 8px; }
.hero { position:relative; height:150px; border-radius:0; overflow:hidden;
background:linear-gradient(115deg,#0c3d2c 0%,#0b2e3a 45%,#111318 100%); display:flex; align-items:flex-end; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 60%); }
.hero .txt { position:relative; padding:18px 22px; color:#ffffff; }
.hero .txt .kicker { font-size:16px; font-weight:400; opacity:.85; margin:0 0 4px; }
.hero .txt h1 { font-size:32px; font-weight:700; line-height:1.3; margin:0; }
.filters { padding:16px 32px 0; }
.chiprow { display:flex; gap:8px; overflow:hidden; margin-bottom:10px; }
.chip { height:40px; border-radius:20px; padding:7px 16px; font-size:16px; display:flex; align-items:center;
white-space:nowrap; }
.chip.active { background:#00dd6d; color:#ffffff; font-weight:700; }
.chip.rest { background:transparent; color:#444444; font-weight:400; border:1px solid #ececec; }
.droprow { display:flex; gap:10px; }
.drop { height:40px; border-radius:100px; padding:8px 30px 8px 12px; font-size:16px; color:#000000;
background:#ffffff; border:1px solid #e5e5e5; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.drop::after { content:''; width:6px; height:6px; border-right:1.5px solid #000; border-bottom:1.5px solid #000;
transform:rotate(45deg); margin-left:4px; }
.jobs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 32px 0; }
.job { border-radius:0; border:1px solid #ececec; padding:16px; display:flex; flex-direction:column; gap:6px; background:#ffffff; }
.job .top { display:flex; align-items:center; justify-content:space-between; }
.job .dday { font-size:12px; font-weight:700; color:#00dd6d; }
.job h3 { font-size:16px; font-weight:700; color:#000000; margin:0; }
.job .co { font-size:14px; color:#444444; margin:0; }
.job .meta { font-size:13px; color:#888888; margin:2px 0 0; }
.job .tags { display:flex; gap:6px; margin-top:4px; }
.job .tags span { font-size:12px; color:#444444; background:#f7f7f7; padding:3px 8px; }
.footer { position:absolute; left:0; right:0; bottom:0; height:70px; background:#fbfbfb; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; font-size:14px; color:#444444; }
.footer .cols { display:flex; gap:22px; }
.footer .view-all { font-size:16px; color:#888888; }
body { position:relative; }
</style></head>
<body>
<div class="header">
<div class="logo">Jumpit</div>
<div class="nav"><span>Dev Jobs</span><span>Resume</span><span>#feed</span><span>Dev Interviews</span></div>
<div class="auth">Sign up / Log in</div>
</div>
<div class="main">
<p class="eyebrow">NOTICE</p>
<div class="hero">
<div class="txt">
<p class="kicker">This week's curated pick</p>
<h1>Teams whose hiring bar is actually worth chasing</h1>
</div>
</div>
</div>
<div class="filters">
<div class="chiprow">
<span class="chip active">All</span>
<span class="chip rest">Backend</span>
<span class="chip rest">Frontend</span>
<span class="chip rest">iOS</span>
<span class="chip rest">Android</span>
<span class="chip rest">DevOps</span>
<span class="chip rest">AI / ML</span>
<span class="chip rest">QA</span>
</div>
<div class="droprow">
<span class="drop">Tech stack</span>
<span class="drop">Experience</span>
<span class="drop">Location</span>
<span class="drop">Tags</span>
</div>
</div>
<div class="jobs">
<div class="job">
<div class="top"><h3>Platform Engineer</h3><span class="dday">D-7</span></div>
<p class="co">Northbeam Systems</p>
<p class="meta">Pangyo · 3-7 yrs</p>
<div class="tags"><span>Go</span><span>Kubernetes</span></div>
</div>
<div class="job">
<div class="top"><h3>Frontend Engineer</h3><span class="dday">D-12</span></div>
<p class="co">Lightloop Labs</p>
<p class="meta">Remote · 1-4 yrs</p>
<div class="tags"><span>React</span><span>TypeScript</span></div>
</div>
<div class="job">
<div class="top"><h3>ML Engineer</h3><span class="dday">New</span></div>
<p class="co">Ferric Data</p>
<p class="meta">Gangnam · 2-6 yrs</p>
<div class="tags"><span>PyTorch</span><span>MLOps</span></div>
</div>
</div>
<div class="footer">
<div class="cols"><span>Company</span><span>Terms</span><span>Privacy</span><span>Support</span></div>
<span class="view-all">See all positions ›</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc32d; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc32d; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c611e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc32d; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc32d; color: #111111;
border: 1px solid #d9a729; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c611e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffcd4f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Pretendard,Lato,"Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#ffffff; }
.brand { font-size:19px; font-weight:600; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:16px; font-weight:500; color:#2e303b; }
.navlinks .active { color:#000000; font-weight:700; }
.hactions { display:flex; gap:10px; }
.btn-outline { border:1px solid #d0d8dc; border-radius:10px; padding:0 18px; height:38px; display:flex; align-items:center; font-size:13px; color:#2e303b; }
main { padding:20px 32px; background:#f6f6f6; height:calc(100% - 64px); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.section-head h1 { font-size:24px; font-weight:600; letter-spacing:-0.3px; margin:0; }
.section-head span { font-size:13px; color:#6a6a6a; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#ffffff; border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.tags { display:flex; gap:6px; }
.tag { background:#ffc32d; color:#000000; font-size:12px; font-weight:600; padding:3px 6px; }
.tag.blue { background:#2054ae; color:#ffffff; border-radius:4px; }
.card h4 { font-size:16px; font-weight:600; letter-spacing:-0.2px; margin:6px 0 0; }
.card .meta { font-size:13px; color:#6a6a6a; }
.bar-track { height:6px; background:#e8ecef; border-radius:4px; overflow:hidden; margin-top:6px; }
.bar-fill { height:100%; background:#2054ae; }
.card .cta { margin-top:auto; height:38px; border-top:1px solid #f0f0f0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:#000000; }
.dark-cta { margin-top:20px; background:#000000; border-radius:8px; padding:20px 26px; display:flex; align-items:center; justify-content:space-between; color:#ffffff; }
.dark-cta h3 { font-size:20px; font-weight:600; margin:0 0 4px; letter-spacing:-0.2px; }
.dark-cta p { font-size:13px; color:rgba(255,255,255,0.7); margin:0; }
.pill-btn { background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.2); border-radius:30px; padding:0 22px; height:44px; display:flex; align-items:center; font-size:14px; }
</style></head>
<body>
<header>
<div class="brand">PeopleFund</div>
<div class="navlinks"><span class="active">Invest</span><span>Loans</span><span>How it works</span></div>
<div class="hactions">
<div class="btn-outline">Sign up</div>
<div class="btn-outline">Log in</div>
</div>
</header>
<main>
<div class="section-head">
<h1>Featured investment products</h1>
<span>Updated 4 minutes ago</span>
</div>
<div class="grid">
<div class="card">
<div class="tags"><span class="tag">HOT</span><span class="tag blue">94.7% funded</span></div>
<h4>Seoul · Yangcheon-gu Residence Bond</h4>
<div class="meta">Term 6mo · Est. return 9.8%</div>
<div class="bar-track"><div class="bar-fill" style="width:95%"></div></div>
<div class="cta">View Product</div>
</div>
<div class="card">
<div class="tags"><span class="tag">Near Close</span><span class="tag blue">95.1% funded</span></div>
<h4>Pyeongtaek · Dokgok-dong Property</h4>
<div class="meta">Term 4mo · Est. return 10.2%</div>
<div class="bar-track"><div class="bar-fill" style="width:95%"></div></div>
<div class="cta">View Product</div>
</div>
<div class="card">
<div class="tags"><span class="tag">NEW</span><span class="tag blue">18.4% funded</span></div>
<h4>Incheon · Namdong Industrial Loan</h4>
<div class="meta">Term 12mo · Est. return 8.5%</div>
<div class="bar-track"><div class="bar-fill" style="width:18%"></div></div>
<div class="cta">View Product</div>
</div>
<div class="card">
<div class="tags"><span class="tag">NOTICE</span><span class="tag blue">61.0% funded</span></div>
<h4>Busan · Haeundae Retail Bridge</h4>
<div class="meta">Term 8mo · Est. return 9.1%</div>
<div class="bar-track"><div class="bar-fill" style="width:61%"></div></div>
<div class="cta">View Product</div>
</div>
<div class="card">
<div class="tags"><span class="tag">HOT</span><span class="tag blue">88.3% funded</span></div>
<h4>Daejeon · Yuseong Office Fitout</h4>
<div class="meta">Term 6mo · Est. return 9.4%</div>
<div class="bar-track"><div class="bar-fill" style="width:88%"></div></div>
<div class="cta">View Product</div>
</div>
<div class="card">
<div class="tags"><span class="tag">NEW</span><span class="tag blue">7.2% funded</span></div>
<h4>Gwangju · Sangmu District Loan</h4>
<div class="meta">Term 10mo · Est. return 8.9%</div>
<div class="bar-track"><div class="bar-fill" style="width:7%"></div></div>
<div class="cta">View Product</div>
</div>
</div>
<div class="dark-cta">
<div>
<h3>Questions about investing?</h3>
<p>Our team is ready to help — don't hesitate to ask.</p>
</div>
<div class="pill-btn">1600-0000 · FAQ</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c0d0e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c0d0e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8d8d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c0d0e; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c0d0e; color: #f5f5f5;
border: 1px solid #313233; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8d8d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #333435; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0C0D0E; color:#FFFFFF; box-sizing:border-box; font-family:'Proza Libre',Georgia,'Times New Roman',serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; }
.imgpane { width:520px; height:640px; background:linear-gradient(160deg,#1a2a3a,#3a5a6a 55%,#6a8a5a); position:relative; }
.backchev { position:absolute; top:16px; left:16px; font-size:20px; font-family:sans-serif; }
.detail { width:440px; padding:22px 24px; font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif; overflow:hidden; }
.ptitle { font-family:'Proza Libre',Georgia,serif; font-size:18px; font-weight:600; letter-spacing:-0.2pt; }
.authorrow { display:flex; align-items:center; gap:10px; margin-top:14px; }
.av30 { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#FF0084,#0063DC); }
.aname { font-size:13px; font-weight:600; flex:1; }
.followpill { background:#FF0084; color:#fff; font-size:13px; font-weight:700; padding:8px 18px; border-radius:999px; }
.actionbar { display:flex; gap:28px; margin-top:18px; padding-bottom:14px; border-bottom:1px solid #2A2C30; }
.abtn { text-align:center; font-size:11px; color:#B0B3B8; }
.abtn .ic { font-size:18px; display:block; }
.abtn.on .ic { color:#FF0084; }
.exiftitle { font-size:10px; font-weight:700; letter-spacing:1pt; color:#6E7176; margin-top:18px; text-transform:uppercase; }
.exifcard { background:#1A1B1D; border-radius:12px; margin-top:10px; padding:0 16px; }
.exifrow { display:flex; justify-content:space-between; padding:7px 0; border-bottom:0.5px solid #2A2C30; font-size:12px; }
.exifrow:last-child { border-bottom:none; }
.exifkey { color:#B0B3B8; }
.exifval { font-family:'IBM Plex Mono','SF Mono',monospace; font-weight:600; letter-spacing:0.3pt; }
</style>
</head>
<body>
<div class="stage">
<div class="imgpane"><div class="backchev">←</div></div>
<div class="detail">
<div style="font-size:10px;font-weight:700;letter-spacing:1pt;color:#FF0084;text-transform:uppercase;margin-bottom:8px">Flickr (iOS)</div>
<div class="ptitle">Fog Over the Reservoir, Blue Hour</div>
<div class="authorrow"><div class="av30"></div><div class="aname">Sofia Marent</div><div class="followpill">Follow</div></div>
<div class="actionbar">
<div class="abtn on"><span class="ic">★</span>Fave</div>
<div class="abtn"><span class="ic">💬</span>Comment</div>
<div class="abtn"><span class="ic">↗</span>Share</div>
<div class="abtn"><span class="ic">+</span>Add</div>
</div>
<div class="exiftitle">Camera Details</div>
<div class="exifcard">
<div class="exifrow"><span class="exifkey">Camera</span><span class="exifval">Fujifilm X-T5</span></div>
<div class="exifrow"><span class="exifkey">Lens</span><span class="exifval">XF 35mm</span></div>
<div class="exifrow"><span class="exifkey">Exposure</span><span class="exifval">1/250s</span></div>
<div class="exifrow"><span class="exifkey">Aperture</span><span class="exifval">f/2.8</span></div>
<div class="exifrow"><span class="exifkey">ISO</span><span class="exifval">100</span></div>
<div class="exifrow"><span class="exifkey">Focal length</span><span class="exifval">35mm</span></div>
<div class="exifrow"><span class="exifkey">Date taken</span><span class="exifval">2026-04-12</span></div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff2f5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #fff2f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fffdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0B051D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.col { flex:1; padding:26px 32px; }
.brand { font-size:14px; font-weight:700; color:#6E6878; margin:0 0 20px; }
.heropanel { background:#0B051D; border-radius:20px; padding:22px 24px; color:#fff; margin-bottom:20px; }
.heropanel .k { font-size:12px; color:rgba(255,255,255,0.6); }
.heropanel .amt { font-size:32px; font-weight:700; margin:6px 0 14px; }
.paybtn { display:inline-block; background:#FFB3C7; color:#0B051D; font-weight:700; font-size:14px; padding:11px 22px; border-radius:999px; }
.sectitle { font-size:14px; font-weight:700; margin:0 0 14px; }
.timeline { display:flex; align-items:center; margin-bottom:8px; }
.dot { width:22px; height:22px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.dot.paid { background:#FFB3C7; color:#0B051D; }
.dot.open { background:#fff; border:2px solid #F0DDE3; color:#9B96A3; }
.track { flex:1; height:2px; background:#F0DDE3; }
.paylabels { display:flex; justify-content:space-between; font-size:11px; color:#6E6878; margin-bottom:24px; }
.order { display:flex; align-items:center; padding:12px 0; border-bottom:1px solid #F0DDE3; gap:12px; }
.oicon { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#FFB3C7,#FFF2F5); }
.oname { font-size:14px; font-weight:600; }
.ostatus { font-size:12px; color:#0E8A4F; margin-top:2px; }
.oamt { margin-left:auto; font-size:14px; font-weight:700; }
.col2 { width:320px; flex:0 0 auto; background:#FFF2F5; padding:26px; }
.browser { background:#fff; border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(11,5,29,0.08); }
.bhead { font-size:12px; color:#6E6878; margin-bottom:10px; }
.bimg { height:120px; border-radius:10px; background:linear-gradient(135deg,#FFD9E4,#FFB3C7); margin-bottom:12px; }
.bname { font-size:15px; font-weight:700; }
.bprice { font-size:14px; margin-top:4px; }
</style></head>
<body>
<div class="wrap">
<div class="col">
<p class="brand">Klarna (iOS)</p>
<div class="heropanel">
<div class="k">Total due today</div>
<div class="amt">$34.75</div>
<div class="paybtn">Pay now</div>
</div>
<div class="sectitle">Pay in 4</div>
<div class="timeline">
<div class="dot paid">✓</div><div class="track"></div>
<div class="dot open">2</div><div class="track"></div>
<div class="dot open">3</div><div class="track"></div>
<div class="dot open">4</div>
</div>
<div class="paylabels"><span>Today · $34.75</span><span>Nov 4</span><span>Nov 18</span><span>Dec 2</span></div>
<div class="sectitle">Recent orders</div>
<div class="order"><div class="oicon"></div><div><div class="oname">Everlane · Wool Coat</div><div class="ostatus">Paid in full</div></div><div class="oamt">$139.00</div></div>
<div class="order"><div class="oicon"></div><div><div class="oname">Sonos · Era 100</div><div class="ostatus">3 of 4 paid</div></div><div class="oamt">$249.00</div></div>
</div>
<div class="col2">
<div class="bhead">Shopping in Klarna</div>
<div class="browser">
<div class="bimg"></div>
<div class="bname">Klarna (iOS)</div>
<div class="bprice">$34.75 · or 4 payments of $8.69</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #090909; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #090909; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.8px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; letter-spacing: -0.14px; background: #ffffff; color: #000000;
border: none; border-radius: 100px; padding: 10px 15px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; letter-spacing: -0.14px; background: #141414; color: #ffffff;
border: 1px solid #ffffff; border-radius: 100px;
padding: 10px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: -0.15px; background: #141414; color: #ffffff;
border: 1px solid #464646; border-radius: 10px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #2b2b2b; color: #ffffff;
border-radius: 100px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#090909; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:16px; font-weight:500; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#ccc; }
.btn-white { background:#fff; color:#000; border:none; border-radius:100px; padding:8px 16px; font-size:13px; font-weight:500; }
.btn-dark { background:#1c1c1c; color:#fff; border:none; border-radius:100px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:14px 40px 6px; }
.hero h1 { font-size:64px; font-weight:500; letter-spacing:-3.2px; line-height:0.9; margin:0 0 10px; }
.hero p { font-size:15px; color:#999; margin:0 auto 12px; max-width:420px; }
.grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px; padding:8px 36px 16px; height:300px; }
.spot { border-radius:30px; padding:22px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.spot h3 { font-size:22px; font-weight:500; letter-spacing:-0.6px; margin:0; line-height:1.1; }
.violet { background:radial-gradient(120% 130% at 20% 10%, #8a6cf5, #6a4cf5 55%, #4a2fbd); }
.magenta { background:radial-gradient(120% 130% at 80% 10%, #ea6df5, #d44df0 55%, #a52bb8); }
.orange { background:radial-gradient(120% 130% at 30% 90%, #ff9a5d, #ff7a3d 55%, #c94e18); }
.charcoalcard { background:#141414; border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.browser { background:#1c1c1c; border-radius:10px; padding:8px; flex:1; display:flex; flex-direction:column; gap:6px; }
.dots { display:flex; gap:4px; }
.dots i { width:6px; height:6px; border-radius:50%; background:#3a3a3a; display:inline-block; }
.bar { height:6px; background:#262626; border-radius:3px; }
.pricingrow { display:flex; gap:12px; padding:0 36px 14px; }
.pcard { flex:1; background:#141414; border-radius:20px; padding:16px; }
.pcard.feat { background:#1c1c1c; }
.pcard h4 { font-size:14px; font-weight:700; letter-spacing:-0.5px; margin:0 0 4px; }
.pcard .price { font-size:22px; font-weight:500; letter-spacing:-1px; margin-bottom:6px; }
.pcard p { font-size:11px; color:#999; margin:0; }
footer { margin-top:auto; padding:12px 36px; display:flex; justify-content:space-between; font-size:11px; color:#999; }
</style></head>
<body>
<nav>
<span class="brand">Framer</span>
<div class="navlinks"><span>Product</span><span>Templates</span><span>Pricing</span><span>Learn</span></div>
<div style="display:flex;gap:8px"><button class="btn-dark">Sign in</button><button class="btn-white">Get started</button></div>
</nav>
<section class="hero">
<h1>Publish an<br>Awwwards-winning site.</h1>
<p>The design tool that builds real websites, no code required.</p>
</section>
<div class="grid">
<div class="spot violet"><h3>Built with Framer</h3></div>
<div class="charcoalcard">
<div class="dots"><i></i><i></i><i></i></div>
<div class="browser"><div class="bar" style="width:70%"></div><div class="bar" style="width:45%"></div><div class="bar" style="width:60%"></div></div>
</div>
<div class="spot magenta"><h3>Sites that convert</h3></div>
<div class="spot orange"><h3>Motion, made easy</h3></div>
<div class="charcoalcard">
<div class="dots"><i></i><i></i><i></i></div>
<div class="browser"><div class="bar" style="width:50%"></div><div class="bar" style="width:80%"></div><div class="bar" style="width:30%"></div></div>
</div>
</div>
<div class="pricingrow">
<div class="pcard"><h4>Mini</h4><div class="price">Free</div><p>For personal sites and side projects.</p></div>
<div class="pcard feat"><h4>Pro</h4><div class="price">$20/mo</div><p>Everything you need to launch and grow.</p></div>
<div class="pcard"><h4>Business</h4><div class="price">$40/mo</div><p>Advanced CMS and team collaboration.</p></div>
</div>
<footer>
<span>© Framer</span>
<span>Framer · Templates · Community · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4b7d6b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4b7d6b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a8bfb7; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4b7d6b; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4b7d6b; color: #f5f5f5;
border: 1px solid #669081; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8bfb7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #689283; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Dotum,"Malgun Gothic",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #666666; }
.brand { font-weight:700; font-size:16px; color:#4b7d6b; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:300; }
.hero { padding:26px 40px; }
.hero h1 { font-size:24px; font-weight:500; margin:0 0 16px; }
.booking { display:flex; gap:10px; align-items:center; }
.field { flex:1; height:44px; border:1px solid #666666; border-radius:3px; padding:10px 10px 10px 50px;
font-size:16px; color:#000; background:#fff; }
.tabrow { display:flex; gap:10px; margin-bottom:14px; }
.tab { height:42px; padding:1px 20px; border-radius:24px; font-size:16px; font-weight:500; display:flex; align-items:center;
color:#000; }
.tab.sel { background:#4b7d6b; color:#fff; }
.search-btn { background:#4b7d6b; color:#fff; border-radius:3px; padding:0 24px; height:44px; display:flex; align-items:center;
font-size:15px; }
.card-shell { margin:20px 40px; box-shadow:rgba(0,0,0,0.16) 0px 3px 6px 0px; border-radius:3px; padding:16px; display:flex; gap:20px; }
.info { flex:1; }
.info h3 { font-size:16px; margin:0 0 6px; }
.info p { font-size:13px; color:#000; margin:0; line-height:1.5; }
.green-card { margin:0 40px 20px; background:#4b7d6b; color:#fff; border-radius:0 0 3px 3px; padding:20px; }
.green-card h4 { font-size:16px; font-weight:300; margin:0 0 6px; }
.green-card p { font-size:13px; margin:0; opacity:0.9; }
.awards { margin:0 40px; }
.acc { border-bottom:1px solid #eeeeee; padding:16px 0; display:flex; justify-content:space-between; align-items:center; }
.acc span { color:#cc4b00; font-size:18px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="brand">EVA Air</span>
<div class="navlinks"><span>Plan & Book</span><span>Manage Your Trip</span><span>Flight Info</span><span>Safety First</span></div>
</nav>
<section class="hero">
<h1>Your journey to the world, with EVA Air</h1>
<div class="tabrow"><div class="tab sel">Flights</div><div class="tab">Mileage</div><div class="tab">Hotels</div></div>
<div class="booking">
<div class="field">Taipei (TPE)</div>
<div class="field">Seoul (ICN)</div>
<div class="search-btn">Search flights</div>
</div>
</section>
<section class="card-shell">
<div class="info"><h3>Manage Your Trip</h3><p>Check-in, seat selection, and flight status in one place.</p></div>
</section>
<section class="green-card">
<h4>Digital dining, e-library, sustainable service</h4>
<p>From Taoyuan hub to the world — safety and comfort come first.</p>
</section>
<section class="awards">
<div class="acc"><span>Skytrax 5-Star Airline</span><span>></span></div>
<div class="acc"><span>World's Best Airline Cabin Crew</span><span>></span></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1060ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1060ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8eb2fa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c56e9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1060ff; color: #ffffff;
border: 1px solid #0c56e9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1060ff; color: #f5f5f5;
border: 1px solid #3578fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8eb2fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f5efb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3b3d45; box-sizing:border-box;
font-family:system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #f1f2f3; }
.logo { font-size:19px; font-weight:600; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; font-size:15px; }
.navlinks span { padding:8px 12px; border-radius:4px; }
.btn-primary { background:#1060ff; color:#ffffff; border:1px solid #0c56e9; border-radius:5px;
padding:9px 15px; font-size:16px; font-weight:500;
box-shadow:rgba(101,104,118,0.05) 0px 1px 1px, rgba(101,104,118,0.05) 0px 2px 2px; }
.hero { padding:40px 40px 30px; text-align:center; }
.hero h1 { font-family:"Arial Black","Helvetica Neue",sans-serif; font-size:52px; font-weight:600;
line-height:1.19; margin:0 0 14px; letter-spacing:-1px; }
.hero p { font-size:16px; line-height:1.63; color:#656a76; max-width:520px; margin:0 auto 20px; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-secondary { background:#fafafa; color:#3b3d45; border:1px solid rgba(59,61,69,0.4); border-radius:5px;
padding:9px 15px; font-size:16px; font-weight:500;
box-shadow:rgba(101,104,118,0.05) 0px 1px 1px, rgba(101,104,118,0.05) 0px 2px 2px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:10px 40px 30px; }
.card { background:#ffffff; border-radius:6px; padding:18px; box-shadow:rgba(101,106,118,0.2) 0px 0px 0px 1px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 6px; }
.card p { font-size:13px; color:#656a76; margin:0; line-height:1.5; }
.card .cta { display:inline-block; margin-top:10px; font-size:13px; font-weight:600; }
.card.tf .cta { color:#7b42bc; }
.card.bd .cta { color:#f24c53; }
.badge { display:inline-block; background:#f1f2f3; color:#3b3d45; border-radius:5px; padding:3px 7px;
font-size:13px; margin-bottom:10px; }
footer { border-top:1px solid #f1f2f3; padding:14px 40px; text-align:center; font-size:13px; color:#656a76; }
</style></head>
<body>
<nav>
<span class="logo">Hashicorp</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Pricing</span></div>
<span class="btn-primary">Get started</span>
</nav>
<section class="hero">
<span class="badge">The Infrastructure Cloud</span>
<h1>Automate and secure any infrastructure</h1>
<p>Consistent workflows to provision, secure, connect, and run any infrastructure for any application.</p>
<div class="row">
<button class="btn-primary">Get started</button>
<button class="btn-secondary">Contact us</button>
</div>
</section>
<div class="cards">
<div class="card"><h3>Provision</h3><p>Automate infrastructure with a consistent workflow.</p></div>
<div class="card tf"><h3>Terraform</h3><p>Provision infrastructure with an API-driven workflow.</p><span class="cta">Learn more →</span></div>
<div class="card bd"><h3>Boundary</h3><p>Secure remote access to any system, anywhere.</p><span class="cta">Learn more →</span></div>
</div>
<footer>© Hashicorp · An IBM Company</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff8d00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff8d00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4909; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd7e14; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8d00; color: #000000;
border: 1px solid #fd7e14; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff8d00; color: #111111;
border: 1px solid #d97903; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4909; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff8b03; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F7F9FA; color:#1C1D1F; box-sizing:border-box;
font-family:"Pretendard Variable","Apple SD Gothic Neo","Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fff; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #DFE1E2; }
.brand { font-weight:700; font-size:18px; color:#FD7E14; }
.navlinks { display:flex; gap:22px; font-size:16px; color:#DFE1E2; }
.navlinks span.on { color:#FD7E14; font-weight:700; }
.cta { background:linear-gradient(90deg,#D9480F,#F3463B); color:#fff; border-radius:12px; padding:12px 24px;
font-size:15px; font-weight:600; }
.hero { padding:36px 40px 20px; }
.hero h1 { font-size:30px; font-weight:700; margin:0 0 10px; line-height:1.35; }
.hero p { color:#565C65; font-size:15px; margin:0 0 18px; }
.search { background:#fff; border:1px solid #DFE1E2; border-radius:16px; padding:14px 18px; display:flex;
justify-content:space-between; align-items:center; max-width:500px; }
.search span { color:#71767A; font-size:14px; }
.search .go { background:#FD7E14; color:#fff; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; }
.cats { display:flex; gap:12px; padding:20px 40px; }
.cat { background:#fff; border:1px solid #DFE1E2; border-radius:16px; padding:14px; flex:1; text-align:center; }
.cat .ic { width:36px; height:36px; border-radius:50%; background:#FFF4E6; margin:0 auto 8px; }
.cat span { font-size:13px; font-weight:600; }
.review { margin:0 40px; background:#F1F3F6; border-radius:32px; padding:24px; display:flex; gap:16px; align-items:center; }
.review .av { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#FD7E14,#F76707); }
.review .txt { flex:1; }
.review .name { font-size:14px; font-weight:700; margin-bottom:4px; }
.review p { font-size:13px; color:#71767A; margin:0; }
.tag { background:#FFF4E6; color:#F76707; border-radius:9999px; padding:4px 10px; font-size:11px; font-weight:600; }
</style></head>
<body>
<nav>
<span class="brand">Dr. Now</span>
<div class="navlinks"><span class="on">Consult</span><span>Medication Delivery</span><span>Find a Clinic</span><span>Support</span></div>
<div class="cta">Download App</div>
</nav>
<section class="hero">
<h1>Dr. Now, whenever you're unwell.<br>Late nights, weekends, always on.</h1>
<p>We're by your side — anytime, anywhere.</p>
<div class="search"><span>What symptoms are you dealing with today?</span><div class="go">Find Care</div></div>
</section>
<section class="cats">
<div class="cat"><div class="ic"></div><span>Internal Medicine</span></div>
<div class="cat"><div class="ic"></div><span>Pediatrics</span></div>
<div class="cat"><div class="ic"></div><span>Dermatology</span></div>
<div class="cat"><div class="ic"></div><span>Mental Health</span></div>
</section>
<section class="review">
<div class="av"></div>
<div class="txt">
<div class="name">Jamie · <span class="tag">Consultation Complete</span></div>
<p>From prescription to delivery, I handled it all from home. The distance to a clinic isn't a worry anymore.</p>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #cc5a16; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #cc5a16; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e3af91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ee781f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #cc5a16; color: #000000;
border: 1px solid #ee781f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #cc5a16; color: #f5f5f5;
border: 1px solid #d3733a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e3af91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d15f17; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#060211; color:#ffffff; box-sizing:border-box;
font-family:Pretendard, -apple-system, sans-serif; }
* { box-sizing:border-box; }
.banner { background:#cc5a16; color:#000000; height:40px; display:flex; align-items:center; justify-content:center; font-size:13px; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:17px; font-weight:600; }
.brand span { color:#cc5a16; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#d1d5db; }
.hero { text-align:center; padding:30px 30px 22px; }
.hero h1 { font-size:56px; font-weight:400; margin:0 0 14px; }
.hero p { font-size:14px; color:#9ca3af; margin:0 0 14px; }
.link { color:#cc5a16; font-size:16px; font-weight:600; border-bottom:1px solid #cc5a16; padding-bottom:3px; }
.band { background:#f9fafb; color:#1f2937; padding:26px 30px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.card { background:#ffffff; border-radius:12px; padding:18px; }
.card h3 { font-size:22px; font-weight:600; margin:0 0 6px; }
.card p { font-size:12.5px; color:#52525b; margin:0; }
.blogband { padding:20px 30px 0; }
.blogband h2 { font-size:20px; font-family:"IBM Plex Sans",sans-serif; font-weight:600; margin:0 0 10px; }
.blist { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bcard { background:#ffffff; color:#09090b; border:1px solid #e4e4e7; border-radius:6px; padding:14px; }
.bcard h4 { font-family:"IBM Plex Sans",sans-serif; font-size:15px; font-weight:600; margin:0 0 6px; }
.bcard span { font-size:11px; color:#71717a; }
</style></head>
<body>
<div class="banner">SqueezeBits is joining Rebellions! Read more</div>
<nav>
<p class="brand"><span>■</span> SqueezeBits</p>
<div class="navlinks"><span>OwLite</span><span>Fits on Chips</span><span>Yetter</span><span>RoBoost</span></div>
</nav>
<section class="hero">
<h1>Unlock the Potential of AI</h1>
<p>Deploy your AI with maximal efficiency on CPU, GPU, or NPU.</p>
<span class="link">View more</span>
</section>
<section class="band">
<div class="card"><h3>Maximize Inference Speed</h3><p>3.1× faster inference through quantization-aware optimization.</p></div>
<div class="card"><h3>Reduce Serving Cost</h3><p>70% cost reduction while preserving near-original accuracy.</p></div>
</section>
<section class="blogband">
<h2>Tech Insight</h2>
<div class="blist">
<div class="bcard"><h4>Disaggregated Inference on vLLM</h4><span>Benchmarks · GPU</span></div>
<div class="bcard"><h4>Quantization-Aware Training Deep Dive</h4><span>OwLite · QAT</span></div>
<div class="bcard"><h4>Serving on Qualcomm NPU</h4><span>Fits on Chips</span></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.list { width:300px; flex:0 0 auto; background:#F2F2F7; border-right:1px solid #C6C6C8; }
.listhead { padding:18px 16px 10px; font-size:22px; font-weight:800; letter-spacing:-0.3px; }
.row { display:flex; gap:12px; padding:10px 16px; align-items:center; }
.row.on { background:#E9E9EB; }
.av { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#8e8e93,#c6c6c8); flex:0 0 auto; }
.rn { font-size:15px; font-weight:600; }
.rp { font-size:13px; color:#3C3C4399; margin-top:2px; }
.thread { flex:1; display:flex; flex-direction:column; }
.nav { height:64px; border-bottom:0.5px solid #3C3C434A; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.nav .av2 { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#8e8e93,#c6c6c8); margin-bottom:2px; }
.nav .nm { font-size:12px; font-weight:600; }
.msgs { flex:1; padding:20px 24px; display:flex; flex-direction:column; }
.bub { max-width:58%; padding:8px 14px; font-size:16px; line-height:1.3; margin-bottom:3px; position:relative; }
.in { align-self:flex-start; background:#E9E9EB; color:#000; border-radius:19px 19px 19px 6px; }
.out { align-self:flex-end; background:#007AFF; color:#fff; border-radius:19px 19px 6px 19px; }
.gap { margin-bottom:9px; }
.tapback-row { align-self:flex-start; position:relative; margin-bottom:16px; }
.tapback { position:absolute; top:-38px; left:10px; background:#fff; border-radius:20px; box-shadow:0 6px 18px rgba(0,0,0,0.18);
display:flex; padding:6px 10px; gap:8px; font-size:16px; }
.reactchip { position:absolute; top:-14px; right:-8px; background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.2);
width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.typing { align-self:flex-start; background:#E9E9EB; border-radius:19px 19px 19px 6px; padding:12px 16px; display:flex; gap:5px; margin-top:6px; }
.typing i { width:7px; height:7px; border-radius:50%; background:#8E8E93; opacity:0.9; }
.receipt { align-self:flex-end; font-size:12px; color:#3C3C4399; margin-top:4px; margin-bottom:14px; }
.inputbar { padding:10px 14px 16px; display:flex; align-items:center; gap:10px; border-top:0.5px solid #3C3C434A; background:rgba(249,249,249,0.9); }
.plus { width:30px; height:30px; border-radius:50%; background:#E9E9EB; display:flex; align-items:center; justify-content:center; color:#8E8E93; font-weight:700; }
.field { flex:1; height:36px; border-radius:18px; border:1px solid #C6C6C8; display:flex; align-items:center; padding:0 14px; color:#8E8E93; font-size:15px; }
.sendbtn { width:30px; height:30px; border-radius:50%; background:#007AFF; display:flex; align-items:center; justify-content:center; color:#fff; }
</style></head>
<body>
<div class="wrap">
<div class="list">
<div class="listhead">Messages</div>
<div class="row on"><div class="av"></div><div><div class="rn">iMessage (iOS)</div><div class="rp">Perfect, see you then! · 9:41 AM</div></div></div>
<div class="row"><div class="av"></div><div><div class="rn">Mom</div><div class="rp">Don't forget dinner · Yesterday</div></div></div>
<div class="row"><div class="av"></div><div><div class="rn">Design Team</div><div class="rp">Alex: shipped it · Yesterday</div></div></div>
<div class="row"><div class="av"></div><div><div class="rn">Jordan</div><div class="rp">😂😂😂 · Mon</div></div></div>
</div>
<div class="thread">
<div class="nav"><div class="av2"></div><div class="nm">iMessage (iOS) ›</div></div>
<div class="msgs">
<div class="bub in gap">Are we still on for lunch tomorrow?</div>
<div class="tapback-row">
<div class="bub out">Yes! 12:30 at the usual spot</div>
<div class="reactchip">❤️</div>
</div>
<div class="bub in gap" style="margin-top:16px;">Perfect, see you then!</div>
<div class="typing"><i></i><i></i><i></i></div>
</div>
<div class="inputbar">
<div class="plus">+</div>
<div class="field">iMessage</div>
<div class="sendbtn">↑</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0b0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0b0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a84ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0b0f; color: #0a84ff;
border: 1px solid #0a84ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0b0f; color: #f5f5f5;
border: 1px solid #303034; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b1e35; color: #0a84ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0B0F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
/* left: phone frame with the flight card + live arc map */
.phone { width:360px; height:640px; background:#0B0B0F; padding:28px 20px; position:relative;
border-right:1px solid #2E2E36; }
.statusrow { display:flex; justify-content:space-between; font-size:11px; color:#8E8E96; margin-bottom:18px; font-weight:600; }
.navtitle { font-size:22pt; font-weight:700; letter-spacing:-0.3px; margin:0 0 14px; }
.card { background:#1A1A1F; border:1px solid #2E2E36; border-radius:16px; padding:16px; }
.cardhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.airline { font-size:13px; font-weight:600; color:#fff; }
.chip { background:rgba(48,209,88,0.15); color:#30D158; font-size:10px; font-weight:700; letter-spacing:0.3px;
text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.route { display:flex; align-items:center; justify-content:center; gap:10px; margin:8px 0 14px; }
.code { font-size:22px; font-weight:700; color:#fff; }
.arc { flex:1; height:2px; background:linear-gradient(90deg,#0A84FF,rgba(10,132,255,0.35)); position:relative; }
.arc::after { content:'✈'; position:absolute; right:30%; top:-8px; font-size:12px; color:#fff;
filter:drop-shadow(0 0 4px rgba(10,132,255,0.8)); }
.timerow { display:flex; justify-content:space-between; margin-bottom:10px; }
.timeblock .t { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
.timeblock .g { font-size:11px; color:#8E8E96; font-variant-numeric:tabular-nums; margin-top:2px; }
.meta { font-size:11px; color:#8E8E96; border-top:1px solid #2E2E36; padding-top:10px; }
.mapcard { margin-top:14px; height:220px; border-radius:16px; background:#16161B;
background-image: radial-gradient(circle at 20% 30%, rgba(31,31,38,0.9) 0, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(31,31,38,0.9) 0, transparent 40%);
position:relative; overflow:hidden; border:1px solid #2E2E36; }
.greatcircle { position:absolute; top:40%; left:14%; width:72%; height:2px;
background:linear-gradient(90deg,#0A84FF 55%, rgba(10,132,255,0.35) 55%);
box-shadow:0 0 12px rgba(10,132,255,0.45); transform:rotate(-8deg); }
.plane { position:absolute; top:31%; left:52%; font-size:14px; color:#fff;
filter:drop-shadow(0 0 6px rgba(10,132,255,0.6)); }
.pin { position:absolute; width:8px; height:8px; border-radius:50%; background:#0A84FF; border:2px solid #fff; }
.pin.a { left:12%; top:38%; } .pin.b { right:12%; top:44%; }
.maplabel { position:absolute; bottom:10px; left:10px; font-size:10px; color:#8E8E96; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:rgba(11,11,15,0.92);
border-top:1px solid #2E2E36; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#8E8E96; text-align:center; }
.tab.on { color:#0A84FF; font-weight:600; }
.tab .dot { display:block; width:6px; height:6px; border-radius:50%; margin:0 auto 3px; background:currentColor; }
/* right: brand panel */
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.6px; margin:0; }
.brand span { color:#0A84FF; }
.tag { font-size:14px; color:#8E8E96; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:10px; border:1px solid #2E2E36; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#8E8E96; text-align:center; }
.typeblock .t1 { font-size:26px; font-weight:700; letter-spacing:-0.4px; }
.typeblock .t2 { font-size:13px; color:#8E8E96; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#1A1A1F; border:1px solid #2E2E36; color:#8E8E96; }
.footer { margin-top:auto; border-top:1px solid #2E2E36; padding-top:16px; font-size:11px; color:#5A5A62; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="statusrow"><span>9:41</span><span>●●● 5G 100%</span></div>
<p class="navtitle">Flights</p>
<div class="card">
<div class="cardhead"><span class="airline">United · UA 482</span><span class="chip">On time</span></div>
<div class="route"><span class="code">SFO</span><div class="arc"></div><span class="code">JFK</span></div>
<div class="timerow">
<div class="timeblock"><div class="t">7:45<span style="font-size:12px">AM</span></div><div class="g">Gate B24 · Term 2</div></div>
<div class="timeblock" style="text-align:right"><div class="t">4:12<span style="font-size:12px">PM</span></div><div class="g">Gate 7 · Term 4</div></div>
</div>
<div class="meta">5h 42m · 2,586 mi · Nonstop</div>
</div>
<div class="mapcard">
<div class="pin a"></div><div class="pin b"></div>
<div class="greatcircle"></div><span class="plane">✈</span>
<span class="maplabel">Live position · updated 12s ago</span>
</div>
<div class="tabbar">
<div class="tab on"><span class="dot"></span>Flights</div>
<div class="tab"><span class="dot"></span>Search</div>
<div class="tab"><span class="dot"></span>Airport</div>
<div class="tab"><span class="dot"></span>Profile</div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Flighty (iOS)<span>.</span></h1>
<p class="tag">An instrument-panel-black canvas built for a single glowing signal: the live great-circle arc between where you are and where you're going.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#0B0B0F"></div><small>#0B0B0F</small></div>
<div class="sw"><div class="chip2" style="background:#0A84FF"></div><small>#0A84FF</small></div>
<div class="sw"><div class="chip2" style="background:#30D158"></div><small>#30D158</small></div>
<div class="sw"><div class="chip2" style="background:#FFD60A"></div><small>#FFD60A</small></div>
<div class="sw"><div class="chip2" style="background:#FF453A"></div><small>#FF453A</small></div>
</div>
<div class="typeblock">
<div class="t1">7:45 AM</div>
<div class="t2">SF Pro Display · 32pt / 700 · tabular figures on every flight number</div>
</div>
<div class="taglist">
<span>Live flight map arc</span><span>On-time green</span><span>Delay amber</span>
<span>Dynamic-Island status bar</span><span>Delay timeline</span>
</div>
<div class="footer">Deep-black canvas · single blue accent · the map exists to host the glowing arc</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d1117; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d1117; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8e91; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #161b22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d1117; color: #ffffff;
border: 1px solid #161b22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d1117; color: #f5f5f5;
border: 1px solid #32353b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8e91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1319; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0D1117; color:#E6EDF3; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", monospace; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#0D1117; padding:24px 16px; position:relative; border-right:1px solid #30363D; }
.reponame { font-size:15px; margin-bottom:2px; }
.reponame b { color:#2F81F7; }
.reponame i { color:#7D8590; font-style:normal; }
.desc { font-size:12px; color:#7D8590; margin-bottom:8px; }
.stats { display:flex; gap:12px; font-size:11px; color:#7D8590; margin-bottom:14px; }
.stats .dot { width:9px; height:9px; border-radius:50%; background:#3178C6; display:inline-block; margin-right:4px; }
.tabs { display:flex; gap:16px; font-size:12px; color:#7D8590; border-bottom:1px solid #21262D; padding-bottom:8px; margin-bottom:12px; }
.tabs .on { color:#E6EDF3; font-weight:600; border-bottom:2px solid #F78166; padding-bottom:8px; }
.branchpill { display:inline-flex; align-items:center; gap:6px; background:#161B22; border:1px solid #30363D; border-radius:6px;
padding:5px 10px; font-size:11px; margin-bottom:10px; }
.branchpill span.name { color:#E6EDF3; }
.commitstrip { background:#161B22; border-bottom:1px solid #30363D; padding:8px 10px; font-size:11px; color:#7D8590;
display:flex; gap:6px; align-items:center; margin-bottom:10px; border-radius:6px 6px 0 0;}
.commitstrip .av { width:16px; height:16px; border-radius:50%; background:#3178C6; }
.filetree { border:1px solid #30363D; border-radius:8px; overflow:hidden; margin-bottom:14px; }
.frow { display:flex; justify-content:space-between; padding:8px 10px; font-size:12px; border-bottom:1px solid #21262D; }
.frow:last-child { border-bottom:none; }
.frow .meta { color:#6E7681; font-size:10px; }
.readme { border:1px solid #30363D; border-radius:8px; overflow:hidden; }
.readme .head { background:#161B22; padding:8px 10px; font-size:12px; font-weight:600; border-bottom:1px solid #30363D; }
.readme .body { padding:10px; font-size:11px; color:#7D8590; }
.heat { display:grid; grid-template-columns:repeat(18, 8px); gap:3px; margin-top:12px; }
.heat div { width:8px; height:8px; border-radius:2px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.brand span { color:#2F81F7; }
.tag { font-size:14px; color:#7D8590; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:6px; border:1px solid #30363D; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#7D8590; text-align:center; }
.typeblock .t1 { font-size:22px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#7D8590; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#161B22; border:1px solid #30363D; color:#7D8590; }
.footer { margin-top:auto; border-top:1px solid #30363D; padding-top:16px; font-size:11px; color:#6E7681; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="reponame mono"><b>anthropic</b><i> / </i><b>claude-agent-sdk</b></div>
<div class="desc">A toolkit for building agentic apps on top of Claude</div>
<div class="stats"><span><span class="dot"></span>TypeScript</span><span>★ 2.3k</span><span>⑂ 184</span></div>
<div class="tabs"><span class="on">Code</span><span>Issues</span><span>Pull requests</span><span>Actions</span></div>
<div class="branchpill">⑂ <span class="name mono">main</span></div>
<div class="commitstrip"><span class="av"></span> Fix streaming tool-use edge case <span class="mono">· a3f9c2e</span></div>
<div class="filetree">
<div class="frow"><span>📁 src</span><span class="meta">2h ago</span></div>
<div class="frow"><span>📄 package.json</span><span class="meta">3d ago</span></div>
<div class="frow"><span>📄 README.md</span><span class="meta">3d ago</span></div>
</div>
<div class="readme">
<div class="head">📄 README.md</div>
<div class="body">Build reliable agents with typed tools, MCP servers, and streaming — all from one SDK.</div>
</div>
<div class="heat">
<div style="background:#161B22"></div><div style="background:#0E4429"></div><div style="background:#006D32"></div><div style="background:#161B22"></div><div style="background:#26A641"></div><div style="background:#39D353"></div><div style="background:#0E4429"></div><div style="background:#161B22"></div><div style="background:#006D32"></div><div style="background:#26A641"></div><div style="background:#161B22"></div><div style="background:#39D353"></div><div style="background:#0E4429"></div><div style="background:#161B22"></div><div style="background:#006D32"></div><div style="background:#161B22"></div><div style="background:#26A641"></div><div style="background:#0E4429"></div>
<div style="background:#0E4429"></div><div style="background:#161B22"></div><div style="background:#39D353"></div><div style="background:#006D32"></div><div style="background:#161B22"></div><div style="background:#0E4429"></div><div style="background:#26A641"></div><div style="background:#161B22"></div><div style="background:#39D353"></div><div style="background:#161B22"></div><div style="background:#006D32"></div><div style="background:#0E4429"></div><div style="background:#161B22"></div><div style="background:#26A641"></div><div style="background:#161B22"></div><div style="background:#39D353"></div><div style="background:#006D32"></div><div style="background:#161B22"></div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">GitHub (iOS)<span>.</span></h1>
<p class="tag">Primer dark default — one blue for links, one reserved green for Code/Merge, and a semantic state color for everything else.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#0D1117"></div><small>#0D1117</small></div>
<div class="sw"><div class="chip2" style="background:#2F81F7"></div><small>#2F81F7</small></div>
<div class="sw"><div class="chip2" style="background:#238636"></div><small>#238636</small></div>
<div class="sw"><div class="chip2" style="background:#A371F7"></div><small>#A371F7</small></div>
<div class="sw"><div class="chip2" style="background:#F85149"></div><small>#F85149</small></div>
</div>
<div class="typeblock">
<div class="t1 mono">anthropic / claude-agent-sdk</div>
<div class="t2">Mona Sans + monospace · owner/name in accent blue, code always monospace</div>
</div>
<div class="taglist">
<span>Contributions heatmap</span><span>Inline README card</span><span>Orange tab underline</span>
<span>Reserved green button</span><span>1px borders, not shadows</span>
</div>
<div class="footer">#0D1117 blue-black · borders + luminance steps define regions, never drop-shadows</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #9933ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #9933ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #cc9efa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8f00ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9933ff; color: #ffffff;
border: 1px solid #8f00ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #9933ff; color: #f5f5f5;
border: 1px solid #a852fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #cc9efa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #972bff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333236; box-sizing:border-box;
font-family:"Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
* { box-sizing: border-box; }
.display { font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #eeeef1; background:#ffffff; }
.brand { font-size:19px; font-weight:800; letter-spacing:-0.5px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:500; }
.navlinks span { opacity:0.72; }
.navlinks span.on { opacity:1; color:#9933ff; font-weight:700; }
.chip { background:#9933ff; color:#ffffff; border-radius:6px; padding:6px 12px 5px; height:32px;
font-size:13px; font-weight:500; display:flex; align-items:center; white-space:nowrap; }
.hero { padding:30px 36px 26px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero .kicker { font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#9933ff; }
.hero h1 { font-size:44px; font-weight:800; letter-spacing:-1.2px; line-height:1.15; margin:0; max-width:640px; }
.hero p { font-size:15px; color:#3a3946; line-height:1.5; margin:0; max-width:520px; }
.row { display:flex; gap:12px; align-items:center; margin-top:4px; }
.btn-primary { background:#9933ff; color:#ffffff; border:none; border-radius:10px; padding:0 32px; height:48px;
font-size:17px; font-weight:700; white-space:nowrap; }
.btn-ghost { background:transparent; color:#333236; border:1px solid rgba(51,50,54,0.2); border-radius:8px;
padding:0 24px; height:45px; font-size:15px; font-weight:500; white-space:nowrap; }
.band { background:#f8ecff; padding:26px 36px 30px; }
.band .label { font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#760dde;
text-align:center; margin:0 0 14px; }
.plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.plan { background:#ffffff; border-radius:24px; border:2px solid rgba(51,50,54,0.1);
box-shadow:rgba(0,0,0,0.08) 0px 2px 14px; padding:22px 20px; display:flex; flex-direction:column; gap:10px; }
.plan.reco { background:#b363fd; color:#ffffff; border:none; box-shadow:rgba(0,0,0,0.2) 0px 4px 24px; position:relative; }
.plan.reco .badge { position:absolute; top:-11px; left:20px; background:#ff52b7; color:#fff; font-size:11px;
font-weight:700; padding:4px 10px; border-radius:999px; }
.plan .tier { font-size:14px; font-weight:700; opacity:0.7; }
.plan.reco .tier { opacity:0.85; }
.plan .price { font-size:26px; font-weight:800; letter-spacing:-0.5px; }
.plan .price span { font-size:13px; font-weight:400; opacity:0.7; }
.plan ul { list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:12px; }
.plan ul li::before { content:"✓ "; font-weight:700; }
.plan .cta { margin-top:auto; background:#9933ff; color:#fff; border:none; border-radius:8px; height:38px;
font-size:13px; font-weight:700; text-align:center; line-height:38px; }
.plan.reco .cta { background:#ffffff; color:#760dde; }
footer { border-top:1px solid #eeeef1; padding:12px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#8b8a94; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">Codeit</p>
<div class="navlinks"><span class="on">Bootcamp</span><span>Corporate</span><span>Community</span><span>Reviews</span></div>
<div class="chip">Membership</div>
</nav>
<section class="hero">
<span class="kicker">Micro-learning · IT education</span>
<h1 class="display">Your life changes<br>every 5 minutes</h1>
<p>Short lessons, hands-on practice, and quizzes — a 5-minute learning cycle built with 20 industry experts. No 20-minute boring videos.</p>
<div class="row">
<div class="btn-primary">Start free trial</div>
<div class="btn-ghost">Browse all courses</div>
</div>
</section>
<section class="band">
<p class="label">Membership plans</p>
<div class="plans">
<div class="plan">
<span class="tier">Basic</span>
<span class="price">₩29,900<span>/mo</span></span>
<ul><li>All beginner tracks</li><li>Community access</li><li>Progress tracking</li></ul>
<div class="cta">Start membership</div>
</div>
<div class="plan reco">
<span class="badge">Recommended</span>
<span class="tier">Membership</span>
<span class="price">₩49,900<span>/mo</span></span>
<ul><li>All tracks + AI GURU tutor</li><li>Career-track projects</li><li>Level-up system</li></ul>
<div class="cta">Start membership</div>
</div>
<div class="plan">
<span class="tier">Team</span>
<span class="price">₩39,900<span>/seat</span></span>
<ul><li>Team dashboards</li><li>Corporate training</li><li>Manager reports</li></ul>
<div class="cta">Start membership</div>
</div>
</div>
</section>
<footer>
<span>© Codeit</span>
<span>Codeit · Courses · Membership · Bootcamp</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #03060f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #03060f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #88898e; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b1426; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #03060f; color: #ffffff;
border: 1px solid #0b1426; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #03060f; color: #f5f5f5;
border: 1px solid #2a2c34; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #88898e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040813; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#03060F; color:#F4F7FB; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'SF Mono', ui-monospace, Menlo, Consolas, monospace; }
.shell { position:relative; width:960px; height:640px; padding:20px 24px 0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.topbar b { font-size:18px; font-weight:800; }
.topicon { width:22px; height:22px; border-radius:50%; background:#15263F; }
.content { flex:1; display:flex; gap:20px; overflow:hidden; }
.colL { width:300px; display:flex; flex-direction:column; gap:16px; }
.colR { flex:1; display:flex; flex-direction:column; gap:14px; }
.balance-label { font-size:12px; color:#8DA0BD; }
.balance-value { font-size:30px; font-weight:600; letter-spacing:-0.5px; margin:4px 0; }
.balance-pnl { font-size:12px; font-weight:600; color:#00C08B; }
.quickrow { display:flex; gap:14px; margin-top:6px; }
.qa { display:flex; flex-direction:column; align-items:center; gap:6px; }
.qa .circ { width:46px; height:46px; border-radius:50%; background:#0B1426; border:1px solid #1C3354;
display:flex; align-items:center; justify-content:center; }
.qa .circ::before { content:''; width:14px; height:14px; background:#1199FA; border-radius:3px; }
.qa span { font-size:11px; font-weight:600; color:#8DA0BD; }
.card { width:100%; aspect-ratio:1.586; border-radius:18px; position:relative; margin-top:6px;
background:linear-gradient(135deg,#0A0A0C,#26262C); box-shadow:0 14px 30px -14px rgba(0,0,0,0.8); padding:16px; }
.card::before { content:''; position:absolute; inset:0; border-radius:18px;
background:linear-gradient(120deg, rgba(255,255,255,0.08), transparent 40%); }
.card-tier { font-size:12px; font-weight:700; letter-spacing:1.5px; color:#C8A24A; position:relative; }
.card-mark { position:absolute; top:16px; right:16px; font-size:13px; font-weight:800; color:#fff; }
.card-chip { position:absolute; top:44px; left:16px; width:32px; height:22px; border-radius:5px;
background:linear-gradient(135deg,#E8CE8A,#C8A24A); }
.card-pan { position:absolute; left:16px; bottom:34px; font-size:14px; letter-spacing:2px; color:#F4F7FB; }
.card-name { position:absolute; left:16px; bottom:16px; font-size:11px; font-weight:600; letter-spacing:0.5px;
color:rgba(255,255,255,0.75); text-transform:uppercase; }
.card-visa { position:absolute; right:16px; bottom:14px; font-size:16px; font-weight:800; font-style:italic; color:#fff; }
.promo { border-radius:18px; padding:16px; background:linear-gradient(135deg,#002D74,#103F68);
display:flex; flex-direction:column; gap:8px; }
.promo b { font-size:15px; font-weight:800; }
.promo span { font-size:12px; color:#cfe0ff; }
.promo .pill { align-self:flex-start; background:#1199FA; color:#fff; font-size:12px; font-weight:700;
padding:6px 14px; border-radius:500px; margin-top:2px; }
.sectitle { font-size:15px; font-weight:700; margin-bottom:2px; }
.watchlist { display:flex; flex-direction:column; }
.wrow { display:flex; align-items:center; padding:11px 0; border-bottom:1px solid #1C3354; }
.coin { width:34px; height:34px; border-radius:50%; margin-right:12px; flex-shrink:0; }
.coin.btc { background:#F7931A; } .coin.eth { background:#627EEA; } .coin.sol { background:#14F195; } .coin.cro { background:#1199FA; }
.wname { flex:1; }
.wname b { display:block; font-size:15px; font-weight:700; }
.wname span { font-size:12px; color:#8DA0BD; }
.wprice { text-align:right; }
.wprice b { display:block; font-size:15px; font-weight:600; }
.wprice span.up { font-size:12px; font-weight:600; color:#00C08B; }
.wprice span.down { font-size:12px; font-weight:600; color:#F6485D; }
.tabbar { height:56px; display:flex; align-items:center; justify-content:space-around;
border-top:1px solid #1C3354; margin-top:auto; position:relative; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px; font-weight:600; color:#5B6E8C; }
.tab.active { color:#1199FA; }
.tab .dot { width:20px; height:20px; border-radius:5px; background:currentColor; opacity:0.85; }
.tab-trade { width:44px; height:44px; border-radius:50%; background:#1199FA; margin-top:-26px;
box-shadow:0 6px 16px rgba(17,153,250,0.4); display:flex; align-items:center; justify-content:center; }
.tab-trade::before { content:''; width:16px; height:16px; border:2px solid #fff; border-radius:4px; }
</style></head>
<body>
<div class="shell">
<div class="topbar"><b>Crypto.com (iOS)</b><div class="topicon"></div></div>
<div class="content">
<div class="colL">
<div class="balance-label">Total Balance (USD)</div>
<div class="balance-value mono">$ 18,402.65</div>
<div class="balance-pnl mono">+$320.18 (+1.77%) Today</div>
<div class="quickrow">
<div class="qa"><div class="circ"></div><span>Deposit</span></div>
<div class="qa"><div class="circ"></div><span>Send</span></div>
<div class="qa"><div class="circ"></div><span>Trade</span></div>
<div class="qa"><div class="circ"></div><span>Earn</span></div>
</div>
<div class="card">
<div class="card-tier">OBSIDIAN</div>
<div class="card-mark">Crypto.com (iOS)</div>
<div class="card-chip"></div>
<div class="card-pan mono">5482 •••• •••• 7310</div>
<div class="card-name">JANE APPLESEED</div>
<div class="card-visa">VISA</div>
</div>
<div class="promo">
<b>Stake CRO, unlock the Obsidian tier</b>
<span>Earn 5% cashback on every purchase</span>
<div class="pill">Stake now</div>
</div>
</div>
<div class="colR">
<div class="sectitle">Watchlist</div>
<div class="watchlist">
<div class="wrow"><span class="coin btc"></span><div class="wname"><b>BTC</b><span>Bitcoin</span></div><div class="wprice"><b class="mono">$67,284.10</b><span class="up mono">+2.34%</span></div></div>
<div class="wrow"><span class="coin eth"></span><div class="wname"><b>ETH</b><span>Ethereum</span></div><div class="wprice"><b class="mono">$3,412.05</b><span class="down mono">-0.81%</span></div></div>
<div class="wrow"><span class="coin cro"></span><div class="wname"><b>CRO</b><span>Cronos</span></div><div class="wprice"><b class="mono">$0.1284</b><span class="up mono">+5.62%</span></div></div>
<div class="wrow"><span class="coin sol"></span><div class="wname"><b>SOL</b><span>Solana</span></div><div class="wprice"><b class="mono">$178.44</b><span class="up mono">+1.19%</span></div></div>
</div>
<div class="sectitle" style="margin-top:8px;">Earn</div>
<div class="watchlist">
<div class="wrow"><span class="coin cro"></span><div class="wname"><b>Cronos</b><span>3-month term</span></div><div class="wprice"><b class="mono" style="color:#00C08B;">8.00% APR</b></div></div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="dot"></span>Home</div>
<div class="tab"><span class="dot"></span>Prices</div>
<div class="tab-trade"></div>
<div class="tab"><span class="dot"></span>Earn</div>
<div class="tab"><span class="dot"></span>Card</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7132f5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7132f5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ba9df5; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5741d8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7132f5; color: #ffffff;
border: 1px solid #5741d8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7132f5; color: #f5f5f5;
border: 1px solid #8651f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ba9df5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6d34f0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101114; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #dedee5; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#686b82; font-weight:500; }
.btn-purple { background:#7132f5; color:#fff; border:none; border-radius:12px; padding:10px 18px; font-size:13px; font-weight:600; }
.hero { display:flex; align-items:center; padding:20px 40px 12px; gap:24px; }
.herotext { flex:1; }
.herotext h1 { font-size:34px; font-weight:700; letter-spacing:-0.7px; line-height:1.18; margin:0 0 8px; }
.herotext p { font-size:13px; color:#686b82; margin:0 0 12px; }
.row { display:flex; gap:10px; }
.btn-outline { background:#fff; color:#5741d8; border:1px solid #5741d8; border-radius:12px; padding:9px 18px; font-size:13px; font-weight:600; }
.pricecard { width:260px; background:#fff; border:1px solid #dedee5; border-radius:16px; padding:16px;
box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }
.pricerow { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:12px; border-bottom:1px solid #dedee5; }
.pricerow:last-child { border-bottom:none; }
.ticker { font-weight:700; }
.up { color:#149e61; }
.badge { background:rgba(20,158,97,0.16); color:#026b3f; border-radius:6px; padding:2px 6px; font-size:11px; font-weight:600; }
.featuregrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:12px 40px 16px; }
.fcard { background:#fff; border:1px solid #dedee5; border-radius:12px; padding:16px; }
.fcard .ic { width:32px; height:32px; border-radius:8px; background:rgba(133,91,251,0.16); margin-bottom:10px; }
.fcard h4 { font-size:14px; font-weight:600; margin:0 0 6px; }
.fcard p { font-size:11.5px; color:#686b82; margin:0; line-height:1.4; }
footer { margin-top:auto; padding:12px 40px; border-top:1px solid #dedee5; display:flex; justify-content:space-between;
font-size:11px; color:#9497a9; }
</style></head>
<body>
<nav>
<span class="brand">Kraken</span>
<div class="navlinks"><span>Buy crypto</span><span>Trade</span><span>Learn</span><span>Pricing</span></div>
<button class="btn-purple">Sign up</button>
</nav>
<section class="hero">
<div class="herotext">
<h1>The crypto exchange<br>built for you</h1>
<p>Buy, sell, and trade crypto with confidence — trusted since 2011.</p>
<div class="row"><button class="btn-purple">Get started</button><button class="btn-outline">Explore markets</button></div>
</div>
<div class="pricecard">
<div class="pricerow"><span class="ticker">BTC</span><span class="up">$68,240 <span class="badge">+2.4%</span></span></div>
<div class="pricerow"><span class="ticker">ETH</span><span class="up">$3,512 <span class="badge">+1.1%</span></span></div>
<div class="pricerow"><span class="ticker">SOL</span><span class="up">$142.80 <span class="badge">+4.7%</span></span></div>
<div class="pricerow"><span class="ticker">USDT</span><span>$1.00</span></div>
</div>
</section>
<div class="featuregrid">
<div class="fcard"><div class="ic"></div><h4>Buy crypto</h4><p>Purchase 200+ digital assets with low fees.</p></div>
<div class="fcard"><div class="ic"></div><h4>Pro trading</h4><p>Advanced charting and deep liquidity for active traders.</p></div>
<div class="fcard"><div class="ic"></div><h4>Secure custody</h4><p>Industry-leading security for your digital assets.</p></div>
</div>
<footer>
<span>© Kraken</span>
<span>Kraken · Trade · Learn · Security</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d2eff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d2eff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #949bfa; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1626d9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d2eff; color: #ffffff;
border: 1px solid #1626d9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d2eff; color: #f5f5f5;
border: 1px solid #404efd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949bfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c2df9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#101130; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; height:300px; background:#101130; overflow:hidden; }
.glow { position:absolute; width:520px; height:520px; border-radius:50%;
background:radial-gradient(circle, rgba(0,212,255,0.35), rgba(29,46,255,0.25) 45%, transparent 70%);
top:-180px; right:-140px; }
.navrow { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.navrow .brand { color:#fff; font-weight:700; font-size:17px; }
.navrow .links { display:flex; gap:22px; font-size:13px; color:rgba(255,255,255,0.7); }
.navrow .cta { background:#1D2EFF; color:#fff; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:600; }
.herobody { position:relative; z-index:2; padding:22px 32px 0; max-width:600px; }
.herobody .eyebrow { color:#00D4FF; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px; }
.herobody h1 { color:#fff; font-size:38px; font-weight:700; line-height:1.2; margin:0 0 12px; }
.herobody p { color:rgba(255,255,255,0.75); font-size:15px; margin:0; max-width:480px; }
.clouds { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:24px 32px 0; }
.cloud { background:#fff; border:1px solid #E6E8F0; border-radius:12px; padding:20px; box-shadow:0 4px 16px rgba(16,17,48,0.08); }
.cloud .wand { width:34px; height:34px; border-radius:9px; margin-bottom:12px; }
.w1{background:linear-gradient(135deg,#1D2EFF,#5a67ff);} .w2{background:linear-gradient(135deg,#00D4FF,#1D2EFF);} .w3{background:linear-gradient(135deg,#1626D9,#1D2EFF);}
.cloud h4 { font-size:15px; font-weight:600; margin:0 0 6px; }
.cloud p { font-size:12px; color:#4A4E69; margin:0 0 10px; line-height:1.5; }
.cloud a { font-size:12px; color:#1D2EFF; font-weight:600; }
.stats { display:flex; gap:16px; padding:22px 32px 0; }
.stat { flex:1; background:#F5F6FA; border-radius:12px; padding:18px 20px; }
.stat .num { font-size:34px; font-weight:700; color:#1D2EFF; line-height:1; }
.stat .lbl { font-size:12px; color:#4A4E69; margin-top:6px; }
.badges { display:flex; gap:10px; align-items:center; }
.badge { background:#fff; border:1px solid #E6E8F0; border-radius:6px; padding:5px 10px; font-size:11px; font-weight:600; color:#101130; }
</style></head>
<body>
<div class="hero">
<div class="glow"></div>
<div class="navrow">
<div class="brand">Appier</div>
<div class="links"><span>Ad Cloud</span><span>Personalization</span><span>Data Cloud</span><span>Customers</span></div>
<div class="cta">Book a Demo</div>
</div>
<div class="herobody">
<div class="eyebrow">Enterprise AI</div>
<h1>Empowering businesses to turn AI into ROI</h1>
<p>Autonomous, adaptive, and agentic AI across marketing, personalization, and data.</p>
</div>
</div>
<div class="clouds">
<div class="cloud"><div class="wand w1"></div><h4>Ad Cloud</h4><p>AI-driven acquisition across every channel.</p><a>Learn more →</a></div>
<div class="cloud"><div class="wand w2"></div><h4>Personalization Cloud</h4><p>Real-time recommendations that convert.</p><a>Learn more →</a></div>
<div class="cloud"><div class="wand w3"></div><h4>Data Cloud</h4><p>Unify customer data into one activation layer.</p><a>Learn more →</a></div>
</div>
<div class="stats">
<div class="stat"><div class="num">41%</div><div class="lbl">Conversion boost, retail customer case study</div></div>
<div class="stat"><div class="num">3.2x</div><div class="lbl">Return on ad spend after 90 days</div></div>
<div class="stat" style="display:flex;align-items:center;gap:10px;">
<div class="badges"><span class="badge">Gartner</span><span class="badge">ISO 27001</span><span class="badge">TAG Certified</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fde050; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fde050; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b6e2d; overflow: hidden; max-height: 2.6em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3859ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fde050; color: #3859ff;
border: 1px solid #3859ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fde050; color: #111111;
border: 1px solid #d7bf46; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b6e2d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ddca6c; color: #3859ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1e; box-sizing:border-box;
font-family:"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"Roobert", -apple-system, "Segoe UI", sans-serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e0e2e8; }
.brand { font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#1c1c1e; }
.navlinks span { opacity:0.65; }
.btn-yellow { background:#fde050; color:#1c1c1e; border:none; border-radius:8px; height:40px;
padding:0 16px; font-weight:600; font-size:14px; }
.btn-outline { background:transparent; color:#1c1c1e; border:1px solid #c7cad5; border-radius:8px; height:40px;
padding:0 16px; font-weight:600; font-size:14px; }
.hero { display:grid; grid-template-columns:340px 1fr; align-items:center; gap:20px; padding:40px 32px 24px; }
.hero .copy .tag { display:inline-block; background:#fde050; border-radius:8px; padding:4px 10px; font-size:12px; font-weight:700; margin-bottom:10px; }
.hero h1 { font-size:36px; font-weight:500; line-height:1.08; letter-spacing:-0.9px; margin:0 0 10px; }
.hero p { font-size:14px; color:#555a6a; margin:0 0 16px; line-height:1.5; }
.row { display:flex; gap:10px; }
.board { position:relative; height:236px; border-radius:16px; background:
linear-gradient(#eef0f4 1px, transparent 1px) 0 0/24px 24px,
linear-gradient(90deg, #eef0f4 1px, transparent 1px) 0 0/24px 24px,
#fbfbfc; border:1px solid #e0e2e8; overflow:hidden; }
.note { position:absolute; border-radius:6px; padding:10px; font-size:12px; font-weight:600; line-height:1.4;
box-shadow:0 6px 14px rgba(28,28,30,0.10); }
.n1 { top:18px; left:20px; width:110px; height:90px; background:#fde050; transform:rotate(-4deg); }
.n2 { top:26px; left:150px; width:100px; height:78px; background:#c9f2e8; transform:rotate(3deg); }
.n3 { top:100px; left:60px; width:96px; height:76px; background:#ffd7e0; transform:rotate(-2deg); }
.n4 { top:36px; right:34px; width:120px; height:96px; background:#dfe3ff; transform:rotate(5deg); }
.n5 { top:132px; right:24px; width:92px; height:66px; background:#ffffff; border:1.5px solid #3859ff; transform:rotate(-3deg); color:#3859ff; }
.arrow { position:absolute; top:70px; left:126px; width:30px; height:2px; background:#1c1c1e; }
.arrow::after { content:''; position:absolute; right:-1px; top:-3px; width:0; height:0;
border-left:6px solid #1c1c1e; border-top:4px solid transparent; border-bottom:4px solid transparent; }
.cursor { position:absolute; bottom:14px; left:200px; font-size:11px; font-weight:700; color:#3859ff;
background:#ffffff; border:1px solid #3859ff; border-radius:4px; padding:2px 8px; }
.toggle { display:inline-flex; background:#f4f5f8; border-radius:40px; padding:4px; margin:26px 32px 0; }
.toggle span { padding:6px 16px; border-radius:40px; font-size:13px; font-weight:600; color:#555a6a; }
.toggle span.on { background:#ffffff; color:#1c1c1e; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 32px 0; }
.plan { border:1px solid #e0e2e8; border-radius:8px; padding:22px; }
.plan .pname { font-size:13px; font-weight:700; color:#555a6a; margin-bottom:6px; }
.plan .price { font-size:22px; font-weight:600; margin-bottom:4px; }
.plan .sub { font-size:12px; color:#555a6a; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e0e2e8; padding:12px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#555a6a; }
</style></head>
<body>
<nav>
<p class="brand display">Miro</p>
<div class="navlinks"><span>Templates</span><span>Solutions</span><span>Enterprise</span><span>Pricing</span></div>
<div class="row"><button class="btn-outline">Log in</button><button class="btn-yellow">Sign up free</button></div>
</nav>
<section class="hero">
<div class="copy">
<span class="tag">Built for teams + AI</span>
<h1 class="display">From idea to outcome, together</h1>
<p>One canvas where teams brainstorm, plan, and build — with AI right there on the board.</p>
<div class="row">
<button class="btn-yellow">Sign up free</button>
<button class="btn-outline">Watch demo</button>
</div>
</div>
<div class="board">
<div class="note n1">User<br>research</div>
<div class="note n2">Roadmap<br>Q3</div>
<div class="note n3">Design<br>review</div>
<div class="note n4">Launch<br>checklist</div>
<div class="note n5">+ AI summary</div>
<div class="arrow"></div>
<div class="cursor">Alex</div>
</div>
</section>
<div class="toggle"><span class="on">Monthly</span><span>Yearly · save 20%</span></div>
<section class="plans">
<div class="plan"><div class="pname">FREE</div><div class="price">$0</div><div class="sub">For individuals getting started</div></div>
<div class="plan"><div class="pname">STARTER</div><div class="price">$8<span style="font-size:12px;font-weight:400;"> /mo</span></div><div class="sub">For small teams</div></div>
<div class="plan"><div class="pname">BUSINESS</div><div class="price">$16<span style="font-size:12px;font-weight:400;"> /mo</span></div><div class="sub">For growing organizations</div></div>
</section>
<footer>
<span>© Miro</span>
<span>Miro · Templates · Pricing · Enterprise</span>
</footer>
</body></html>