:root{--clr-black: #1F2937;--clr-red: #E84646;--clr-red5: #FEF6F6;--clr-red10: #FCE4E4;--clr-blue: #264394;--clr-blue5: #F4F6FA;--clr-blue70: #677BB4;--clr-blue10: #DFE4F0;--clr-blue-hover: hsl(from var(--clr-blue) h calc(s*1.4) calc(l*.8) );--clr-darkgreen: #149089;--clr-darkgreen5: #F3F9F9;--clr-darkgreen10: #DDEFEE;--clr-link:#0083D4;--clr-gray1:#EDF2F7;--clr-gray2:#F9FAFB;--clr-black50: #8F949B;--clr-black20: #BCBFC3;--clr-black10: #E3E5E7;--sec-max-width: 100%;--article-max-width:100%;--sec-padding: 5.6em;--sec-m-side:1em;--round32: 32px;--round16: 16px;--round8: 8px;--icon:"Material Symbols Outlined";--ttl:"Zen Kaku Gothic New", sans-serif;--num:"Oswald", sans-serif;--anm-hover: all .3s ease-in-out;--header-height: 86px}@media only screen and (min-width:768px){:root{--sec-m-side: 2em;--sec-max-width: 1664px;--article-max-width: 1264px;--header-height: 121px}}@media only screen and (min-width:1024px){:root{--sec-padding: 10.4em}}@media only screen and (min-width:1024px){body:has(.sidebar.is-collapsed) .main-content{padding-left:calc(90px + 5%)}}@media only screen and (min-width:1024px){.main-content{padding-left:calc(300px + 5%);padding-right:5%}}.mock-mv{width:100%;max-width:50em;margin:0 auto 1.5em}.mock-mv img{display:block;width:100%;height:auto;border-radius:.5em}.mock-list-title{font-size:1.25rem;font-weight:700;max-width:40em;margin:1.5em auto 1em;font-family:var(--ttl);text-align:center}@media only screen and (min-width:1024px){.mock-list-title{font-size:1.5rem;max-width:33.333em}}.mock-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,294px),1fr));gap:12px;width:100%;max-width:50em;margin:0 auto 2em}.mock-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.5em 1em;border:1px solid var(--clr-black50);border-radius:50px;color:var(--text-main);font-weight:500;font-size:1rem;text-decoration:none;transition:var(--anm-hover);letter-spacing:.05em}.mock-nav-btn:hover{background:rgb(from var(--clr-link) r g b/.08)}@media only screen and (min-width:768px){.mock-nav-btn{padding:.75em 1.5em}}.mock-nav-open-label{background:var(--clr-link);color:#fff;font-size:.6875rem;font-weight:700;padding:2px 8px;border-radius:20px}.mock-list-container{display:flex;flex-direction:column;gap:1em;width:100%;max-width:50em;margin-inline:auto}@media only screen and (min-width:768px){.mock-list-container{gap:2em}}.mock-card{background:var(--bg-white);border:1px solid var(--border-color);border-radius:.5em;overflow:hidden;scroll-margin-top:1em}@media only screen and (min-width:768px){.mock-card{border-radius:1em}}.mock-card .mock-card-open-label{background:var(--clr-link);color:#fff;text-align:center;font-weight:700;font-size:.8125rem;padding:.35em 1em;margin:0}@media only screen and (min-width:768px){.mock-card .mock-card-open-label{font-size:.875rem}}.mock-card.is-open{border:3px solid var(--clr-link)}.mock-card.is-active{border:3px solid var(--true-icon)}.mock-card.is-active .mock-card-open-label{background:var(--true-icon)}.mock-card-body{display:flex;flex-direction:column;gap:.75em;padding:1.5em 1em}@media only screen and (min-width:768px){.mock-card-body{padding:2em}}.btn-start-large{padding:.75em 1em;background:var(--clr-red);color:#fff;border:none;cursor:pointer;font-size:1rem;font-weight:700;border-radius:50px;transition:var(--anm-hover);min-width:8em}.btn-start-large:hover{background:hsl(from var(--clr-red) calc(h*.8) s calc(l*.8))}.btn-start-large:disabled{cursor:auto;background:hsl(from var(--clr-blue) h calc(s*.6) calc(l*2))}.btn-start-large,.btn-primary{width:100%;min-width:10em}.mock-card-header{display:flex;gap:.5em;align-items:center;flex-wrap:wrap}.mock-badge{display:inline-block;font-size:.6875rem;font-weight:700;padding:2px 10px;border-radius:20px}.mock-badge.badge-active{background:var(--clr-blue10);color:var(--clr-blue)}.mock-badge.badge-closed{background:var(--clr-red5);color:var(--app-pink)}.mock-badge.badge-upcoming{background:var(--clr-blue5);color:var(--app-blu)}.mock-badge.badge-done{background:#f3f4f6;color:#666}.mock-badge.badge-free{background:var(--clr-darkgreen10);color:var(--clr-darkgreen)}.mock-badge.badge-paid{background:var(--clr-red5);color:var(--app-pink)}.mock-card-name{font-size:1rem;font-weight:700;margin:0;padding-bottom:.75em;border-bottom:1px solid var(--border-color)}@media only screen and (min-width:768px){.mock-card-name{font-size:1.5rem}}.mock-card-table{width:100%;border-collapse:separate;border-spacing:0 .5em}.mock-card-table th,.mock-card-table td{text-align:left;padding:.5em .75em;font-size:.8125rem;line-height:1.6}@media only screen and (min-width:768px){.mock-card-table th,.mock-card-table td{font-size:.9375rem}}.mock-card-table th{white-space:nowrap;font-weight:700;background-color:var(--clr-gray1);text-align:center}.mock-fee-note{display:block;font-size:.6875rem;color:var(--text-light)}.mock-card-desc{font-size:.875rem;line-height:1.8;margin:0}@media only screen and (min-width:768px){.mock-card-desc{font-size:1rem;font-weight:500}}.mock-card-note{font-size:.75rem;color:var(--app-pink);margin:0}.mock-card-actions{margin-top:.5em;text-align:center}.mock-card-actions button{max-width:18.75em}.mock-attention-modal{width:92%;max-width:43.75em;text-align:left}.mock-attention-modal h2{font-size:1.125rem;font-weight:700;line-height:1.6}.mock-attention-modal .list-note{max-height:50vh;overflow-y:auto}.mock-attention-modal .list-note li{position:relative;line-height:1.8;font-size:.875rem;color:var(--text-main);padding-left:1em}.mock-attention-modal .list-note li a{font-weight:700}.mock-attention-modal .list-note li:before{position:absolute;top:.75em;left:0;content:"";background-color:var(--text-light);width:6px;height:6px;border-radius:50%}.mock-attention-modal .modal-actions{margin-top:2em;display:flex;flex-direction:column;gap:1em}@media only screen and (min-width:768px){.mock-attention-modal .modal-actions{flex-direction:row}.mock-attention-modal .modal-actions .modal-btn{transition:var(--anm-hover)}.mock-attention-modal .modal-actions .modal-btn.is-primary:hover{background-color:hsl(from var(--clr-blue) h calc(s*1.4) calc(l*.8))}.mock-attention-modal .modal-actions .modal-btn.is-secondary:hover{background-color:#dedede}}.mock-attention-modal .mock-attention-bank-link{margin:1.25em 0 0;text-align:center;font-size:.8125rem}.mock-attention-modal .mock-attention-bank-link a{color:var(--clr-link);text-decoration:underline}.modal-content .modal-btn:hover{opacity:1}
