/*! Bulma 1.0-compatible subset — curated locally (covers the classes used in the sample page). Full official file: https://bulma.io/ */
/* 2026-08-31, "요즘 트랜드에 맞는 디자인으로, 세련되게" 요청 - 이 사이트 전체가 moayo 하나뿐이라
   (architecture.md) 여기 기본값을 손봐도 다른 화면 톤이 갈릴 걱정이 없다. 색은 CLAUDE.md
   그레이스케일 원칙을 그대로 지키되(삭제류만 빨강 예외), 배경을 순백 대신 은은한 오프화이트로,
   텍스트를 더 짙은 무채색으로, 그림자/모서리를 부드럽게 다듬어 카드가 배경 위에 살짝 떠 보이는
   느낌을 준다.*/
*,*::before,*::after{box-sizing:border-box}
/* 기본 글자 크기 16px -> 18px(2026-09-04 "전체적으로 글자가 작다, 지금의 +2px" 요청) - 화면의
   글자 크기는 대부분 rem으로 잡혀 있어서 이 한 값만 올리면 전체가 같은 비율로 커진다.
   여백/컨트롤 높이는 px 토큰(--gutter, --control-h 등)이라 그대로 유지된다. */
html{background:#f6f6f7;font-size:18px}
/* 한글 본문 폰트(2026-09-04) - 원래 라틴 폰트만 나열돼 있어서 윈도우/안드로이드에서는 맑은고딕
   등 기본 산세리프로 떨어졌다(자간/굵기가 어긋나 보이는 가장 큰 원인). layout.php가 Pretendard를
   웹폰트로 불러오고, 못 불러온 환경을 위해 OS별 한글 폰트를 뒤에 그대로 남겨둔다. */
body{margin:0;font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:1rem;color:#3f3f46;line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all}
p{margin:0 0 1rem}
a{color:#18181b;text-decoration:none;cursor:pointer}
a:hover{text-decoration:none}
img{max-width:100%}

/* layout */
.container{width:100%;margin:0 auto;padding:0 1.5rem}
@media (min-width:1024px){.container{max-width:960px}}
@media (min-width:1216px){.container{max-width:1152px}}
.section{padding:3rem 1.5rem}
main.section{padding:10px}
main.section>.container{padding-left:0;padding-right:0}
.has-text-centered{text-align:center!important}
.has-text-right{text-align:right!important}
.has-text-grey{color:#71717a!important}
.has-text-grey-light{color:#a1a1aa!important}
.has-text-danger{color:#f14668!important}

/* typography */
.title{font-weight:800;font-size:2rem;letter-spacing:-.02em;color:#18181b;margin-bottom:.5rem}
.title.is-1{font-size:3rem}
.title.is-4{font-size:1.5rem}
.title.is-5{font-size:1.25rem}
.title.is-6{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.subtitle{font-weight:400;font-size:1.25rem;color:#71717a;margin-bottom:1.5rem}
.is-size-5{font-size:1.25rem}
.is-size-7{font-size:.75rem!important}
.content p{margin-bottom:1em}
/* 게시판 글/콘텐츠 페이지/팝업 본문(TOAST UI Editor로 작성된 리치 HTML)의 타이포그래피 - 여기 숫자를
   바꾸면 반드시 public/vendor/toast-ui-editor/rich-content-editor.css의 같은 값도 같이 고칠 것
   (편집 화면과 실제 게시 화면의 글자 크기/자간/행간이 어긋나지 않도록 두 파일이 짝을 이룸, App\Utils\RichEditor 참고) */
.content h1{font-size:2rem;font-weight:700;line-height:1.3;margin:1.5em 0 .5em;color:#363636}
.content h2{font-size:1.75rem;font-weight:700;line-height:1.3;margin:1.5em 0 .5em;color:#363636}
.content h3{font-size:1.5rem;font-weight:700;line-height:1.3;margin:1.5em 0 .5em;color:#363636}
.content h4{font-size:1.25rem;font-weight:700;line-height:1.3;margin:1.5em 0 .5em;color:#363636}
.content h5{font-size:1.125rem;font-weight:700;line-height:1.3;margin:1.5em 0 .5em;color:#363636}
.content h6{font-size:1rem;font-weight:700;line-height:1.3;margin:1.5em 0 .5em;color:#363636}
.content h1:first-child,.content h2:first-child,.content h3:first-child,.content h4:first-child,.content h5:first-child,.content h6:first-child{margin-top:0}
.content ul,.content ol{margin:0 0 1em 1.5em}
.content li+li{margin-top:.25em}
.content blockquote{margin:0 0 1em;padding:1em 1.25em;background:#f5f5f5;border-left:5px solid #dbdbdb;color:#4a4a4a}
.content table{width:100%;margin-bottom:1.5em;border-collapse:collapse}
.content table th,.content table td{border:1px solid #dbdbdb;padding:.5em .75em;text-align:left}
.content table th{background:#fafafa;font-weight:700}
.content a{color:#363636;text-decoration:underline}
.content a:hover{color:#000}
.content strong,.content b{font-weight:700}
.content code{background:#f5f5f5;padding:.125em .375em;border-radius:4px;font-size:.9em}
.content pre{background:#f5f5f5;padding:1em;border-radius:6px;overflow-x:auto;margin-bottom:1em}
.content pre code{background:none;padding:0}
.content img{max-width:100%;height:auto}
.content hr{margin:1.5em 0;border:none;border-top:1px solid #dbdbdb}

/* columns/grid */
.columns{display:flex;flex-wrap:wrap;margin:-.75rem}
.columns.is-multiline{flex-wrap:wrap}
.columns.is-centered{justify-content:center}
.column{flex:1;padding:.75rem}
.column.is-12{flex:none;width:100%}
@media (min-width:769px){
  .column.is-3{flex:none;width:25%}
  .column.is-4{flex:none;width:33.3333%}
  .column.is-5{flex:none;width:41.6667%}
  .column.is-6{flex:none;width:50%}
  .column.is-8{flex:none;width:66.6667%}
}

/* buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.55em 1.1em;font-size:1rem;font-weight:600;border:1px solid #e4e4e7;border-radius:10px;background:#fff;color:#18181b;cursor:pointer;text-decoration:none;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s,background-color .15s,border-color .15s}
.button.is-small{font-size:.75rem;padding:.4em .85em;border-radius:8px}
.button.is-medium{font-size:1.25rem;padding:.6em 1.25em}
.button.is-large{font-size:1.5rem;padding:.75em 1.5em}
.button:hover{border-color:#d4d4d8;box-shadow:0 2px 8px rgba(24,24,27,.08);transform:translateY(-1px);text-decoration:none}
.button:active{transform:translateY(0)}
.button.is-primary{background:#18181b;border-color:transparent;color:#fff}
.button.is-primary:hover{background:#000;box-shadow:0 4px 14px rgba(24,24,27,.28)}
/* 기본(주요) 버튼은 진한 무채색이다(2026-09-04) - 잠시 포인트 색으로 칠했다가 "기본 버튼색은
   포인트색 말고 진한 회색으로" 요청을 받아 되돌렸다. 포인트 색은 버튼이 아니라 "지금 여기"를
   알리는 선택 표시(하단바 선택 칸, 사이드바 현재 메뉴, 선택된 태그/정렬 탭)에만 쓴다. */
.button.is-link{background:#18181b;border-color:transparent;color:#fff}
.button.is-link:hover{background:#000;box-shadow:0 4px 14px rgba(24,24,27,.28)}
.button.is-light{background:#f4f4f5;border-color:transparent;color:#18181b}
.button.is-light:hover{background:#e4e4e7;box-shadow:none;transform:none}
.button.is-danger{background:#e11d48;border-color:transparent;color:#fff}
.button.is-danger:hover{background:#be123c;box-shadow:0 4px 14px rgba(225,29,72,.28)}
.button.is-text{background:transparent;border-color:transparent;color:#71717a;font-weight:500}
.button.is-text:hover{text-decoration:underline;box-shadow:none;transform:none}
.button.is-outlined{background:transparent;color:#18181b;border-color:#18181b}
.button.is-outlined:hover{background:#18181b;color:#fff}
.button.is-rounded{border-radius:9999px}
.button.is-fullwidth{display:flex;width:100%}
.buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.buttons.is-centered{justify-content:center}
.buttons form{margin:0}

/* tabs (2026-08-18, moayo 정렬 탭에서 처음 씀) */
.tabs{-webkit-overflow-scrolling:touch;align-items:stretch;display:flex;font-size:1rem;justify-content:space-between;overflow-x:auto}
.tabs ul{align-items:center;border-bottom:1px solid #ececef;display:flex;flex-grow:1;flex-shrink:0;list-style:none;margin:0;padding:0}
.tabs li{display:block}
.tabs a{align-items:center;border-bottom:2px solid transparent;margin-bottom:-1px;color:#a1a1aa;font-weight:600;display:flex;padding:.6em 1em;text-decoration:none;transition:color .15s,border-color .15s}
.tabs a:hover{border-bottom-color:#d4d4d8;color:#18181b}
.tabs li.is-active a{border-bottom-color:#18181b;color:#18181b;font-weight:700}

/* tags (2026-08-18, moayo 카테고리/해시태그 칩에서 처음 씀) */
.tags{align-items:center;display:flex;flex-wrap:wrap}
.tags .tag:not(:last-child){margin-right:.5rem}
.tags .tag{margin-bottom:.5rem}
.tag:not(body){align-items:center;background:#f4f4f5;border-radius:999px;color:#52525b;display:inline-flex;font-size:.75rem;font-weight:600;height:2em;justify-content:center;padding:0 .9em;white-space:nowrap;text-decoration:none;transition:background-color .15s}
a.tag:hover{background:#e4e4e7}
.tag.is-link{background:#18181b;color:#fff}

/* level (2026-08-18, moayo 목록 상단 툴바/상세 통계줄에서 처음 씀) */
.level{align-items:center;display:flex;justify-content:space-between}
.level-left,.level-right{align-items:center;display:flex}
.level-item{align-items:center;display:flex;justify-content:center}
.level-left .level-item:not(:last-child),.level-right .level-item:not(:last-child){margin-right:.75rem}
@media (max-width:768px){.level{display:block}.level-left,.level-right{display:flex}.level-left:not(:last-child){margin-bottom:.75rem}}

/* breadcrumb (2026-08-18, moayo 상세 페이지 상단 경로 표시에서 처음 씀) */
.breadcrumb ul{align-items:center;display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.breadcrumb li{align-items:center;display:flex}
.breadcrumb li:not(:last-child)::after{color:#b5b5b5;content:"/";margin:0 .5rem}
.breadcrumb a{color:#363636;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb li.is-active a{color:#7a7a7a;cursor:default;pointer-events:none}

/* media (2026-08-18, moayo 상세 페이지 파비콘+제목 배치에서 처음 씀) */
.media{align-items:flex-start;display:flex}
.media-left{flex:0 0 auto;margin-right:1rem}
.media-content{flex:1 1 auto;min-width:0}

/* navbar */
.navbar{position:relative;display:flex;align-items:stretch;min-height:3.5rem;background:#fff}
.navbar.is-fixed-top{position:sticky;top:0;left:0;right:0;z-index:30}
.navbar.has-shadow{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.navbar>.container{display:flex;align-items:stretch;width:100%}
.navbar-brand{display:flex;flex-shrink:0;align-items:center}
.navbar-item{display:flex;align-items:center;padding:.5rem .75rem;color:#4a4a4a;text-decoration:none}
.navbar-item:hover{background:#e4e4e4;text-decoration:none}
.navbar-item.has-text-weight-bold{font-weight:700}
.navbar-start{display:flex;align-items:center}
.navbar-menu{display:flex;flex-grow:1;flex-shrink:0}
.navbar-end{display:flex;align-items:center;margin-left:auto}
.navbar-burger{display:none;cursor:pointer;width:3.5rem;height:3.5rem;position:relative;-webkit-appearance:none;appearance:none;background:none;border:none;margin-left:auto}
.navbar-burger span{position:absolute;left:calc(50% - 8px);width:16px;height:2px;background:currentColor;transition:all .2s}
.navbar-burger span:nth-child(1){top:calc(50% - 6px)}
.navbar-burger span:nth-child(2){top:calc(50% - 1px)}
.navbar-burger span:nth-child(3){top:calc(50% + 4px)}
.navbar-burger.is-active span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.navbar-burger.is-active span:nth-child(2){opacity:0}
.navbar-burger.is-active span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.navbar-item.has-dropdown{position:relative;padding:0}
.navbar-link{display:flex;align-items:center;padding:.5rem .75rem;color:#4a4a4a;text-decoration:none;cursor:pointer}
.navbar-link:hover{background:#e4e4e4}
.navbar-link .icon+span{margin-left:.4rem}
.navbar-dropdown{display:none;position:absolute;top:100%;left:0;min-width:180px;background:#fff;border-radius:0 0 6px 6px;box-shadow:0 8px 20px rgba(10,10,10,.12);padding:.5rem 0;z-index:20}
.navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown,
.navbar-item.has-dropdown.is-hoverable:focus-within .navbar-dropdown{display:block}
.navbar-item.has-dropdown.is-active .navbar-dropdown{display:block}
.navbar-dropdown.is-right{left:auto;right:0;border-radius:6px 0 6px 6px}
.navbar-dropdown .navbar-item{white-space:nowrap}
.navbar-item-button{background:none;border:none;padding:0;margin:0;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.icon{display:inline-flex;align-items:center;justify-content:center;height:1.5em;width:1.5em}
.nav-backdrop{display:none;position:fixed;inset:0;z-index:25;background:rgba(10,10,10,.4)}
.nav-backdrop.is-active{display:block}
@media (max-width:1023px){
  .navbar>.container{display:block}
  .navbar-burger{display:flex;align-items:center;justify-content:center}
  .navbar-menu{display:none}
  .navbar-menu.is-active{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:66.6667%;
    z-index:50;
    background:#fff;
    padding:1.5rem;
    overflow-y:auto;
    box-shadow:-4px 0 20px rgba(0,0,0,.15);
  }
  .navbar-start,.navbar-end{flex-direction:column;align-items:stretch;margin-left:0}
  .navbar-menu.is-active .navbar-item{padding:.75rem 0;font-size:1.125rem}
  /* 모바일 드로어는 터치라 hover가 안 통하므로, 드롭다운을 항상 펼쳐진 상태의 들여쓰기 목록으로 보여준다.
     .navbar-item.has-dropdown가 기본 .navbar-item의 display:flex(가로 방향)를 물려받아서
     navbar-link/navbar-dropdown이 옆으로 나란히 붙던 문제라, block으로 바꿔서 세로로 쌓이게 한다. */
  .navbar-menu.is-active .navbar-item.has-dropdown{display:block;padding:.75rem 0 0}
  .navbar-menu.is-active .navbar-link{padding:0 0 .5rem}
  .navbar-menu.is-active .navbar-dropdown{display:block!important;position:static;box-shadow:none;padding:0;min-width:0}
  .navbar-menu.is-active .navbar-dropdown .navbar-item{padding-top:.5rem;padding-bottom:.5rem;font-size:1rem}
}
body.nav-open{overflow:hidden}

/* hero */
.hero{padding:0}
.hero.is-primary{background:linear-gradient(135deg,#00d1b2 0%,#00947e 100%);color:#fff}
.hero-body{padding:5rem 1.5rem}
.hero.is-primary .title,.hero.is-primary .subtitle{color:#fff}

/* box / card */
.box{background:#fff;border-radius:16px;border:1px solid #f0f0f2;box-shadow:0 1px 2px rgba(24,24,27,.04),0 8px 24px -8px rgba(24,24,27,.08);padding:1.75rem;height:100%}
.card{background:#fff;border-radius:16px;border:1px solid #f0f0f2;box-shadow:0 1px 2px rgba(24,24,27,.04),0 8px 24px -8px rgba(24,24,27,.08);overflow:hidden}
.card-content{padding:1.75rem}

/* form */
.field{margin-bottom:.75rem}
.label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.5rem;color:#18181b}
.control{position:relative}
.input,.textarea{display:block;width:100%;padding:.65em .85em;font-size:1rem;color:#18181b;border:1px solid #e4e4e7;border-radius:10px;background:#fafafa;transition:border-color .15s,box-shadow .15s,background-color .15s}
.input:focus,.textarea:focus{outline:0;border-color:#a1a1aa;background:#fff;box-shadow:0 0 0 3px rgba(24,24,27,.06)}
.input.is-danger,.textarea.is-danger{border-color:#e11d48}
.textarea{min-height:8em;resize:vertical}
.help{display:block;font-size:.75rem;margin-top:.25rem;color:#71717a}
.help.is-danger{color:#e11d48}
.select{display:inline-block;max-width:100%;position:relative;vertical-align:top}
.select select{display:block;width:100%;padding:.65em 2.5em .65em .85em;font-size:1rem;color:#18181b;border:1px solid #e4e4e7;border-radius:10px;background:#fafafa;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.select select::-ms-expand{display:none}
.select select:focus{outline:0;border-color:#a1a1aa;box-shadow:0 0 0 3px rgba(24,24,27,.06)}
.select:not(.is-multiple)::after{content:"";display:block;position:absolute;top:50%;right:1em;width:.5em;height:.5em;margin-top:-.375em;border:1px solid #71717a;border-right:0;border-top:0;transform:rotate(-45deg);pointer-events:none;z-index:4}
.select.is-fullwidth,.select.is-fullwidth select{width:100%}
.checkbox{cursor:pointer}

/* notification */
.notification{padding:1.25rem 1.5rem;border-radius:6px;margin-bottom:1rem;position:relative}
.notification.is-success{background:#effaf5;color:#257953}
.notification.is-warning{background:#fffaeb;color:#946c00}
.notification.is-danger{background:#feecf0;color:#cc0f35}

/* table */
.table{width:100%;border-collapse:collapse;background:#fff;color:#363636}
.table td,.table th{border-bottom:1px solid #dbdbdb;padding:.5em .75em;vertical-align:middle;text-align:left}
.table th{color:#363636}
.table.is-fullwidth{width:100%}
.table-container{overflow-x:auto}

/* pagination */
.pagination{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem;font-size:1rem}
.pagination.is-centered{justify-content:center}
.pagination-list{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:.25rem}
.pagination-link,.pagination-previous,.pagination-next,.pagination-first,.pagination-last{display:inline-flex;align-items:center;justify-content:center;min-width:2.25em;height:2.25em;padding:.25em .5em;border:1px solid #e4e4e7;border-radius:8px;color:#3f3f46;font-weight:600;text-decoration:none;transition:border-color .15s,background-color .15s}
.pagination-link:hover,.pagination-previous:hover,.pagination-next:hover,.pagination-first:hover,.pagination-last:hover{border-color:#d4d4d8;background:#fafafa;text-decoration:none}
.pagination-link.is-current{background:#18181b;border-color:#18181b;color:#fff}
.pagination-previous.is-disabled,.pagination-next.is-disabled,.pagination-first.is-disabled,.pagination-last.is-disabled{color:#d4d4d8;cursor:default}
.pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.25em;height:2.25em;color:#d4d4d8}

/* modal */
.modal{display:none;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;padding:1rem}
.modal.is-active{display:flex}
.modal-background{position:absolute;inset:0;background:rgba(10,10,10,.6)}
.modal-card{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - 40px);width:100%;max-width:480px;background:#fff;border-radius:8px;overflow:hidden}
.modal-card-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid #dbdbdb}
.modal-card-title{font-weight:700;font-size:1.25rem;margin:0}
.modal-card-body{padding:1.5rem;overflow-y:auto}
.modal-card-foot{display:flex;align-items:center;padding:1rem 1.5rem;border-top:1px solid #dbdbdb}
.delete{-webkit-appearance:none;appearance:none;background:rgba(10,10,10,.2);border:none;border-radius:9999px;cursor:pointer;width:1.25rem;height:1.25rem;position:relative}
.delete::before,.delete::after{content:"";position:absolute;left:50%;top:50%;width:65%;height:1px;background:#fff;transform:translate(-50%,-50%) rotate(45deg)}
.delete::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* responsive helpers */
@media (max-width:768px){.is-hidden-mobile{display:none!important}}

/* utility spacing */
.mb-0{margin-bottom:0!important}
.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:.75rem!important}
.mb-4{margin-bottom:1rem!important}
.mb-5{margin-bottom:1.5rem!important}
.mb-6{margin-bottom:3rem!important}
.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:.75rem!important}
.mt-4{margin-top:1rem!important}
.mt-5{margin-top:1.5rem!important}
.mt-6{margin-top:3rem!important}
.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}
.mr-2{margin-right:.5rem!important}
.mr-4{margin-right:1rem!important}
.pt-4{padding-top:1rem!important}
.pb-3{padding-bottom:.75rem!important}
.pb-4{padding-bottom:1rem!important}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.py-6{padding-top:3rem!important;padding-bottom:3rem!important}
.is-flex{display:flex!important}
.is-align-items-center{align-items:center!important}
.is-justify-content-center{justify-content:center!important}
.is-justify-content-space-between{justify-content:space-between!important}

footer.footer{background:#363636;color:rgba(255,255,255,.75);padding:2rem 1.5rem;text-align:center}