/* UTANOBA visual redesign 2026-09-23 — based on approved UI image */
:root{--ut-pink:#ff4f7f;--ut-pink2:#ff7ca0;--ut-ink:#26252b;--ut-muted:#76747c;--ut-line:#ece8eb;--ut-paper:#fff;--ut-cream:#fffaf8;--ut-blue:#67a9ef;--ut-shadow:0 14px 40px rgba(47,39,51,.08);--ut-radius:18px}
body{background:#fff;color:var(--ut-ink)}
.wrap{width:min(1180px,calc(100% - 40px))}
.site-header{background:rgba(255,255,255,.97);border-bottom:1px solid #eee9ec;box-shadow:0 2px 18px rgba(42,36,46,.03)}
.site-header .nav{height:72px;gap:24px}.site-header .brand{min-width:190px;gap:0}.site-header .brand-mark{display:none}.site-header .brand-text{font-family:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;font-style:italic;font-weight:700;letter-spacing:.12em;font-size:24px}.site-header .brand-text small{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;font-style:normal;font-size:8px;letter-spacing:.04em;color:#8f8b90;margin-top:5px}.desktop-nav{gap:23px!important}.desktop-nav a{padding:25px 0!important;font-size:13px}.desktop-nav a:after{content:"";position:absolute;left:0;right:0;bottom:15px;height:2px;border-radius:2px;background:var(--ut-pink);transform:scaleX(0);transition:.2s}.desktop-nav a:hover:after,body[data-page="index.php"] .desktop-nav a[href="index.php"]:after{transform:scaleX(1)}
.nav-actions .btn,.ut-btn{border-radius:8px}.nav-actions .btn.pink{background:var(--ut-pink)}

.ut-hero{position:relative;overflow:hidden;background:linear-gradient(100deg,#eef4fb 0%,#f9f2f4 50%,#dfeaf7 100%);border-bottom:1px solid #ece8eb}.ut-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 18%,rgba(255,255,255,.8),transparent 30%),radial-gradient(circle at 84% 8%,rgba(255,255,255,.65),transparent 28%);pointer-events:none}.ut-hero-grid{position:relative;z-index:1;min-height:420px;display:grid;grid-template-columns:1.05fr .9fr .7fr;gap:22px;align-items:center;padding:28px 0}.ut-hero-copy{padding:35px 0}.ut-handline{font-family:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;font-style:italic;font-size:clamp(38px,4.4vw,64px);font-weight:700;line-height:1.25;letter-spacing:.04em;transform:rotate(-2deg);max-width:520px}.ut-handline.small{font-size:clamp(24px,3.3vw,42px);transform:none}.ut-hero-copy p{max-width:520px;margin:26px 0 0;font-size:14px;line-height:2;color:#4c4a50}.ut-hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}.ut-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 24px;font-weight:800;text-decoration:none}.ut-btn-primary{background:linear-gradient(135deg,#ff3f78,#ff678d);color:#fff;box-shadow:0 12px 26px rgba(255,79,127,.22)}.ut-text-link{font-size:13px;text-decoration:underline;text-underline-offset:4px}.ut-hero-portrait{align-self:stretch;display:flex;align-items:flex-end;justify-content:center;position:relative}.ut-hero-portrait:before{content:"";position:absolute;inset:20px -30px 12px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7),transparent 70%)}.ut-hero-portrait img{position:relative;width:100%;max-width:390px;height:320px;object-fit:cover;object-position:center 38%;border-radius:48% 48% 16px 16px;filter:saturate(.86) contrast(.98);box-shadow:0 22px 45px rgba(35,45,68,.12)}
.ut-campaign-card{display:block;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:22px 22px 18px;box-shadow:0 18px 42px rgba(42,48,66,.13);backdrop-filter:blur(12px);color:var(--ut-ink);text-decoration:none}.ut-campaign-badge{display:inline-block;background:#ffdbe6;color:#e74670;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800}.ut-campaign-card small{display:block;margin-top:16px;font-size:11px;font-weight:800}.ut-campaign-card strong{display:block;margin-top:5px;font-size:20px;line-height:1.35}.ut-campaign-card strong em{font-style:normal;color:var(--ut-pink);font-size:28px}.ut-campaign-card ul{list-style:none;padding:0;margin:16px 0 12px}.ut-campaign-card li{font-size:11px;padding:4px 0}.ut-campaign-card li:before{content:"✓";color:var(--ut-pink);font-weight:900;margin-right:7px}.ut-campaign-state{display:block;text-align:right;font-size:10px;color:#777}

.ut-quick-nav{background:#fff;border-bottom:1px solid var(--ut-line)}.ut-quick-grid{display:grid;grid-template-columns:repeat(6,1fr)}.ut-quick-grid a{min-height:64px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;text-decoration:none}.ut-quick-grid a:hover{background:#fff8fa}.ut-qicon{font-size:20px}.qi-pink,.qi-red{color:#ff4f7f}.qi-gold,.qi-orange{color:#e9a72d}.qi-blue{color:#54a2e8}.qi-green{color:#50b8a7}
.ut-adline{padding-top:18px}
.ut-home-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;padding:24px 0 54px}.ut-home-main,.ut-home-side{min-width:0}.ut-home-side{display:flex;flex-direction:column;gap:18px}.ut-section,.ut-side-card{background:#fff;border:1px solid var(--ut-line);border-radius:12px;box-shadow:0 6px 22px rgba(45,42,54,.04)}.ut-section{padding:18px;margin-bottom:18px}.ut-side-card{padding:16px}.ut-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}.ut-section-head h2{margin:0;font-size:18px}.ut-section-head h2 span{color:var(--ut-pink)}.ut-section-head h2 .gold,.gold{color:#e9ad28}.ut-section-head h2 .pink{color:#ff4f7f}.ut-section-head>a{font-size:11px;color:var(--ut-pink);font-weight:800}
.ut-featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.ut-lyric-card{overflow:hidden;border:1px solid var(--ut-line);border-radius:8px;background:#fff;transition:.2s}.ut-lyric-card:hover{transform:translateY(-2px);box-shadow:var(--ut-shadow)}.ut-card-cover{height:140px;display:flex;align-items:flex-end;padding:16px;color:#fff;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:18px;line-height:1.4;text-shadow:0 2px 9px rgba(0,0,0,.28);position:relative;overflow:hidden}.ut-card-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(15,20,30,.38))}.ut-card-cover span{position:relative;z-index:1}.ut-cover-1{background:linear-gradient(180deg,#719bd6,#d4a5bd 47%,#565f78 48%,#222f43)}.ut-cover-2{background:linear-gradient(180deg,#314965,#7a8ba3 50%,#152438 51%,#091521)}.ut-cover-3{background:linear-gradient(180deg,#59a7e7,#9ac9e8 56%,#9bc96d 57%,#77a756)}.ut-cover-4{background:radial-gradient(circle at 72% 18%,rgba(255,239,188,.85),transparent 15%),linear-gradient(180deg,#314058,#876c6d 56%,#121a29 57%,#05080d)}.ut-card-body{padding:11px}.ut-card-body h3{font-size:14px;margin:0 0 6px}.ut-card-body p{font-size:11px;color:#66636a;line-height:1.65;min-height:36px;margin:0 0 10px}.ut-card-meta{display:flex;align-items:center;gap:6px;font-size:9px;color:#888}.ut-card-meta b{color:#4e4c52;margin-right:auto;font-size:10px}.ut-avatar{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#68798b,#d6a9a9);color:#fff;font-weight:800}
.ut-contest-banner{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:3px 20px;align-items:center;margin:18px 0;padding:24px 26px;border-radius:12px;background:linear-gradient(100deg,rgba(15,29,48,.93),rgba(38,78,108,.9)),linear-gradient(180deg,#6881a0,#132132);color:#fff;position:relative;overflow:hidden}.ut-contest-banner:before{content:"";position:absolute;right:10%;top:-80px;width:250px;height:250px;border-radius:50%;background:rgba(84,171,255,.18);filter:blur(15px)}.ut-contest-eyebrow{grid-column:1;grid-row:1/3;writing-mode:vertical-rl;font-size:11px;letter-spacing:.2em;opacity:.75}.ut-contest-banner strong{font-size:24px;z-index:1}.ut-contest-banner small{font-size:11px;opacity:.78;z-index:1}.ut-contest-banner i{grid-column:3;grid-row:1/3;font-style:normal;background:#ff4f7f;padding:9px 14px;border-radius:999px;font-size:11px;font-weight:800;z-index:1}
.ut-ranking-list{display:grid;gap:6px}.ut-rank-row{display:grid;grid-template-columns:26px 48px 1fr auto;gap:10px;align-items:center;padding:6px;border-radius:8px}.ut-rank-row:hover{background:#fff8fa}.ut-rank-num{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;border:1px solid #ddd8dc;font-size:11px}.ut-rank-num.top{background:#f1bc35;border-color:#f1bc35;color:#fff;font-weight:900}.ut-rank-thumb{display:block;width:48px;height:48px;border-radius:6px}.ut-rank-copy{display:flex;flex-direction:column;min-width:0}.ut-rank-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ut-rank-copy small{font-size:10px;color:#89868d}.ut-rank-like{font-size:11px;color:#ff6d8f}
.ut-recommend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ut-rec-card{display:flex;align-items:center;gap:9px;border:1px solid var(--ut-line);border-radius:8px;padding:8px;min-width:0}.ut-rec-card span:last-child{display:flex;flex-direction:column;min-width:0}.ut-rec-card strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ut-rec-card small{font-size:9px;color:#888}
.ut-news-row{display:grid;grid-template-columns:72px auto 1fr;gap:7px;align-items:start;padding:11px 0;border-bottom:1px solid var(--ut-line);font-size:10px}.ut-news-row:last-child{border-bottom:0}.ut-news-row time{color:#8f8c92}.ut-news-row b{font-weight:600;line-height:1.55}.ut-tag{display:inline-flex;align-items:center;border-radius:999px;padding:2px 6px;font-size:8px;white-space:nowrap}.ut-tag.pink{background:#ffe5ec;color:#e54873}.ut-tag.blue{background:#e5f2ff;color:#4385bf}.ut-tag.gray{background:#eee;color:#777}.ut-collab-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--ut-line)}.ut-collab-row:last-child{border-bottom:0}.ut-collab-icon{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#ff5c87;color:#fff;font-weight:900}.ut-collab-row span:nth-child(2){display:flex;flex-direction:column;min-width:0}.ut-collab-row strong{font-size:11px}.ut-collab-row small{font-size:9px;color:#87848b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ut-collab-row>b{margin-left:auto;color:#aaa}.ut-user-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ut-user-grid a{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}.ut-user-photo{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:18px;font-weight:800;margin-bottom:5px;background:linear-gradient(135deg,#d89a6f,#624c5b)}.ut-user-photo.u2{background:linear-gradient(135deg,#536679,#9a7b87)}.ut-user-photo.u3{background:linear-gradient(135deg,#4d96a8,#344759)}.ut-user-photo.u4{background:linear-gradient(135deg,#6d7686,#c49f85)}.ut-user-grid strong{font-size:9px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ut-user-grid small{font-size:8px;color:#8b888f}.ut-beginner-card{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;overflow:hidden;background:linear-gradient(135deg,#fff8fa,#fff0f3);border:1px solid #f4dfe5;border-radius:12px;color:var(--ut-ink);text-decoration:none}.ut-beginner-card>span{padding:18px}.ut-beginner-card small{display:block;color:#ff4f7f;font-weight:800;margin-bottom:8px}.ut-beginner-card strong{display:block;font-size:16px;line-height:1.5}.ut-beginner-card em{display:inline-block;margin-top:14px;font-style:normal;font-size:9px;border:1px solid #b8c6dc;border-radius:6px;padding:6px 8px}.ut-beginner-card img{width:100%;height:150px;object-fit:cover;object-position:center;border-left:1px solid #f0dde2}
.ut-weekly{margin:0 0 18px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:linear-gradient(135deg,#fff7fa,#f8f6ff);border:1px solid #eee4f2;border-radius:14px;padding:18px 22px}.ut-weekly>span{font-size:10px;font-weight:900;color:#ff4f7f}.ut-weekly h2{margin:0;font-size:20px}.ut-weekly p{margin:3px 0 0;color:#74717a;font-size:11px}.ut-weekly a{font-size:11px;font-weight:800;color:#ff4f7f}.ut-personal{margin-bottom:18px}.ut-final-cta{margin:22px 0 42px;min-height:190px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:14px;background:linear-gradient(90deg,rgba(244,234,219,.75),rgba(255,255,255,.85),rgba(230,224,213,.75)),linear-gradient(180deg,#f7f1e8,#e5dccf);border:1px solid #eee5dc;overflow:hidden}.ut-final-cta p{margin:8px 0 18px;font-size:12px;color:#625e61}.ut-empty{grid-column:1/-1;padding:22px;color:#8a878e;font-size:11px}.ut-empty.small{padding:10px 0}

.site-footer{background:#fff;border-top:1px solid #eee8eb}.site-footer .footer-grid{padding-top:34px}.footer-script{font-family:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;font-style:italic;font-size:24px!important;letter-spacing:.12em!important}.site-footer .footer-links a:hover{color:#ff4f7f}
/* Global visual alignment for inner pages */
.page-head h1,.form-card h1,.work-top h1,.profile-hero h1,.legal-page h1{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:-.02em}.card,.form-card,.side-card,.profile-detail-card,.plus-panel,.weekly-prompt,.update-card,.list{border-color:var(--ut-line)!important;border-radius:14px!important;box-shadow:0 7px 22px rgba(46,40,50,.04)!important}.btn.pink{background:linear-gradient(135deg,#ff3f78,#ff678d)}input,textarea,select{border-color:#e4dfe3;border-radius:10px}.lyrics{border-radius:16px;background:#fffdfc}.contest-hero{background:linear-gradient(135deg,#70a9e8,#ef6e95)}

@media(max-width:1100px){.ut-hero-grid{grid-template-columns:1fr .8fr}.ut-campaign-card{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:15px;align-items:center}.ut-campaign-card ul{display:flex;gap:14px;margin:6px 0}.ut-campaign-state{grid-column:2;text-align:left}.ut-home-layout{grid-template-columns:minmax(0,1fr) 290px}.ut-featured-grid{grid-template-columns:repeat(2,1fr)}.ut-quick-grid{grid-template-columns:repeat(3,1fr)}.desktop-nav{gap:13px!important}.desktop-nav a{font-size:12px}}
@media(max-width:820px){.wrap{width:min(100% - 24px,1180px)}.site-header .nav{height:62px}.site-header .brand{min-width:0}.site-header .brand-text{font-size:20px}.ut-hero-grid{display:grid;grid-template-columns:1fr;min-height:0;padding:20px 0}.ut-hero-copy{padding:20px 4px 0;order:1}.ut-hero-portrait{order:2;height:260px;margin:0 -12px}.ut-hero-portrait img{width:100%;max-width:none;height:260px;border-radius:18px}.ut-campaign-card{order:3;grid-column:auto;display:block;margin-top:0}.ut-campaign-card ul{display:block}.ut-campaign-state{text-align:right}.ut-handline{font-size:42px}.ut-hero-copy p{font-size:13px;line-height:1.8}.ut-quick-grid{grid-template-columns:repeat(3,1fr)}.ut-quick-grid a{min-height:54px;font-size:10px}.ut-home-layout{grid-template-columns:1fr;padding-top:16px}.ut-home-side{grid-row:auto}.ut-featured-grid{grid-template-columns:repeat(2,1fr)}.ut-card-cover{height:120px}.ut-contest-banner{grid-template-columns:1fr;grid-template-rows:auto;gap:6px}.ut-contest-eyebrow{writing-mode:horizontal-tb;grid-column:auto;grid-row:auto}.ut-contest-banner i{grid-column:auto;grid-row:auto;justify-self:start;margin-top:8px}.ut-recommend-grid{grid-template-columns:1fr 1fr}.ut-user-grid{grid-template-columns:repeat(4,1fr)}.ut-weekly{grid-template-columns:1fr}.ut-beginner-card{grid-template-columns:1fr 1fr}.site-footer{padding-bottom:72px}}
@media(max-width:520px){.ut-handline{font-size:34px}.ut-hero-actions{align-items:stretch;flex-direction:column}.ut-btn{width:100%}.ut-text-link{text-align:center}.ut-quick-grid{grid-template-columns:repeat(3,1fr)}.ut-qicon{font-size:17px}.ut-featured-grid{grid-template-columns:1fr 1fr;gap:8px}.ut-card-cover{height:105px;padding:10px;font-size:14px}.ut-card-body{padding:8px}.ut-card-body p{display:none}.ut-card-meta span:nth-last-child(-n+2){display:none}.ut-section{padding:13px 10px}.ut-section-head h2{font-size:15px}.ut-section-head>a{font-size:9px}.ut-rank-row{grid-template-columns:24px 42px 1fr auto}.ut-rank-thumb{width:42px;height:42px}.ut-recommend-grid{grid-template-columns:1fr}.ut-user-grid{grid-template-columns:repeat(4,1fr)}.ut-user-photo{width:46px;height:46px}.ut-beginner-card{grid-template-columns:1.15fr .85fr}.ut-beginner-card>span{padding:14px}.ut-beginner-card img{height:130px}.ut-final-cta{padding:22px 16px}.ut-campaign-card strong{font-size:18px}.ut-campaign-card strong em{font-size:25px}}