@charset "UTF-8";

/*
   공개 페이지 첫 화면용 critical CSS.

   목적:
   1) Bootstrap 전체 CSS를 렌더링 차단 경로에서 빼더라도 첫 화면의 뼈대가 깨지지 않게 한다.
   2) 게시글 상세/목록/메인/헤더에서 실제로 자주 쓰는 Bootstrap 유틸리티만 먼저 제공한다.
   3) 전체 Bootstrap은 preload + onload로 뒤에서 적용해 나머지 컴포넌트 호환성을 유지한다.

   주의:
   - 이 파일은 "완전한 Bootstrap 대체재"가 아니라 첫 페인트 보호용 최소 스타일이다.
   - 새 템플릿에서 첫 화면에 Bootstrap class를 추가하면 이 파일에도 필요한 최소 규칙을 함께 보강한다.
*/

:root{
    --ww-primary:#ffb3b3;
    --ww-danger:#dc3545;
    --ww-danger-hover:#bb2d3b;
    --ww-danger-border:#dc3545;
    --ww-secondary:#6c757d;
    --ww-secondary-border:#6c757d;
    --ww-text-muted:#5f6670;
    --ww-border:#dee2e6;
    --ww-card-border:rgba(0,0,0,.125);
    --ww-focus-ring:rgba(220,53,69,.25);
}

html{ -webkit-text-size-adjust:100%; }
body{ margin:0; }
a{ color:inherit; }
button,
input,
select{
    margin:0;
    font:inherit;
}

/* Bootstrap container/grid 중 공개 페이지 첫 화면에서 쓰는 최소 규칙 */
.container{
    width:100%;
    max-width:960px;
    margin-right:auto;
    margin-left:auto;
    padding-right:12px;
    padding-left:12px;
}
.row{
    display:flex;
    flex-wrap:wrap;
    margin-right:-12px;
    margin-left:-12px;
}
.row > *{
    width:100%;
    max-width:100%;
    padding-right:12px;
    padding-left:12px;
}
.col-12{ flex:0 0 auto; width:100%; }
.col-6{ flex:0 0 auto; width:50%; }

@media (min-width:576px){
    .col-sm-4{ flex:0 0 auto; width:33.333333%; }
}
@media (min-width:768px){
    .col-md-3{ flex:0 0 auto; width:25%; }
    .col-md-6{ flex:0 0 auto; width:50%; }
    .col-md-10{ flex:0 0 auto; width:83.333333%; }
    .d-md-flex{ display:flex !important; }
    .d-md-none{ display:none !important; }
}
@media (min-width:992px){
    .col-lg-3{ flex:0 0 auto; width:25%; }
    .col-lg-7{ flex:0 0 auto; width:58.333333%; }
}

.g-2{ --ww-gutter-x:.5rem; --ww-gutter-y:.5rem; }
.g-3{ --ww-gutter-x:1rem; --ww-gutter-y:1rem; }
.g-2,
.g-3{
    margin-right:calc(var(--ww-gutter-x) * -.5);
    margin-left:calc(var(--ww-gutter-x) * -.5);
    margin-top:calc(var(--ww-gutter-y) * -1);
}
.g-2 > *,
.g-3 > *{
    padding-right:calc(var(--ww-gutter-x) * .5);
    padding-left:calc(var(--ww-gutter-x) * .5);
    margin-top:var(--ww-gutter-y);
}

/* 첫 화면에서 쓰는 display/flex/spacing 유틸리티 */
.d-flex{ display:flex !important; }
.d-grid{ display:grid !important; }
.d-none{ display:none !important; }
.align-items-center{ align-items:center !important; }
.justify-content-center{ justify-content:center !important; }
.justify-content-between{ justify-content:space-between !important; }
.flex-wrap{ flex-wrap:wrap !important; }
.gap-2{ gap:.5rem !important; }
.py-3{ padding-top:1rem !important; padding-bottom:1rem !important; }
.p-0{ padding:0 !important; }
.p-3{ padding:1rem !important; }
.p-4{ padding:1.5rem !important; }
.px-3{ padding-right:1rem !important; padding-left:1rem !important; }
.px-4{ padding-right:1.5rem !important; padding-left:1.5rem !important; }
.py-2{ padding-top:.5rem !important; padding-bottom:.5rem !important; }
.mt-2{ margin-top:.5rem !important; }
.mt-4{ margin-top:1.5rem !important; }
.mt-5{ margin-top:3rem !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-2{ margin-bottom:.5rem !important; }
.mb-3{ margin-bottom:1rem !important; }
.mb-4{ margin-bottom:1.5rem !important; }
.me-2{ margin-right:.5rem !important; }
.ms-auto{ margin-left:auto !important; }
.my-4{ margin-top:1.5rem !important; margin-bottom:1.5rem !important; }
.pt-4{ padding-top:1.5rem !important; }
.border-0{ border:0 !important; }
.border-bottom{ border-bottom:1px solid var(--ww-border) !important; }
.border-top{ border-top:1px solid var(--ww-border) !important; }

@media (min-width:992px){
    .p-lg-5{ padding:3rem !important; }
}

@media (min-width:768px){
    .justify-content-md-center{ justify-content:center !important; }
}

/* 타이포그래피와 접근성 유틸리티 */
.h3{ font-size:1.75rem; }
.h4{ font-size:1.5rem; }
.h6{ font-size:1rem; }
.h3,
.h4,
.h6{
    margin-top:0;
    font-weight:500;
    line-height:1.2;
}
.display-6{
    font-size:calc(1.375rem + 1.5vw);
    font-weight:300;
    line-height:1.2;
}
.fw-bold{ font-weight:700 !important; }
.fw-semibold{ font-weight:600 !important; }
.small{ font-size:.875em; }
.text-center{ text-align:center !important; }
.text-white{ color:#fff !important; }
.text-muted{ color:var(--ww-text-muted) !important; }
.text-danger{ color:var(--ww-danger) !important; }
.text-decoration-none{ text-decoration:none !important; }
.visually-hidden{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

/* 카드/이미지/폼/버튼의 첫 화면 안정화 */
.card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow-wrap:break-word;
    background:#fff;
    border:1px solid var(--ww-card-border);
    border-radius:.375rem;
}
.card-body{ flex:1 1 auto; padding:1rem; }
.card-img-top{
    width:100%;
    border-top-left-radius:calc(.375rem - 1px);
    border-top-right-radius:calc(.375rem - 1px);
}
.h-100{ height:100% !important; }
.shadow-sm{ box-shadow:0 .125rem .25rem rgba(0,0,0,.075) !important; }
.rounded-3{ border-radius:.5rem !important; }
.rounded-4{ border-radius:1rem !important; }
.rounded-pill{ border-radius:50rem !important; }
.img-fluid{
    max-width:100%;
    height:auto;
}

.form-label{
    display:inline-block;
    margin-bottom:.5rem;
}
.form-control,
.form-select{
    display:block;
    width:100%;
    padding:.375rem .75rem;
    font-size:1rem;
    line-height:1.5;
    color:#212529;
    background:#fff;
    border:1px solid #ced4da;
    border-radius:.375rem;
}
.form-control:focus,
.form-select:focus{
    border-color:#f3a0a9;
    outline:0;
    box-shadow:0 0 0 .25rem var(--ww-focus-ring);
}
.input-group{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    width:100%;
}
.input-group > .form-control,
.input-group > .form-select{
    position:relative;
    flex:1 1 auto;
    width:1%;
    min-width:0;
}
.input-group-text{
    display:flex;
    align-items:center;
    padding:.375rem .75rem;
    color:#212529;
    background:#e9ecef;
    border:1px solid #ced4da;
    border-radius:.375rem;
}
.input-group > :not(:last-child){
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.input-group > :not(:first-child){
    margin-left:-1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}

.btn{
    display:inline-block;
    padding:.375rem .75rem;
    font-size:1rem;
    font-weight:400;
    line-height:1.5;
    text-align:center;
    text-decoration:none;
    vertical-align:middle;
    cursor:pointer;
    user-select:none;
    border:1px solid transparent;
    border-radius:.375rem;
    background:transparent;
}
.btn-lg{
    padding:.5rem 1rem;
    font-size:1.25rem;
    border-radius:.5rem;
}
.btn-danger{
    color:#fff;
    background:var(--ww-danger);
    border-color:var(--ww-danger-border);
}
.btn-danger:hover{
    color:#fff;
    background:var(--ww-danger-hover);
    border-color:#b02a37;
}
.btn-outline-danger{
    color:var(--ww-danger);
    border-color:var(--ww-danger-border);
}
.btn-outline-danger:hover{
    color:#fff;
    background:var(--ww-danger);
    border-color:var(--ww-danger-border);
}
.btn-outline-secondary{
    color:var(--ww-secondary);
    border-color:var(--ww-secondary-border);
}
.btn-outline-secondary:hover{
    color:#fff;
    background:var(--ww-secondary);
    border-color:var(--ww-secondary-border);
}
.w-100{ width:100% !important; }

/* 헤더의 햄버거 아이콘은 Bootstrap CSS가 늦게 도착해도 즉시 보이게 한다. */
.navbar-toggler-icon{
    display:inline-block;
    width:1.5em;
    height:1.5em;
    vertical-align:middle;
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}