/* 11/07 대표: Aednoa 고르기 상자(컴퓨터 기본 모양 대신) — scripts/ui-select.js 짝 */
.us { position: relative; display: inline-block; vertical-align: middle; min-width: 0; }
.m-field .us, .pe-form .us { display: block; width: 100%; }
.us-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; }
.us-btn {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px 0 16px;
  border: 0; border-radius: 14px; background: rgba(255, 255, 255, .86); color: #272728; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(27, 58, 61, .14), 0 2px 6px rgba(27, 58, 61, .06), 0 1px 0 rgba(255, 255, 255, .9) inset;
  transition: box-shadow .2s, background .2s, transform .15s;
}
.us-btn:hover { background: #FAFAFA; box-shadow: 0 0 0 1.5px rgba(27, 58, 61, .32), 0 4px 12px rgba(27, 58, 61, .10); }
.us-btn:focus-visible, .us.is-open .us-btn { outline: none; background: #FAFAFA; box-shadow: 0 0 0 2px var(--color-forest, #1b3a3d), 0 0 0 6px rgba(88, 141, 147, .18), 0 6px 16px rgba(27, 58, 61, .12); }
.us-btn:disabled { opacity: .55; cursor: not-allowed; }

.us-val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-chev { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--color-forest, #1b3a3d); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  padding: 3px; box-sizing: content-box; border-radius: 8px; background: rgba(27, 58, 61, .07); transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .2s; }
.us.is-open .us-chev { transform: rotate(180deg); background: var(--color-forest, #1b3a3d); stroke: #eef1f1; }
.us-btn.is-pop { animation: us-pop .35s cubic-bezier(.16, 1, .3, 1); }
@keyframes us-pop { 40% { transform: scale(.97); } }

.us-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 80; min-width: max(100%, 160px); max-height: 300px; overflow: auto; margin: 0; padding: 6px; list-style: none;
  border-radius: 16px; background: rgba(245, 250, 250, .9); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(27, 58, 61, .10), 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 40px -8px rgba(27, 58, 61, .32);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top center;
  transition: opacity .18s ease, transform .28s cubic-bezier(.16, 1, .3, 1), visibility 0s .28s; scrollbar-width: thin;
}
.us.is-up .us-list { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; transform: translateY(6px) scale(.98); }
.us.is-open .us-list { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .28s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.us-list li {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px 0 14px; border-radius: 11px;
  font-size: 15px; font-weight: 500; color: #37373a; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.us.is-open .us-list li { animation: us-in .32s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--k, 0) * 22ms); }
@keyframes us-in { from { opacity: 0; transform: translateY(-4px); } }
.us-list li.is-act { background: rgba(27, 58, 61, .07); color: var(--color-forest, #1b3a3d); }
.us-list li[aria-selected="true"] { background: linear-gradient(180deg, #21484c, var(--color-forest, #1b3a3d)); color: #eef1f1; font-weight: 700; box-shadow: 0 6px 14px rgba(27, 58, 61, .25); }
.us-list li[aria-selected="true"]::after { content: ''; margin-left: auto; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.us-list li[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .us-list, .us-chev, .us.is-open .us-list li, .us-btn.is-pop { transition: none !important; animation: none !important; } }
.us-lift { z-index: 60 !important; }
.us-lift.us-pos { position: relative; }

/* 파일 올리기 상자(scripts/my-forms.js) — 마이페이지·거래방 등 .m-field 안 파일 칸 */
.mf-drop { --mf-forest: var(--color-forest, #1b3a3d); --mf-mute: var(--color-text-muted, #65656b); }
.mf-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 14px; border-radius: 18px; border: 1.5px dashed rgba(27, 58, 61,.28); background: rgba(231, 242, 243,.6);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; }
.mf-drop input[type=file] { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; cursor: pointer; padding: 0 !important; border: 0 !important; z-index: 2; }
.mf-drop:hover, .mf-drop.is-focus { border-color: var(--mf-forest); background: rgba(231, 242, 243,.95); }
.mf-drop.is-focus { box-shadow: 0 0 0 4px rgba(88, 141, 147,.18); }
.mf-drop.is-over { border-style: solid; border-color: var(--mf-forest); background: #d9eaec; transform: scale(1.01); box-shadow: 0 0 0 6px rgba(88, 141, 147,.2); }
.mf-drop__ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #FAFAFA; color: var(--mf-forest); box-shadow: 0 6px 14px rgba(27, 58, 61,.12); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.mf-drop__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mf-drop:hover .mf-drop__ic, .mf-drop.is-over .mf-drop__ic { transform: translateY(-3px); }
.mf-drop.is-over .mf-drop__ic svg { animation: mf-bob .8s ease-in-out infinite; }
@keyframes mf-bob { 50% { transform: translateY(-3px); } }
.mf-drop__t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mf-drop__t b { font-size: 14.5px; color: #272728; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-drop__t small { font-size: 12.5px; color: var(--mf-mute); }
.mf-drop__btn { flex: none; padding: 8px 15px; border-radius: 999px; background: linear-gradient(180deg, #21484c, var(--mf-forest)); color: #eef1f1; font-size: 13px; font-weight: 700; box-shadow: 0 6px 14px rgba(27, 58, 61,.25); }
.mf-drop.has-file { border-style: solid; border-color: rgba(27, 58, 61,.25); background: #FAFAFA; }
.mf-drop.has-file .mf-drop__ic { background: var(--mf-forest); color: #eef1f1; }

/* 좁은 막대 안(포트폴리오 찾기 위 막대)에서는 테두리 없이 글자만 */
.pf-sel .us { flex: 1; min-width: 0; }
.pf-sel .us-btn { min-height: 40px !important; padding: 0 4px 0 2px; background: none; box-shadow: none; font-size: 13.5px; font-weight: 700; }
.pf-sel .us-btn:hover { background: rgba(27, 58, 61,.05); box-shadow: none; }
.pf-sel .us-list { min-width: 180px; }

/* 제작자 찾기·의뢰 보기 필터 줄: 조금 촘촘하게 */
.cs-filters .us-btn, .rq-find .us-btn { padding: 0 8px 0 13px; gap: 6px; font-size: 14px; }
.cs-filters .us-chev, .rq-find .us-chev { width: 16px; height: 16px; }
.us-list li.us-group { min-height: 30px; padding: 8px 14px 2px; font-size: 11.5px; font-weight: 800; color: #7f7f86; letter-spacing: .03em; cursor: default; background: none !important; box-shadow: none; }
.us-list li.us-group:not(:first-child) { margin-top: 4px; border-top: 1px solid rgba(27, 58, 61,.08); }

/* 11/08 대표: Aednoa 달력(컴퓨터 기본 달력 대신) — scripts/ui-select.js 아래쪽 짝 */
.ud { position: relative; display: block; width: 100%; min-width: 0; --ud-f: var(--color-forest, #1b3a3d); --ud-t: #208787; }
.ud-btn { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px 0 14px;
  border: 0; border-radius: 14px; background: rgba(255,255,255,.86); color: #272728; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(27, 58, 61,.14), 0 2px 6px rgba(27, 58, 61,.06), 0 1px 0 rgba(255,255,255,.9) inset; transition: box-shadow .2s, background .2s, transform .15s; }
.ud-btn:hover { background: #FAFAFA; box-shadow: 0 0 0 1.5px rgba(27, 58, 61,.32), 0 4px 12px rgba(27, 58, 61,.10); }
.ud-btn:focus-visible, .ud.is-open .ud-btn { outline: none; background: #FAFAFA; box-shadow: 0 0 0 2px var(--ud-f), 0 0 0 6px rgba(88, 141, 147,.18), 0 6px 16px rgba(27, 58, 61,.12); }
.ud-btn[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--ud-t), 0 0 0 6px rgba(32, 135, 135,.14); }
.ud-btn:disabled { opacity: .55; cursor: not-allowed; }
.ud-btn.is-empty .ud-val { color: #8f8f95; font-weight: 500; }
.ud-ic { flex: none; width: 22px; height: 22px; padding: 4px; box-sizing: content-box; border-radius: 9px; background: rgba(27, 58, 61,.07); fill: none; stroke: var(--ud-f); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background .2s, stroke .2s, transform .3s cubic-bezier(.16,1,.3,1); }
.ud-ic__dot { fill: var(--ud-t); stroke: none; }
.ud.is-open .ud-ic { background: var(--ud-f); stroke: #eef1f1; transform: rotate(-8deg); }
.ud-val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ud-left { flex: none; padding: 4px 9px; border-radius: 999px; background: rgba(88, 141, 147,.14); color: var(--ud-f); font-size: 12px; font-weight: 700; }
.ud-btn.is-pop { animation: ud-pop .4s cubic-bezier(.16,1,.3,1); }
@keyframes ud-pop { 40% { transform: scale(.97); } }

.ud-pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 80; width: 320px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 14px 14px 12px;
  border-radius: 22px; background: rgba(245, 250, 250,.97); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(27, 58, 61,.10), 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 50px -12px rgba(27, 58, 61,.38);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top left;
  transition: opacity .18s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s .3s; }
.ud.is-up .ud-pop { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; transform: translateY(8px) scale(.97); }
.ud.is-right .ud-pop { left: auto; right: 0; transform-origin: top right; }
.ud.is-open .ud-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s; }
.ud-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.ud-title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #1e2a2b; }
.ud-nav { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(27, 58, 61,.06); color: var(--ud-f); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.ud-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ud-nav--next svg { transform: scaleX(-1); }
.ud-nav:hover:not(:disabled) { background: var(--ud-f); color: #eef1f1; }
.ud-nav:active:not(:disabled) { transform: scale(.92); }
.ud-nav:disabled { opacity: .3; cursor: default; }
.ud-wd, .ud-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ud-wd span { padding: 4px 0 6px; text-align: center; font-size: 12px; font-weight: 700; color: #7f7f86; }
.ud-wd span:first-child { color: var(--ud-t); } .ud-wd span:last-child { color: #4f7a9a; }
.ud-d { position: relative; aspect-ratio: 1; min-height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: #272728; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, transform .15s, box-shadow .2s; }
.ud-d.is-sun { color: var(--ud-t); } .ud-d.is-sat { color: #4f7a9a; }
.ud-d.is-out { opacity: .35; }
.ud-d:hover:not(:disabled):not(.is-sel) { background: rgba(27, 58, 61,.08); transform: scale(1.06); }
.ud-d:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ud-f); }
.ud-d.is-today:not(.is-sel) { box-shadow: inset 0 0 0 1.5px rgba(27, 58, 61,.45); }
.ud-d.is-today::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ud-t); }
.ud-d.is-sel { background: linear-gradient(180deg, #275257, var(--ud-f)); color: #eef1f1; font-weight: 800; box-shadow: 0 8px 16px -6px rgba(27, 58, 61,.5); }
.ud-d.is-sel::after { background: #eef1f1; }
.ud-d:disabled { color: #bfbfc2; opacity: 1; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.18); }
.ud-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed rgba(27, 58, 61,.15); }
.ud-quick:empty { display: none; }
.ud-chip { padding: 7px 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(27, 58, 61,.12); color: var(--ud-f); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.ud-chip:hover { background: var(--ud-f); color: #eef1f1; transform: translateY(-1px); }
.ud-chip--clear { margin-left: auto; color: #7f7f86; box-shadow: none; background: none; }
.ud-chip--clear:hover { background: rgba(32, 135, 135,.1); color: var(--ud-t); }
@media (prefers-reduced-motion: no-preference) {
  .ud.is-open .ud-d { animation: ud-in .35s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--k, 0) * 6ms); }
  .ud-grid.is-l .ud-d { animation: ud-l .32s cubic-bezier(.16,1,.3,1) both !important; }
  .ud-grid.is-r .ud-d { animation: ud-r .32s cubic-bezier(.16,1,.3,1) both !important; }
  .ud-d.is-sel { animation: ud-sel .45s cubic-bezier(.3,1.5,.5,1) both !important; }
}
@keyframes ud-in { from { opacity: 0; transform: translateY(-4px) scale(.9); } }
@keyframes ud-l { from { opacity: 0; transform: translateX(18px); } }
@keyframes ud-r { from { opacity: 0; transform: translateX(-18px); } }
@keyframes ud-sel { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ud-pop, .ud-btn.is-pop, .ud-ic { transition: none !important; animation: none !important; } }
body:has(.ud.is-open) .rq-dock { opacity: 0; pointer-events: none; }