/* Design export: Gulim, black rules, white paper and yellow interactions. */
:root { --font-sans: Gulim, '굴림', Dotum, '돋움', sans-serif; --bg:#fff; --surface:#fff; --ink:#000; --muted:#666; --primary:#000; --secondary:#f1f1f1; --accent:#ffc300; --line:#000; --bs-primary-rgb:0,0,0; --bs-link-hover-color:#000; --bs-link-hover-color-rgb:0,0,0; }
body { background:#fff; color:#000; font-size:14px; }
a:hover { color:#000; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline:3px solid #0047ab !important; outline-offset:4px; }
button, .btn, .form-control, .form-select, .card, textarea, input { border-radius:0 !important; box-shadow:none !important; }
.btn { border:1px solid #000 !important; background:#fff; color:#000; font-weight:700; padding:9px 18px; }
.btn-primary { background:#000; color:#fff; }
.btn:hover, .btn:active, .btn-primary:hover, .btn-primary:active { background:#ffc300 !important; color:#000 !important; }
.btn-outline-danger { color:#b52032; border-color:#b52032 !important; }
.form-control, .form-select { background:#fff; border:1px solid #000 !important; font-size:13px; padding:10px 12px; }
.form-control:focus, .form-select:focus { border-color:#000; background:#fff; }
.text-primary { color:#000 !important; }
.popular-ticker { display:flex; gap:24px; align-items:center; background:#f1f1f1; padding:18px 32px; font-size:12px; }
.popular-ticker>span { flex:none; }
.popular-ticker>div { display:flex; gap:26px; min-width:0; overflow:auto; white-space:nowrap; scrollbar-width:none; }
.popular-ticker a { max-width:320px; overflow:hidden; text-overflow:ellipsis; flex:none; }
.popular-ticker a:hover { background:#ffc300; }
header.design-header { position:relative; top:auto; border-bottom:1px solid #000 !important; background:white; z-index:5; }
header.compact-header { position:relative; border-bottom:1px solid #ddd !important; }
.compact-header nav { height:auto; max-width:1160px; margin:auto; padding:20px 32px; display:flex; align-items:center; gap:20px; }
.compact-header nav>div { display:flex; flex-wrap:wrap; gap:24px; font-size:13px; font-weight:700; }
.compact-brand { font-size:17px; font-weight:800; }
.compact-header a:hover { background:#ffc300; }
header .design-nav { height:auto; max-width:1160px; padding:22px 32px; margin:auto; display:flex; align-items:flex-end; justify-content:flex-start; gap:22px; }
.design-logo { flex:none; line-height:0; }
.design-logo img { width:100px; height:100px; object-fit:contain; }
.design-nav-primary,.design-nav-account { display:flex; flex-direction:column; gap:8px; font-size:21px; font-weight:600; line-height:1.2; }
.design-nav-primary>a { width:fit-content; }
.design-nav-account { margin-left:auto; text-align:right; }
.design-nav-account sup { font-size:10px; background:#ffc300; padding:3px; margin-left:3px; }
.design-nav a:hover { background:#ffc300; }
.design-search { position:relative; display:flex; align-items:center; gap:14px; margin:0; }
.design-search label { cursor:pointer; }
.design-search>div { border:1.5px solid #000; border-radius:999px; padding:7px 14px; display:flex; align-items:center; gap:8px; }
.design-search input { min-width:0; width:166px; font-size:12px; border:0 !important; background:transparent; outline-offset:0; }
.design-search button { padding:0; border:0; background:none; font-size:15px; }
.design-search .search-suggestions { position:absolute; top:100%; left:0; margin-top:10px; width:320px; max-width:80vw; z-index:10; background:#fff; border:1px solid #000; border-radius:0; padding:16px 18px; font-size:13px; font-weight:400; display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.search-suggestions[hidden], [data-tab-panel][hidden] { display:none !important; }
.search-suggestions strong { color:#777; font-size:11px; }
.search-suggestions a { text-align:right; font-size:16px; font-weight:800; }
.footer-recent { border-top:1px solid #000; margin-top:30px; }
.settings-nav a[aria-current] { background:#000; color:white; }
.design-container, .home-container, main.container { width:100%; max-width:1160px; margin:0 auto; padding:32px; }
.interior-page main.container.py-5 { padding-top:32px !important; padding-bottom:40px !important; }
.page-title { font-size:25px; font-weight:800; margin:0 0 28px; }
.eyebrow { font-size:11px; font-weight:800; letter-spacing:.12em; color:#666; margin:0 0 10px; }
.daily-title { display:flex; align-items:baseline; gap:18px; margin-bottom:20px; }
.daily-title h1 { font-size:48px; line-height:1.1; margin:0; font-weight:800; }
.daily-title a { font-size:13px; text-decoration:underline; text-underline-offset:3px; font-weight:700; }
.home-page .daily-recommendation { max-width:680px; border:1px solid #000; border-radius:0; background:white; padding:26px 28px; margin-bottom:32px; }
.home-page .daily-recommendation .poem-line { font-size:20px; line-height:1.65; padding:10px 0; }
.home-page .daily-recommendation .poem-line strong { font-size:inherit; }
.recommendation-meta { padding:16px 0 0; font-size:12px; }
.prompt-work-link { display:inline-block; margin-top:16px; font-size:13px; font-weight:800; }
.design-recent { border-top:1px solid #000; padding:38px 0; margin-top:32px; }
.recent-word-list { display:flex; gap:20px 44px; flex-wrap:wrap; margin-top:20px; }
.recent-word-link { font-size:32px; font-weight:700; padding:0; background:none; border:0; border-radius:0; }
.recent-word-link:hover { background:#ffc300; transform:rotate(-4deg); }
.design-popular { max-width:820px; padding-top:24px; }
.section-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:20px; }
.section-head h2 { font-size:18px; margin:0; }
.design-filters { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-bottom:18px; }
.design-filters nav { display:flex; flex-wrap:wrap; gap:8px; }
.design-filters a { border:1px solid #000; padding:4px 10px; font-size:12px; }
.design-filters .is-active { background:#000; color:#fff; }
.design-card-list, .profile-poems.design-card-list { display:flex; flex-direction:column; list-style:none; gap:14px; margin:0; padding:0; }
.design-card-list>li { list-style:none; }
.design-poem-card { display:flex; width:100%; border:1px solid #000 !important; background:#fff; box-shadow:none; border-radius:0; min-height:140px; position:relative; overflow:visible; }
.design-poem-card:hover { background:#ffc300; transform:none; }
.poem-card-word { flex:0 0 118px; border-right:1px solid #000; padding:34px 14px 14px; display:flex; flex-direction:column; justify-content:flex-end; background:#f1f1f1; position:relative; min-width:0; }
.poem-card-word h3 { font-size:32px; font-weight:800; line-height:1.2; margin:5px 0 0; overflow-wrap:anywhere; }
.poem-card-word[data-length="3"] h3 { font-size:26px; }
.poem-card-word[data-length="4"] h3 { font-size:20px; }
.poem-card-word[data-length="5"] h3 { font-size:16px; }
.poem-card-word .line-count { color:#666; font-size:11px; padding:0; border:0; background:none; }
.card-rank { position:absolute; top:10px; left:10px; width:23px; height:23px; background:#000; color:#fff; text-align:center; font-size:11px; padding-top:3px; }
.poem-card-content { flex:1; padding:14px 18px; min-width:0; display:flex; flex-direction:column; gap:7px; }
.card-byline { display:flex; justify-content:space-between; gap:8px; font-size:11px; font-weight:700; }
.card-byline time { color:#777; font-size:10px; font-weight:400; }
.poem-text-link { color:#000; display:block; }
.poem-line { display:flex; gap:0; align-items:baseline; font-size:15px; line-height:1.8; font-weight:600; }
.poem-line strong { display:inline-block; flex:none; width:auto; margin-right:2px; color:#000; font-size:inherit; background:none; transform:scale(1.25,.85) rotate(-8deg); }
.poem-line:nth-child(even) strong { transform:scale(.8,1.4) rotate(6deg); }
.poem-line span { overflow-wrap:anywhere; }
.card-metrics { display:flex; flex-wrap:wrap; gap:11px; font-size:10px; color:#555; margin-top:auto; }
.card-metrics span:first-child { font-weight:800; color:#000; }
.combined-poems-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:30px; align-items:start; }
.combined-explore, .combined-write-column { min-width:0; padding:0; border:0; }
.combined-write-column { display:block; }
.interior-page .explore-search { padding:0; border:0; }
.interior-page .combined-write .write-card { margin:0; padding:0; border:0 !important; }
.explore-ranking-list .poem-line strong { font-size:inherit; line-height:inherit; }
.combined-section-head { border:0; padding:0; margin:0 0 22px; }
.combined-section-head h2 { font-size:22px; font-weight:800; }
.combined-write { background:#f1f1f1; border:1px solid #000; padding:22px 24px; position:static; border-radius:0; }
.combined-write .write-card { border:0; padding:0; box-shadow:none; background:transparent; }
.combined-write .write-form-actions { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.combined-write .write-form-actions button { order:-1; width:100%; }
.write-sharing-note { font-size:11px; margin:0; }
.explore-search .btn { font-size:13px; height:100%; }
.poem-pagination { display:flex; justify-content:center; gap:6px; margin-top:24px; }
.poem-pagination a,.poem-pagination span { display:grid; place-items:center; min-width:30px; height:30px; border:1px solid #000; border-radius:0; font-size:12px; }
.poem-pagination .is-active { background:#000; color:#fff; }
.poem-pagination .is-disabled { opacity:.3; }
.search-authors { margin-bottom:20px; }
.search-authors h3 { font-size:13px; }
.search-authors a { display:flex; gap:16px; padding:10px 0; border-bottom:1px solid #ccc; }
.detail-page main.detail-layout { display:flex; flex-direction:column; max-width:760px; gap:30px; padding-top:32px !important; align-items:stretch; }
.detail-column { padding:0; }
.interior-page .detail-column .detail { padding:0; margin:0; border:0 !important; }
.detail-title { border:1px solid #000; padding:26px 28px; margin-bottom:16px; }
.interior-page .detail h1 { font-size:40px; margin:0; }
.interior-page .detail-lines { margin:20px 0; padding:0; border:0; }
.interior-page .detail-lines .poem-line { font-size:19px; line-height:1.7; padding:3px 0; }
.interior-page .comments { width:100%; margin:0; padding:0; border:0 !important; }
.detail-page .detail-meta { padding:16px 0; border-top:1px solid #000; border-bottom:1px solid #000; }
.interior-page .comments .section-head { border:0; }
.interior-page .comments h2 { font-size:16px; }
.section-head h2::after { display:none; }
.interior-page .comment { border-top:0; }
.detail-actions .rating-form { display:flex; flex-wrap:wrap; align-items:center; flex:initial; max-width:none; gap:12px; }
.rating-form .btn { width:auto; }
.comment-form { display:flex; align-items:stretch; }
.comment-form textarea { flex:1; min-width:0; }
.comment-form .btn { width:auto; white-space:nowrap; }
.detail { border:0; padding:0; background:white; box-shadow:none; border-radius:0; }
.detail-back { display:block; margin-bottom:28px; font-size:12px; }
.detail h1 { font-size:48px; margin-bottom:10px; color:#000; }
.detail-author { margin-top:24px; }
.rewrite-link { font-size:12px; text-decoration:underline; }
.detail-lines { padding:28px 0; margin:20px 0; border-top:1px solid #000; border-bottom:1px solid #000; }
.detail-lines .poem-line { font-size:24px; padding:12px 0; }
.detail-meta, .detail-actions { background:none; border:0; padding:12px 0; }
.detail-meta .rating { color:#000; }
.comments { border:0; border-left:1px solid #000; padding:0 0 0 28px; background:none; }
.comments .section-head h2 { font-size:17px; }
.comment { border-bottom:1px solid #ccc; padding:18px 0; }
.comment-form { gap:10px; }
.comment-form .btn { font-size:12px; }
.follow-form { margin-top:12px; }
.star-rating { display:flex; gap:6px; border:0; margin:0; padding:0; }
.star-rating legend { float:none; font-size:12px; width:auto; margin:0 12px 0 0; }
.star-rating label { position:relative; cursor:pointer; }
.star-rating input { position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; }
.star-rating span[aria-hidden] { font-size:24px; color:#aaa; }
.star-rating label:has(input:checked) span[aria-hidden], .star-rating label:has(~ label input:checked) span[aria-hidden] { color:#000; }
.star-rating label:has(input:focus-visible) { outline:3px solid #0047ab; }
.comment-reply { font-size:11px; margin-top:10px; }
.comment-reply form { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.reply-context { font-size:11px; color:#666; }
.avatar { background:#000; border-radius:0; }
.write-fab { position:fixed; right:26px; bottom:32px; width:210px; height:210px; border-radius:50%; border:1.5px solid #000; background:#f1f1f1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; z-index:6; }
.write-fab>span { width:120px; height:120px; position:relative; overflow:hidden; border-radius:14px; }
.write-fab img { position:absolute; inset:0; width:120px; height:120px; object-fit:cover; transition:opacity .15s; }
.write-fab .face-back { opacity:0; }
.write-fab:hover { background:#ffc300; }
.write-fab:hover .face-back { opacity:1; }
.write-fab:hover .face-front { opacity:0; }
.write-fab strong { font-size:14px; }
.interior-page .write-fab { width:210px; height:210px; right:26px; bottom:32px; gap:14px; }
.interior-page .write-fab>span,.interior-page .write-fab img { width:120px; height:120px; }
.interior-page .write-fab strong { font-size:14px; }
.account-links { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; margin:40px auto 0; font-size:12px; }
.account-links button { border:0; background:none; padding:0; }
footer { border-top:1px solid #ccc !important; margin-top:24px !important; padding-bottom:90px !important; background:#fff; }
.footer-content { max-width:1160px; font-size:11px; }
.empty-state { padding:36px 20px; background:#f1f1f1; border:1px solid #000; border-radius:0; text-align:center; }
.empty-state h2 { font-size:17px; }
.feed-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:36px; }
.author-suggestions { background:#f1f1f1; border:1px solid #000; padding:20px; }
.author-suggestions h2 { font-size:15px; }
.person-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid #ccc; }
.person-row p { color:#666; font-size:12px; margin:4px 0 0; }
.person-row .btn { white-space:nowrap; font-size:11px; padding:5px 10px; }
.narrow-page { max-width:820px; min-height:50vh; }
.notification-row { display:flex; align-items:flex-start; gap:12px; border-bottom:1px solid #ddd; padding:20px 16px; }
.notification-row.unread { background:#f1f1f1; font-weight:700; }
.notification-row time { display:block; font-size:11px; color:#777; margin-top:6px; }
.unread-dot { width:6px; height:6px; margin-top:8px; flex:none; background:#0047ab; }
.profile-heading { display:flex; gap:24px; align-items:center; padding:12px 0 30px; }
.profile-heading h1 { font-size:30px; margin:0 0 8px; }
.profile-heading p { font-size:13px; margin:0 0 10px; }
.profile-avatar { display:grid; place-items:center; width:96px; height:96px; flex:none; object-fit:cover; color:#fff; font-size:32px; font-weight:800; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-tabs { display:flex; gap:24px; flex-wrap:wrap; border-bottom:1px solid #000; padding:16px 0; margin-bottom:24px; }
.profile-tabs a { font-weight:700; font-size:13px; }
.profile-tabs a:hover, .profile-tabs [aria-current] { background:#ffc300; }
.activity-section { padding:28px 0; scroll-margin-top:20px; }
.activity-section h2 { font-size:17px; margin-bottom:20px; }
.activity-row { display:block; padding:16px; border:1px solid #000; margin-bottom:10px; }
.activity-row p { margin:8px 0 0; }
.profile-stats { display:flex; flex-wrap:wrap; background:white; border:1px solid #000; border-radius:0; margin:24px 0; }
.profile-stats>div { flex:1; padding:20px; border-right:1px solid #000; min-width:120px; }
.profile-stats strong { display:block; color:#000; font-size:25px; }
.profile-stats span { font-size:11px; }
.featured-poem { max-width:680px; margin:20px 0; }
.profile-container { padding-top:32px !important; }
.settings-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:36px; }
.settings-nav { display:flex; flex-direction:column; gap:10px; align-self:start; }
.settings-nav a { padding:12px 14px; border:1px solid #000; font-weight:700; font-size:13px; }
.settings-nav a:hover { background:#ffc300; }
.settings-panel { border:1px solid #000; padding:26px; margin-bottom:24px; scroll-margin-top:24px; }
.settings-panel h2 { font-size:17px; margin-bottom:24px; }
.stack-form { display:flex; flex-direction:column; gap:16px; }
.stack-form label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; }
.stack-form small { color:#777; }
.stack-form>.btn { align-self:start; min-width:100px; }
.notification-option { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid #ddd; }
.notification-option input { width:20px; height:20px; accent-color:#000; }
.settings-content { max-width:680px; }
.auth-layout { display:grid; grid-template-columns:1fr 1fr; min-height:540px; gap:80px; padding-top:48px; }
.auth-panel { max-width:400px; width:100%; margin:auto; }
.auth-panel h1 { font-size:24px; margin:24px 0; }
.auth-panel .btn { width:100%; }
.auth-design-note { background:#f1f1f1; border-left:1px solid #000; padding:40px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.auth-design-note h2 { font-size:34px; line-height:1.5; font-weight:800; margin:20px 0; }
.auth-design-note img { mix-blend-mode:multiply; object-fit:cover; }
.google-login-section { margin-top:26px; border-top:1px solid #ccc; padding-top:20px; }
.google-login-section p { font-size:11px; color:#666; margin-top:12px; }
@media (max-width:900px) {
 .design-search>div { max-width:200px; } .design-search input { width:120px; }
 .combined-poems-layout { grid-template-columns:minmax(0,1fr) 280px; gap:22px; }
 .detail-layout { grid-template-columns:1fr; } .comments { border-left:0; padding:28px 0 0; border-top:1px solid #000; }
 .feed-layout { grid-template-columns:1fr; } .author-suggestions { order:-1; }
 .write-fab,.interior-page .write-fab { width:130px; height:130px; right:18px; bottom:18px; gap:6px; } .write-fab>span,.write-fab img,.interior-page .write-fab>span,.interior-page .write-fab img { width:70px; height:70px; } .write-fab strong,.interior-page .write-fab strong { font-size:11px; }
}
@media (max-width:650px) {
 .popular-ticker { padding:12px 18px; gap:16px; font-size:10px; }
 header .design-nav { padding:20px 18px; gap:16px; flex-wrap:wrap; }
 .design-logo img { width:70px; height:70px; }
 .design-nav-primary,.design-nav-account { font-size:16px; gap:7px; }
 .design-search { position:static; flex-wrap:wrap; gap:8px; } .design-search>div { position:absolute; left:18px; right:18px; bottom:16px; max-width:none; } .design-search input { flex:1; width:100%; }
 .design-search .search-suggestions { top:calc(100% - 12px); bottom:auto; left:18px; right:18px; width:auto; max-width:none; }
 header.design-header { padding-bottom:52px; }
 .design-nav-account { margin-left:auto; }
 .design-container,.home-container,main.container { padding:24px 18px; }
 .compact-header nav { padding:18px; gap:16px; } .compact-header nav>div { gap:14px; font-size:12px; }
 .daily-title h1,.detail h1 { font-size:40px; }
 .home-page .daily-recommendation { padding:20px; } .home-page .daily-recommendation .poem-line { font-size:17px; }
 .recent-word-list { gap:18px 26px; } .recent-word-link { font-size:26px; }
 .combined-poems-layout { display:flex; flex-direction:column; gap:30px; } .combined-explore,.combined-write-column { width:100%; } .combined-write-column { order:-1; } .combined-write { padding:20px; }
 .poem-card-word { flex-basis:90px; padding:30px 10px 12px; } .poem-card-word h3 { font-size:26px; } .poem-card-content { padding:12px; } .card-byline { flex-wrap:wrap; gap:2px; } .card-byline time { font-size:9px; }
 .poem-card-word[data-length="3"] h3 { font-size:20px; } .poem-card-word[data-length="4"] h3 { font-size:16px; } .poem-card-word[data-length="5"] h3 { font-size:13px; }
 .poem-line { font-size:13px; } .card-metrics { gap:8px; font-size:9px; }
 .detail-lines .poem-line { font-size:20px; } .detail-meta { flex-wrap:wrap; } .detail-actions { flex-wrap:wrap; }
 .settings-layout { grid-template-columns:1fr; gap:22px; } .settings-nav { display:grid; grid-template-columns:1fr 1fr; } .settings-panel { padding:20px; }
 .profile-heading { gap:18px; align-items:flex-start; } .profile-avatar { width:70px; height:70px; } .profile-heading h1 { font-size:24px; }
 .auth-layout { display:flex; flex-direction:column; gap:30px; } .auth-design-note { border:1px solid #000; padding:26px; } .auth-design-note h2 { font-size:28px; }
 .write-fab,.interior-page .write-fab { width:auto; height:auto; right:12px; bottom:12px; padding:12px 16px; border-radius:999px; background:#ffc300; } .write-fab>span { display:none; } .write-fab strong,.interior-page .write-fab strong { font-size:12px; }
 .notification-row { padding:16px 10px; } .section-head { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .poem-line strong,.recent-word-link:hover { transform:none; } }