.app-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: stretch center;
    padding: 0;
}

.notebook {
    position: relative;
    width: min(100vw, 430px);
    min-height: 100vh;
    min-height: 100dvh;
    display: none;
    filter: none;
}

.notebook.is-active {
    display: block;
}

.paper {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    padding: max(82px, calc(env(safe-area-inset-top) + 72px)) 22px calc(88px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px) 0 16px / 100% 28px,
        linear-gradient(98deg, rgba(255, 250, 238, .96), rgba(255, 246, 226, .97));
    box-shadow:
        inset 0 0 24px rgba(222, 198, 151, .18),
        0 1px 0 rgba(255, 255, 255, .75);
}

.paper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background:
        repeating-linear-gradient(24deg, transparent 0 7px, rgba(159, 133, 92, .07) 8px 9px),
        repeating-linear-gradient(148deg, transparent 0 10px, rgba(255, 255, 255, .22) 11px 12px);
    mix-blend-mode: multiply;
}

.paper-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    z-index: 0;
}

.rings {
    position: absolute;
    z-index: 3;
    top: -8px;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.ring-icon {
    width: 24px;
    height: 44px;
    transform: rotate(var(--turn, 2deg));
    background: var(--ring, #5fa8e0);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 50'><path d='M7 40 C 0 28, 3 6, 17 6 C 27 6, 30 20, 23 26' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/><ellipse cx='9' cy='41' rx='5.5' ry='3.5' fill='black'/></svg>") top center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 50'><path d='M7 40 C 0 28, 3 6, 17 6 C 27 6, 30 20, 23 26' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/><ellipse cx='9' cy='41' rx='5.5' ry='3.5' fill='black'/></svg>") top center / contain no-repeat;
}

.rings span:nth-child(2n) {
    --turn: -3deg;
}

.rings span:nth-child(3n) {
    --turn: 4deg;
}

.rings span:nth-child(5n) {
    --turn: -2deg;
}

.rings span:nth-child(7n) {
    --turn: 2deg;
}

.rings-red {
    --ring: #f45d48;
}

.rings-blue {
    --ring: #3f9bdd;
}

.rings-orange {
    --ring: #f08a32;
}

.rings-purple {
    --ring: #9172ce;
}

.rings-pink {
    --ring: #f06e91;
}

.rings-green {
    --ring: #62b86b;
}

.rings-yellow {
    --ring: #e0a229;
}

.plain-back {
    position: absolute;
    z-index: 2;
    top: max(46px, calc(env(safe-area-inset-top) + 38px));
    left: 18px;
    width: 34px;
    height: 34px;
    color: #191817;
    font-size: 40px;
    line-height: 26px;
    transform: rotate(-2deg);
}

.plain-back,
.footer-nav b,
.explore-cta b,
.comment-form button,
.school-building::after,
.profile-flower::before,
.profile-card button,
.my-list span,
.my-list b {
    font-family: Arial, sans-serif;
}

.page-title {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: -4px 0 16px;
    color: #1f1d1b;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0;
}

.footer-nav {
    position: absolute;
    z-index: 4;
    bottom: 0;
    width: 100%;
    height: calc(72px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    border-top: 1.5px solid rgba(207, 184, 146, .8);
    background: rgba(255, 250, 239, .88);
    border-radius: 0;
    backdrop-filter: blur(3px);
}

.footer-nav button {
    height: 100%;
    display: grid;
    place-items: center;
    gap: 2px;
    color: #1d1b18;
    font-size: 16px;
}

.footer-nav b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 23px;
    line-height: 1;
}

.footer-nav .is-active,
.footer-nav .is-active b {
    color: var(--nav-color, #2c9be6);
}

.home-bg {
    height: calc(100vh - 72px - env(safe-area-inset-bottom));
}

.home-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.home-header h1 {
    color: #f16845;
    font-size: 31px;
    font-weight: 400;
    text-shadow: 1px 1px rgba(255, 255, 255, .8);
}

.home-header b {
    color: #4b92db;
    font-weight: 400;
}

.star {
    color: #ffcc28;
    font-size: 26px;
    -webkit-text-stroke: 1px #70511d;
    transform: rotate(-13deg);
}

.title-logo {
    width: 55px;
    height: 42px;
}

.rainbow-mini {
    width: 55px;
    height: 30px;
    vertical-align: -7px;
}

.section-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.section-row h2,
.section-row p {
    font-weight: 400;
    font-size: 16px;
}

.weekly-card {
    position: relative;
    z-index: 1;
}

.school-stat-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1.6px solid #d9c08f;
    border-radius: 8px;
    background: rgba(255, 250, 236, .78);
}

.school-stat-card.compact {
    margin: 0 0 12px;
}

.school-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.school-stat-head strong,
.school-stat-head span {
    font-weight: 400;
    font-size: 16px;
}

.school-stat-head span {
    color: #796a56;
}

.school-stat-bars {
    display: grid;
    gap: 5px;
}

.school-stat-row {
    display: grid;
    grid-template-columns: 62px 1fr 22px;
    align-items: center;
    gap: 7px;
    font-size: 14px;
}

.school-stat-row span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.school-stat-row .mini-face {
    width: 18px;
    height: 18px;
    border-width: 1.4px;
}

.school-stat-row b {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(215, 193, 151, .42);
}

.school-stat-row em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #68aee8;
}

.school-stat-row small {
    color: #6f604d;
    text-align: right;
}

.school-stat-card p {
    color: #5e5143;
    font-size: 14px;
    line-height: 1.35;
}

.graph {
    position: relative;
    height: 135px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 9px;
    padding: 20px 6px 25px;
    border-left: 2px solid #e2be75;
    border-bottom: 2px solid #e2be75;
}

.axis-lines {
    position: absolute;
    inset: 12px 0 20px;
    background: repeating-linear-gradient(to top, rgba(226, 190, 117, .36) 0 1px, transparent 1px 18px);
}

.bar {
    position: relative;
    z-index: 1;
    width: 16px;
    justify-self: center;
    height: calc((var(--angry) + var(--sad) + var(--love) + var(--happy) + var(--peace) + var(--worry)) * 1px);
    min-height: 12px;
    border-radius: 3px 3px 0 0;
    border: 1px solid rgba(127, 98, 52, .18);
    background:
        repeating-linear-gradient(162deg, rgba(255, 255, 255, .18) 0 2px, transparent 3px 7px),
        linear-gradient(to top,
            #ef5a48 0 calc(var(--angry) * 1px),
            #70afe9 calc(var(--angry) * 1px) calc((var(--angry) + var(--sad)) * 1px),
            #f38ebe calc((var(--angry) + var(--sad)) * 1px) calc((var(--angry) + var(--sad) + var(--love)) * 1px),
            #ffc736 calc((var(--angry) + var(--sad) + var(--love)) * 1px) calc((var(--angry) + var(--sad) + var(--love) + var(--happy)) * 1px),
            #82ce5b calc((var(--angry) + var(--sad) + var(--love) + var(--happy)) * 1px) calc((var(--angry) + var(--sad) + var(--love) + var(--happy) + var(--peace)) * 1px),
            #a978df 0);
    box-shadow: inset 4px 0 rgba(255, 255, 255, .2);
    transform: rotate(var(--bar-tilt, -.8deg));
}

.bar:nth-of-type(2n) {
    --bar-tilt: .8deg;
}

.bar::after,
.crayon-button::after,
.explore-cta::after,
.mood-shortcuts button::after,
.mood-label::after,
.share-note::after,
.profile-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    background: repeating-linear-gradient(154deg, transparent 0 3px, rgba(255, 255, 255, .5) 4px 5px);
}

.bar i {
    position: absolute;
    bottom: -20px;
    left: 50%;
    font-style: normal;
    transform: translateX(-50%);
    font-size: 14px;
}

.mood-shortcuts {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    margin: 22px 0;
}

.mood-shortcuts button,
.filter-tabs button {
    position: relative;
    min-width: 0;
    display: grid;
    place-items: center;
    gap: 5px;
    color: #151413;
}

.mini-face,
.mini-character {
    position: relative;
    display: inline-block;
    width: 31px;
    height: 31px;
    border: 2px solid #1f1c19;
    border-radius: 48% 52% 50% 47% / 49% 45% 55% 51%;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, .34) 0 13%, transparent 14%),
        repeating-linear-gradient(155deg, rgba(255, 255, 255, .22) 0 2px, rgba(255, 255, 255, 0) 3px 7px),
        repeating-linear-gradient(24deg, rgba(84, 55, 31, .08) 0 1px, transparent 2px 6px),
        var(--mood, #ffc837);
    box-shadow:
        inset 3px 0 rgba(255, 255, 255, .16),
        0 1px 0 rgba(99, 74, 45, .18);
    transform: rotate(var(--face-turn, -4deg));
}

.mini-face::selection,
.mini-character::selection {
    background: transparent;
}

.mini-face::before,
.mini-face::after,
.mini-character::before,
.mini-character::after {
    content: "";
    position: absolute;
}

.mini-face::before {
    left: 8px;
    top: 10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #201d19;
    box-shadow: 11px 0 #201d19;
}

.mini-face::after {
    left: 10px;
    top: 19px;
    width: 11px;
    height: 5px;
    border-bottom: 2px solid #201d19;
    border-radius: 0 0 12px 12px;
}

.mini-face.angry {
    --mood: #f45d48;
}

.mini-face.sad {
    --mood: #73b6ea;
    --face-turn: 3deg;
}

.mini-face.love {
    --mood: #f79ac1;
    --face-turn: -2deg;
}

.mini-face.happy {
    --mood: #ffd13d;
    --face-turn: 2deg;
}

.mini-face.peace {
    --mood: #7fd15d;
    --face-turn: -1deg;
}

.mini-face.worry {
    --mood: #b48bea;
    --face-turn: 4deg;
}

.mini-face.sad::after,
.mini-face.worry::after {
    top: 21px;
    border-top: 2px solid #201d19;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

.mini-face.angry::before {
    width: 8px;
    height: 5px;
    border-top: 2px solid #201d19;
    border-radius: 50%;
    background: transparent;
    transform: rotate(20deg);
    box-shadow: 11px 0 0 transparent;
}

.mini-face.angry::after {
    left: 17px;
    top: 10px;
    width: 8px;
    height: 5px;
    border-top: 2px solid #201d19;
    border-bottom: 0;
    border-radius: 50%;
    transform: rotate(-20deg);
}

.explore-cta {
    position: relative;
    z-index: 2;
    width: 178px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
    border: 2px solid #2d98e4;
    border-radius: 14px 18px 15px 16px;
    background: #dff3ff;
    box-shadow: 0 3px 0 #85c8ef;
    transform: rotate(-2deg);
}

.explore-cta span,
.explore-cta b {
    color: #1779c4;
    font-size: 18px;
    font-weight: 400;
}

.explore-cta b {
    font-size: 38px;
    line-height: .7;
}

.heart-record {
    position: absolute;
    z-index: 3;
    right: 30px;
    bottom: 92px;
    width: 96px;
    height: 88px;
    color: #cf3a6b;
    transform: rotate(-12deg);
}

.heart-record::before,
.heart-record::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 13px;
    width: 50px;
    height: 75px;
    border: 2px solid #ff7098;
    border-radius: 50px 50px 0 0;
    background: #ffd8e8;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
    box-shadow: inset 5px 0 rgba(255, 255, 255, .42);
}

.heart-record::after {
    left: -25px;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

.heart-record span {
    position: relative;
    z-index: 1;
    display: block;
    right: 15px;
    padding-top: 12px;
    color: #bd3368;
    font-size: 16px;
    line-height: 1.08;
}

.home-meadow,
.ground-scene,
.school-yard {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(72px + env(safe-area-inset-bottom));
    height: 88px;
    background:
        repeating-linear-gradient(165deg, transparent 0 7px, rgba(90, 177, 62, .26) 8px 11px),
        linear-gradient(to top, rgba(137, 201, 87, .48), transparent 68%);
    border-top: 2px solid rgba(121, 188, 85, .45);
}

.flower {
    position: absolute;
    bottom: 24px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 2px, transparent 3px 5px),
        #ffd342;
    box-shadow:
        8px 0 #ff8e9e,
        -8px 0 #ff8e9e,
        0 8px #ff8e9e,
        0 -8px #ff8e9e;
}

.flower::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    width: 2px;
    height: 28px;
    background: #5cab50;
}

.f1 {
    left: 30px;
}

.f2 {
    left: 55px;
    bottom: 34px;
}

.f3 {
    right: 40px;
}

.f4 {
    right: 70px;
    bottom: 39px;
}

.record-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 105px 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.big-character {
    position: relative;
    height: 112px;
}

.big-character .face {
    position: absolute;
    left: 12px;
    top: 7px;
    width: 82px;
    height: 78px;
    border: 2.8px solid #191714;
    border-radius: 48% 52% 50% 50%;
    background:
        radial-gradient(circle at 29% 22%, rgba(255, 255, 255, .28) 0 12%, transparent 13%),
        repeating-linear-gradient(155deg, rgba(255, 255, 255, .23) 0 2px, transparent 3px 8px),
        repeating-linear-gradient(25deg, rgba(54, 36, 26, .10) 0 1px, transparent 2px 6px),
        var(--mood, #f45d48);
    box-shadow:
        inset 8px 1px rgba(255, 255, 255, .12),
        0 3px 0 rgba(83, 57, 33, .09);
    filter: saturate(.94) contrast(.98);
}

.big-character::before,
.big-character::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 25px;
    bottom: 3px;
    width: 23px;
    height: 35px;
    border: 2px solid #191714;
    border-radius: 20px;
    background:
        repeating-linear-gradient(150deg, rgba(255, 255, 255, .18) 0 2px, transparent 3px 7px),
        var(--mood, #f45d48);
    transform: rotate(8deg);
}

.big-character::after {
    left: 55px;
    transform: rotate(-8deg);
}

.big-character .face::before,
.big-character .face::after {
    content: "";
    position: absolute;
}

.character-angry {
    --mood: #f45d48;
}

.character-sad {
    --mood: #74b9ec;
}

.character-happy {
    --mood: #ffd13d;
}

.character-peace {
    --mood: #82d560;
}

.character-worry {
    --mood: #b58bea;
}

.character-angry .face {
    clip-path: polygon(0 26%, 12% 0, 25% 23%, 40% 3%, 52% 25%, 70% 4%, 80% 26%, 100% 15%, 100% 100%, 0 100%);
}

.character-angry .face::before {
    left: 18px;
    top: 38px;
    width: 11px;
    height: 7px;
    border-top: 3px solid #181511;
    transform: rotate(26deg);
    box-shadow: 30px -1px 0 -1px transparent;
}

.character-angry .face::after {
    left: 29px;
    top: 52px;
    width: 27px;
    height: 16px;
    border: 3px solid #181511;
    border-radius: 4px 4px 13px 13px;
    background: #fff2ef;
}

.character-angry .face i {
    position: absolute;
    right: 17px;
    top: 38px;
    width: 11px;
    height: 7px;
    border-top: 3px solid #181511;
    transform: rotate(-26deg);
}

.character-sad .face::before,
.character-happy .face::before,
.character-peace .face::before,
.character-worry .face::before {
    left: 23px;
    top: 31px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #191714;
    box-shadow: 27px 0 #191714;
}

.character-sad .face::after,
.character-worry .face::after {
    left: 30px;
    top: 55px;
    width: 23px;
    height: 13px;
    border-top: 3px solid #191714;
    border-radius: 50%;
}

.character-happy .face::after,
.character-peace .face::after {
    left: 29px;
    top: 48px;
    width: 25px;
    height: 14px;
    border-bottom: 3px solid #191714;
    border-radius: 50%;
}

.speech-bubble {
    position: relative;
    min-height: 70px;
    padding: 15px 13px;
    border: 2px solid #aaa29a;
    border-radius: 50% 45% 52% 48% / 48% 55% 45% 52%;
    background: rgba(255, 255, 255, .68);
    color: #1b1916;
    font-size: 16px;
    line-height: 1.55;
    text-align: center;
}

/* .speech-bubble::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 28px;
    width: 19px;
    height: 17px;
    border-left: 2px solid #aaa29a;
    border-bottom: 2px solid #aaa29a;
    background: rgba(255, 255, 255, .68);
    transform: rotate(30deg);
} */

.mood-label {
    position: relative;
    z-index: 1;
    width: 74px;
    margin: 0 0 26px 32px;
    padding: 5px 0 4px;
    border: 1.5px solid rgba(93, 55, 29, .15);
    border-radius: 999px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    background: var(--label, #ef5d48);
    transform: rotate(-2deg);
}

.label-angry {
    --label: #ef5d48;
}

.label-sad {
    --label: #61aee8;
}

.label-happy {
    --label: #ffc837;
    color: #6b4f12;
}

.label-peace {
    --label: #7ac957;
    color: #355e22;
}

.label-worry {
    --label: #a879df;
}

.grid-note-label {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 0 8px 0;
    color: #34302a;
    font-size: 18px;
}

.grid-note {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 178px;
    padding: 22px 19px;
    border: 2px solid #e9b65c;
    border-radius: 6px;
    color: #33302b;
    font-size: 18px;
    line-height: 28px;
    background:
        linear-gradient(#ecd6aa 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, #ecd6aa 1px, transparent 1px) 0 0 / 28px 28px,
        rgba(255, 250, 238, .72);
}

.grid-note::placeholder {
    color: #5a5046;
}

.share-check {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin-top: 4px;
    color: #292520;
    font-size: 16px;
    line-height: 1.25;
}

.share-check span {
    min-width: 0;
    word-break: keep-all;
}

.share-checkbox-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.share-check input {
    width: 16px;
    height: 16px;
    accent-color: #f08a32;
}

.share-check em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 16px;
}

.corner-doodle {
    position: absolute;
    right: 22px;
    bottom: calc(110px + env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    border: 2px solid #ef5d48;
    border-radius: 50% 46% 48% 52%;
    opacity: .55;
}

.corner-doodle::before,
.corner-doodle::after {
    content: "";
    position: absolute;
    background: #ef5d48;
}

.corner-doodle::before {
    left: 13px;
    top: 18px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 19px 0 #ef5d48;
}

.corner-doodle::after {
    left: 18px;
    bottom: 12px;
    width: 17px;
    height: 8px;
    border-bottom: 2px solid #ef5d48;
    border-radius: 50%;
    background: transparent;
}

.filter-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    gap: 8px;
    overflow-x: auto;
    padding: 3px 1px 10px;
    margin-bottom: 14px;
}

.filter-tabs button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 8px;
    height: 75px;
    border: 1.5px solid #e8c692;
    border-radius: 8px;
    background: rgba(255, 250, 237, .7);
}

.filter-tabs .is-selected {
    border-color: #4bb0ef;
    color: #1585d2;
    background: rgba(226, 245, 255, .9);
}

.grid-icon {
    width: 25px;
    height: 25px;
    display: inline-block;
    background:
        linear-gradient(#299ee9 0 0) 0 0 / 9px 9px,
        linear-gradient(#299ee9 0 0) 16px 0 / 9px 9px,
        linear-gradient(#299ee9 0 0) 0 16px / 9px 9px,
        linear-gradient(#299ee9 0 0) 16px 16px / 9px 9px;
    background-repeat: no-repeat;
}

.grid-text {
    font-size: 16px;
}

.share-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
}

.share-note {
    position: relative;
    min-height: 110px;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    padding: 12px 12px;
    border: 1.8px solid #ebc993;
    border-radius: 10px;
    background: rgba(255, 250, 232, .75);
}

.note-contents {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.note-contents time {
    align-self: flex-end;
    color: #806f5c;
    font-size: 14px;
}

.note-contents strong {
    display: inline-block;
    padding: 2px 11px;
    border-radius: 999px;
    color: #fff;
    font-size: 14.5px;
    font-weight: 400;
    background: var(--tag, #ffc837);
}

.note-contents p {
    clear: both;
    margin: 4px 0 8px 0;
    color: #2a2723;
    font-size: 16px;
    line-height: 1.45;
}

.heart-count {
    display: block;
    color: #ef4b4b;
    text-align: right;
    font-size: 16px;
}

.note-happy {
    --tag: #ffc13a;
}

.note-sad {
    --tag: #4ba4e8;
}

.note-angry {
    --tag: #ef5d48;
}

.note-peace {
    --tag: #76bf58;
}

.note-worry {
    --tag: #9d74d7;
}

.mini-character {
    width: 52px;
    height: 52px;
    align-self: center;
    background: var(--mood);
}

.mini-character::before {
    left: 15px;
    top: 19px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #201d19;
    box-shadow: 16px 0 #201d19;
}

.mini-character::after {
    left: 18px;
    top: 34px;
    width: 17px;
    height: 8px;
    border-bottom: 2px solid #201d19;
    border-radius: 0 0 12px 12px;
}

.mini-character.happy {
    --mood: #ffd13d;
}

.mini-character.sad {
    --mood: #73b6ea;
}

.mini-character.angry {
    --mood: #f45d48;
}

.mini-character.peace {
    --mood: #82d560;
}

.mini-character.worry {
    --mood: #b58bea;
}

.mini-character.sad::after {
    top: 38px;
    border-top: 2px solid #201d19;
    border-bottom: 0;
}

.comment-form,
.message-form {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 38px;
    gap: 8px;
    align-items: center;
}

.comment-form {
    margin-top: 10px;
}

.comment-form input,
.message-form input,
.school-input {
    width: 100%;
    height: 38px;
    padding: 0 16px;
    border: 1.8px solid #d6b98a;
    border-radius: 999px;
    color: #302b24;
    font-size: 16px;
    background: rgba(255, 255, 255, .6);
}

.comment-form button,
.message-form button {
    width: 35px;
    height: 35px;
    border: 1.8px solid #d6b98a;
    border-radius: 50%;
    color: #856445;
    font-size: 22px;
    background: #fff9ed;
}

.comments {
    position: relative;
    z-index: 1;
    margin-top: 10px;
}

.comments p {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #efd8b4;
    border-radius: 9px;
    background: rgba(255, 249, 237, .75);
    font-size: 14px;
}

.comments p:not(:last-child) {
    margin-bottom: 6px;
}

.comments .mini-face {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.comment-text {
    min-width: 0;
    max-width: 100%;
    color: #2b2722;
    font-size: 16px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.comments em {
    white-space: nowrap;
    color: #8a7a67;
    font-style: normal;
    font-size: 14px;
}

.messenger-paper {
    border-color: #f1a4b9;
    background:
        radial-gradient(rgba(241, 128, 160, .18) 1px, transparent 1.4px) 8px 8px / 18px 18px,
        linear-gradient(102deg, #fff6f8, #fff1f5);
}

.heart-sprinkles {
    position: absolute;
    top: 45px;
    right: 22px;
    color: #ff6f9b;
    font-size: 21px;
    letter-spacing: 9px;
    transform: rotate(9deg);
}

.chat-area {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 17px;
    padding-top: 2px;
}

.chat-row {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 10px;
    align-items: start;
}

.chat-row p {
    position: relative;
    padding: 14px 16px;
    border: 1.8px solid #f5a6bf;
    border-radius: 45% 44% 47% 43% / 42% 48% 45% 50%;
    background: rgba(255, 255, 255, .55);
    color: #372730;
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
}

.chat-row time {
    grid-column: 1 / 2;
    color: #9d7c8c;
    font-size: 10px;
    text-align: center;
}

.chat-row.user {
    grid-template-columns: 1fr;
    justify-items: end;
}

.chat-row.user p {
    width: 74%;
    border-radius: 13px;
    background:
        repeating-linear-gradient(154deg, transparent 0 3px, rgba(255, 255, 255, .26) 4px 5px),
        #ffd3df;
    text-align: left;
}

.chat-row.user time {
    grid-column: 1;
    padding-right: 6px;
    text-align: right;
}

.chat-heart {
    position: relative;
    width: 55px;
    height: 52px;
}

.chat-heart::before,
.chat-heart::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 25px;
    width: 25px;
    height: 40px;
    border: 2px solid #ef789e;
    border-radius: 25px 25px 0 0;
    background: #ffb8d1;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.chat-heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

.chat-heart.mini {
    width: 34px;
    height: 32px;
    transform: scale(.72);
}

.message-form {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: calc(86px + env(safe-area-inset-bottom));
}

.message-form input {
    border-color: #ef9bb5;
}

.message-form button {
    color: #fff;
    border-color: #f06f98;
    background: #f06f98;
}

.login-paper,
.school-paper {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 38px;
}

.login-paper {
    justify-content: center;
    position: relative;

    min-height: 100dvh;
    box-sizing: border-box;
    padding-bottom: 122px;

    background-color: #dff3ff;
    overflow: visible;
}

.login-paper {
    overflow: visible;
    /* 변경 */
    position: relative;
}

.login-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    z-index: 0;
}

.brand-title {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #f26e4d;
    font-size: 3.5rem;
}

.brand-title span:nth-child(2) {
    color: #64bc66;
}

.brand-title span:nth-child(3) {
    color: #ea7ca2;
}

.brand-title strong {
    color: #4e95df;
    font-weight: 400;
}

.login-copy {
    position: relative;
    text-align: center;
    font-size: 20px;
    line-height: 1.65;
    color: #2b2722;
    z-index: 1;
}

.google-login {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 256px;
    height: 55px;
    gap: 12px;
    margin: 1.8rem auto 0;
    border: 1.8px solid #72b4e9;
    border-radius: 17px;
    background: rgba(255, 255, 255, .82);
    color: #191714;
    font-size: 19px;
    box-shadow: 0 3px 0 rgba(112, 181, 230, .35);
    z-index: 1;
}

.dev-login {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    margin-top: 10px;
    padding: 0 16px;
    border: 1.5px dashed #6ea9d8;
    border-radius: 999px;
    background: rgba(255, 255, 255, .62);
    color: #24699e;
    font-size: 15px;
}

.dev-login[hidden] {
    display: none;
}

.google-mark {
    color: #4385f4;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
}

.terms-copy {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    color: #8a7b68;
    font-size: 16px;
    line-height: 1.55;
    text-align: center;
}

.cloud {
    position: absolute;
    width: 86px;
    height: 35px;
    border: 2px solid #bde1fb;
    border-radius: 50px;
    background: rgba(255, 255, 255, .55);
}

.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    border: 2px solid #bde1fb;
    border-bottom: 0;
    border-radius: 50%;
    background: #fff9ed;
}

.cloud::before {
    left: 13px;
    top: -16px;
    width: 34px;
    height: 31px;
}

.cloud::after {
    right: 12px;
    top: -12px;
    width: 29px;
    height: 26px;
}

.cloud.left {
    transform: rotate(-10deg);
    top: 18%;
    left: 25px;
}

.cloud.right {
    transform: rotate(10deg);
    top: 15%;
    right: 25px;
}

.ground-scene {
    bottom: 0;
    height: 122px;
}

.rainbow-arch {
    position: absolute;
    right: 33px;
    bottom: 25px;
    width: 93px;
    height: 58px;
}

.school-title {
    position: relative;
    z-index: 1;
    margin-top: 68px;
    text-align: center;
    font-size: 28px;
    font-weight: 400;
}

.school-copy {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    text-align: center;
    font-size: 18px;
}

.school-input {
    position: relative;
    width: 95%;
    z-index: 1;
    height: 56px;
    margin-top: 25px;
    border-radius: 7px;
    border-color: #9ab3c3;
    text-align: center;
    font-size: 18px;
    justify-self: center;
}

.school-results {
    position: relative;
    z-index: 2;
    width: 95%;
    max-height: 260px;
    display: grid;
    gap: 8px;
    margin-top: 12px;
    overflow: auto;
}

.school-results button,
.empty-state,
.form-status {
    border: 1.5px solid #d6b98a;
    border-radius: 8px;
    background: rgba(255, 250, 238, .82);
    color: #2f2a24;
}

.school-results button {
    display: grid;
    gap: 3px;
    padding: 12px 12px;
    text-align: left;
}

.school-results button strong {
    font-size: 18px;
    font-weight: 400;
}

.school-results button span {
    color: #695d4e;
    font-size: 14px;
    line-height: 1.35;
}

.school-results .is-selected {
    border-color: #4bb0ef;
    background: rgba(226, 245, 255, .94);
}

.empty-state {
    position: relative;
    z-index: 1;
    padding: 13px;
    text-align: center;
    font-size: 16px;
}

.school-yard {
    bottom: 0;
    height: 124px;
}

.school-building {
    position: absolute;
    right: 51px;
    bottom: 20px;
    width: 82px;
    height: 62px;
    border: 2px solid #4e9f8b;
    background:
        linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, .6) 18px 21px, transparent 21px),
        #8edc9e;
}

.school-building::before {
    content: "";
    position: absolute;
    left: 17px;
    top: -31px;
    width: 46px;
    height: 46px;
    border: 2px solid #4e9f8b;
    background: #b7e8ba;
    transform: rotate(45deg);
}

.school-building::after {
    content: "⚑";
    position: absolute;
    right: 3px;
    top: -50px;
    color: #ef6e4b;
    font-size: 26px;
}

.school-confirm,
.crayon-button {
    position: relative;
    z-index: 2;
    display: block;
    width: 198px;
    height: 48px;
    border: 2px solid #efb23f;
    border-radius: 999px;
    background: #ffd671;
    color: #6d4b0e;
    font-size: 21px;
    box-shadow: 0 3px 0 rgba(225, 164, 46, .35);
}

.school-confirm {
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin: 0;
    transform: translateX(-50%) rotate(-1deg);
}

.school-confirm:disabled,
.save-entry:disabled {
    opacity: .55;
    cursor: default;
}

.save-entry {
    margin: 18px auto 0;
}

.form-status {
    position: relative;
    z-index: 1;
    min-height: 42px;
    margin-top: 16px;
    padding: 10px 12px;
    text-align: center;
    font-size: 16px;
}

.heart-count {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.my-paper {
    border-color: #afd28b;
}

.profile-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    padding: 12px;
    border: 1.8px solid #d7c498;
    border-radius: 12px;
    background: rgba(255, 250, 236, .78);
}

.profile-card h2 {
    font-size: 18px;
    font-weight: 400;
}

.profile-card p {
    margin-top: 3px;
    color: #665847;
    font-size: 14px;
}

.profile-card button {
    font-size: 23px;
}

.profile-flower {
    position: relative;
    width: 48px;
    height: 48px;
    display: block;
    border: 2px solid #4e8f42;
    border-radius: 50%;
    background: #ffd74b;
}

.profile-flower::before {
    content: "☺";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #5f6423;
    font-size: 26px;
}

.my-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.my-list button {
    width: 100%;
    height: 39px;
    display: grid;
    grid-template-columns: 26px 1fr auto auto;
    align-items: center;
    padding: 0 10px;
    border: 1.3px solid #dac69d;
    border-radius: 6px;
    background: rgba(255, 250, 238, .78);
    color: #24201c;
    text-align: left;
    font-size: 16px;
}

.my-list span {
    font-size: 18px;
    color: #5a554e;
}

.my-list em {
    margin-right: 10px;
    color: #8c7b66;
    font-style: normal;
    font-size: 14px;
}

.my-list b {
    color: #5a554e;
    font-weight: 400;
    font-size: 16px;
}

.mood-picker[hidden] {
    display: none;
}

.mood-picker {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: grid;
    place-items: end center;
    padding: 18px;
    background: rgba(42, 36, 28, .26);
}

.mood-picker-panel {
    position: relative;
    width: min(100%, 390px);
    padding: 22px 18px 20px;
    border: 2px solid #dfc79d;
    border-radius: 12px;
    background:
        linear-gradient(rgba(255, 255, 255, .45) 1px, transparent 1px) 0 14px / 100% 26px,
        #fff8eb;
    box-shadow: 0 12px 28px rgba(78, 57, 32, .16);
}

.mood-picker-panel h2 {
    margin-bottom: 15px;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
}

.mood-picker-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    color: #51463a;
    font-family: Arial, sans-serif;
    font-size: 27px;
    line-height: 1;
}

.mood-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.mood-picker-grid button {
    min-width: 0;
    display: grid;
    place-items: center;
    gap: 7px;
    padding: 11px 4px 9px;
    border: 1.5px solid #e8c692;
    border-radius: 8px;
    background: rgba(255, 250, 237, .82);
    color: #1d1a16;
    font-size: 15px;
}

.share-note[hidden],
.form-status[hidden],
.explore-comment-panel[hidden],
.info-modal[hidden],
.legacy-comment-form[hidden],
.comments[hidden] {
    display: none;
}

.school-stat-row span i {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 1.5px solid #201d19;
    border-radius: 50%;
    background: var(--stat-color, #ffc837);
}

.school-stat-row[data-stat-mood="angry"] {
    --stat-color: #ef5d48;
}

.school-stat-row[data-stat-mood="sad"] {
    --stat-color: #61aee8;
}

.school-stat-row[data-stat-mood="happy"] {
    --stat-color: #ffc837;
}

.school-stat-row[data-stat-mood="peace"] {
    --stat-color: #7ac957;
}

.school-stat-row[data-stat-mood="worry"] {
    --stat-color: #a879df;
}

.share-note {
    grid-template-columns: 58px minmax(0, 1fr);
}

.note-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.note-meta time {
    color: #806f5c;
    font-size: 13px;
}

.note-author {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6e604e;
    font-style: normal;
    font-size: 14px;
}

.note-actions {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 9px;
}

.note-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border: 1.4px solid #d7bd8e;
    border-radius: 999px;
    background: rgba(255, 252, 246, .86);
    color: #594c3d;
    font-family: "RainbowCrayon", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 14px;
    text-align: center;
}

.note-actions .is-liked {
    border-color: #ef8aaa;
    color: #cf3a6b;
    background: #ffe6ef;
}

.explore-comment-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1.8px solid #d7bd8e;
    border-radius: 10px;
    background: rgba(255, 250, 236, .86);
}

.comment-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.comment-panel-head strong {
    font-weight: 400;
    font-size: 17px;
}

.comment-panel-head button {
    color: #594c3d;
    font-size: 18px;
}

.entry-comment-list {
    display: grid;
    gap: 7px;
    max-height: 170px;
    overflow: auto;
}

.entry-comment-list p {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 7px;
    align-items: start;
    padding: 8px 9px;
    border: 1px solid #ead8b8;
    border-radius: 8px;
    background: rgba(255, 255, 255, .52);
}

.entry-comment-list b {
    color: #2f84c6;
    font-weight: 400;
    white-space: nowrap;
}

.entry-comment-list span {
    min-width: 0;
    word-break: break-word;
}

.entry-comment-list em {
    color: #8a7a67;
    font-style: normal;
    font-size: 12px;
    white-space: nowrap;
}

.entry-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 8px;
}

.entry-comment-form input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 13px;
    border: 1.4px solid #d6b98a;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
}

.entry-comment-form button {
    width: 36px;
    height: 36px;
    border: 1.4px solid #d6b98a;
    border-radius: 50%;
    color: #2f84c6;
    background: #fff9ed;
}

.my-entry-panel {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    padding: 12px;
    border: 1.5px solid #d7c498;
    border-radius: 8px;
    background: rgba(255, 250, 236, .78);
}

.my-entry-panel[hidden] {
    display: none;
}

.my-entry-panel h2 {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 400;
}

#my-entry-list {
    display: grid;
    gap: 8px;
    max-height: 230px;
    overflow: auto;
}

.my-entry-item {
    display: grid;
    gap: 4px;
    padding: 9px;
    border: 1px solid #e6d2ad;
    border-radius: 7px;
    background: rgba(255, 255, 255, .45);
}

.my-entry-list-modal {
    display: grid;
    gap: 8px;
    max-height: 360px;
    overflow: auto;
}

.my-entry-item div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.my-entry-item strong {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #2f84c6;
    font-weight: 400;
}

.my-entry-item em {
    padding: 2px 8px;
    border-radius: 999px;
    color: #6c5633;
    background: #ffe7b3;
    font-style: normal;
    font-size: 13px;
    white-space: nowrap;
}

.my-entry-item p {
    color: #302a22;
    font-size: 16px;
    line-height: 1.4;
    margin-top: 0 !important;
}

.my-entry-item span {
    color: #84725c;
    font-size: 13px;
}

.info-modal {
    position: fixed;
    z-index: 21;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(42, 36, 28, .28);
}

.info-modal-panel {
    position: relative;
    width: min(100%, 390px);
    padding: 22px 18px;
    border: 2px solid #dfc79d;
    border-radius: 12px;
    background: #fff8eb;
    box-shadow: 0 12px 28px rgba(78, 57, 32, .16);
}

.info-modal-panel h2 {
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 400;
}

.info-modal-panel p {
    margin-top: 8px;
    color: #41382e;
    font-size: 16px;
    line-height: 1.45;
}

.info-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #51463a;
    font-size: 20px;
}

.info-modal-close-icon {
    line-height: 2;
}

.loading-overlay[hidden] {
    display: none;
}

.loading-overlay {
    position: fixed;
    z-index: 30;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(255, 248, 232, .44);
    backdrop-filter: blur(1.5px);
}

.loading-overlay div {
    display: grid;
    place-items: center;
    gap: 8px;
    min-width: 150px;
    padding: 18px 20px;
    border: 1.6px solid #d7bd8e;
    border-radius: 12px;
    background: rgba(255, 250, 236, .94);
    box-shadow: 0 10px 24px rgba(78, 57, 32, .13);
}

.loading-overlay i {
    color: #2f94dc;
    font-size: 26px;
}

.loading-overlay p {
    color: #3a3128;
    font-size: 15px;
}

@media (min-width: 620px) {
    .app-shell {
        place-items: center;
        padding: 24px 14px;
    }

    .notebook {
        width: 430px;
        min-height: min(760px, calc(100vh - 48px));
        min-height: min(760px, calc(100dvh - 48px));
        filter: drop-shadow(0 18px 22px rgba(99, 76, 42, .14));
    }

    .paper {
        min-height: min(760px, calc(100vh - 48px));
        min-height: min(760px, calc(100dvh - 48px));
        border: 2px solid #dfc79d;
        border-radius: 14px;
    }

    .footer-nav {
        border-radius: 0 0 13px 13px;
    }
}

@media (max-width: 420px) {
    .rings {
        left: 20px;
        right: 20px;
    }

    .paper {
        padding-left: 18px;
        padding-right: 18px;
    }

    .mood-shortcuts {
        gap: 6px;
    }

    .explore-cta {
        width: 178px;
    }

    .heart-record {
        right: 18px;
    }
}